Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Editing with modals is more focused.
This commit is contained in:
Tymoteusz Czech 2025-05-12 11:52:48 +02:00 committed by GitHub
parent 5614cb56d3
commit 1ccd201a25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 74 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateDialog.tsx Normal file
View File

@ -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;

10
frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx
View File

@ -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

70
frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplates.tsx
View File

@ -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 && (
<ProjectLinkTemplateEditor
onSave={handleSaveTemplate}
onCancel={handleCancelEdit}
isAdding={true}
/>
)}
<ProjectLinkTemplateDialog
open={dialogOpen}
onSave={handleSaveTemplate}
onCancel={handleCancelEdit}
isAdding={isAdding}
template={
editingTemplateIndex !== null
? linkTemplates[editingTemplateIndex]
: undefined
}
/>
{!isAddingTemplate && editingTemplateIndex === null && (
<Box display='flex' justifyContent='flex-start'>
<Button
startIcon={<AddIcon />}
variant='outlined'
onClick={() => setIsAddingTemplate(true)}
>
Add link template
</Button>
</Box>
)}
<Box display='flex' justifyContent='flex-start'>
<Button
startIcon={<AddIcon />}
variant='outlined'
onClick={() => {
setIsAdding(true);
setDialogOpen(true);
}}
>
Add link template
</Button>
</Box>
</StyledLinkTemplatesContainer>
);
};