From 554a94a9ad39ad11fb029fb48caa69b933153eee Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 21 Jan 2022 15:52:16 -0500
Subject: [PATCH] fix(striker-ui): hide file type during file upload

---
 striker-ui/components/Files/FileInfo.tsx      | 54 +++++++++----------
 .../components/Files/FileUploadForm.tsx       | 12 +++--
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/striker-ui/components/Files/FileInfo.tsx b/striker-ui/components/Files/FileInfo.tsx
index 7297fb29..7af6cfaa 100644
--- a/striker-ui/components/Files/FileInfo.tsx
+++ b/striker-ui/components/Files/FileInfo.tsx
@@ -18,13 +18,11 @@ import {
 import { BLUE, GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
 
-type FileInfoProps = Pick<
-  FileDetailMetadata,
-  'fileName' | 'fileLocations' | 'fileType'
-> & {
-  isReadonly?: boolean;
-  onChange?: FileInfoChangeHandler;
-};
+type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
+  Partial<Pick<FileDetailMetadata, 'fileType'>> & {
+    isReadonly?: boolean;
+    onChange?: FileInfoChangeHandler;
+  };
 
 const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
   isReadonly: undefined,
@@ -69,26 +67,28 @@ const FileInfo = (
           onChange?.call(null, { fileName: value })
         }
       />
-      <Select
-        defaultValue={fileType}
-        disabled={isReadonly}
-        id="file-type"
-        label="File type"
-        onChange={({ target: { value } }) =>
-          onChange?.call(null, { fileType: value as FileType })
-        }
-        sx={{ color: TEXT }}
-      >
-        {UPLOAD_FILE_TYPES_ARRAY.map(
-          ([fileTypeKey, [, fileTypeDisplayString]]) => {
-            return (
-              <MenuItem key={fileTypeKey} value={fileTypeKey}>
-                {fileTypeDisplayString}
-              </MenuItem>
-            );
-          },
-        )}
-      </Select>
+      {fileType && (
+        <Select
+          defaultValue={fileType}
+          disabled={isReadonly}
+          id="file-type"
+          label="File type"
+          onChange={({ target: { value } }) =>
+            onChange?.call(null, { fileType: value as FileType })
+          }
+          sx={{ color: TEXT }}
+        >
+          {UPLOAD_FILE_TYPES_ARRAY.map(
+            ([fileTypeKey, [, fileTypeDisplayString]]) => {
+              return (
+                <MenuItem key={fileTypeKey} value={fileTypeKey}>
+                  {fileTypeDisplayString}
+                </MenuItem>
+              );
+            },
+          )}
+        </Select>
+      )}
       {fileLocations.map(
         (
           { anvilName, anvilDescription, anvilUUID, isFileLocationActive },
diff --git a/striker-ui/components/Files/FileUploadForm.tsx b/striker-ui/components/Files/FileUploadForm.tsx
index 33ab2a46..8bd0fc46 100644
--- a/striker-ui/components/Files/FileUploadForm.tsx
+++ b/striker-ui/components/Files/FileUploadForm.tsx
@@ -102,12 +102,14 @@ const FileUploadForm = (
       const selectedFile = selectedFiles.shift();
 
       if (selectedFile) {
-        const { file, fileName, fileType } = selectedFile;
+        const { file, fileName } = selectedFile;
 
         const fileFormData = new FormData();
 
         fileFormData.append('file', new File([file], fileName, { ...file }));
-        fileFormData.append('file-type', fileType);
+        // Re-add when the back-end tools can support changing file type on file upload.
+        // Note: get file type from destructuring selectedFile.
+        // fileFormData.append('file-type', fileType);
 
         const inUploadFile: InUploadFile = { fileName, progressValue: 0 };
         inUploadFiles.push(inUploadFile);
@@ -183,13 +185,15 @@ const FileUploadForm = (
             {
               file: { name: originalFileName },
               fileName,
-              fileType,
+              // Re-add when the back-end tools can support changing file type on file upload.
+              // Note: file type must be supplied to FileInfo.
+              // fileType,
               fileLocations,
             },
             fileIndex,
           ) => (
             <FileInfo
-              {...{ fileName, fileType, fileLocations }}
+              {...{ fileName, fileLocations }}
               // Use a non-changing key to prevent recreating the component.
               // fileName holds the string from the file-name input, thus it changes when users makes a change.
               key={`selected-${originalFileName}`}