fix(striker-ui): clear selected files to upload when entering edit mode

striker-ui/components/Files/FileUploadForm.tsx

@@ -18,7 +18,7 @@ import StyledContainedButton from './StyledContainedButton';
 
 type FileUploadFormProps = {
   onFileUploadComplete?: () => void;
-  openFilePickerEventEmitter?: EventEmitter;
+  eventEmitter?: EventEmitter;
 };
 
 type SelectedFile = Pick<
@@ -34,13 +34,13 @@ type InUploadFile = Pick<FileDetailMetadata, 'fileName'> & {
 
 const FILE_UPLOAD_FORM_DEFAULT_PROPS: Partial<FileUploadFormProps> = {
   onFileUploadComplete: undefined,
-  openFilePickerEventEmitter: undefined,
+  eventEmitter: undefined,
 };
 
 const FileUploadForm = (
   {
     onFileUploadComplete,
-    openFilePickerEventEmitter,
+    eventEmitter,
   }: FileUploadFormProps = FILE_UPLOAD_FORM_DEFAULT_PROPS as FileUploadFormProps,
 ): JSX.Element => {
   const selectFileRef = useRef<HTMLInputElement>();
@@ -140,20 +140,17 @@ const FileUploadForm = (
   };
 
   useEffect(() => {
-    openFilePickerEventEmitter?.addListener('open', () => {
+    eventEmitter?.addListener('openFilePicker', () => {
       selectFileRef.current?.click();
     });
-  }, [openFilePickerEventEmitter]);
+
+    eventEmitter?.addListener('clearSelectedFiles', () => {
+      setSelectedFiles([]);
+    });
+  }, [eventEmitter]);
 
   return (
     <form onSubmit={uploadFiles}>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          '> :not(:first-child)': { marginTop: '1em' },
-        }}
-      >
       <InputLabel htmlFor="select-file">
         <Input
           id="select-file"
@@ -164,6 +161,7 @@ const FileUploadForm = (
           type="file"
         />
       </InputLabel>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         {inUploadFiles.map(({ fileName, progressValue }) => (
           <Box
             key={`in-upload-${fileName}`}
@@ -187,6 +185,14 @@ const FileUploadForm = (
             <ProgressBar progressPercentage={progressValue} />
           </Box>
         ))}
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          '& > :not(:first-child)': { marginTop: '1em' },
+        }}
+      >
         {selectedFiles.map(
           (
             {
@@ -209,7 +215,15 @@ const FileUploadForm = (
           ),
         )}
         {selectedFiles.length > 0 && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'flex-end',
+            }}
+          >
             <StyledContainedButton type="submit">Upload</StyledContainedButton>
+          </Box>
         )}
       </Box>
     </form>

striker-ui/components/Files/Files.tsx

@@ -1,9 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Box, IconButton } from '@mui/material';
-import { Add as AddIcon, Edit as EditIcon } from '@mui/icons-material';
+import {
+  Add as AddIcon,
+  Check as CheckIcon,
+  Edit as EditIcon,
+} from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
 import EventEmitter from 'events';
 
+import { BLUE } from '../../lib/consts/DEFAULT_THEME';
 import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';
 
 import { Panel } from '../Panels';
@@ -12,22 +17,8 @@ import { HeaderText } from '../Text';
 import FileList from './FileList';
 import FileUploadForm from './FileUploadForm';
 import FileEditForm from './FileEditForm';
-import fetchJSON from '../../lib/fetchers/fetchJSON';
-
-const PREFIX = 'Files';
-
-const classes = {
-  addFileButton: `${PREFIX}-addFileButton`,
-  addFileInput: `${PREFIX}-addFileInput`,
-};
 
-const StyledDiv = styled('div')(() => ({
-  [`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE,
-
-  [`& .${classes.addFileInput}`]: {
-    display: 'none',
-  },
-}));
+import fetchJSON from '../../lib/fetchers/fetchJSON';
 
 const StyledIconButton = styled(IconButton)(ICON_BUTTON_STYLE);
 
@@ -39,13 +30,15 @@ const Files = (): JSX.Element => {
   ] = useState<boolean>(false);
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
 
-  const openFilePickerEventEmitter: EventEmitter = new EventEmitter();
+  const fileUploadFormEventEmitter: EventEmitter = new EventEmitter();
 
   const onAddFileButtonClick = () => {
-    openFilePickerEventEmitter.emit('open');
+    fileUploadFormEventEmitter.emit('openFilePicker');
   };
 
   const onEditFileButtonClick = () => {
+    fileUploadFormEventEmitter.emit('clearSelectedFiles');
+
     setIsEditMode(!isEditMode);
   };
 
@@ -55,21 +48,19 @@ const Files = (): JSX.Element => {
       elements = <Spinner />;
     } else {
       const filesOverview: FileOverviewMetadata[] = rawFilesOverview.map(
-        ([fileUUID, fileName, fileSizeInBytes, fileType, fileChecksum]) => {
-          return {
+        ([fileUUID, fileName, fileSizeInBytes, fileType, fileChecksum]) => ({
           fileChecksum,
           fileName,
           fileSizeInBytes: parseInt(fileSizeInBytes, 10),
           fileType: fileType as FileType,
           fileUUID,
-          };
-        },
+        }),
       );
 
       elements = isEditMode ? (
-        <FileEditForm filesOverview={filesOverview} />
+        <FileEditForm {...{ filesOverview }} />
       ) : (
-        <FileList filesOverview={filesOverview} />
+        <FileList {...{ filesOverview }} />
       );
     }
 
@@ -95,30 +86,36 @@ const Files = (): JSX.Element => {
 
   return (
     <Panel>
-      <StyledDiv>
-        <Box style={{ display: 'flex', width: '100%' }}>
-          <Box style={{ flexGrow: 1 }}>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: '1em',
+          width: '100%',
+          '& > :first-child': { flexGrow: 1 },
+          '& > :not(:first-child, :last-child)': {
+            marginRight: '.3em',
+          },
+        }}
+      >
         <HeaderText text="Files" />
-          </Box>
-          <Box>
+        {!isEditMode && (
           <StyledIconButton onClick={onAddFileButtonClick}>
             <AddIcon />
           </StyledIconButton>
-          </Box>
-          <Box>
+        )}
         <StyledIconButton onClick={onEditFileButtonClick}>
-              <EditIcon />
+          {isEditMode ? <CheckIcon sx={{ color: BLUE }} /> : <EditIcon />}
         </StyledIconButton>
       </Box>
-        </Box>
       <FileUploadForm
+        {...{ eventEmitter: fileUploadFormEventEmitter }}
         onFileUploadComplete={() => {
           fetchRawFilesOverview();
         }}
-          openFilePickerEventEmitter={openFilePickerEventEmitter}
       />
       {buildFileList()}
-      </StyledDiv>
     </Panel>
   );
 };