feat: [DHIS2-17575] disable create new buttons if no data write access

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-08-08T11:49:13.423Z\n"
-"PO-Revision-Date: 2024-08-08T11:49:13.423Z\n"
+"POT-Creation-Date: 2024-08-10T10:42:21.141Z\n"
+"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1499,6 +1499,12 @@ msgstr "Report date"
 msgid "Please select a valid event"
 msgstr "Please select a valid event"
 
+msgid "You do not have access to create events in this stage"
+msgstr "You do not have access to create events in this stage"
+
+msgid "This stage can only have one event"
+msgstr "This stage can only have one event"
+
 msgid "New {{ eventName }} event"
 msgstr "New {{ eventName }} event"
 
@@ -1514,9 +1520,6 @@ msgstr "Reset list"
 msgid "Go to full {{ eventName }}"
 msgstr "Go to full {{ eventName }}"
 
-msgid "This stage can only have one event"
-msgstr "This stage can only have one event"
-
 msgid "Events could not be retrieved. Please try again later."
 msgstr "Events could not be retrieved. Please try again later."
 

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/EnrollmentQuickActions.component.js

@@ -42,6 +42,7 @@ const EnrollmentQuickActionsComponent = ({ stages, events, ruleEffects, classes
         () =>
             stagesWithEventCount.every(
                 programStage =>
+                    (!programStage.dataAccess.write) ||
                     (!programStage.repeatable && programStage.eventCount > 0) ||
                     hiddenProgramStageRuleEffects?.find(ruleEffect => ruleEffect.id === programStage.id),
             ),
@@ -61,35 +62,37 @@ const EnrollmentQuickActionsComponent = ({ stages, events, ruleEffects, classes
             onClose={() => setOpen(false)}
             onOpen={() => setOpen(true)}
         >
-            {ready && <div
-                className={classes.contentContainer}
-                data-test={'quick-action-button-container'}
-            >
-                <QuickActionButton
-                    icon={<IconAdd24 color={colors.grey700} />}
-                    label={i18n.t('New Event')}
-                    onClickAction={() => onNavigationFromQuickActions(tabMode.REPORT)}
-                    dataTest={'quick-action-button-report'}
-                    disable={noStageAvailable}
-                />
+            {ready && (
+                <div
+                    className={classes.contentContainer}
+                    data-test={'quick-action-button-container'}
+                >
+                    <QuickActionButton
+                        icon={<IconAdd24 color={colors.grey700} />}
+                        label={i18n.t('New Event')}
+                        onClickAction={() => onNavigationFromQuickActions(tabMode.REPORT)}
+                        dataTest={'quick-action-button-report'}
+                        disable={noStageAvailable}
+                    />
 
-                <QuickActionButton
-                    icon={<IconCalendar24 color={colors.grey700} />}
-                    label={i18n.t('Schedule an event')}
-                    onClickAction={() => onNavigationFromQuickActions(tabMode.SCHEDULE)}
-                    dataTest={'quick-action-button-schedule'}
-                    disable={noStageAvailable}
-                />
+                    <QuickActionButton
+                        icon={<IconCalendar24 color={colors.grey700} />}
+                        label={i18n.t('Schedule an event')}
+                        onClickAction={() => onNavigationFromQuickActions(tabMode.SCHEDULE)}
+                        dataTest={'quick-action-button-schedule'}
+                        disable={noStageAvailable}
+                    />
 
-                {/* DHIS2-13016: Should hide Make referral until the feature is developped
+                    {/* DHIS2-13016: Should hide Make referral until the feature is developped
                     <QuickActionButton
                     icon={<IconArrowRightMulti24 />}
                     label={i18n.t('Make referral')}
                     onClickAction={() => onNavigationFromQuickActions(tabMode.REFER)}
                     dataTest={'quick-action-button-refer'}
                     disable={noStageAvailable}
                 /> */}
-            </div>}
+                </div>
+            )}
         </Widget>
     );
 };

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js

@@ -27,7 +27,7 @@ const ProgramStageSelectorComponentPlain = ({ programStages, onSelectProgramStag
     <div className={classes.container}>
         {programStages.map((programStage) => {
             const disableStage =
-                (!programStage.repeatable && programStage.eventCount > 0) || programStage.hiddenProgramStage;
+                !programStage.dataAccess.write || (!programStage.repeatable && programStage.eventCount > 0) || programStage.hiddenProgramStage;
             return (
                 <div
                     key={programStage.id}

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.container.js

@@ -46,6 +46,7 @@ export const ProgramStageSelector = ({ programId, orgUnitId, teiId, enrollmentId
     const programStages = useMemo(() => !programLoading && program?.programStages?.reduce((accStage, currentStage) => {
         accStage.push({
             id: currentStage.id,
+            dataAccess: currentStage.access.data,
             eventCount: (enrollment?.events
                 ?.filter(event => event.programStage === currentStage.id)
                 ?.length

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js

@@ -1,21 +1,21 @@
 // @flow
 import React, { type ComponentType, useState, useCallback } from 'react';
 import cx from 'classnames';
-import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
-import { spacersNum, colors, IconAdd16, Button } from '@dhis2/ui';
+import { spacersNum, colors } from '@dhis2/ui';
 import { StageOverview } from './StageOverview';
 import type { Props } from './stage.types';
 import { Widget } from '../../../Widget';
 import { StageDetail } from './StageDetail/StageDetail.component';
+import { StageCreateNewButton } from './StageCreateNewButton';
 
 const styles = {
     overview: {
         marginLeft: spacersNum.dp16,
         marginRight: spacersNum.dp16,
         borderTop: `1px solid ${colors.grey300}`,
     },
-    button: {
+    buttonContainer: {
         margin: `0 ${spacersNum.dp16}px ${spacersNum.dp16}px ${spacersNum.dp16}px`,
     },
     buttonRow: {
@@ -67,19 +67,16 @@ export const StagePlain = ({ stage, events, classes, className, onCreateNew, rul
                     hiddenProgramStage={preventAddingNewEvents}
                     {...passOnProps}
                 /> : (
-                    <Button
-                        small
-                        secondary
-                        icon={<IconAdd16 />}
-                        className={classes.button}
-                        dataTest="create-new-button"
-                        onClick={() => onCreateNew(id)}
-                    >
-                        {i18n.t('New {{ eventName }} event', {
-                            eventName: name,
-                            interpolation: { escapeValue: false },
-                        })}
-                    </Button>
+                    <div className={classes.buttonContainer}>
+                        <StageCreateNewButton
+                            onCreateNew={() => onCreateNew(id)}
+                            stageWriteAccess={stage.dataAccess.write}
+                            eventCount={events.length}
+                            repeatable={repeatable}
+                            preventAddingEventActionInEffect={preventAddingNewEvents}
+                            eventName={name}
+                        />
+                    </div>
                 )}
             </Widget>
         </div>

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageCreateNewButton/StageCreateNewButton.js

@@ -0,0 +1,72 @@
+// @flow
+import React, { useMemo } from 'react';
+import { Button, IconAdd16 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { ConditionalTooltip } from '../../../../Tooltips/ConditionalTooltip';
+
+type Props = {
+    onCreateNew: (stageId: string) => void,
+    stageWriteAccess: ?boolean,
+    eventCount: number,
+    repeatable: ?boolean,
+    preventAddingEventActionInEffect: ?boolean,
+    eventName: string,
+}
+
+export const StageCreateNewButton = ({
+    onCreateNew,
+    stageWriteAccess,
+    eventCount,
+    repeatable,
+    preventAddingEventActionInEffect,
+    eventName,
+}: Props) => {
+    const isDisabled = useMemo(() => {
+        if (!stageWriteAccess) {
+            return true;
+        }
+        if (!repeatable && eventCount > 0) {
+            return true;
+        }
+        return !!preventAddingEventActionInEffect;
+    }, [eventCount, preventAddingEventActionInEffect, repeatable, stageWriteAccess]);
+    const tooltipContent = useMemo(() => {
+        if (!stageWriteAccess) {
+            return i18n.t('You do not have access to create events in this stage', {
+                programStageName: eventName,
+                interpolation: { escapeValue: false },
+            });
+        }
+        if (preventAddingEventActionInEffect) {
+            return i18n.t("You can't add any more {{ programStageName }} events", {
+                programStageName: eventName,
+                interpolation: { escapeValue: false },
+            });
+        }
+        if (!repeatable && eventCount > 0) {
+            return i18n.t('This stage can only have one event');
+        }
+        return '';
+    }, [eventCount, eventName, preventAddingEventActionInEffect, repeatable, stageWriteAccess]);
+
+    return (
+        <ConditionalTooltip
+            enabled={isDisabled}
+            content={tooltipContent}
+            closeDelay={50}
+        >
+            <Button
+                small
+                secondary
+                icon={<IconAdd16 />}
+                onClick={onCreateNew}
+                dataTest={'create-new-button'}
+                disabled={isDisabled}
+            >
+                {i18n.t('New {{ eventName }} event', {
+                    eventName, interpolation: { escapeValue: false },
+                })}
+            </Button>
+        </ConditionalTooltip>
+    );
+};

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageCreateNewButton/index.js

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

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js

@@ -13,11 +13,10 @@ import { colors,
     DataTableCell,
     DataTableColumnHeader,
     Button,
-    IconAdd16,
     Tooltip,
 } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { sortDataFromEvent } from './hooks/sortFuntions';
+import { StageCreateNewButton } from '../StageCreateNewButton';
 import { useComputeDataFromEvent, useComputeHeaderColumn, formatRowForView } from './hooks/useEventList';
 import { DEFAULT_NUMBER_OF_ROW, SORT_DIRECTION } from './hooks/constants';
 import { getProgramAndStageForProgram } from '../../../../../metaData/helpers';
@@ -218,37 +217,16 @@ const StageDetailPlain = (props: Props) => {
             onClick={handleViewAll}
         >{i18n.t('Go to full {{ eventName }}', { eventName, interpolation: { escapeValue: false } })}</Button> : null);
 
-        const renderCreateNewButton = () => {
-            const shouldDisableCreateNew = (!repeatable && events.length > 0) || hiddenProgramStage;
-
-            const tooltipContent = hiddenProgramStage
-                ? i18n.t("You can't add any more {{ programStageName }} events", {
-                    programStageName: eventName,
-                    interpolation: { escapeValue: false },
-                })
-                : i18n.t('This stage can only have one event');
-
-            return (
-                <ConditionalTooltip
-                    content={tooltipContent}
-                    enabled={shouldDisableCreateNew}
-                    closeDelay={50}
-                >
-                    <Button
-                        small
-                        secondary
-                        icon={<IconAdd16 />}
-                        disabled={shouldDisableCreateNew}
-                        dataTest="create-new-button"
-                        onClick={handleCreateNew}
-                    >
-                        {i18n.t('New {{ eventName }} event', {
-                            eventName, interpolation: { escapeValue: false },
-                        })}
-                    </Button>
-                </ConditionalTooltip>
-            );
-        };
+        const renderCreateNewButton = () => (
+            <StageCreateNewButton
+                eventCount={events.length}
+                onCreateNew={handleCreateNew}
+                preventAddingEventActionInEffect={hiddenProgramStage}
+                repeatable={repeatable}
+                stageWriteAccess={stage?.access?.data?.write}
+                eventName={eventName}
+            />
+        );
 
         return (
             <DataTableRow>