AB#212948-add permissions for PDU module frontend

frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx

@@ -1,5 +1,5 @@
 import { BaseSection } from '@components/core/BaseSection';
 import { Box, Tab, Tabs, Button, Fade } from '@mui/material';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import AddIcon from '@mui/icons-material/Add';
@@ -8,11 +8,20 @@
 import { useBaseUrl } from '@hooks/useBaseUrl';
 import { PeriodDataUpdatesUploadDialog } from './PeriodicDataUpdatesUploadDialog';
 import { useProgramContext } from 'src/programContext';
+import { usePermissions } from '@hooks/usePermissions';
+import { hasPermissions, PERMISSIONS } from 'src/config/permissions';
+import { ButtonTooltip } from '@components/core/ButtonTooltip';
 
 export const PeriodicDataUpdates = (): React.ReactElement => {
   const [value, setValue] = useState(0);
   const { baseUrl } = useBaseUrl();
   const { isSocialDctType } = useProgramContext();
+  const permissions = usePermissions();
+
+  const canCreatePDUTemplate = hasPermissions(
+    PERMISSIONS.PDU_TEMPLATE_CREATE,
+    permissions,
+  );
 
   const handleChange = (
     _event: React.ChangeEvent<object>,
@@ -35,24 +44,25 @@
             onChange={handleChange}
             aria-label="periodic data updates tabs"
           >
-            <Tab label="Templates"  data-cy="pdu-templates"/>
-            <Tab label="Updates" data-cy="pdu-updates"/>
+            <Tab label="Templates" data-cy="pdu-templates" />
+            <Tab label="Updates" data-cy="pdu-updates" />
           </Tabs>
         </Box>
       }
       buttons={
         <Box display="flex" align-items="center">
           <Box mr={2}>
-            <Button
+            <ButtonTooltip
               variant="contained"
               color="primary"
               component={Link}
               to={newTemplatePath}
               startIcon={<AddIcon />}
               data-cy="new-template-button"
+              disabled={!canCreatePDUTemplate}
             >
               New Template
-            </Button>
+            </ButtonTooltip>
           </Box>
           <Box>
             <PeriodDataUpdatesUploadDialog />

frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesTemplatesList.tsx

@@ -7,7 +7,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import UploadIcon from '@mui/icons-material/Upload';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { Button, IconButton, TableCell, Tooltip } from '@mui/material';
+import { IconButton, TableCell, Tooltip } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { ReactElement, useEffect, useState } from 'react';
 import { PeriodicDataUpdatesTemplateDetailsDialog } from './PeriodicDataUpdatesTemplateDetailsDialog';
@@ -19,6 +19,9 @@ import { StatusBox } from '@core/StatusBox';
 import { periodicDataUpdateTemplateStatusToColor } from '@utils/utils';
 import { useSnackbar } from '@hooks/useSnackBar';
 import { useTranslation } from 'react-i18next';
+import { ButtonTooltip } from '@components/core/ButtonTooltip';
+import { usePermissions } from '@hooks/usePermissions';
+import { hasPermissions, PERMISSIONS } from 'src/config/permissions';
 
 export interface Template {
   id: number;
@@ -87,6 +90,7 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => {
   const { t } = useTranslation();
   const { businessArea: businessAreaSlug, programId } = useBaseUrl();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const permissions = usePermissions();
   const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(
     null,
   );
@@ -161,6 +165,11 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => {
     (template) => template.id === selectedTemplateId,
   );
 
+  const canExportOrDownloadTemplate = hasPermissions(
+    PERMISSIONS.PDU_TEMPLATE_DOWNLOAD,
+    permissions,
+  );
+
   const renderTemplateRow = (row: Template): ReactElement => (
     <ClickableTableRow key={row.id} data-cy={`template-row-${row.id}`}>
       <TableCell data-cy={`template-id-${row.id}`}>{row.id}</TableCell>
@@ -194,28 +203,31 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => {
             }
           >
             <span>
-              <Button
+              <ButtonTooltip
                 variant="contained"
                 color="primary"
                 onClick={() => handleDownloadClick(row.id)}
                 startIcon={<GetAppIcon />}
                 data-cy={`download-btn-${row.id}`}
-                disabled={row?.number_of_records === 0}
+                disabled={
+                  row?.number_of_records === 0 || !canExportOrDownloadTemplate
+                }
               >
                 Download
-              </Button>
+              </ButtonTooltip>
             </span>
           </Tooltip>
         ) : row.can_export ? (
-          <Button
+          <ButtonTooltip
             variant="contained"
             color="primary"
             onClick={() => handleExportClick(row.id)}
             startIcon={<UploadIcon />}
             data-cy={`export-btn-${row.id}`}
+            disabled={!canExportOrDownloadTemplate}
           >
             Export
-          </Button>
+          </ButtonTooltip>
         ) : null}
       </TableCell>
     </ClickableTableRow>

frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx

@@ -5,15 +5,16 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { DialogTitleWrapper } from '@containers/dialogs/DialogTitleWrapper';
-//TODO MS: display errors
-// import { ImportErrors } from '@containers/tables/payments/VerificationRecordsTable/errors/ImportErrors';
 import { useSnackbar } from '@hooks/useSnackBar';
 
 import { DropzoneField } from '@core/DropzoneField';
 import { LoadingButton } from '@core/LoadingButton';
 import { useProgramContext } from 'src/programContext';
 import { useUploadPeriodicDataUpdateTemplate } from './PeriodicDataUpdatesTemplatesListActions';
 import { useBaseUrl } from '@hooks/useBaseUrl';
+import { usePermissions } from '@hooks/usePermissions';
+import { hasPermissions, PERMISSIONS } from 'src/config/permissions';
+import { ButtonTooltip } from '@components/core/ButtonTooltip';
 
 const Error = styled.div`
   color: ${({ theme }) => theme.palette.error.dark};
@@ -31,12 +32,14 @@ const DisabledUploadIcon = styled(Publish)`
 export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => {
   const { showMessage } = useSnackbar();
   const { businessArea, programId } = useBaseUrl();
+  const permissions = usePermissions();
   const [open, setOpenImport] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [fileToImport, setFileToImport] = useState<File | null>(null);
   const { isActiveProgram } = useProgramContext();
   const { t } = useTranslation();
   const { mutate, error } = useUploadPeriodicDataUpdateTemplate();
+  const canPDUUpload = hasPermissions(PERMISSIONS.PDU_UPLOAD, permissions);
 
   const handleFileUpload = (): void => {
     if (fileToImport) {
@@ -65,11 +68,7 @@ export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => {
     }
   };
   let errorMessage = null;
-  // @ts-ignore
-  if (error && error?.data?.error) {
-    // @ts-ignore
-    errorMessage = <Error data-cy="pdu-upload-error">{error?.data?.error}</Error>;
-  } else if (error) {
+  if (error) {
     errorMessage = (
       <Error data-cy="pdu-upload-error">
         {t('Error uploading file:')} {error.message}
@@ -80,15 +79,15 @@ export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => {
   return (
     <>
       <Box key="import">
-        <Button
+        <ButtonTooltip
           startIcon={!isActiveProgram ? <DisabledUploadIcon /> : <UploadIcon />}
           color="primary"
           data-cy="button-import"
           onClick={() => setOpenImport(true)}
-          disabled={!isActiveProgram}
+          disabled={!isActiveProgram || !canPDUUpload}
         >
           {t('Upload Data')}
-        </Button>
+        </ButtonTooltip>
       </Box>
       <Dialog
         open={open}

frontend/src/config/permissions.ts

@@ -47,6 +47,12 @@ export const PERMISSIONS = {
   TARGETING_UNLOCK: 'TARGETING_UNLOCK',
   TARGETING_SEND: 'TARGETING_SEND',
 
+  // PDU
+  PDU_VIEW_LIST_AND_DETAILS: 'PDU_VIEW_LIST_AND_DETAILS',
+  PDU_TEMPLATE_CREATE: 'PDU_TEMPLATE_CREATE',
+  PDU_TEMPLATE_DOWNLOAD: 'PDU_TEMPLATE_DOWNLOAD',
+  PDU_UPLOAD: 'PDU_UPLOAD',
+
   // Payment Verification
   PAYMENT_VERIFICATION_VIEW_LIST: 'PAYMENT_VERIFICATION_VIEW_LIST',
   PAYMENT_VERIFICATION_VIEW_DETAILS: 'PAYMENT_VERIFICATION_VIEW_DETAILS',

frontend/src/containers/pages/population/HouseholdMembersPage.tsx

@@ -61,16 +61,21 @@ export const HouseholdMembersPage = (): React.ReactElement => {
     isNewTemplateJustCreated ? 1 : 0,
   );
 
+  const canViewPDUListAndDetails = hasPermissions(
+    PERMISSIONS.PDU_VIEW_LIST_AND_DETAILS,
+    permissions,
+  );
+
+  const canViewHouseholdMembersPage =
+    (PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, permissions);
+
   if (householdChoicesLoading || individualChoicesLoading)
     return <LoadingComponent />;
 
   if (!individualChoicesData || !householdChoicesData || permissions === null)
     return null;
 
-  if (
-    !hasPermissions(PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, permissions)
-  )
-    return <PermissionDenied />;
+  if (!canViewHouseholdMembersPage) return <PermissionDenied />;
 
   return (
     <>
@@ -84,27 +89,21 @@ export const HouseholdMembersPage = (): React.ReactElement => {
             }}
           >
             <Tab data-cy="tab-individuals" label="Individuals" />
-            {!programHasPdu ? (
-              <Tooltip
-                title={t(
-                  'Programme does not have defined fields for periodic updates',
-                )}
-              >
-                <span>
-                  <Tab
-                    disabled={!programHasPdu}
-                    data-cy="tab-periodic-data-updates"
-                    label="Periodic Data Updates"
-                  />
-                </span>
-              </Tooltip>
-            ) : (
-              <Tab
-                disabled={!programHasPdu}
-                data-cy="tab-periodic-data-updates"
-                label="Periodic Data Updates"
-              />
-            )}
+            <Tooltip
+              title={t(
+                !canViewPDUListAndDetails
+                  ? 'Programme does not have defined fields for periodic updates'
+                  : 'Permission Denied',
+              )}
+            >
+              <span>
+                <Tab
+                  disabled={!programHasPdu || !canViewPDUListAndDetails}
+                  data-cy="tab-periodic-data-updates"
+                  label="Periodic Data Updates"
+                />
+              </span>
+            </Tooltip>
           </Tabs>
         }
       />
@@ -136,8 +135,10 @@ export const HouseholdMembersPage = (): React.ReactElement => {
                 />
               </Box>
             </>
-          ) : (
+          ) : canViewPDUListAndDetails ? (
             <PeriodicDataUpdates />
+          ) : (
+            <PermissionDenied />
           )}
         </Box>
       </Fade>