IA-3123: Review the look and feel of permissions list (with Read/Write)

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

@@ -21,21 +21,29 @@
 - 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
+## 4. If the added permission must be coupled with another permission like read and edit
+- Go to `/hat/menupermissions/constants.py`
+- Add the added permission and it's related permission as an item of the `READ_EDIT_PERMISSIONS` dictionnary
+- The item should have a key which reprensente the string name which will be displayed
+- The item should have a dictionnary reprensenting the coupled permissions, the keys (should be two keys) are `read` and `edit` or other keys like `no-admin` and `admin`
+- The item should look like `item_key": {"read": "added_permission", "edit": "coupled_permission"}`
+- Add translations for all the keys(`item_key, read and edit`) and the tooltip message of the principal key(`item_key`)
+
+## 5. Make and run migration
 
 `docker compose run --rm iaso manage makemigrations && docker compose run --rm iaso manage migrate`
 
 
-## 5. Add the permission in the front-end
+## 6. Add the permission in the front-end
 - Go to `/hat/assets/js/apps/Iaso/utils/permissions.ts`. Add and export a constant with the permission key, in a similar way as what was done for the backend in step 1.
 - When using the permission in the front-end: import the constant, don't write the key in a string.
 
-## 6. Add translations in the front-end
+## 7. Add translations in the front-end
 
 - Add a translation for the permission, and its tooltip in `permissionMessages.ts`. The tooltip key should have the format: `<permission name>_tooltip` to enable the component to recognize and translate it.
 - Add corresponding translations in `en.json` and `fr.json`
 
-## 7. Add translation for new module (if applicable)
+## 8. 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

@@ -1012,6 +1012,37 @@
     "iaso.permissions.polio_vaccine_authorizations_admin": "Polio Vaccine Authorizations: Admin",
     "iaso.permissions.polio_vaccine_authorizations_read_only": "Polio Vaccine Authorizations: Read Only",
     "iaso.permissions.projects": "Projects",
+    "iaso.permissions.readEdit.admin": "Admin",
+    "iaso.permissions.readEdit.entity_duplicate_permissions": "Entity duplicates",
+    "iaso.permissions.readEdit.no_admin": "No-Admin",
+    "iaso.permissions.readEdit.org_unit_permissions": "Organisation units management",
+    "iaso.permissions.readEdit.page_permissions": "Web embedded links management",
+    "iaso.permissions.readEdit.planning_permissions": "Planning",
+    "iaso.permissions.readEdit.polio_budget_permissions": "Polio budget",
+    "iaso.permissions.readEdit.polio_chronogram_permissions": "Polio chronogram",
+    "iaso.permissions.readEdit.polio_vaccine_authorization_permissions": "Polio Vaccine Authorizations",
+    "iaso.permissions.readEdit.polio_vaccine_stock_management_permissions": "Polio vaccine stock management",
+    "iaso.permissions.readEdit.polio_vaccine_supply_chain_permissions": "Polio vaccine supply chain",
+    "iaso.permissions.readEdit.read": "Read",
+    "iaso.permissions.readEdit.registry_permissions": "Registry",
+    "iaso.permissions.readEdit.source_permissions": "Geo data sources",
+    "iaso.permissions.readEdit.submission_permissions": "Forms and submissions",
+    "iaso.permissions.readEdit.tooltip.entity_duplicate_permissions": "View (without the possibility to merge them) and edit entity duplicates",
+    "iaso.permissions.readEdit.tooltip.org_unit_permissions": "Manage organisation units and pyramids, including uploading of geo data (GPS coordinates and shapes), and groups",
+    "iaso.permissions.readEdit.tooltip.page_permissions": "External links management: View and edit an external link",
+    "iaso.permissions.readEdit.tooltip.planning_permissions": "View and edit planning",
+    "iaso.permissions.readEdit.tooltip.polio_budget_permissions": "View budget approval process and take action as defined by your role in the process. Extra admin powers: Override any step in the process if needed.",
+    "iaso.permissions.readEdit.tooltip.polio_chronogram_permissions": "Manage polio chronogram - Read and Write - Restricted Write",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_authorization_permissions": "Admin and no-admin permission on managing polio vaccine authorizations",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_stock_management_permissions": "See summary of vaccine stock management, by country and vaccine. Edit and add vaccine stock management data",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_supply_chain_permissions": "See summary of vaccine supply chain, by country and vaccine. Edit and add supply chain data",
+    "iaso.permissions.readEdit.tooltip.registry_permissions": "View and edit summary view of data collected per organisation unit",
+    "iaso.permissions.readEdit.tooltip.source_permissions": "View and edit geo data sources",
+    "iaso.permissions.readEdit.tooltip.submission_permissions": "View and edit the forms submissions",
+    "iaso.permissions.readEdit.tooltip.user_permissions": "Managed (Edition rights limited to the users linked to the children org units of the current user.) and admin permissions on managing users of the account: create or edit users (user name, email, password, permissions/location/language/project/user role)",
+    "iaso.permissions.readEdit.user_managed": "Managed",
+    "iaso.permissions.readEdit.user_permissions": "User management",
+    "iaso.permissions.readEdit.write": "Write",
     "iaso.permissions.sources": "Geo data sources - Read only",
     "iaso.permissions.submissions": "Forms and submissions - Read only",
     "iaso.permissions.teams": "Teams management",

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

