Skip to content

Commit

Permalink
[frontend] Popover Removal - Analyses
Browse files Browse the repository at this point in the history 
Co-authored-by: Bonsai8863 <[email protected]>
Co-authored-by: Param Constructor <[email protected]>
  • Loading branch information
@daimyo007 @Bonsai8863 @ParamConstructor
3 people authored Oct 25, 2024
1 parent 0d1bf99 commit 49cd421
Show file tree
Hide file tree
Showing 22 changed files with 1,114 additions and 509 deletions.
141 changes: 141 additions & 0 deletions ...i-front/src/private/components/analyses/external_references/ExternalReferenceDeletion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React, { FunctionComponent, useState } from 'react';
import { graphql } from 'react-relay';
import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import { useNavigate } from 'react-router-dom';
import Security from '../../../../utils/Security';
import { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted';
import { useFormatter } from '../../../../components/i18n';
import { deleteNodeFromId } from '../../../../utils/store';
import Transition from '../../../../components/Transition';
import useApiMutation from '../../../../utils/hooks/useApiMutation';

export const externalReferenceDeletionDeleteMutation = graphql`
mutation ExternalReferenceDeletionDeleteMutation($id: ID!) {
externalReferenceEdit(id: $id) {
delete
}
}
`;

interface ExternalReferenceDeletionProps {
id: string;
objectId?: string;
handleRemove: (() => void) | undefined;
isExternalReferenceAttachment?: boolean;
}

const ExternalReferenceDeletion: FunctionComponent<
ExternalReferenceDeletionProps
> = ({ id, objectId, handleRemove, isExternalReferenceAttachment }) => {
const { t_i18n } = useFormatter();
const navigate = useNavigate();
const [displayDelete, setDisplayDelete] = useState(false);
const [deleting, setDeleting] = useState(false);
const deleteSuccessMessage = t_i18n('', {
id: '... successfully deleted',
values: { entity_type: t_i18n('entity_External-Reference') },
});
const [commit] = useApiMutation(
externalReferenceDeletionDeleteMutation,
undefined,
{ successMessage: deleteSuccessMessage },
);
const handleOpenDelete = () => {
setDisplayDelete(true);
};
const handleCloseDelete = () => {
setDisplayDelete(false);
};
const submitDelete = () => {
setDeleting(true);
commit({
variables: {
id,
},
updater: (store) => {
if (handleRemove && objectId) {
deleteNodeFromId(
store,
objectId,
'Pagination_externalReferences',
undefined,
id,
);
}
},
onCompleted: () => {
setDeleting(false);
if (handleRemove) {
handleCloseDelete();
} else {
navigate('/dashboard/analyses/external_references');
}
},
});
};
return (
<>
<Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
<Button
color="error"
variant="contained"
onClick={handleOpenDelete}
disabled={deleting}
sx={{ marginTop: 2 }}
>
{t_i18n('Delete')}
</Button>
</Security>
<Dialog
PaperProps={{ elevation: 1 }}
open={displayDelete}
keepMounted={true}
TransitionComponent={Transition}
onClose={handleCloseDelete}
>
<DialogContent>
<DialogContentText>
{t_i18n('Do you want to delete this external reference?')}
{isExternalReferenceAttachment && (
<Alert
severity="warning"
variant="outlined"
style={{ position: 'relative', marginTop: 20 }}
>
{t_i18n(
'This external reference is linked to a file. If you delete it, the file will be deleted as well.',
)}
</Alert>
)}
</DialogContentText>
{isExternalReferenceAttachment && (
<Alert
severity="warning"
variant="outlined"
style={{ position: 'relative', marginTop: 20 }}
>
{t_i18n(
'This external reference is linked to a file. If you delete it, the file will be deleted as well.',
)}
</Alert>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDelete} disabled={deleting}>
{t_i18n('Cancel')}
</Button>
<Button color="secondary" onClick={submitDelete} disabled={deleting}>
{t_i18n('Delete')}
</Button>
</DialogActions>
</Dialog>
</>
);
};

export default ExternalReferenceDeletion;
17 changes: 13 additions & 4 deletions ...src/private/components/analyses/external_references/ExternalReferenceEditionContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import useHelper from 'src/utils/hooks/useHelper';
import { useFormatter } from '../../../../components/i18n';
import { ExternalReferenceEditionContainer_externalReference$data } from './__generated__/ExternalReferenceEditionContainer_externalReference.graphql';
import ExternalReferenceEditionOverview from './ExternalReferenceEditionOverview';
import ExternalReferenceDeletion from './ExternalReferenceDeletion';

interface ExternalReferenceEditionContainerProps {
handleClose: () => void
Expand Down Expand Up @@ -34,10 +35,18 @@ const ExternalReferenceEditionContainer: FunctionComponent<ExternalReferenceEdit
open={open}
controlledDial={isFABReplaced ? controlledDial : undefined}
>
<ExternalReferenceEditionOverview
externalReference={externalReference}
context={editContext}
/>
<>
<ExternalReferenceEditionOverview
externalReference={externalReference}
context={editContext}
/>
{isFABReplaced && (
<ExternalReferenceDeletion
id={externalReference.id}
handleRemove={undefined}
/>
)}
</>
</Drawer>
);
};
Expand Down
175 changes: 97 additions & 78 deletions ...ti-front/src/private/components/analyses/external_references/ExternalReferencePopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import { MoreVertOutlined } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import ToggleButton from '@mui/material/ToggleButton';
import MoreVert from '@mui/icons-material/MoreVert';
import { useFormatter } from '../../../../components/i18n';
import { QueryRenderer } from '../../../../relay/environment';
import ExternalReferenceEditionContainer from './ExternalReferenceEditionContainer';
import { ExternalReferencePopoverEditionQuery$data } from './__generated__/ExternalReferencePopoverEditionQuery.graphql';
import { deleteNodeFromId } from '../../../../utils/store';
import Transition from '../../../../components/Transition';
import useApiMutation from '../../../../utils/hooks/useApiMutation';
import useHelper from '../../../../utils/hooks/useHelper';

export const externalReferencePopoverDeletionMutation = graphql`
mutation ExternalReferencePopoverDeletionMutation($id: ID!) {
Expand All @@ -40,18 +43,21 @@ interface ExternalReferencePopoverProps {
objectId?: string;
handleRemove: (() => void) | undefined;
isExternalReferenceAttachment?: boolean;
variant?: string;
}

const ExternalReferencePopover: FunctionComponent<
ExternalReferencePopoverProps
> = ({ id, objectId, handleRemove, isExternalReferenceAttachment }) => {
> = ({ id, objectId, handleRemove, isExternalReferenceAttachment, variant }) => {
const { t_i18n } = useFormatter();
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
const [displayEdit, setDisplayEdit] = useState(false);
const [displayDelete, setDisplayDelete] = useState(false);
const [deleting, setDeleting] = useState(false);
const [commit] = useApiMutation(externalReferencePopoverDeletionMutation);
const { isFeatureEnable } = useHelper();
const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
const handleOpen = (event: React.SyntheticEvent) => {
setAnchorEl(event.currentTarget);
};
Expand Down Expand Up @@ -100,85 +106,98 @@ ExternalReferencePopoverProps
},
});
};
return (
<>
<IconButton
onClick={handleOpen}
aria-haspopup="true"
style={{ marginTop: 3 }}
size="large"
color="primary"
>
<MoreVertOutlined />
</IconButton>
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={handleOpenUpdate}>{t_i18n('Update')}</MenuItem>
{handleRemove && !isExternalReferenceAttachment && (
<MenuItem
onClick={() => {
handleRemove();
handleClose();
}}

return (isFABReplaced && variant !== 'inLine')
? (<></>)
: (
<>
{variant === 'inLine' ? (
<IconButton
onClick={handleOpen}
aria-haspopup="true"
style={{ marginTop: 3 }}
size="large"
color="primary"
>
<MoreVertOutlined />
</IconButton>
) : (
<ToggleButton
value="popover"
size="small"
onClick={handleOpen}
>
{t_i18n('Remove from this object')}
</MenuItem>
<MoreVert fontSize="small" color="primary" />
</ToggleButton>
)}
<MenuItem onClick={handleOpenDelete}>{t_i18n('Delete')}</MenuItem>
</Menu>
<QueryRenderer
query={externalReferenceEditionQuery}
variables={{ id }}
render={({
props,
}: {
props: ExternalReferencePopoverEditionQuery$data;
}) => {
if (props && props.externalReference) {
return (
<ExternalReferenceEditionContainer
externalReference={props.externalReference}
handleClose={handleCloseUpdate}
open={displayEdit}
/>
);
}
return <div />;
}}
/>
<Dialog
PaperProps={{ elevation: 1 }}
open={displayDelete}
keepMounted={true}
TransitionComponent={Transition}
onClose={handleCloseDelete}
>
<DialogContent>
<DialogContentText>
{t_i18n('Do you want to delete this external reference?')}
{isExternalReferenceAttachment && (
<Alert
severity="warning"
variant="outlined"
style={{ position: 'relative', marginTop: 20 }}
>
{t_i18n(
'This external reference is linked to a file. If you delete it, the file will be deleted as well.',
)}
</Alert>
)}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDelete} disabled={deleting}>
{t_i18n('Cancel')}
</Button>
<Button color="secondary" onClick={submitDelete} disabled={deleting}>
{t_i18n('Delete')}
</Button>
</DialogActions>
</Dialog>
</>
);
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={handleOpenUpdate}>{t_i18n('Update')}</MenuItem>
{handleRemove && !isExternalReferenceAttachment && (
<MenuItem
onClick={() => {
handleRemove();
handleClose();
}}
>
{t_i18n('Remove from this object')}
</MenuItem>
)}
<MenuItem onClick={handleOpenDelete}>{t_i18n('Delete')}</MenuItem>
</Menu>
<QueryRenderer
query={externalReferenceEditionQuery}
variables={{ id }}
render={({
props,
}: {
props: ExternalReferencePopoverEditionQuery$data;
}) => {
if (props && props.externalReference) {
return (
<ExternalReferenceEditionContainer
externalReference={props.externalReference}
handleClose={handleCloseUpdate}
open={displayEdit}
/>
);
}
return <div />;
}}
/>
<Dialog
PaperProps={{ elevation: 1 }}
open={displayDelete}
keepMounted={true}
TransitionComponent={Transition}
onClose={handleCloseDelete}
>
<DialogContent>
<DialogContentText>
{t_i18n('Do you want to delete this external reference?')}
{isExternalReferenceAttachment && (
<Alert
severity="warning"
variant="outlined"
style={{ position: 'relative', marginTop: 20 }}
>
{t_i18n(
'This external reference is linked to a file. If you delete it, the file will be deleted as well.',
)}
</Alert>
)}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDelete} disabled={deleting}>
{t_i18n('Cancel')}
</Button>
<Button color="secondary" onClick={submitDelete} disabled={deleting}>
{t_i18n('Delete')}
</Button>
</DialogActions>
</Dialog>
</>
);
};

export default ExternalReferencePopover;
Loading

0 comments on commit 49cd421

Please sign in to comment.