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) => (
+
+);
+
+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 && (
-
- }
- variant='outlined'
- onClick={() => setIsAddingTemplate(true)}
- >
- Add link template
-
-
- )}
+
+ }
+ variant='outlined'
+ onClick={() => {
+ setIsAdding(true);
+ setDialogOpen(true);
+ }}
+ >
+ Add link template
+
+
);
};