@@ -320,7 +320,7 @@
     "iaso.groups.sourceVersion": "Version de la source",
     "iaso.groups.update": "Mettre le groupe à jour",
     "iaso.groupsets.dialog.delete": "Etes-vous certain de vouloir effacer cet ensemble de groupe?",
-    "iaso.groupsets.dialog.deleteText": "Cette opération ne peut être annulée",
+    "iaso.groupsets.dialog.deleteText": "Cette opération ne peut-être annulée",
     "iaso.groupsets.groupBelonging": "Appartenance aux groupes",
     "iaso.groupsets.validation.field_required": "Ce champ est obligatoire",
     "iaso.hospital": "Hôpital",
@@ -1012,6 +1012,37 @@
     "iaso.permissions.polio_vaccine_authorizations_admin": "Validation d'authorisation de vaccins polio: Admin",
     "iaso.permissions.polio_vaccine_authorizations_read_only": "Validation d'authorisation de vaccins polio: Lecture seule",
     "iaso.permissions.projects": "Projets",
+    "iaso.permissions.readEdit.admin": "Admin",
+    "iaso.permissions.readEdit.entity_duplicate_permissions": "Doublons d’entités",
+    "iaso.permissions.readEdit.no_admin": "Non-Admin",
+    "iaso.permissions.readEdit.org_unit_permissions": "Gestion des unités d’organisation",
+    "iaso.permissions.readEdit.page_permissions": "Gestion des liens intégrés web",
+    "iaso.permissions.readEdit.planning_permissions": "Planning",
+    "iaso.permissions.readEdit.polio_budget_permissions": "Budget Polio",
+    "iaso.permissions.readEdit.polio_chronogram_permissions": "Chronogramme Polio",
+    "iaso.permissions.readEdit.polio_vaccine_authorization_permissions": "Validation d'authorisation de vaccins polio",
+    "iaso.permissions.readEdit.polio_vaccine_stock_management_permissions": "Polio gestion des stocks de vaccins",
+    "iaso.permissions.readEdit.polio_vaccine_supply_chain_permissions": "Polio: chaîne d'approvisionnement",
+    "iaso.permissions.readEdit.read": "Lecture",
+    "iaso.permissions.readEdit.registry_permissions": "Registre",
+    "iaso.permissions.readEdit.source_permissions": "Sources de données géo",
+    "iaso.permissions.readEdit.submission_permissions": "Formulaires et soumissions",
+    "iaso.permissions.readEdit.tooltip.entity_duplicate_permissions": "Lecture et écriture des doublons d’entités - décision de fusionner ou non des entités similaires",
+    "iaso.permissions.readEdit.tooltip.org_unit_permissions": "Gestion des unités d’organisation et de la pyramide, y compris le chargement de données géographiques (points GPS et contours) et la gestion des groupes",
+    "iaso.permissions.readEdit.tooltip.page_permissions": "Gestion des liens externes : créer ou modifier un lien externe",
+    "iaso.permissions.readEdit.tooltip.planning_permissions": "Lecture et écriture des plannings",
+    "iaso.permissions.readEdit.tooltip.polio_budget_permissions": "Consultation du processus d’approbation du budget and actions possibles en fonction du rôle assigné à l’utilisateur par équipe. Pouvoirs Admin: si besoin, imposer une étape du budget indépendamment des conditions pré-établies",
+    "iaso.permissions.readEdit.tooltip.polio_chronogram_permissions": "Gestion des chronogrammes Polio - Lecture et écriture - Écriture restreinte",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_authorization_permissions": "Permissions admin et non admin pour la gestion des autorisations de vaccins polio",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_stock_management_permissions": "Voir le résumé de données de gestion des stocks de vaccins, par pays et par vaccin. Editer et ajouter des données de gestion des stocks de vaccins",
+    "iaso.permissions.readEdit.tooltip.polio_vaccine_supply_chain_permissions": "Voir le résumé des données de chaîne d'approvisionnement. Editer et ajouter des données",
+    "iaso.permissions.readEdit.tooltip.registry_permissions": "Lecture et écriture du résumé des données collectées par unité d’organisation",
+    "iaso.permissions.readEdit.tooltip.source_permissions": "Gestion des sources de données géographiques: créer ou éditer (nom, description, projet(s), version par défaut, liens DHIS2)",
+    "iaso.permissions.readEdit.tooltip.submission_permissions": "Lecture et écriture des soumissions de formulaires",
+    "iaso.permissions.readEdit.tooltip.user_permissions": "Permissions gérées (Pouvoirs d'édition limités aux utilisateurs placés en aval dans la pyramide (unités d’organisation enfants seulement)) et les permissions admin pour la gestion des utilisateurs du compte: création et édition (nom d’utilisateur, email, mot de passe, permissions/lieu attaché/langue/projet/rôle)",
+    "iaso.permissions.readEdit.user_managed": "Géré",
+    "iaso.permissions.readEdit.user_permissions": "Gestion des utilisateurs",
+    "iaso.permissions.readEdit.write": "Ecriture",
     "iaso.permissions.sources": "Sources de données géo - Lecture seule",
     "iaso.permissions.submissions": "Formulaires et soumissions - Lecture seule",
     "iaso.permissions.teams": "Gestion des équipes",

