feat: [DHIS2-18017] Ability to unlink event from edit/view event page

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-10-25T18:18:11.518Z\n"
-"PO-Revision-Date: 2024-10-25T18:18:11.518Z\n"
+"POT-Creation-Date: 2024-11-06T12:51:22.564Z\n"
+"PO-Revision-Date: 2024-11-06T12:51:22.564Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1493,12 +1493,54 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
-msgid "An error occurred while loading the widget."
-msgstr "An error occurred while loading the widget."
+msgid "An error occurred while unlinking and deleting the event."
+msgstr "An error occurred while unlinking and deleting the event."
+
+msgid ""
+"Are you sure you want delete the relationship and the related event? This "
+"will permanently remove the event and all related data."
+msgstr ""
+"Are you sure you want delete the relationship and the related event? This "
+"will permanently remove the event and all related data."
+
+msgid "Yes, unlink and delete event"
+msgstr "Yes, unlink and delete event"
+
+msgid "Unlink relationship"
+msgstr "Unlink relationship"
+
+msgid ""
+"Are you sure you want to delete the relationship between these two events? "
+"This will only delete the relationship, not the other event"
+msgstr ""
+"Are you sure you want to delete the relationship between these two events? "
+"This will only delete the relationship, not the other event"
+
+msgid "Yes, unlink relationship"
+msgstr "Yes, unlink relationship"
 
 msgid "View linked event"
 msgstr "View linked event"
 
+msgid "You do not have access to remove the relationship between these two events"
+msgstr "You do not have access to remove the relationship between these two events"
+
+msgid "Unlink event"
+msgstr "Unlink event"
+
+msgid ""
+"You do not have access remove the relationship between these two events and "
+"delete the other event"
+msgstr ""
+"You do not have access remove the relationship between these two events and "
+"delete the other event"
+
+msgid "Unlink and delete event"
+msgstr "Unlink and delete event"
+
+msgid "An error occurred while loading the widget."
+msgstr "An error occurred while loading the widget."
+
 msgid "Scheduled"
 msgstr "Scheduled"
 

src/core_modules/capture-core/components/WidgetRelatedStages/ScheduleInOrgUnit/ScheduleInOrgUnit.component.js

@@ -44,7 +44,7 @@ type Props = {
     ...CssClasses,
 }
 
