Fix minor UI issues and refactor duplicate styled components

Author: Sathish Kumar Thangaraj

.eslintignore

@@ -3,6 +3,7 @@ dist
 coverage
 **/*.d.ts
 tests
+lib
 
 **/__tests__
 ui-tests

package.json

@@ -100,9 +100,9 @@
     "@types/jest": "^29",
     "@types/lodash": "4.14.192",
     "@types/react-show-more-text": "^1.4.5",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "eslint": "^7.14.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "jest": "^29",

src/dag-scheduler/components/advanced-table/advanced-table.tsx

@@ -267,7 +267,7 @@ export function AdvancedTable<
           ...(loading ? { pointerEvents: 'none', opacity: 0.5 } : {})
         }}
       >
-        <Table stickyHeader>
+        <Table stickyHeader style={{ position: 'relative' }}>
           <AdvancedTableHeader
             columns={props.columns}
             query={props.query}
@@ -276,7 +276,13 @@ export function AdvancedTable<
           <TableBody role="presentation">
             <TableRow>
               <TableCell
-                sx={{ p: 0, height: 5, border: 'none' }}
+                sx={{
+                  p: 0,
+                  height: 5,
+                  width: '100%',
+                  border: 'none',
+                  position: 'absolute'
+                }}
                 colSpan={props.columns.length}
               >
                 {loading ? <LinearProgress /> : null}

src/dag-scheduler/components/external-links.tsx