hat/assets/js/apps/Iaso/domains/userRoles/components/CreateEditUserRole.tsx

@@ -19,10 +19,10 @@ import {
     useTranslatedErrors,
 } from '../../../libs/validation';
 import InputComponent from '../../../components/forms/InputComponent';
-import { PermissionsSwitches } from './PermissionsSwitches';
-import { Permission } from '../types/userRoles';
+import { PermissionsAttribution } from './PermissionsAttribution';
 import { EditIconButton } from '../../../components/Buttons/EditIconButton';
 import UserRoleDialogInfoComponent from './UserRoleDialogInfoComponent';
+import { Permission } from '../types/userRoles';
 
 type ModalMode = 'create' | 'edit';
 type Props = Partial<SaveUserRoleQuery> & {
@@ -130,7 +130,7 @@ export const CreateEditUserRole: FunctionComponent<Props> = ({
                     onCancel={() => {
                         resetForm();
                     }}
-                    maxWidth="sm"
+                    maxWidth="md"
                     cancelMessage={MESSAGES.cancel}
                     confirmMessage={MESSAGES.save}
                     open={open}
@@ -149,7 +149,7 @@ export const CreateEditUserRole: FunctionComponent<Props> = ({
                         label={MESSAGES.name}
                         required
                     />
-                    <PermissionsSwitches
+                    <PermissionsAttribution
                         userRolePermissions={userRolePermissions}
                         handleChange={newPermissions => {
                             handlePermissionsChange(newPermissions);

hat/assets/js/apps/Iaso/domains/userRoles/components/PermissionsSwitches.tsx → hat/assets/js/apps/Iaso/domains/userRoles/components/PermissionsAttribution.tsx

@@ -31,7 +31,7 @@ const styles = theme => ({
 const useStyles = makeStyles(styles);
 
 type Props = {
-    userRolePermissions: Permission[];
+    userRolePermissions: (string | Permission)[];
     handleChange: (newValue: any) => void;
 };
 
@@ -40,37 +40,39 @@ type Row = {
     codename?: string;
     group?: boolean;
     id?: number;
+    readEdit?: { read: string; edit: string }[];
 };
 
-export const PermissionsSwitches: React.FunctionComponent<Props> = ({
+export const PermissionsAttribution: React.FunctionComponent<Props> = ({
     userRolePermissions,
     handleChange,
 }) => {
     const { formatMessage } = useSafeIntl();
     const classes = useStyles();
-    const { data, isLoading } = useSnackQuery<{ permissions: Permission[] }>(
+    const { data, isLoading } = useSnackQuery<{ permissions: string[] }>(
         ['grouped_permissions'],
         () => getRequest('/api/permissions/grouped_permissions/'),
         MESSAGES.fetchPermissionsError,
     );
 
     const setPermissions = useCallback(
-        (permission: Permission, isChecked: boolean) => {
+        (permission: string, isChecked: boolean) => {
             const newUserRolePerms = [...userRolePermissions];
             if (!isChecked) {
                 const permIndex = newUserRolePerms.findIndex(item => {
-                    return item.codename === permission.codename;
+                    return item === permission;
                 });
                 newUserRolePerms.splice(permIndex, 1);
-            } else {
-                newUserRolePerms.push({
-                    id: permission.id,
-                    codename: permission.codename,
-                    name: permission.name,
+            } else if (Array.isArray(permission)) {
+                permission.forEach(code => {
+                    newUserRolePerms.push(code);
                 });
+            } else {
+                newUserRolePerms.push(permission);
             }
             handleChange(newUserRolePerms);
         },
+
         [handleChange, userRolePermissions],
     );
 
@@ -109,6 +111,9 @@ export const PermissionsSwitches: React.FunctionComponent<Props> = ({
                 row.id = permission.id;
                 row.codename = permission.codename;
                 row.name = getPermissionLabel(permission.codename);
+                if (permission.read_edit) {
+                    row.readEdit = permission.read_edit;
+                }
                 grouped_permissions.push(row);
             });
         });

hat/assets/js/apps/Iaso/domains/userRoles/config.tsx

@@ -2,7 +2,7 @@ import { Column, IntlFormatMessage, useSafeIntl } from 'bluesquare-components';
 import React, { ReactElement, useMemo } from 'react';
 import { DateTimeCell } from '../../components/Cells/DateTimeCell';
 import DeleteDialog from '../../components/dialogs/DeleteDialogComponent';
-import PermissionSwitch from '../users/components/PermissionSwitch';
+import PermissionCheckBoxes from '../users/components/PermissionCheckBoxes';
 import PermissionTooltip from '../users/components/PermissionTooltip';
 import USER_MESSAGES from '../users/messages';
 import { EditUserRoleDialog } from './components/CreateEditUserRole';
@@ -65,8 +65,8 @@ export const useGetUserRolesColumns = (
 };
 
 export const useUserPermissionColumns = (
-    setPermissions: (permission: Permission, isChecked: boolean) => void,
-    userRolePermissions: Permission[],
+    setPermissions: (permission: string, isChecked: boolean) => void,
+    userRolePermissions: (string | Permission)[],
 ): Array<Column> => {
     const { formatMessage } = useSafeIntl();
     return useMemo(() => {
@@ -108,11 +108,11 @@ export const useUserPermissionColumns = (
                 sortable: false,
                 Cell: settings => {
                     return (
-                        <PermissionSwitch
+                        <PermissionCheckBoxes
                             codeName="codename"
                             settings={settings}
                             setPermissions={setPermissions}
-                            value={settings.row.original}
+                            value={settings.row.original.codename}
                             permissions={userRolePermissions}
                         />
                     );

hat/assets/js/apps/Iaso/domains/userRoles/hooks/requests/useSaveUserRole.ts

@@ -13,9 +13,7 @@ export type SaveUserRoleQuery = {
 const convertToApi = data => {
     const { permissions, ...converted } = data;
     if (!isEmpty(permissions)) {
-        converted.permissions = permissions.map(
-            permission => permission.codename,
-        );
+        converted.permissions = permissions;
     }
     return converted;
 };

hat/assets/js/apps/Iaso/domains/userRoles/validation.ts

@@ -16,15 +16,7 @@ export const useUserRoleValidation = (
     const schema = useMemo(() => {
         return object().shape({
             name: string().nullable().required('requiredField'),
-            permissions: array()
-                .of(
-                    object({
-                        id: number(),
-                        name: string(),
-                        codename: string(),
-                    }),
-                )
-                .test(apiValidator('permissions')),
+            permissions: array().of(string()).test(apiValidator('permissions')),
         });
     }, [apiValidator]);
     return schema;

hat/assets/js/apps/Iaso/domains/users/components/Filters.js

@@ -9,7 +9,7 @@ import {
     useSafeIntl,
     useRedirectTo,
 } from 'bluesquare-components';
-import MESSAGES from '../messages';
+import MESSAGES from '../messages.ts';
 import { stringToBoolean } from '../../../utils/dataManipulation.ts';
 import { OrgUnitTreeviewModal } from '../../orgUnits/components/TreeView/OrgUnitTreeviewModal.tsx';
 import { useGetPermissionsDropDown } from '../hooks/useGetPermissionsDropdown.ts';