Merge pull request #1616 from BLSQ/IA3347-change-request-ux

IA-3347: Change requests UX

hat/assets/js/apps/Iaso/constants/routes.tsx

@@ -28,7 +28,8 @@ import { OrgUnits } from '../domains/orgUnits';
 import OrgUnitDetail from '../domains/orgUnits/details';
 import Groups from '../domains/orgUnits/groups';
 import Types from '../domains/orgUnits/orgUnitTypes';
-import { ReviewOrgUnitChanges } from '../domains/orgUnits/reviewChanges/ReviewOrgUnitChanges';
+import { ReviewOrgUnitChanges } from '../domains/orgUnits/reviewChanges';
+import { ReviewOrgUnitChangesDetail } from '../domains/orgUnits/reviewChanges/details';
 import Pages from '../domains/pages';
 import { LotsPayments } from '../domains/payments/LotsPayments';
 import { PotentialPayments } from '../domains/payments/PotentialPayments';
@@ -170,6 +171,13 @@ export const orgUnitChangeRequestPath = {
     element: <ReviewOrgUnitChanges />,
 };
 
+export const orgUnitChangeRequestDetailPath = {
+    baseUrl: baseUrls.orgUnitsChangeRequestDetail,
+    routerUrl: `${baseUrls.orgUnitsChangeRequestDetail}/*`,
+    permissions: [Permission.ORG_UNITS_CHANGE_REQUEST_REVIEW],
+    element: <ReviewOrgUnitChangesDetail />,
+};
+
 export const registryPath = {
     baseUrl: baseUrls.registry,
     routerUrl: `${baseUrls.registry}/*`,
@@ -439,6 +447,7 @@ export const routeConfigs: (RoutePath | AnonymousRoutePath)[] = [
     workflowsPath,
     workflowsDetailPath,
     orgUnitChangeRequestPath,
+    orgUnitChangeRequestDetailPath,
     registryPath,
     modulesPath,
     potentialPaymentsPath,

hat/assets/js/apps/Iaso/constants/urls.ts

@@ -185,6 +185,10 @@ export const baseRouteConfigs: Record<string, RouteConfig> = {
             'potentialPaymentIds',
         ],
     },
+    orgUnitsChangeRequestDetail: {
+        url: `${ORG_UNITS_CHANGE_REQUEST}/detail`,
+        params: ['accountId', 'changeRequestId'],
+    },
     registry: {
         url: 'orgunits/registry',
         params: [
@@ -523,6 +527,7 @@ type IasoBaseUrls = {
     orgUnits: string;
     orgUnitDetails: string;
     orgUnitsChangeRequest: string;
+    orgUnitsChangeRequestDetail: string;
     registry: string;
     registryDetail: string;
     links: string;

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

@@ -639,6 +639,7 @@
     "iaso.label.renderError": "Error rendering value",
     "iaso.label.restore": "Restore",
     "iaso.label.resultsLower": "result(s)",
+    "iaso.label.reviewChangeProposal": "Change proposals for {name}",
     "iaso.label.reviewChangeProposals": "Review change proposals",
     "iaso.label.save": "Save",
     "iaso.label.search": "Search",

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

@@ -639,6 +639,7 @@
     "iaso.label.renderError": "Erreur de rendu de la valeur",
     "iaso.label.restore": "Restaurer",
     "iaso.label.resultsLower": "résultat(s)",
+    "iaso.label.reviewChangeProposal": "Propositions de changement pour {name}",
     "iaso.label.reviewChangeProposals": "Examiner les propositions de changement",
     "iaso.label.save": "Sauver",
     "iaso.label.search": "Recherche",

hat/assets/js/apps/Iaso/domains/instances/components/InstanceFileContentRich.js

@@ -196,6 +196,8 @@ const PhotoField = ({ descriptor, data, showQuestionKey, files }) => {
                                 maxWidth: '35vw',
                                 maxHeight: '35vh',
                                 cursor: 'pointer',
+                                width: '100%',
+                                height: 'auto',
                             }}
                             onClick={() => setOpen(true)}
                         />

hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Dialogs/HighlightFieldsChanges.tsx → hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Components/HighlightFieldsChanges.tsx

@@ -66,7 +66,7 @@ export const HighlightFields: FunctionComponent<Props> = ({
     }, [fieldType, oldFieldValues, newFieldValues]);
 
     return (
-        <TableRow>
+        <TableRow sx={{ verticalAlign: 'top' }}>
             <TableCell>{field.label}</TableCell>
             {(fieldType && fieldType === 'array' && (
                 <TableCell colSpan={2}>

hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Dialogs/ReviewOrgUnitChangesButtons.tsx → hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Components/ReviewOrgUnitChangesButtons.tsx

@@ -19,7 +19,6 @@ type SubmitChangeRequest = (
 ) => void;
 
 type Props = {
-    closeDialog: () => void;
     newFields: NewOrgUnitField[];
     isNew: boolean;
     isNewOrgUnit: boolean;
@@ -28,7 +27,6 @@ type Props = {
 };
 
 export const ApproveOrgUnitChangesButtons: FunctionComponent<Props> = ({
-    closeDialog,
     newFields,
     isNew,
     isNewOrgUnit,
@@ -85,17 +83,6 @@ export const ApproveOrgUnitChangesButtons: FunctionComponent<Props> = ({
                 titleMessage={dialogTitleMessage}
             />
             <Box display="flex" justifyContent="flex-end" m={2}>
-                <Button
-                    onClick={() => {
-                        closeDialog();
-                    }}
-                    color="primary"
-                    data-test="cancel-button"
-                >
-                    {isNew
-                        ? formatMessage(MESSAGES.cancel)
-                        : formatMessage(MESSAGES.close)}
-                </Button>
                 {isNew && (
                     <>
                         <Box pl={1} display="inline-block">

hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Dialogs/ReviewOrgUnitChangesDialogTitle.tsx → hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/Components/ReviewOrgUnitChangesTitle.tsx

@@ -1,6 +1,6 @@
-import React, { FunctionComponent, useState } from 'react';
-import { Box, IconButton, Popover } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
+import { Box, IconButton, Popover } from '@mui/material';
+import React, { FunctionComponent, useState } from 'react';
 import { OrgUnitChangeRequestDetails } from '../types';
 import {
     ReviewOrgUnitChangesInfos,
@@ -13,7 +13,7 @@ type Props = {
     isFetchingChangeRequest: boolean;
 };
 
-export const ReviewOrgUnitChangesDialogTitle: FunctionComponent<Props> = ({
+export const ReviewOrgUnitChangesTitle: FunctionComponent<Props> = ({
     titleMessage,
     changeRequest,
     isFetchingChangeRequest,
@@ -42,7 +42,13 @@ export const ReviewOrgUnitChangesDialogTitle: FunctionComponent<Props> = ({
             }}
         >
             {titleMessage}
-            <Box sx={{ display: 'inline-block', ml: 2 }}>
+            <Box
+                sx={{
+                    display: 'inline-block',
+                    top: '-2px',
+                    position: 'relative',
+                }}
+            >
                 <IconButton
                     onClick={handleClick}
                     aria-describedby={id}