-export const ScheduleInOrgUnitPlain = ({
+const ScheduleInOrgUnitPlain = ({
     relatedStagesDataValues,
     setRelatedStagesDataValues,
     saveAttempted,

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/Modal/UnlinkAndDeleteModal.js

@@ -0,0 +1,87 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import {
+    Button,
+    ButtonStrip,
+    Modal,
+    ModalActions,
+    ModalContent,
+    ModalTitle,
+} from '@dhis2/ui';
+import log from 'loglevel';
+import { useDataEngine, useAlert } from '@dhis2/app-runtime';
+import { useMutation, useQueryClient } from 'react-query';
+import { ReactQueryAppNamespace } from 'capture-core/utils/reactQueryHelpers';
+import type { Props } from './UnlinkAndDeleteModal.types';
+
+export const UnlinkAndDeleteModal = ({
+    setOpenModal,
+    eventId,
+    originEventId,
+}: Props) => {
+    const dataEngine = useDataEngine();
+    const queryClient = useQueryClient();
+    const { show: showErrorAlert } = useAlert(
+        i18n.t('An error occurred while unlinking and deleting the event.'),
+        { critical: true },
+    );
+
+    const deleteEvent = async () => {
+        const mutation = {
+            resource: 'tracker?async=false&importStrategy=DELETE',
+            type: 'create',
+            data: { events: [{ event: eventId }] },
+        };
+
+        return dataEngine.mutate(mutation);
+    };
+
+    const mutation = useMutation(deleteEvent, {
+        onSuccess: () => {
+            queryClient.invalidateQueries([
+                ReactQueryAppNamespace,
+                'linkedEventByOriginEvent',
+                originEventId,
+            ]);
+            setOpenModal(false);
+        },
+        onError: (error) => {
+            showErrorAlert();
+            log.error(
+                `Failed to unlink and delete event with ID: ${eventId}`,
+                error,
+            );
+        },
+    });
+
+    return (
+        <Modal dataTest="event-unlink-and-delete-modal">
+            <ModalTitle>{i18n.t('Delete event')}</ModalTitle>
+            <ModalContent>
+                <p>
+                    {i18n.t(
+                        'Are you sure you want delete the relationship and the related event? This will permanently remove the event and all related data.',
+                    )}
+                </p>
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button
+                        onClick={() => setOpenModal(false)}
+                        secondary
+                    >
+                        {i18n.t('No, cancel')}
+                    </Button>
+                    <Button
+                        destructive
+                        onClick={() => mutation.mutate()}
+                        disabled={mutation.isLoading}
+                    >
+                        {i18n.t('Yes, unlink and delete event')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    );
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/Modal/UnlinkAndDeleteModal.types.js

@@ -0,0 +1,6 @@
+// @flow
+export type Props = {|
+        setOpenModal: (open: boolean) => void,
+        eventId: string,
+        originEventId: string,
+|};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/Modal/UnlinkModal.js

@@ -0,0 +1,82 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import {
+    Modal,
+    ModalContent,
+    ModalTitle,
+    ModalActions,
+    ButtonStrip,
+    Button,
+} from '@dhis2/ui';
+import log from 'loglevel';
+import { useDataEngine, useAlert } from '@dhis2/app-runtime';
+import { useMutation, useQueryClient } from 'react-query';
+import { ReactQueryAppNamespace } from 'capture-core/utils/reactQueryHelpers';
+import type { Props } from './UnlinkModal.types';
+
+export const UnlinkModal = ({
+    setOpenModal,
+    relationshipId,
+    originEventId,
+}: Props) => {
+    const dataEngine = useDataEngine();
+    const queryClient = useQueryClient();
+    const { show: showErrorAlert } = useAlert(
+        i18n.t('An error occurred while unlinking and deleting the event.'),
+        { critical: true },
+    );
+
+    const deleteRelationship = async () => {
+        const mutation = {
+            resource: 'tracker?importStrategy=DELETE&async=false',
+            type: 'create',
+            data: { relationships: [{ relationship: relationshipId }] },
+        };
+
+        return dataEngine.mutate(mutation);
+    };
+
+    const mutation = useMutation(deleteRelationship, {
+        onSuccess: () => {
+            queryClient.invalidateQueries([
+                ReactQueryAppNamespace,
+                'linkedEventByOriginEvent',
+                originEventId,
+            ]);
+            setOpenModal(false);
+        },
+        onError: (error) => {
+            showErrorAlert();
+            log.error(
+                `Failed to remove relationship with id ${relationshipId}`,
+                error,
+            );
+        },
+    });
+
+    return (
+        <Modal dataTest="event-unlink-modal">
+            <ModalTitle>
+                {i18n.t('Unlink relationship')}
+            </ModalTitle>
+            <ModalContent>
+                <p>{i18n.t('Are you sure you want to delete the relationship between these two events? This will only delete the relationship, not the other event')}</p>
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button onClick={() => setOpenModal(false)} secondary>
+                        {i18n.t('No, cancel')}
+                    </Button>
+                    <Button
+                        destructive
+                        onClick={() => mutation.mutate()}
+                        disabled={mutation.isLoading}
+                    >
+                        {i18n.t('Yes, unlink relationship')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    );
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/Modal/UnlinkModal.types.js

@@ -0,0 +1,6 @@
+// @flow
+export type Props = {|
+    setOpenModal: (open: boolean) => void,
+    relationshipId: string,
+    originEventId: string,
+|};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/Modal/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { UnlinkModal } from './UnlinkModal';
+export { UnlinkAndDeleteModal } from './UnlinkAndDeleteModal';

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/OverflowMenu.component.js

@@ -0,0 +1,114 @@
+// @flow
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+    Divider,
+    FlyoutMenu,
+    IconDelete16,
+    IconLink16,
+    IconMore16,
+    IconView16,
+    MenuItem,
+} from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { ConditionalTooltip } from '../../Tooltips/ConditionalTooltip';
+import { OverflowButton } from '../../Buttons';
+import { UnlinkModal, UnlinkAndDeleteModal } from './Modal';
+import { buildUrlQueryString } from '../../../utils/routing';
+import type { Props } from './OverflowMenu.types';
+import { useRelationshipTypeAccess } from '../hooks';
+
+export const OverflowMenuComponent = ({
+    linkedEvent,
+    relationshipId,
+    orgUnitId,
+    originEventId,
+    stageWriteAccess,
+    relationshipType,
+}: Props) => {
+    const { push } = useHistory();
+    const [isActionsOpen, setIsActionsOpen] = useState(false);
+    const [isUnlinkModalOpen, setIsUnlinkModalOpen] = useState(false);
+    const [isUnlinkAndDeleteModalOpen, setIsUnlinkAndDeleteModalOpen] = useState(false);
+    const { relationshipTypeWriteAccess } = useRelationshipTypeAccess(relationshipType);
+
+    const handleViewLinkedEvent = () => {
+        push(`/enrollmentEventEdit?${buildUrlQueryString({ eventId: linkedEvent.event, orgUnitId })}`);
+        setIsActionsOpen(false);
+    };
+
+    const handleUnlinkEvent = () => {
+        setIsUnlinkModalOpen(true);
+        setIsActionsOpen(false);
+    };
+
+    const handleUnlinkAndDeleteEvent = () => {
+        setIsUnlinkAndDeleteModalOpen(true);
+        setIsActionsOpen(false);
+    };
+
+    return (
+        <>
+            <OverflowButton
+                open={isActionsOpen}
+                onClick={() => setIsActionsOpen(prev => !prev)}
+                icon={<IconMore16 />}
+                small
+                secondary
+                dataTest="widget-linked-event-overflow-menu"
+                component={
+                    <FlyoutMenu dense maxWidth="250px">
+                        <MenuItem
+                            label={i18n.t('View linked event')}
+                            icon={<IconView16 />}
+                            dataTest="event-overflow-view-linked-event"
+                            onClick={handleViewLinkedEvent}
+                        />
+                        <Divider />
+                        <ConditionalTooltip
+                            content={i18n.t('You do not have access to remove the relationship between these two events')}
+                            enabled={!relationshipTypeWriteAccess}
+                        >
+                            <MenuItem
+                                label={i18n.t('Unlink event')}
+                                icon={<IconLink16 />}
+                                disabled={!relationshipTypeWriteAccess}
+                                dense
+                                dataTest="event-overflow-unlink-event"
+                                onClick={handleUnlinkEvent}
+                            />
+                        </ConditionalTooltip>
+                        <ConditionalTooltip
+                            content={i18n.t('You do not have access remove the relationship between these two events and delete the other event')}
+                            enabled={!stageWriteAccess || !relationshipTypeWriteAccess}
+                        >
+                            <MenuItem
+                                label={i18n.t('Unlink and delete event')}
+                                icon={<IconDelete16 />}
+                                disabled={!stageWriteAccess || !relationshipTypeWriteAccess}
+                                dense
+                                destructive
+                                dataTest="event-overflow-unlink-and-delete-event"
+                                onClick={handleUnlinkAndDeleteEvent}
+                            />
+                        </ConditionalTooltip>
+                    </FlyoutMenu>
+                }
+            />
+            {isUnlinkModalOpen && (
+                <UnlinkModal
+                    setOpenModal={setIsUnlinkModalOpen}
+                    relationshipId={relationshipId}
+                    originEventId={originEventId}
+                />
+            )}
+            {isUnlinkAndDeleteModalOpen && (
+                <UnlinkAndDeleteModal
+                    setOpenModal={setIsUnlinkAndDeleteModalOpen}
+                    eventId={linkedEvent.event}
+                    originEventId={originEventId}
+                />
+            )}
+        </>
+    );
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/OverflowMenu.types.js

@@ -0,0 +1,9 @@
+// @flow
+export type Props = {
+    linkedEvent: any,
+    relationshipId: string,
+    orgUnitId: string,
+    originEventId: string,
+    stageWriteAccess: boolean,
+    relationshipType: string,
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/OverflowMenu/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { OverflowMenuComponent } from './OverflowMenu.component';