feat: handle long file names in ImportFlowDialog

packages/web/src/components/FileUploadInput/index.js

@@ -17,6 +17,7 @@ const VisuallyHiddenInput = styled('input')({
 });
 
 export default function FileUploadInput(props) {
+  const { onChange, children, ...rest } = props;
   return (
     <Button
       component="label"
@@ -24,10 +25,11 @@ export default function FileUploadInput(props) {
       variant="contained"
       tabIndex={-1}
       startIcon={<AttachFileIcon />}
+      {...rest}
     >
-      {props.children}
+      {children}
 
-      <VisuallyHiddenInput type="file" onChange={props.onChange} />
+      <VisuallyHiddenInput type="file" onChange={onChange} />
     </Button>
   );
 }

packages/web/src/components/ImportFlowDialog/index.jsx

@@ -11,6 +11,8 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Typography from '@mui/material/Typography';
 import UploadIcon from '@mui/icons-material/Upload';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
 
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -80,24 +82,27 @@ function ImportFlowDialog(props) {
       <DialogContent>
         <DialogContentText>
           {formatMessage('importFlowDialog.description')}
-
-          <Stack direction="row" alignItems="center" spacing={2} mt={4}>
-            <FileUploadInput
-              onChange={handleFileSelection}
-              data-test="import-flow-dialog-button"
-            >
-              {formatMessage('importFlowDialog.selectFile')}
-            </FileUploadInput>
-
-            {selectedFile && (
-              <Typography>
-                {formatMessage('importFlowDialog.selectedFileInformation', {
-                  fileName: selectedFile.name,
-                })}
-              </Typography>
-            )}
-          </Stack>
         </DialogContentText>
+        <Stack direction="row" alignItems="center" spacing={2} mt={4}>
+          <FileUploadInput
+            onChange={handleFileSelection}
+            data-test="import-flow-dialog-button"
+            sx={{ flexShrink: 0 }}
+          >
+            {formatMessage('importFlowDialog.selectFile')}
+          </FileUploadInput>
+
+          {selectedFile && (
+            <Box overflow="hidden">
+              <Typography>
+                {formatMessage('importFlowDialog.selectedFileInformation')}
+              </Typography>
+              <Tooltip title={selectedFile.name}>
+                <Typography noWrap>{selectedFile.name}</Typography>
+              </Tooltip>
+            </Box>
+          )}
+        </Stack>
       </DialogContent>
 
       <DialogActions sx={{ mb: 1 }}>

packages/web/src/locales/en.json

@@ -329,7 +329,7 @@
   "importFlowDialog.selectFile": "Select file",
   "importFlowDialog.close": "Close",
   "importFlowDialog.import": "Import",
-  "importFlowDialog.selectedFileInformation": "Selected file: {fileName}",
+  "importFlowDialog.selectedFileInformation": "Selected file:",
   "importFlowDialog.successfullyImportedFlow": "The flow has been successfully imported. You can view it <link>here</link>.",
   "folders.allFlows": "All flows",
   "folders.unassignedFlows": "Uncategorized flows",