MDE/PKFE-19 implemented confirmation and texfield dialogs

app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuConfirmationDialog.tsx

@@ -0,0 +1,107 @@
+import { FileTreeItemContextMenuStyledDialog } from '@/features/editor/components/fileTreeView/fileTreeItem';
+import { Close as CloseIcon } from '@mui/icons-material';
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+export interface FileTreeItemContextMenuConfirmationDialogProps {
+  open: boolean;
+  action: string;
+  content: { text: string; boldText: string };
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * `FileTreeItemContextMenuConfirmationDialog` component provides a confirmation dialog for actions related to file tree items.
+ *
+ * @description This component displays a confirmation dialog with a customizable action, content, and styling. It is used
+ * to confirm user actions such as deletion or renaming of file tree items. The dialog includes a title, content with bold text,
+ * and buttons for confirming or canceling the action.
+ *
+ * The dialog is styled using `FileTreeItemContextMenuStyledDialog` to ensure consistent appearance within the application.
+ *
+ * @component
+ *
+ * @param {FileTreeItemContextMenuConfirmationDialogProps} props - The props for the component.
+ * @param {boolean} props.open - A boolean indicating whether the dialog is open or not.
+ * @param {string} props.action - The action to be confirmed (e.g., "Delete", "Rename").
+ * @param {Object} props.content - The content to be displayed in the dialog.
+ * @param {string} props.content.text - The main text content of the dialog.
+ * @param {string} props.content.boldText - The text that should be displayed in bold.
+ * @param {Function} props.onClose - The function to be called when the dialog is closed.
+ * @param {Function} props.onConfirm - The function to be called when the action is confirmed.
+ *
+ * @example
+ * // Example usage of the FileTreeItemContextMenuConfirmationDialog component
+ * <FileTreeItemContextMenuConfirmationDialog
+ *   open={isDialogOpen}
+ *   action="Delete"
+ *   content={{ text: 'Are you sure you want to delete ', boldText: 'this item' }}
+ *   onClose={handleCloseDialog}
+ *   onConfirm={handleConfirmAction}
+ * />
+ *
+ * @returns {JSX.Element} The confirmation dialog component.
+ */
+export const FileTreeItemContextMenuConfirmationDialog: React.FC<FileTreeItemContextMenuConfirmationDialogProps> = ({
+  open,
+  action,
+  content,
+  onClose,
+  onConfirm,
+}) => {
+  const Theme = useTheme();
+  return (
+    <FileTreeItemContextMenuStyledDialog open={open} onClose={onClose}>
+      <DialogTitle>
+        <Grid container spacing={2} justifyContent='center' alignItems='center'>
+          <Grid item xs={9}>
+            <Typography sx={{ color: Theme.palette.primary.main, fontWeight: '700' }}>Confirm {action}</Typography>
+          </Grid>
+          <Grid item xs={3} textAlign={'right'}>
+            <IconButton
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+      </DialogTitle>
+      <DialogContent sx={{ py: 0 }}>
+        <Typography sx={{ fontSize: '1rem' }}>
+          {content.text}
+          <b>{content.boldText}</b>?
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.secondary }}>Cancel</Typography>
+        </Button>
+        <Button
+          onClick={onConfirm}
+          variant='outlined'
+          sx={{
+            borderColor: Theme.palette.error.main,
+            ':hover': { borderColor: Theme.palette.error.main, bgcolor: Theme.palette.error.main },
+            '& .MuiTouchRipple-root': {
+              color: Theme.palette.error.main,
+            },
+          }}
+        >
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.primary }}>{action}</Typography>
+        </Button>
+      </DialogActions>
+    </FileTreeItemContextMenuStyledDialog>
+  );
+};

app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuTextfieldDialog.tsx

