fix(striker-ui): customize file type select in file info

striker-ui/components/Files/FileInfo.tsx

@@ -3,20 +3,24 @@ import {
   checkboxClasses,
   FormControl,
   FormControlLabel,
-  inputClasses,
+  FormGroup,
+  InputLabel,
   inputLabelClasses,
   MenuItem,
+  OutlinedInput,
   outlinedInputClasses,
   Select,
+  selectClasses,
   styled,
-  TextField,
 } from '@mui/material';
 import {
   Sync as SyncIcon,
   SyncDisabled as SyncDisabledIcon,
 } from '@mui/icons-material';
+import { v4 as uuidv4 } from 'uuid';
 
 import {
+  BLACK,
   BLUE,
   BORDER_RADIUS,
   GREY,
@@ -37,45 +41,49 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
   onChange: undefined,
 };
 
-const StyledTextField = styled(TextField)({
+const StyledInputLabel = styled(InputLabel)({
-  [`& .${inputLabelClasses.root}`]: {
+  color: GREY,
-    color: GREY,
 
-    [`&.${inputClasses.focused}`]: {
+  [`&.${inputLabelClasses.focused}`]: {
-      backgroundColor: BLUE,
+    backgroundColor: GREY,
-      borderRadius: BORDER_RADIUS,
+    borderRadius: BORDER_RADIUS,
-      color: TEXT,
+    color: BLACK,
-      padding: '.1em .6em',
+    padding: '.1em .6em',
-    },
   },
+});
 
-  [`& .${outlinedInputClasses.root}`]: {
+const StyledOutlinedInput = styled(OutlinedInput)({
-    color: GREY,
+  color: GREY,
 
-    [`& .${outlinedInputClasses.notchedOutline}`]: {
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: UNSELECTED,
+    borderColor: UNSELECTED,
-    },
+  },
 
-    '&:hover': {
+  '&:hover': {
-      [`& .${outlinedInputClasses.notchedOutline}`]: {
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: GREY,
+      borderColor: GREY,
-      },
     },
+  },
 
-    [`&.${inputClasses.focused}`]: {
+  [`&.${outlinedInputClasses.focused}`]: {
-      color: TEXT,
+    color: TEXT,
 
-      [`& .${outlinedInputClasses.notchedOutline}`]: {
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: BLUE,
+      borderColor: GREY,
 
-        '& legend': {
+      '& legend': {
-          paddingRight: '1.2em',
+        paddingRight: '1.2em',
-        },
       },
     },
   },
 });
 
+const StyledSelect = styled(Select)({
+  [`& .${selectClasses.icon}`]: {
+    color: GREY,
+  },
+});
+
 const FileLocationActiveCheckbox = styled(Checkbox)({
   color: RED,
 
@@ -93,38 +101,55 @@ const FileInfo = (
     onChange,
   }: FileInfoProps = FILE_INFO_DEFAULT_PROPS as FileInfoProps,
 ): JSX.Element => {
+  const idExtension = uuidv4();
+
+  const fileNameElementId = `file-name-${idExtension}`;
+  const fileNameElementLabel = 'File name';
+
+  const fileTypeElementId = `file-type-${idExtension}`;
+  const fileTypeElementLabel = 'File type';
+
   return (
-    <FormControl>
+    <FormGroup sx={{ '> :not(:first-child)': { marginTop: '1em' } }}>
-      <StyledTextField
+      <FormControl>
-        defaultValue={fileName}
+        <StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
-        disabled={isReadonly}
+          {fileNameElementLabel}
-        id="file-name"
+        </StyledInputLabel>
-        label="File name"
+        <StyledOutlinedInput
-        onChange={({ target: { value } }) =>
+          defaultValue={fileName}
-          onChange?.call(null, { fileName: value })
-        }
-      />
-      {fileType && (
-        <Select
-          defaultValue={fileType}
           disabled={isReadonly}
-          id="file-type"
+          id={fileNameElementId}
-          label="File type"
+          label={fileNameElementLabel}
           onChange={({ target: { value } }) =>
-            onChange?.call(null, { fileType: value as FileType })
+            onChange?.call(null, { fileName: value })
           }
-          sx={{ color: TEXT }}
+        />
-        >
+      </FormControl>
-          {UPLOAD_FILE_TYPES_ARRAY.map(
+      {fileType && (
-            ([fileTypeKey, [, fileTypeDisplayString]]) => {
+        <FormControl>
-              return (
+          <StyledInputLabel htmlFor={fileTypeElementId} variant="outlined">
-                <MenuItem key={fileTypeKey} value={fileTypeKey}>
+            {fileTypeElementLabel}
-                  {fileTypeDisplayString}
+          </StyledInputLabel>
-                </MenuItem>
+          <StyledSelect
-              );
+            defaultValue={fileType}
-            },
+            disabled={isReadonly}
-          )}
+            id={fileTypeElementId}
-        </Select>
+            input={<StyledOutlinedInput label={fileTypeElementLabel} />}
+            onChange={({ target: { value } }) =>
+              onChange?.call(null, { fileType: value as FileType })
+            }
+          >
+            {UPLOAD_FILE_TYPES_ARRAY.map(
+              ([fileTypeKey, [, fileTypeDisplayString]]) => {
+                return (
+                  <MenuItem key={fileTypeKey} value={fileTypeKey}>
+                    {fileTypeDisplayString}
+                  </MenuItem>
+                );
+              },
+            )}
+          </StyledSelect>
+        </FormControl>
       )}
       {fileLocations.map(
         (
@@ -154,7 +179,7 @@ const FileInfo = (
           />
         ),
       )}
-    </FormControl>
+    </FormGroup>
   );
 };
 

striker-ui/package-lock.json

@@ -26,7 +26,8 @@
         "pretty-bytes": "^5.6.0",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "swr": "^0.5.6"
+        "swr": "^0.5.6",
+        "uuid": "^8.3.2"
       },
       "devDependencies": {
         "@commitlint/cli": "^12.1.4",
@@ -34,6 +35,7 @@
         "@types/node": "^15.12.2",
         "@types/novnc-core": "^0.1.3",
         "@types/react": "^17.0.11",
+        "@types/uuid": "^8.3.4",
         "@typescript-eslint/eslint-plugin": "^4.27.0",
         "@typescript-eslint/parser": "^4.27.0",
         "eslint": "^7.28.0",
@@ -1619,6 +1621,12 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
@@ -6270,6 +6278,14 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -7527,6 +7543,12 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
@@ -10960,6 +10982,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

striker-ui/package.json

@@ -30,7 +30,8 @@
     "pretty-bytes": "^5.6.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "swr": "^0.5.6"
+    "swr": "^0.5.6",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
@@ -38,6 +39,7 @@
     "@types/node": "^15.12.2",
     "@types/novnc-core": "^0.1.3",
     "@types/react": "^17.0.11",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.27.0",
     "@typescript-eslint/parser": "^4.27.0",
     "eslint": "^7.28.0",