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,19 +41,18 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
   onChange: undefined,
 };
 
-const StyledTextField = styled(TextField)({
+const StyledInputLabel = styled(InputLabel)({
-  [`& .${inputLabelClasses.root}`]: {
   color: GREY,
 
-    [`&.${inputClasses.focused}`]: {
+  [`&.${inputLabelClasses.focused}`]: {
-      backgroundColor: BLUE,
+    backgroundColor: GREY,
     borderRadius: BORDER_RADIUS,
-      color: TEXT,
+    color: BLACK,
     padding: '.1em .6em',
   },
-  },
+});
 
-  [`& .${outlinedInputClasses.root}`]: {
+const StyledOutlinedInput = styled(OutlinedInput)({
   color: GREY,
 
   [`& .${outlinedInputClasses.notchedOutline}`]: {
@@ -62,17 +65,22 @@ const StyledTextField = styled(TextField)({
     },
   },
 
-    [`&.${inputClasses.focused}`]: {
+  [`&.${outlinedInputClasses.focused}`]: {
     color: TEXT,
 
     [`& .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: BLUE,
+      borderColor: GREY,
 
       '& legend': {
         paddingRight: '1.2em',
       },
     },
   },
+});
+
+const StyledSelect = styled(Select)({
+  [`& .${selectClasses.icon}`]: {
+    color: GREY,
   },
 });
 
@@ -93,27 +101,43 @@ 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 (
+    <FormGroup sx={{ '> :not(:first-child)': { marginTop: '1em' } }}>
       <FormControl>
-      <StyledTextField
+        <StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
+          {fileNameElementLabel}
+        </StyledInputLabel>
+        <StyledOutlinedInput
           defaultValue={fileName}
           disabled={isReadonly}
-        id="file-name"
+          id={fileNameElementId}
-        label="File name"
+          label={fileNameElementLabel}
           onChange={({ target: { value } }) =>
             onChange?.call(null, { fileName: value })
           }
         />
+      </FormControl>
       {fileType && (
-        <Select
+        <FormControl>
+          <StyledInputLabel htmlFor={fileTypeElementId} variant="outlined">
+            {fileTypeElementLabel}
+          </StyledInputLabel>
+          <StyledSelect
             defaultValue={fileType}
             disabled={isReadonly}
-          id="file-type"
+            id={fileTypeElementId}
-          label="File type"
+            input={<StyledOutlinedInput label={fileTypeElementLabel} />}
             onChange={({ target: { value } }) =>
               onChange?.call(null, { fileType: value as FileType })
             }
-          sx={{ color: TEXT }}
           >
             {UPLOAD_FILE_TYPES_ARRAY.map(
               ([fileTypeKey, [, fileTypeDisplayString]]) => {
@@ -124,7 +148,8 @@ const FileInfo = (
                 );
               },
             )}
-        </Select>
+          </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",