fix: code smells

Signed-off-by: Soham <[email protected]>
flyteorg · Jun 29, 2023 · a7bcf4c · a7bcf4c
1 parent 72a4496
commit a7bcf4c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 65 deletions.
diff --git a/packages/console/src/components/Entities/EntityDetails.tsx b/packages/console/src/components/Entities/EntityDetails.tsx
@@ -17,8 +17,7 @@ import { EntityExecutionsBarChart } from './EntityExecutionsBarChart';
 
 const useStyles = makeStyles((theme: Theme) => ({
   entityDetailsWrapper: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+    px: theme.spacing(2),
     minHeight: '100vh',
   },
   metadataContainer: {
@@ -78,29 +77,29 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
           />
 
           <div className={styles.metadataContainer}>
-            {sections.description ? (
+            {!!sections.description && (
               <div className={styles.descriptionContainer}>
                 <EntityDescription id={id} />
               </div>
-            ) : null}
-            {!sections.inputs && sections.schedules ? (
+            )}
+            {!sections.inputs && sections.schedules && (
               <div className={styles.schedulesContainer}>
                 <EntitySchedules id={id} />
               </div>
-            ) : null}
+            )}
           </div>
 
-          {sections.inputs ? (
+          {!!sections.inputs && (
             <div className={styles.inputsContainer}>
               <EntityInputs id={id} />
             </div>
-          ) : null}
+          )}
 
-          {sections.versions ? (
+          {!!sections.versions && (
             <div className={styles.versionsContainer}>
               <EntityVersions id={id} />
             </div>
-          ) : null}
+          )}
 
           <EntityExecutionsBarChart
             onToggle={onToggle}
@@ -117,15 +116,11 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
               />
             </div>
           ) : (
-            <>
-              <LoadingSpinner />
-            </>
+            <LoadingSpinner />
           )}
         </>
       ) : (
-        <>
-          <LoadingSpinner />
-        </>
+        <LoadingSpinner />
       )}
     </Grid>
   );

diff --git a/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx b/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
     flexWrap: 'nowrap',
     overflow: 'hidden',
     height: `calc(100vh - ${theme.spacing(17)}px)`,
-    padding: `0 ${theme.spacing(2)}`,
+    padding: theme.spacing(0, 2),
   },
   staticGraphContainer: {
     display: 'flex',
@@ -42,12 +42,12 @@ const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
     width: '100%',
     flex: '1',
     overflowY: 'scroll',
-    padding: `0 ${theme.spacing(2)}`,
+    padding: theme.spacing(0, 2),
   },
   versionsContainer: {
     display: 'flex',
     flex: '0 1 auto',
-    padding: `0 ${theme.spacing(2)}`,
+    padding: theme.spacing(0, 2),
     height: ({ resourceType }) =>
       resourceType === ResourceType.LAUNCH_PLAN ? '100%' : '40%',
     flexDirection: 'column',
@@ -89,39 +89,35 @@ const EntityVersionsDetailsContainerImpl: React.FC<
   const [project] = useProject(workflowId.project);
   const styles = useStyles({ resourceType: id.resourceType });
 
+  if (!project?.id) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <>
-      {project?.id ? (
-        <>
-          <Box pl={2} pr={2}>
-            <EntityDetailsHeader
-              project={project.value}
-              id={id}
-              launchable={sections.launch}
-              backToWorkflow
-            />
-          </Box>
-          <div className={styles.verionDetailsContainer}>
-            {versionsSections.details && (
-              <div className={styles.versionDetailsContainer}>
-                <EntityVersionDetails id={id} />
-              </div>
-            )}
-            {versionsSections.graph && (
-              <div className={styles.staticGraphContainer}>
-                <StaticGraphContainer workflowId={workflowId} />
-              </div>
-            )}
-            <div className={styles.versionsContainer}>
-              <EntityVersions id={id} showAll />
-            </div>
+      <Box pl={2} pr={2}>
+        <EntityDetailsHeader
+          project={project.value}
+          id={id}
+          launchable={sections.launch}
+          backToWorkflow
+        />
+      </Box>
+      <div className={styles.verionDetailsContainer}>
+        {versionsSections.details && (
+          <div className={styles.versionDetailsContainer}>
+            <EntityVersionDetails id={id} />
+          </div>
+        )}
+        {versionsSections.graph && (
+          <div className={styles.staticGraphContainer}>
+            <StaticGraphContainer workflowId={workflowId} />
           </div>
-        </>
-      ) : (
-        <>
-          <LoadingSpinner />
-        </>
-      )}
+        )}
+        <div className={styles.versionsContainer}>
+          <EntityVersions id={id} showAll />
+        </div>
+      </div>
     </>
   );
 };

diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
@@ -74,7 +74,7 @@ export const getOperationsFromWorkflowExecutionMetrics = (
   const operationIds = uniq(
     traverse(data)
       .paths()
-      .filter(path => path[path.length - 1] === 'operationId')
+      .filter(path => path.at(-1) === 'operationId')
       .map(path => get(data, path)),
   );
 

diff --git a/packages/console/src/components/Navigation/DefaultAppBarContent.tsx b/packages/console/src/components/Navigation/DefaultAppBarContent.tsx
@@ -45,11 +45,7 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
   const isGAEnabled = env.ENABLE_GA === 'true' && env.GA_TRACKING_ID !== '';
 
   const handleSideNavToggle = React.useCallback(() => {
-    if (isSideNavOpen) {
-      closeSideNav();
-    } else {
-      openSideNav();
-    }
+    return isSideNavOpen ? closeSideNav() : openSideNav();
   }, [isSideNavOpen, openSideNav, closeSideNav]);
 
   const theme = useTheme();
@@ -62,11 +58,9 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
           showMobileNav();
           closeSideNav();
         }
-      } else {
-        if (isMobileNav) {
-          hideMobileNav();
-          closeSideNav();
-        }
+      } else if (isMobileNav) {
+        hideMobileNav();
+        closeSideNav();
       }
     };
     handleResize();
@@ -112,7 +106,7 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
   const styles = makeStyles(() => ({
     wordmark: {
       position: 'relative',
-      paddingTop: '22px',
+      paddingTop: theme.spacing(2.75),
       '& > svg': {
         height: '22px',
         transform: 'translateX(-34px)',
@@ -171,10 +165,8 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
                 </Box>
               )}
             </Link>
-            {props.items?.length > 0 ? (
+            {props.items?.length > 0 && (
               <NavigationDropdown items={props.items} console={props.console} />
-            ) : (
-              false
             )}
           </Grid>
         </Grid>

diff --git a/packages/console/src/components/Navigation/NavBar.tsx b/packages/console/src/components/Navigation/NavBar.tsx
@@ -39,7 +39,7 @@ export const NavBar = (props: NavBarProps) => {
       inset: '0',
     },
     inlineToolBar: {
-      padding: `${theme.spacing(2)}px 0 ${theme.spacing(4)}px 0`,
+      padding: theme.spacing(2, 0, 4, 0),
       height: '100%',
     },
   }))();