@@ -0,0 +1,155 @@
+import { FileTreeItemContextMenuStyledDialog } from '@/features/editor/components/fileTreeView/fileTreeItem';
+import { FileTreeViewItemProps } from '@/features/editor/types';
+import { FileTypes } from '@/types';
+import { Close as CloseIcon } from '@mui/icons-material';
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useEffect, useState } from 'react';
+
+export interface FileTreeItemContextMenuTextfieldDialogProps {
+  open: boolean;
+  title: string;
+  label: string;
+  item?: FileTreeViewItemProps;
+  onClose: () => void;
+  onSave: (label: string) => void;
+}
+
+/**
+ * `FileTreeItemContextMenuTextfieldDialog` component provides a dialog for editing the label of a file tree item.
+ *
+ * @description This component displays a modal dialog for users to input or edit a label for a file or folder in the file tree.
+ * It includes validation to ensure the input is not empty and does not exceed 50 characters. The dialog features a title
+ * and a text field for input, with a save and cancel button. The dialog is styled with the application's theme for a consistent
+ * look and feel.
+ *
+ * @component
+ *
+ * @param {FileTreeItemContextMenuTextfieldDialogProps} props - The props for the component.
+ * @param {boolean} props.open - A boolean indicating whether the dialog is open or closed.
+ * @param {string} props.title - The title of the dialog.
+ * @param {string} props.label - The label for the text field.
+ * @param {FileTreeViewItemProps} [props.item] - Optional file tree item object that includes the current label and file type.
+ * @param {() => void} props.onClose - Callback function to be called when the dialog is closed.
+ * @param {(label: string) => void} props.onSave - Callback function to be called when the user saves the input.
+ *
+ * @example
+ * // Example usage of the FileTreeItemContextMenuTextfieldDialog component
+ * <FileTreeItemContextMenuTextfieldDialog
+ *   open={dialogOpen}
+ *   title="Edit Label"
+ *   label="New Label"
+ *   item={fileTreeItem}
+ *   onClose={() => setDialogOpen(false)}
+ *   onSave={(newLabel) => console.log('New label:', newLabel)}
+ * />
+ *
+ * @returns {JSX.Element} The dialog component with a title, text field, and action buttons for saving or closing.
+ */
+export const FileTreeItemContextMenuTextfieldDialog: React.FC<FileTreeItemContextMenuTextfieldDialogProps> = ({
+  open,
+  title,
+  label,
+  item,
+  onClose,
+  onSave,
+}) => {
+  const Theme = useTheme();
+  const [value, setValue] = useState(item?.label || '');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue(item?.label || '');
+      setError(null);
+    }
+  }, [open, item?.label]);
+
+  const validateInput = (input: string) => {
+    if (!input.trim()) {
+      return 'Input cannot be empty';
+    }
+
+    if (input.length > 50) {
+      return 'Input must be less than 50 characters';
+    }
+
+    return null; // No error
+  };
+
+  const handleSave = () => {
+    const validationError = validateInput(value);
+    if (validationError) {
+      setError(validationError);
+    } else {
+      onSave(value);
+    }
+  };
+
+  return (
+    <FileTreeItemContextMenuStyledDialog open={open} onClose={onClose}>
+      <DialogTitle>
+        <Grid container spacing={2} justifyContent='center' alignItems='center'>
+          <Grid item xs={9}>
+            <Typography sx={{ color: Theme.palette.primary.main, fontWeight: '700' }}>
+              {title} {item ? (item.fileType === FileTypes.FOLDER ? 'Folder' : 'File') : ''}
+            </Typography>
+          </Grid>
+          <Grid item xs={3} textAlign={'right'}>
+            <IconButton
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+      </DialogTitle>
+      <DialogContent sx={{ py: 0 }}>
+        <TextField
+          fullWidth
+          variant='standard'
+          label={label}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          error={Boolean(error)}
+          helperText={error}
+          sx={{
+            ':hover': { borderColor: Theme.palette.primary.main },
+            backgroundColor: Theme.palette.background.paper,
+            justifyItems: 'center',
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.secondary }}>Cancel</Typography>
+        </Button>
+        <Button
+          onClick={handleSave}
+          variant='outlined'
+          sx={{
+            borderColor: Theme.palette.primary.main,
+            ':hover': { borderColor: Theme.palette.primary.dark, bgcolor: Theme.palette.secondary.main },
+            '& .MuiTouchRipple-root': {
+              color: Theme.palette.primary.main,
+            },
+          }}
+        >
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.primary }}>Save</Typography>
+        </Button>
+      </DialogActions>
+    </FileTreeItemContextMenuStyledDialog>
+  );
+};