Merge branch 'main' into IA-1940-add-permission-user-management

docs/pages/dev/how_to/add_new_permission/add_new_permission.md

@@ -14,16 +14,22 @@
 - If no existing module fits, create one (see exiting modules for inspiration)
 - If a new module is created, add it to `MODULES` (in the same file)
 
-## 3. Make and run migration
+## 3. Include the permission in the corresponding group
+- Go to `/hat/menupermissions/constants.py`
+- Add the permission to a group from `PERMISSIONS_PRESENTATION`
+- If no existing group fits, create one (see exiting groups for inspiration)
+- If the corresponding group exists add the new permission to that group (see exiting groups for inspiration)
+
+## 4. Make and run migration
 
 `docker-compose run --rm iaso manage makemigration && docker-compose run --rm iaso manage migrate`
 
-## 4. Add translations in the front-end
+## 5. Add translations in the front-end
 
 - Add a translation for the permission, and its tooltip in `permissionMessages.ts`
 - Add corresponding translations in `en.json` and `fr.json`
 
-## 5. Add translation for new module (if applicable)
+## 6. Add translation for new module (if applicable)
 
 - Go to `/hat/assets/js/apps/Iaso/domains/modules/messages.ts`
 - Add translation for the new module. The translation key should follow the pattern: `iaso.module.<module.codename.toLowerCase()>' 

hat/assets/js/apps/Iaso/domains/app/translations/en.json

@@ -909,6 +909,16 @@
     "iaso.permissions.dataTasks": "Batch monitoring",
     "iaso.permissions.entities": "Entities",
     "iaso.permissions.forms": "Forms management",
+    "iaso.permissions.group.admin": "Admin",
+    "iaso.permissions.group.dhis2_mapping": "Dhis2 mapping",
+    "iaso.permissions.group.embedded_links": "Embedded links",
+    "iaso.permissions.group.entities": "Beneficiaries",
+    "iaso.permissions.group.external_storage": "External storage",
+    "iaso.permissions.group.forms": "Forms",
+    "iaso.permissions.group.org_units": "Org units",
+    "iaso.permissions.group.payments": "Payments",
+    "iaso.permissions.group.planning": "Planning",
+    "iaso.permissions.group.polio": "Polio",
     "iaso.permissions.iaso_dhis2_link": "Link with DHIS2",
     "iaso.permissions.iaso_entity_duplicates_read": "Entity duplicates - Read only",
     "iaso.permissions.iaso_entity_duplicates_write": "Entity duplicates - Read and Write",
@@ -1236,6 +1246,7 @@
     "iaso.userRoles.delete": "Are you sure you want to delete this user role?",
     "iaso.userRoles.edit": "Edit user role",
     "iaso.userRoles.title": "User roles",
+    "iaso.userRoles.userRolePermissions": "User role permissions",
     "iaso.users.addLocations": "Add location(s)",
     "iaso.users.addProjects": "Add to project(s)",
     "iaso.users.addRoles": "Add user role(s)",

hat/assets/js/apps/Iaso/domains/app/translations/fr.json

@@ -909,6 +909,16 @@
     "iaso.permissions.dataTasks": "Batch monitoring",
     "iaso.permissions.entities": "Entités",
     "iaso.permissions.forms": "Gestion des formulaires",
+    "iaso.permissions.group.admin": "Admin",
+    "iaso.permissions.group.dhis2_mapping": "Mappage DHIS2",
+    "iaso.permissions.group.embedded_links": "Liens intégrés",
+    "iaso.permissions.group.entities": "Bénéficiaires",
+    "iaso.permissions.group.external_storage": "Stockage externe",
+    "iaso.permissions.group.forms": "Formulaires",
+    "iaso.permissions.group.org_units": "Unités d'organisation",
+    "iaso.permissions.group.payments": "Paiements",
+    "iaso.permissions.group.planning": "Planning",
+    "iaso.permissions.group.polio": "Polio",
     "iaso.permissions.iaso_dhis2_link": "Lier avec DHIS2",
     "iaso.permissions.iaso_entity_duplicates_read": "Doublons d’entités - Lecture seule",
     "iaso.permissions.iaso_entity_duplicates_write": "Doublons d’entités - Lecture et écriture",
@@ -1236,6 +1246,7 @@
     "iaso.userRoles.delete": "Etes-vous sûr(e) de vouloir effacer ce role d'utilisateur?",
     "iaso.userRoles.edit": "Editer un rôle d'utilisateur",
     "iaso.userRoles.title": "Rôles des utilisateurs",
+    "iaso.userRoles.userRolePermissions": "Permissions du rôle d'utilisateurs",
     "iaso.users.addLocations": "Ajouter la(les) localisation(s)",
     "iaso.users.addProjects": "Ajouter au(x) projet(s)",
     "iaso.users.addRoles": "Ajouter le(s) rôle(s)",

hat/assets/js/apps/Iaso/domains/instances/components/LinkToInstance.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { userHasOneOfPermissions } from '../../users/utils';
 import { baseUrls } from '../../../constants/urls';
+import * as Permission from '../../../utils/permissions';
 import { useCurrentUser } from '../../../utils/usersUtils';
 import MESSAGES from '../../assignments/messages';
 import { SUBMISSIONS, SUBMISSIONS_UPDATE } from '../../../utils/permissions';
@@ -10,12 +11,16 @@ type Props = {
     instanceId: string;
     useIcon?: boolean;
     color?: string;
+    iconSize?: 'small' | 'medium' | 'large' | 'default' | 'inherit';
+    size?: 'small' | 'medium' | 'large' | 'default' | 'inherit';
     replace?: boolean;
 };
 export const LinkToInstance: FunctionComponent<Props> = ({
     instanceId,
     useIcon = false,
     color = 'inherit',
+    iconSize = 'medium',
+    size = 'medium',
     replace = false,
 }) => {
     const user = useCurrentUser();
@@ -33,6 +38,9 @@ export const LinkToInstance: FunctionComponent<Props> = ({
             tooltipMessage={MESSAGES.details}
             text={instanceId}
             color={color}
+            size={size}
+            iconSize={iconSize}
         />
     );
+            color={color}
 };

hat/assets/js/apps/Iaso/domains/orgUnits/components/TreeView/OrgUnitTreeviewModal.js

@@ -1,6 +1,6 @@
 import { Box, useTheme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import { TreeViewWithSearch } from 'bluesquare-components';
+import { IconButton, TreeViewWithSearch } from 'bluesquare-components';
 import { isEqual } from 'lodash';
 import {
     array,
@@ -47,6 +47,7 @@ const OrgUnitTreeviewModal = ({
     allowedTypes,
     errors,
     defaultOpen,
+    useIcon,
 }) => {
     const theme = useTheme();
     const classes = useStyles();
@@ -181,20 +182,37 @@ const OrgUnitTreeviewModal = ({
     }, [resetTrigger, hardReset, resetSelection]);
     return (
         <ConfirmCancelDialogComponent
-            renderTrigger={({ openDialog }) => (
-                <OrgUnitTreeviewPicker
-                    onClick={openDialog}
-                    selectedItems={selectedOrgUnitParents}
-                    resetSelection={resetSelection}
-                    multiselect={multiselect}
-                    placeholder={titleMessage}
-                    required={required}
-                    disabled={disabled}
-                    label={makeTreeviewLabel(classes, showStatusIconInPicker)}
-                    clearable={clearable}
-                    errors={errors}
-                />
-            )}
+            renderTrigger={({ openDialog }) =>
+                useIcon ? (
+                    <IconButton
+                        size="small"
+                        tooltipMessage={
+                            multiselect
+                                ? MESSAGES.selectMultiple
+                                : MESSAGES.selectSingle
+                        }
+                        icon="orgUnit"
+                        onClick={openDialog}
+                        disabled={disabled}
+                    />
+                ) : (
+                    <OrgUnitTreeviewPicker
+                        onClick={openDialog}
+                        selectedItems={selectedOrgUnitParents}
+                        resetSelection={resetSelection}
+                        multiselect={multiselect}
+                        placeholder={titleMessage}
+                        required={required}
+                        disabled={disabled}
+                        label={makeTreeviewLabel(
+                            classes,
+                            showStatusIconInPicker,
+                        )}
+                        clearable={clearable}
+                        errors={errors}
+                    />
+                )
+            }
             titleMessage={titleMessage}
             onConfirm={onModalConfirm}
             onCancel={onModalCancel}
@@ -269,6 +287,7 @@ OrgUnitTreeviewModal.propTypes = {
     allowedTypes: array,
     errors: arrayOf(string),
     defaultOpen: bool,
+    useIcon: bool,
 };
 
 OrgUnitTreeviewModal.defaultProps = {
@@ -288,6 +307,7 @@ OrgUnitTreeviewModal.defaultProps = {
     allowedTypes: [],
     errors: [],
     defaultOpen: false,
+    useIcon: false,
 };
 
 export { OrgUnitTreeviewModal };

hat/assets/js/apps/Iaso/domains/orgUnits/components/breadcrumbs/OrgUnitBreadcrumbs.tsx

@@ -1,9 +1,9 @@
-import React, { FunctionComponent, useMemo } from 'react';
-import { Breadcrumbs } from '@mui/material';
+import { Breadcrumbs, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import React, { FunctionComponent, useMemo } from 'react';
+import { LinkToRegistry } from '../../../registry/components/LinkToRegistry';
 import { OrgUnit } from '../../types/orgUnit';
 import { LinkToOrgUnit } from '../LinkToOrgUnit';
-import { LinkToRegistry } from '../../../registry/components/LinkToRegistry';
 
 type BreadCrumbsArgs = {
     orgUnit?: OrgUnit;
@@ -53,20 +53,33 @@ type Props = {
     orgUnit: OrgUnit;
     showOnlyParents?: boolean;
     showRegistry?: boolean;
+    color?: string;
 };
 
 export const OrgUnitBreadcrumbs: FunctionComponent<Props> = ({
     separator = '>',
     orgUnit,
     showOnlyParents,
     showRegistry = false,
+    color = 'inherit',
 }) => {
     const { link } = useStyles();
     const breadcrumbs = useOrgUnitBreadCrumbs({ orgUnit, showOnlyParents });
     return (
-        <Breadcrumbs separator={separator}>
-            {breadcrumbs.map(ou =>
-                showRegistry ? (
+        <Breadcrumbs separator={separator} sx={{ '& *': { color } }}>
+            {breadcrumbs.map((ou, index) => {
+                if (index === breadcrumbs.length - 1 && !showOnlyParents) {
+                    return (
+                        <Typography
+                            key={ou.id}
+                            component="span"
+                            color="primary"
+                        >
+                            {ou.name}
+                        </Typography>
+                    );
+                }
+                return showRegistry ? (
                     <LinkToRegistry
                         orgUnit={ou}
                         key={ou.id}
@@ -80,8 +93,8 @@ export const OrgUnitBreadcrumbs: FunctionComponent<Props> = ({
                         className={link}
                         replace
                     />
-                ),
-            )}
+                );
+            })}
         </Breadcrumbs>
     );
 };

hat/assets/js/apps/Iaso/domains/registry/components/Instances.tsx

@@ -13,6 +13,7 @@ import { ColumnSelect } from '../../instances/components/ColumnSelect';
 import { ActionCell } from './ActionCell';
 import { MissingInstanceDialog } from './MissingInstanceDialog';
 import { OrgunitType } from '../../orgUnits/types/orgunitTypes';
+import { RegistryParams } from '../types';
 import { OrgunitTypeRegistry } from '../types/orgunitTypes';
 import { RegistryDetailParams } from '../types';
 import { Form } from '../../forms/types/forms';
@@ -29,7 +30,7 @@ import MESSAGES from '../messages';
 type Props = {
     isLoading: boolean;
     subOrgUnitTypes: OrgunitTypeRegistry[];
-    params: RegistryDetailParams;
+    params: RegistryParams;
 };
 
 export const Instances: FunctionComponent<Props> = ({
@@ -113,7 +114,6 @@ export const Instances: FunctionComponent<Props> = ({
                         <Grid container spacing={2}>
                             <Grid item xs={12} md={3}>
                                 <InputComponent
-                                    required
                                     keyValue="formIds"
                                     clearable={false}
                                     onChange={handleFilterChange}

hat/assets/js/apps/Iaso/domains/registry/components/LinkToRegistry.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
-import { userHasPermission } from '../../users/utils';
+import { LinkTo } from '../../../components/nav/LinkTo';
 import { baseUrls } from '../../../constants/urls';
 import { useCurrentUser } from '../../../utils/usersUtils';
 import { OrgUnit, ShortOrgUnit } from '../../orgUnits/types/orgUnit';
-import { LinkTo } from '../../../components/nav/LinkTo';
+import { userHasPermission } from '../../users/utils';
 
 import MESSAGES from '../messages';
 
@@ -16,15 +16,17 @@ type Props = {
     replace?: boolean;
     iconSize?: 'small' | 'medium' | 'large' | 'default' | 'inherit';
     size?: 'small' | 'medium' | 'large' | 'default' | 'inherit';
+    color?: string;
 };
 
 export const LinkToRegistry: FunctionComponent<Props> = ({
     orgUnit,
-    useIcon,
-    className,
-    replace,
-    iconSize,
-    size,
+    useIcon = false,
+    className = '',
+    replace = false,
+    iconSize = 'medium',
+    size = 'medium',
+    color = 'inherit',
 }) => {
     const user = useCurrentUser();
     const condition = userHasPermission(REGISTRY, user) && Boolean(orgUnit);
@@ -42,6 +44,7 @@ export const LinkToRegistry: FunctionComponent<Props> = ({
             iconSize={iconSize}
             text={text}
             tooltipMessage={MESSAGES.seeRegistry}
+            color={color}
         />
     );
 };