Fix UI render error inside repo error

webui/src/lib/api/index.js

@@ -80,44 +80,44 @@ const apiRequest = async (uri, requestData = {}, additionalHeaders = {}) => {
 export class NotFoundError extends Error {
     constructor(message) {
         super(message)
-        this.name = "NotFoundError"
+        this.name = this.constructor.name;
     }
 }
 
 export class BadRequestError extends Error {
     constructor(message) {
         super(message)
-        this.name = "BadRequestError"
+        this.name = this.constructor.name;
     }
 }
 
 export class AuthorizationError extends Error {
     constructor(message) {
         super(message);
-        this.name = "AuthorizationError"
+        this.name = this.constructor.name;
     }
 }
 
 export class AuthenticationError extends Error {
     constructor(message, status) {
         super(message);
         this.status = status;
-        this.name = "AuthenticationError"
+        this.name = this.constructor.name;
     }
 }
 
 export class MergeError extends Error {
     constructor(message, payload) {
         super(message);
-        this.name = "MergeError";
+        this.name = this.constructor.name;
         this.payload = payload;
     }
 }
 
 export class RepositoryDeletionError extends Error {
     constructor(message, repoId) {
         super(message);
-        this.name = "RepositoryDeletionError";
+        this.name = this.constructor.name;
         this.repoId = repoId;
     }
 }

webui/src/lib/components/controls.jsx

@@ -86,7 +86,7 @@ export const Error = ({error, onDismiss = null, className = null}) => {
     return (
         <Alert className={className} variant="danger">{content}</Alert>
     );
-}
+};
 
 export const FormattedDate = ({ dateValue, format = "MM/DD/YYYY HH:mm:ss" }) => {
     if (typeof dateValue === 'number') {
@@ -402,4 +402,4 @@ export const ExitConfirmationDialog = ({dialogAlert, dialogDescription, onExit,
             </DialogActions>
         </Dialog>
     )
-}
+};

webui/src/pages/repositories/repository/error.jsx

@@ -6,22 +6,23 @@ import {TrashIcon} from "@primer/octicons-react";
 import React from "react";
 import {Error} from "../../../lib/components/controls";
 
-const RepositoryInDeletionContainer = (repoId) => {
+const RepositoryInDeletionContainer = ({repoId}) => {
     const router = useRouter();
     return (
         <Alert variant="warning">
             <Alert.Heading>Repository is undergoing deletion</Alert.Heading>
             This may take several seconds. You can retry the deletion process by pressing the delete button again.
             <hr />
             <div className="d-flex justify-content-end">
-                <Button variant="danger" className="mt-3" onClick={ async () => {
-                    try {
-                        await repositories.delete(repoId);
-                    } catch {
-                        // continue regardless of error
-                    }
-                    return router.push('/repositories')
-                }}>
+                <Button variant="danger" className="mt-3" onClick={
+                    async () => {
+                        try {
+                            await repositories.delete(repoId);
+                        } catch {
+                            // continue regardless of error
+                        }
+                        return router.push('/repositories')
+                    }}>
                     <TrashIcon/> Delete Repository
                 </Button>
             </div>
@@ -31,7 +32,7 @@ const RepositoryInDeletionContainer = (repoId) => {
 
 export const RepoError = ({error}) => {
     if (error instanceof RepositoryDeletionError) {
-        return RepositoryInDeletionContainer(error.repoId);
+        return <RepositoryInDeletionContainer repoId={error.repoId}/>;
     }
-    return Error(error)
-}
+    return <Error error={error}/>;
+};

webui/src/pages/repositories/repository/objects.jsx

@@ -338,7 +338,7 @@ const ObjectsBrowser = ({config, configError}) => {
     const refresh = () => setRefreshToken(!refreshToken);
 
     if (loading) return <Loading/>;
-    if (!!error || configError) return <RepoError error={error || configError}/>;
+    if (error || configError) return <RepoError error={error || configError}/>;
 
     return (
         <>