From 2689783ced29f1061fe1ff9b818f591e6d92a54e Mon Sep 17 00:00:00 2001
From: Barak Amar <barak.amar@treeverse.io>
Date: Mon, 3 Oct 2022 01:20:16 +0300
Subject: [PATCH] Fix UI render error inside repo error

- Simplify error naming by using this.constructor.name
- Error and RepositoryInDeletionContainer fix return as control by
  passing error value
---
 webui/src/lib/api/index.js                    | 12 ++++-----
 webui/src/lib/components/controls.jsx         |  4 +--
 .../pages/repositories/repository/error.jsx   | 25 ++++++++++---------
 .../pages/repositories/repository/objects.jsx |  2 +-
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/webui/src/lib/api/index.js b/webui/src/lib/api/index.js
index f0aa149ed1c..da08d74e069 100644
--- a/webui/src/lib/api/index.js
+++ b/webui/src/lib/api/index.js
@@ -80,21 +80,21 @@ 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;
     }
 }
 
@@ -102,14 +102,14 @@ 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;
     }
 }
@@ -117,7 +117,7 @@ export class MergeError extends Error {
 export class RepositoryDeletionError extends Error {
     constructor(message, repoId) {
         super(message);
-        this.name = "RepositoryDeletionError";
+        this.name = this.constructor.name;
         this.repoId = repoId;
     }
 }
diff --git a/webui/src/lib/components/controls.jsx b/webui/src/lib/components/controls.jsx
index 1b271d7f462..8298c555ffc 100644
--- a/webui/src/lib/components/controls.jsx
+++ b/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>
     )
-}
+};
diff --git a/webui/src/pages/repositories/repository/error.jsx b/webui/src/pages/repositories/repository/error.jsx
index e5945cdb8fa..277b367ce8b 100644
--- a/webui/src/pages/repositories/repository/error.jsx
+++ b/webui/src/pages/repositories/repository/error.jsx
@@ -6,7 +6,7 @@ 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">
@@ -14,14 +14,15 @@ const RepositoryInDeletionContainer = (repoId) => {
             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}/>;
+};
diff --git a/webui/src/pages/repositories/repository/objects.jsx b/webui/src/pages/repositories/repository/objects.jsx
index 955fed0f344..886d4843c20 100644
--- a/webui/src/pages/repositories/repository/objects.jsx
+++ b/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 (
         <>