diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuConfirmationDialog.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuConfirmationDialog.tsx
new file mode 100644
index 0000000..e4fd98c
--- /dev/null
+++ b/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
+ *
+ *
+ * @returns {JSX.Element} The confirmation dialog component.
+ */
+export const FileTreeItemContextMenuConfirmationDialog: React.FC = ({
+ open,
+ action,
+ content,
+ onClose,
+ onConfirm,
+}) => {
+ const Theme = useTheme();
+ return (
+
+
+
+
+ Confirm {action}
+
+
+
+
+
+
+
+
+
+
+ {content.text}
+ {content.boldText}?
+
+
+
+
+
+
+
+ );
+};
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuTextfieldDialog.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuTextfieldDialog.tsx
new file mode 100644
index 0000000..d01e2a7
--- /dev/null
+++ b/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
+ * 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 = ({
+ open,
+ title,
+ label,
+ item,
+ onClose,
+ onSave,
+}) => {
+ const Theme = useTheme();
+ const [value, setValue] = useState(item?.label || '');
+ const [error, setError] = useState(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 (
+
+
+
+
+
+ {title} {item ? (item.fileType === FileTypes.FOLDER ? 'Folder' : 'File') : ''}
+
+
+
+
+
+
+
+
+
+
+ setValue(event.target.value)}
+ error={Boolean(error)}
+ helperText={error}
+ sx={{
+ ':hover': { borderColor: Theme.palette.primary.main },
+ backgroundColor: Theme.palette.background.paper,
+ justifyItems: 'center',
+ }}
+ />
+
+
+
+
+
+
+ );
+};