feat(web): introduce folders to organize flows

2025-02-04 15:24:07 +00:00
parent e496e20c17
commit 8e7d06b5dc
18 changed files with 842 additions and 80 deletions
--- a/packages/web/src/components/EditFolderDialog/index.jsx
+++ b/packages/web/src/components/EditFolderDialog/index.jsx
@@ -0,0 +1,107 @@
+import CloseIcon from '@mui/icons-material/Close';
+import SaveIcon from '@mui/icons-material/Save';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import * as React from 'react';
+
+import { getUnifiedErrorMessage } from 'helpers/errors';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useUpdateFolder from 'hooks/useUpdateFolder';
+
+export default function EditFolderDialog(props) {
+  const { open = true, onClose, folder = {} } = props;
+
+  const [folderName, setFolderName] = React.useState(folder.name);
+  const formatMessage = useFormatMessage();
+
+  const {
+    mutate: updateFolder,
+    error,
+    isError,
+    isSuccess,
+  } = useUpdateFolder(folder.id);
+
+  const handleUpdateFolder = () => {
+    updateFolder({ name: folderName });
+  };
+
+  const handleTextFieldChange = (event) => {
+    setFolderName(event.target.value);
+  };
+
+  const handleTextFieldKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleUpdateFolder();
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} data-test="edit-folder-dialog">
+      <DialogTitle>{formatMessage('editFolderDialog.title')}</DialogTitle>
+
+      <IconButton
+        aria-label="close"
+        onClick={onClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+
+      <DialogContent>
+        <DialogContentText>
+          {formatMessage('editFolderDialog.description')}
+
+          <TextField
+            sx={{ mt: 2 }}
+            value={folderName}
+            onKeyDown={handleTextFieldKeyDown}
+            onChange={handleTextFieldChange}
+            label={formatMessage('editFolderDialog.folderNameInputLabel')}
+            fullWidth
+          />
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions sx={{ mb: 1 }}>
+        <Button
+          variant="contained"
+          onClick={handleUpdateFolder}
+          data-test="edit-folder-dialog-update-button"
+          startIcon={<SaveIcon />}
+          Save
+        >
+          {formatMessage('editFolderDialog.update')}
+        </Button>
+      </DialogActions>
+
+      {isError && (
+        <Alert
+          data-test="edit-folder-dialog-generic-error-alert"
+          severity="error"
+          sx={{ whiteSpace: 'pre-line' }}
+        >
+          {getUnifiedErrorMessage(error?.response?.data?.errors) ||
+            formatMessage('genericError')}
+        </Alert>
+      )}
+
+      {isSuccess && (
+        <Alert data-test="edit-folder-dialog-success-alert" severity="success">
+          {formatMessage('editFolderDialog.successfullyUpdatedFolder')}
+        </Alert>
+      )}
+    </Dialog>
+  );
+}