fix: fix error banner's animation, handle error properly

Cosmo-Tech · Mar 23, 2023 · 859a4e8 · 859a4e8
1 parent 98de201
commit 859a4e8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/src/layouts/TabLayout/TabLayout.js b/src/layouts/TabLayout/TabLayout.js
@@ -84,22 +84,20 @@ export const TabLayout = (props) => {
       <DashboardsManager />
       <AppBar>{viewTabs}</AppBar>
       <Box className={classes.content}>
-        {applicationError && (
-          <ErrorBanner
-            error={applicationError}
-            labels={{
-              dismissButtonText: t('commoncomponents.banner.button.dismiss', 'Dismiss'),
-              tooLongErrorMessage: t(
-                'commoncomponents.banner.tooLongErrorMessage',
-                // eslint-disable-next-line max-len
-                'Detailed error message is too long to be displayed. To read it, please use the COPY button and paste it in your favorite text editor.'
-              ),
-              secondButtonText: t('commoncomponents.banner.button.copy.label', 'Copy'),
-              toggledButtonText: t('commoncomponents.banner.button.copy.copied', 'Copied'),
-            }}
-            clearErrors={clearApplicationErrorMessage}
-          />
-        )}
+        <ErrorBanner
+          error={applicationError}
+          labels={{
+            dismissButtonText: t('commoncomponents.banner.button.dismiss', 'Dismiss'),
+            tooLongErrorMessage: t(
+              'commoncomponents.banner.tooLongErrorMessage',
+              // eslint-disable-next-line max-len
+              'Detailed error message is too long to be displayed. To read it, please use the COPY button and paste it in your favorite text editor.'
+            ),
+            secondButtonText: t('commoncomponents.banner.button.copy.label', 'Copy'),
+            toggledButtonText: t('commoncomponents.banner.button.copy.copied', 'Copied'),
+          }}
+          clearErrors={clearApplicationErrorMessage}
+        />
         <Outlet />
       </Box>
     </>

diff --git a/src/views/Workspaces/Workspaces.js b/src/views/Workspaces/Workspaces.js
@@ -60,22 +60,20 @@ const Workspaces = () => {
   return (
     <>
       <AppBar />
-      {applicationError && (
-        <ErrorBanner
-          error={applicationError}
-          labels={{
-            dismissButtonText: t('commoncomponents.banner.button.dismiss', 'Dismiss'),
-            tooLongErrorMessage: t(
-              'commoncomponents.banner.tooLongErrorMessage',
-              // eslint-disable-next-line max-len
-              'Detailed error message is too long to be displayed. To read it, please use the COPY button and paste it in your favorite text editor.'
-            ),
-            secondButtonText: t('commoncomponents.banner.button.copy.label', 'Copy'),
-            toggledButtonText: t('commoncomponents.banner.button.copy.copied', 'Copied'),
-          }}
-          clearErrors={clearApplicationErrorMessage}
-        />
-      )}
+      <ErrorBanner
+        error={applicationError}
+        labels={{
+          dismissButtonText: t('commoncomponents.banner.button.dismiss', 'Dismiss'),
+          tooLongErrorMessage: t(
+            'commoncomponents.banner.tooLongErrorMessage',
+            // eslint-disable-next-line max-len
+            'Detailed error message is too long to be displayed. To read it, please use the COPY button and paste it in your favorite text editor.'
+          ),
+          secondButtonText: t('commoncomponents.banner.button.copy.label', 'Copy'),
+          toggledButtonText: t('commoncomponents.banner.button.copy.copied', 'Copied'),
+        }}
+        clearErrors={clearApplicationErrorMessage}
+      />
       <div data-cy="workspaces-view">
         {workspacesList?.data?.length === 0 ? (
           <Grid container justifyContent="center" alignItems="center" style={{ padding: '18px', height: '90%' }}>