poc to use a custom component from a plugin INTO a Iaso page

BLSQ · Jan 31, 2025 · 2fcacbc · 2fcacbc
1 parent 047c21f
commit 2fcacbc
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 2 deletions.
diff --git a/hat/assets/js/apps/Iaso/domains/app/types.ts b/hat/assets/js/apps/Iaso/domains/app/types.ts
@@ -36,6 +36,10 @@ export type Plugin = {
     baseUrls: Record<string, string>;
     paramsConfig: Record<string, string[]>;
     redirections?: RoutingRedirection[];
+    customComponents?: {
+        key: string;
+        component: ElementType;
+    }[];
 };
 
 export type Plugins = {

diff --git a/...sets/js/apps/Iaso/domains/orgUnits/reviewChanges/Components/ReviewOrgUnitFieldChanges.tsx b/...sets/js/apps/Iaso/domains/orgUnits/reviewChanges/Components/ReviewOrgUnitFieldChanges.tsx
@@ -30,6 +30,7 @@ export const ReviewOrgUnitFieldChanges: FunctionComponent<Props> = ({
     const isSelected =
         (status && field?.isSelected === true && 'success.light') || '';
 
+    console.log('fieldValues', fieldValues);
     return (
         <Accordion defaultExpanded>
             <AccordionSummary
@@ -50,7 +51,6 @@ export const ReviewOrgUnitFieldChanges: FunctionComponent<Props> = ({
                                         value.right === false)) &&
                                     'error.light') ||
                                 '';
-
                             return (
                                 <TableRow key={value.id}>
                                     <TableCell

diff --git a/...so/domains/orgUnits/reviewChanges/Tables/details/ReviewOrgUnitChangesDetailsTableBody.tsx b/...so/domains/orgUnits/reviewChanges/Tables/details/ReviewOrgUnitChangesDetailsTableBody.tsx
@@ -29,7 +29,10 @@ export const ReviewOrgUnitChangesDetailsTableBody: FunctionComponent<Props> = ({
                     changeRequest && changeRequest[`new_${field.key}`];
                 const changedFieldWithOldValues =
                     changeRequest && changeRequest[`old_${field.key}`];
-
+                console.log(
+                    'changedFieldWithOldValues',
+                    changedFieldWithOldValues,
+                );
                 return (
                     <HighlightFields
                         key={key}

diff --git a/hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/details.tsx b/hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/details.tsx
@@ -53,12 +53,14 @@ export const ReviewOrgUnitChangesDetail: FunctionComponent = () => {
 
     const { data: changeRequest, isFetching: isFetchingChangeRequest } =
         useGetApprovalProposal(Number(params.changeRequestId));
+    console.log('changeRequest', changeRequest);
     const isNew: boolean =
         !isFetchingChangeRequest && changeRequest?.status === 'new';
     const isNewOrgUnit = changeRequest
         ? changeRequest.org_unit.validation_status === 'NEW'
         : false;
     const { newFields, setSelected } = useNewFields(changeRequest);
+    console.log('newFields', newFields);
     const goBack = useGoBack(baseUrls.orgUnitsChangeRequest);
     const titleMessage = useMemo(() => {
         if (changeRequest?.status === 'rejected') {

diff --git a/hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/hooks/useNewFields.tsx b/hat/assets/js/apps/Iaso/domains/orgUnits/reviewChanges/hooks/useNewFields.tsx
@@ -272,6 +272,10 @@ export const useNewFields = (
                         fieldKey,
                         value,
                     );
+                    console.log('key', key);
+                    console.log('oldValue', oldValue);
+                    console.log('newValue', newValue);
+                    console.log('isChanged', isChanged);
                     const { label, order, fieldType } = fieldDef;
                     return {
                         key: fieldKey,

diff --git a/hat/assets/js/apps/Iaso/domains/users/components/UsersDialog.tsx b/hat/assets/js/apps/Iaso/domains/users/components/UsersDialog.tsx
@@ -10,6 +10,7 @@ import {
 import React, {
     FunctionComponent,
     useCallback,
+    useContext,
     useEffect,
     useMemo,
     useState,
@@ -18,8 +19,10 @@ import React, {
 import { MutateFunction, useQueryClient } from 'react-query';
 
 import { EditIconButton } from '../../../components/Buttons/EditIconButton';
+import { PluginsContext } from '../../../utils';
 import * as Permissions from '../../../utils/permissions';
 import { Profile, useCurrentUser } from '../../../utils/usersUtils';
+import { Plugins } from '../../app/types';
 import MESSAGES from '../messages';
 import { InitialUserData } from '../types';
 import PermissionsAttribution from './PermissionsAttribution';
@@ -170,6 +173,13 @@ const UserDialogComponent: FunctionComponent<Props> = ({
         ];
     }, [allUserRolesPermissions, user.user_permissions.value]);
 
+    const { plugins }: Plugins = useContext(PluginsContext);
+    // Find the custom tab component if it exists
+    const customUserTab = plugins[0].customComponents?.find(
+        comp => comp.key === 'user.extraTab',
+    );
+    console.log('customUserTab', customUserTab);
+
     useEffect(() => {
         setHasNoOrgUnitManagementWrite(
             !allUserUserRolesPermissions.includes(Permissions.ORG_UNITS),
@@ -253,6 +263,15 @@ const UserDialogComponent: FunctionComponent<Props> = ({
                             label={formatMessage(MESSAGES.orgUnitWriteTypes)}
                         />
                     )}
+                    {customUserTab && (
+                        <Tab
+                            classes={{
+                                root: classes.tab,
+                            }}
+                            value="customTab"
+                            label="Custom Tab"
+                        />
+                    )}
                 </Tabs>
                 <div className={classes.root} id="user-profile-dialog">
                     <div
@@ -298,6 +317,12 @@ const UserDialogComponent: FunctionComponent<Props> = ({
                             }
                         />
                     )}
+                    {tab === 'customTab' && customUserTab && (
+                        <customUserTab.component
+                            currentUser={user}
+                            setFieldValue={setFieldValue}
+                        />
+                    )}
                 </div>
             </ConfirmCancelModal>
         </>

diff --git a/plugins/registry/js/config.tsx b/plugins/registry/js/config.tsx
@@ -3,6 +3,7 @@ import { routes } from './src/constants/routes';
 import en from './src/constants/translations/en.json';
 import fr from './src/constants/translations/fr.json';
 import { baseUrls, paramsConfig } from './src/constants/urls';
+import { UserTab } from './userTab';
 
 const translations = {
     fr,
@@ -16,6 +17,12 @@ const config: Plugin = {
     redirections: [],
     menu: [],
     translations,
+    customComponents: [
+        {
+            key: 'user.extraTab',
+            component: UserTab,
+        },
+    ],
 };
 
 export default config;
diff --git a/plugins/registry/js/userTab.tsx b/plugins/registry/js/userTab.tsx
@@ -0,0 +1,18 @@
+import { Box, Typography } from '@mui/material';
+import React, { FC } from 'react';
+
+interface UserTabProps {
+    currentUser: any; // You can replace 'any' with your specific user type
+    setFieldValue: (key: string, value: any) => void;
+    // Add any other props you need
+}
+
+export const UserTab: FC<UserTabProps> = ({ currentUser, setFieldValue }) => {
+    console.log('currentUser', currentUser);
+    return (
+        <Box>
+            <Typography>CECI VIENt DE REGISTRY</Typography>
+            {/* Use your props here */}
+        </Box>
+    );
+};