@@ -44,14 +44,12 @@ export const ExternalLinks: FC<ExternalLinksProps> = ({ options }) => {
         <ArrowOutward fontSize="small" />
       </IconButton>
       <Popper
-        sx={{
-          zIndex: 1
-        }}
         open={open}
-        anchorEl={anchorRef.current}
-        role={undefined}
         transition
         disablePortal
+        role={undefined}
+        sx={{ zIndex: 1 }}
+        anchorEl={anchorRef.current}
       >
         {({ TransitionProps, placement }) => (
           <Grow

src/dag-scheduler/components/forms/select-box.tsx

@@ -3,17 +3,16 @@ import React, { FC } from 'react';
 import {
   FormControl,
   MenuItem,
-  Select,
   ListSubheader,
   SelectChangeEvent,
   FormHelperText,
-  styled,
   SelectProps,
   FormLabel,
   Typography,
   InputLabel
 } from '@mui/material';
 import { Controller, UseControllerProps } from 'react-hook-form';
+import { CustomSelect } from '../styled';
 
 type Option = {
   value: string;
@@ -43,11 +42,6 @@ export type GroupSelectBoxProps = Props & {
   }[];
 };
 
-export const CustomSelect = styled(Select as any)<SelectProps<string>>(() => ({
-  '& fieldset': { top: 0 },
-  '& legend': { display: 'none' }
-}));
-
 const SelectComponent: FC<SelectBoxProps | GroupSelectBoxProps> = props => {
   const labelId = `${props.id}-label`;
   const isRequired = props.rules?.required || props.rules?.validate;

src/dag-scheduler/components/forms/text-field.tsx

@@ -1,19 +1,11 @@
 import React, { FC } from 'react';
 import { Controller, UseControllerProps } from 'react-hook-form';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import { FormControl, FormLabel, Typography, styled } from '@mui/material';
+import { TextFieldProps } from '@mui/material/TextField';
+import { FormControl, FormLabel, Typography } from '@mui/material';
+import { CustomTextField } from '../styled';
 
 type FormInputProps = TextFieldProps & UseControllerProps;
 
-const CustomTextField = styled(TextField)<TextFieldProps>(({ theme }) => ({
-  '& fieldset': { top: 0 },
-  '& legend': {
-    display: 'none',
-    color: theme.palette.grey,
-    marginBottom: theme.spacing(2)
-  }
-}));
-
 // TODO: Split the props into 2 groups (one for hook-form and one for mui)
 export const FormInputText: FC<FormInputProps> = ({
   name,

src/dag-scheduler/components/job-row.tsx

@@ -19,7 +19,6 @@ function Timestamp(props: { job: Scheduler.IDescribeJob }): JSX.Element | null {
 
 export function buildJobRow(
   model: Scheduler.IDescribeJob,
-  translateStatus: (status: Scheduler.Status) => string,
   showDetailView: (jobId: string) => void
 ): JSX.Element {
   const trans = useTranslator('jupyterlab');

src/dag-scheduler/components/styled/drawer.tsx renamed to src/dag-scheduler/components/styled/index.tsx

@@ -1,4 +1,13 @@
-import { Alert, Drawer, IconButton, styled } from '@mui/material';
+import {
+  Alert,
+  Drawer,
+  IconButton,
+  Select,
+  SelectProps,
+  TextField,
+  TextFieldProps,
+  styled
+} from '@mui/material';
 import { Stack } from '@mui/system';
 
 export const StyledDrawer = styled(Drawer)({
@@ -39,3 +48,21 @@ export const StyledAlert = styled(Alert)({
   position: 'relative',
   boxSizing: 'border-box'
 });
+
+export const CustomSelect = styled(Select as any)<SelectProps<string>>(() => ({
+  '& fieldset': { top: 0 },
+  '& legend': { display: 'none' }
+}));
+
+export const CustomTextField = styled(TextField)<TextFieldProps>(
+  ({ theme }) => ({
+    '& fieldset': { top: 0 },
+    '& legend': {
+      display: 'none',
+      color: theme.palette.grey,
+      marginBottom: theme.spacing(2)
+    },
+    '& .MuiInputLabel-shrink': { opacity: 0 },
+    '& .MuiInputLabel-root': { color: 'var(--jp-border-color0)' }
+  })
+);

src/dag-scheduler/components/styled/page-header.tsx

@@ -150,32 +150,32 @@ function FilterForm({ value, columns, onSave, onClose }: FilterFormProps) {
     value.length ? [...value] : [{ ...DEFAULT_ITEM }]
   );
 
-  const handleInputChange = (index: number) => (
-    fieldName: keyof FilterItem,
-    fieldValue: string
-  ) => {
-    const nextState = filters.length ? filters.slice() : [{ ...DEFAULT_ITEM }];
+  const handleInputChange =
+    (index: number) => (fieldName: keyof FilterItem, fieldValue: string) => {
+      const nextState = filters.length
+        ? filters.slice()
+        : [{ ...DEFAULT_ITEM }];
 
-    nextState[index][fieldName] = fieldValue;
+      nextState[index][fieldName] = fieldValue;
 
-    // Reset the filter value, if column is changed and retain the condition if possible
-    if (fieldName === 'field') {
-      const currentColumn = columns.find(c => c.field === fieldValue);
-      const { type } = currentColumn || ({} as AdvancedTableColumn);
+      // Reset the filter value, if column is changed and retain the condition if possible
+      if (fieldName === 'field') {
+        const currentColumn = columns.find(c => c.field === fieldValue);
+        const { type } = currentColumn || ({} as AdvancedTableColumn);
 
-      const current = nextState[index]['condition'];
-      const { options } = operators[type || 'string'];
-      const isConditionValid = options.find(o => o === current);
+        const current = nextState[index]['condition'];
+        const { options } = operators[type || 'string'];
+        const isConditionValid = options.find(o => o === current);
 
-      const defaultOp =
-        (isConditionValid ? current : null) || (fieldValue ? options[0] : '');
+        const defaultOp =
+          (isConditionValid ? current : null) || (fieldValue ? options[0] : '');
 
-      nextState[index]['value'] = '';
-      nextState[index]['condition'] = defaultOp;
-    }
+        nextState[index]['value'] = '';
+        nextState[index]['condition'] = defaultOp;
+      }
 
-    setFilters(nextState);
-  };
+      setFilters(nextState);
+    };
 
   const handleAddFilter = () => {
     setFilters([...filters, { ...DEFAULT_ITEM }]);
@@ -265,9 +265,8 @@ function FilterRow({
     dataType || 'string'
   );
 
-  const { options, Component, ComponentProps } = operators[
-    columnType || 'string'
-  ];
+  const { options, Component, ComponentProps } =
+    operators[columnType || 'string'];
 
   const isDateType = columnType === 'date';
 

src/dag-scheduler/components/table-filter.tsx

@@ -11,10 +11,10 @@ import { Box } from '@mui/system';
 
 import { Edge } from 'reactflow';
 import { useWorkflowStore } from '../hooks';
-import { CustomSelect } from './forms/select-box';
 import { Close } from '@mui/icons-material';
 // TODO: tree-shake
 import { uniqBy } from 'lodash';
+import { CustomSelect } from './styled';
 
 const getDiff = (previous: string[], current: string[]) => {
   const added = current

src/dag-scheduler/components/task-dependency.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { TaskStatus } from '../model';
 import { ErrorOutlineRounded, WarningAmberOutlined } from '@mui/icons-material';
-import { CircularProgress, Tooltip } from '@mui/material';
+import { CircularProgress } from '@mui/material';
 
 type Props = {
   status?: TaskStatus;
@@ -14,17 +14,9 @@ const TaskStatusComponent: FC<Props> = ({
 }) => {
   switch (status) {
     case TaskStatus.FAILED_TO_UPDATE:
-      return (
-        <Tooltip title={message}>
-          <WarningAmberOutlined color="warning" />
-        </Tooltip>
-      );
+      return <WarningAmberOutlined color="warning" />;
     case TaskStatus.FAILED_TO_CREATE:
-      return (
-        <Tooltip title={message}>
-          <ErrorOutlineRounded color="error" />
-        </Tooltip>
-      );
+      return <ErrorOutlineRounded color="error" />;
     case TaskStatus.CREATING:
       return <CircularProgress size={16} />;
     default:

src/dag-scheduler/components/task-status.tsx

@@ -9,15 +9,8 @@ import { useWorkflowStore } from '../../hooks';
 import { TaskStatus } from '../../model';
 
 export const ConnectionLine: FC<ConnectionLineComponentProps> = props => {
-  const {
-    toX,
-    toY,
-    connectionStatus,
-    fromX,
-    fromY,
-    fromPosition,
-    toPosition
-  } = props;
+  const { toX, toY, connectionStatus, fromX, fromY, fromPosition, toPosition } =
+    props;
 
   const { getState } = useStoreApi();
   const useStore = useWorkflowStore();

src/dag-scheduler/components/workflow-editor/connection-line.tsx

@@ -56,13 +56,13 @@ export enum WorkflowsViewType {
   Tasks = 'Tasks'
 }
 
-export const notificationTypes = Object.entries(
-  NotificationEvents
-).map(([label, value]) => ({ value, label }));
+export const notificationTypes = Object.entries(NotificationEvents).map(
+  ([label, value]) => ({ value, label })
+);
 
-export const outputFormatTypes = Object.entries(
-  OutputFormats
-).map(([label, value]) => ({ value, label }));
+export const outputFormatTypes = Object.entries(OutputFormats).map(
+  ([label, value]) => ({ value, label })
+);
 
 export const triggerRuleTypes = Object.entries(TriggerRules).map(
   ([label, value]) => ({

src/dag-scheduler/contants.ts

@@ -8,7 +8,7 @@ import { useTranslator, useWorkflows } from '../hooks';
 import { Scheduler } from '../handler';
 import { CreateWorkflow } from './create-workflow';
 import { emptyCreateJobDefinitionModel } from '../model';
-import { StyledAlert, StyledDrawer } from '../components/styled/drawer';
+import { StyledAlert, StyledDrawer } from '../components/styled';
 
 export const CreateWorkflowView: FC = () => {
   const navigate = useNavigate();

src/dag-scheduler/mainviews/create-workflow-view.tsx

@@ -36,11 +36,8 @@ import {
   Step,
   StepLabel,
   Stepper,
-  TextField,
-  TextFieldProps,
   Tooltip,
-  Typography,
-  styled
+  Typography
 } from '@mui/material';
 
 import { Box, Stack } from '@mui/system';
@@ -74,6 +71,7 @@ import { useLocation } from 'react-router-dom';
 import { AsyncButton } from '../components/async-button';
 import moment from 'moment';
 import { Dropzone } from '../components/drop-zone';
+import { CustomTextField } from '../components/styled';
 
 export interface ICreateWorkflowProps {
   model: Scheduler.IJobDefinition;
@@ -105,17 +103,6 @@ type FormData = {
   workflowNotificationEmails: Contact[];
 };
 
-const CustomTextField = styled(TextField)<TextFieldProps>(({ theme }) => ({
-  '& fieldset': { top: 0 },
-  '& legend': {
-    display: 'none',
-    color: theme.palette.grey,
-    marginBottom: theme.spacing(2)
-  },
-  '& .MuiInputLabel-shrink': { opacity: 0 },
-  '& .MuiInputLabel-root': { color: 'var(--jp-border-color0)' }
-}));
-
 export function CreateWorkflow(props: ICreateWorkflowProps): JSX.Element {
   const trans = useTranslator('jupyterlab');
   const { api, namespaces, kernelSpecs } = useWorkflows();