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';