feat: use modal for managing link templates (#9955)

Editing with modals is more focused.

frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateDialog.tsx

@@ -0,0 +1,41 @@
+import { Dialog, DialogContent, DialogTitle } from '@mui/material';
+import type { ProjectLinkTemplateSchema } from 'openapi';
+import ProjectLinkTemplateEditor from './ProjectLinkTemplateEditor';
+
+interface IProjectLinkTemplateDialogProps {
+    template?: ProjectLinkTemplateSchema;
+    open: boolean;
+    onSave: (template: ProjectLinkTemplateSchema) => void;
+    onCancel: () => void;
+    isAdding: boolean;
+}
+
+const ProjectLinkTemplateDialog = ({
+    template,
+    open,
+    onSave,
+    onCancel,
+    isAdding,
+}: IProjectLinkTemplateDialogProps) => (
+    <Dialog
+        open={open}
+        onClose={onCancel}
+        maxWidth='sm'
+        fullWidth
+        aria-labelledby='dialog-link-template'
+    >
+        <DialogTitle id='dialog-link-template'>
+            {isAdding ? 'Add new link template' : 'Edit link template'}
+        </DialogTitle>
+        <DialogContent>
+            <ProjectLinkTemplateEditor
+                template={template}
+                onSave={onSave}
+                onCancel={onCancel}
+                isAdding={isAdding}
+            />
+        </DialogContent>
+    </Dialog>
+);
+
+export default ProjectLinkTemplateDialog;

frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, styled, TextField, Typography } from '@mui/material';
+import { Button, styled, TextField } from '@mui/material';
 import type { ProjectLinkTemplateSchema } from 'openapi';
 
 interface IProjectLinkTemplateEditorProps {
@@ -13,7 +13,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2),
-    padding: theme.spacing(3),
+    marginTop: theme.spacing(1),
 }));
 
 const StyledDialogActions = styled('div')(({ theme }) => ({
@@ -57,12 +57,6 @@ const ProjectLinkTemplateEditor = ({
 
     return (
         <StyledContainer>
-            <Typography
-                variant='h5'
-                sx={(theme) => ({ fontSize: theme.typography.body1.fontSize })}
-            >
-                {isAdding ? 'Add new link template' : 'Edit link template'}
-            </Typography>
             <TextField
                 label='Title (optional)'
                 fullWidth

frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplates.tsx

@@ -15,7 +15,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import type { ProjectLinkTemplateSchema } from 'openapi';
-import ProjectLinkTemplateEditor from './ProjectLinkTemplateEditor';
+import ProjectLinkTemplateDialog from './ProjectLinkTemplateDialog';
 import { Truncator } from 'component/common/Truncator/Truncator';
 
 interface IProjectLinkTemplatesProps {
@@ -59,13 +59,16 @@ const ProjectLinkTemplates = ({
     linkTemplates = [],
     setLinkTemplates,
 }: IProjectLinkTemplatesProps) => {
-    const [isAddingTemplate, setIsAddingTemplate] = useState(false);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [isAdding, setIsAdding] = useState(false);
     const [editingTemplateIndex, setEditingTemplateIndex] = useState<
         number | null
     >(null);
 
     const handleEditTemplate = (index: number) => {
         setEditingTemplateIndex(index);
+        setIsAdding(false);
+        setDialogOpen(true);
     };
 
     const handleSaveTemplate = (template: ProjectLinkTemplateSchema) => {
@@ -73,16 +76,16 @@ const ProjectLinkTemplates = ({
             const updatedTemplates = [...linkTemplates];
             updatedTemplates[editingTemplateIndex] = template;
             setLinkTemplates?.(updatedTemplates);
-            setEditingTemplateIndex(null);
         } else {
             setLinkTemplates?.([...linkTemplates, template]);
-            setIsAddingTemplate(false);
         }
+        handleCancelEdit();
     };
 
     const handleCancelEdit = () => {
         setEditingTemplateIndex(null);
-        setIsAddingTemplate(false);
+        setIsAdding(false);
+        setDialogOpen(false);
     };
 
     const handleDeleteTemplate = (index: number) => {
@@ -127,22 +130,6 @@ const ProjectLinkTemplates = ({
             {linkTemplates.length > 0 ? (
                 <StyledLinkTemplatesList>
                     {linkTemplates.map((template, index) => {
-                        if (editingTemplateIndex === index) {
-                            return (
-                                <StyledLinkTemplateItem
-                                    key={index}
-                                    style={{ listStyleType: 'none' }}
-                                >
-                                    <ProjectLinkTemplateEditor
-                                        template={template}
-                                        onSave={handleSaveTemplate}
-                                        onCancel={handleCancelEdit}
-                                        isAdding={false}
-                                    />
-                                </StyledLinkTemplateItem>
-                            );
-                        }
-
                         return (
                             <StyledLinkTemplateItem key={index}>
                                 <ListItemText
@@ -192,25 +179,30 @@ const ProjectLinkTemplates = ({
                 </StyledLinkTemplatesList>
             ) : null}
 
-            {isAddingTemplate && (
+            <ProjectLinkTemplateDialog
-                <ProjectLinkTemplateEditor
+                open={dialogOpen}
-                    onSave={handleSaveTemplate}
+                onSave={handleSaveTemplate}
-                    onCancel={handleCancelEdit}
+                onCancel={handleCancelEdit}
-                    isAdding={true}
+                isAdding={isAdding}
-                />
+                template={
-            )}
+                    editingTemplateIndex !== null
+                        ? linkTemplates[editingTemplateIndex]
+                        : undefined
+                }
+            />
 
-            {!isAddingTemplate && editingTemplateIndex === null && (
+            <Box display='flex' justifyContent='flex-start'>
-                <Box display='flex' justifyContent='flex-start'>
+                <Button
-                    <Button
+                    startIcon={<AddIcon />}
-                        startIcon={<AddIcon />}
+                    variant='outlined'
-                        variant='outlined'
+                    onClick={() => {
-                        onClick={() => setIsAddingTemplate(true)}
+                        setIsAdding(true);
-                    >
+                        setDialogOpen(true);
-                        Add link template
+                    }}
-                    </Button>
+                >
-                </Box>
+                    Add link template
-            )}
+                </Button>
+            </Box>
         </StyledLinkTemplatesContainer>
     );
 };