diff --git a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateDialog.tsx b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateDialog.tsx new file mode 100644 index 0000000000..21a2343437 --- /dev/null +++ b/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) => ( + + + {isAdding ? 'Add new link template' : 'Edit link template'} + + + + + +); + +export default ProjectLinkTemplateDialog; diff --git a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx index b282d01256..2419acbe28 100644 --- a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx +++ b/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 ( - ({ fontSize: theme.typography.body1.fontSize })} - > - {isAdding ? 'Add new link template' : 'Edit link template'} - { - 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 ? ( {linkTemplates.map((template, index) => { - if (editingTemplateIndex === index) { - return ( - - - - ); - } - return ( ) : null} - {isAddingTemplate && ( - - )} + - {!isAddingTemplate && editingTemplateIndex === null && ( - - - - )} + + + ); };