Merge pull request #1333 from BLSQ/IA-2987_react_router_bugs

Ia 2987 react router bugs
BLSQ · May 28, 2024 · 9683f66 · 9683f66
2 parents 5cd4fe9 + d945c7d
commit 9683f66
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 59 deletions.
diff --git a/hat/assets/js/apps/Iaso/domains/completenessStats/CompletenessStatsFilters.tsx b/hat/assets/js/apps/Iaso/domains/completenessStats/CompletenessStatsFilters.tsx
@@ -133,7 +133,7 @@ export const CompletenessStatsFilters: FunctionComponent<Props> = ({
 
     const handleParentChange = useCallback(
         orgUnit => {
-            const id = orgUnit ? [orgUnit.id] : undefined;
+            const id = orgUnit ? orgUnit.id : undefined;
             setInitialParentId(id);
             handleChange('parentId', id);
         },

diff --git a/hat/assets/js/apps/Iaso/domains/forms/components/FormFormComponent.tsx b/hat/assets/js/apps/Iaso/domains/forms/components/FormFormComponent.tsx
@@ -2,8 +2,11 @@
 import React, { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { Box, Grid, Theme, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import { useSafeIntl, LinkWithLocation } from 'bluesquare-components';
-
+import {
+    useSafeIntl,
+    LinkWithLocation,
+    ExternalLink,
+} from 'bluesquare-components';
 import { FormatListBulleted, History } from '@mui/icons-material';
 import { DisplayIfUserHasPerm } from '../../../components/DisplayIfUserHasPerm';
 import InputComponent from '../../../components/forms/InputComponent';
@@ -63,10 +66,8 @@ const FormForm: FunctionComponent<FormFormProps> = ({
 }) => {
     const classes = useStyles();
     const [displayPeriods, setDisplayPeriods] = useState<boolean>();
-
     const { formatMessage } = useSafeIntl();
     const [showAdvancedSettings, setshowAdvancedSettings] = useState(false);
-
     const { data: allProjects, isFetching: isFetchingProjects } =
         useGetProjectsDropdownOptions();
     const { data: allOrgUnitTypes, isFetching: isOuTypeLoading } =
@@ -393,13 +394,12 @@ const FormForm: FunctionComponent<FormFormProps> = ({
                         </Grid>
                     </DisplayIfUserHasPerm>
                     <Grid item>
-                        <LinkWithLocation
-                            to={logsUrl}
-                            className={classes.linkWithIcon}
-                        >
-                            <History />
-                            {formatMessage(MESSAGES.formChangeLog)}
-                        </LinkWithLocation>
+                        <ExternalLink url={logsUrl}>
+                            <Typography className={classes.linkWithIcon}>
+                                <History />
+                                {formatMessage(MESSAGES.formChangeLog)}
+                            </Typography>
+                        </ExternalLink>
                     </Grid>
                 </Grid>
             )}

diff --git a/hat/assets/js/apps/Iaso/domains/pages/index.js b/hat/assets/js/apps/Iaso/domains/pages/index.js
@@ -1,24 +1,28 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { useSafeIntl, commonStyles, IconButton } from 'bluesquare-components';
+import {
+    useSafeIntl,
+    commonStyles,
+    IconButton,
+    ExternalLinkIconButton,
+} from 'bluesquare-components';
 import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import TopBar from '../../components/nav/TopBarComponent';
 import MESSAGES from './messages';
 import { useGetPages } from './hooks/useGetPages';
 import { useRemovePage } from './hooks/useRemovePage';
-import { userHasPermission } from '../users/utils';
 import DeleteConfirmDialog from './components/DeleteConfirmDialog';
 import CreateEditDialog from './components/CreateEditDialog';
 import PageActions from './components/PageActions';
 import PageAction from './components/PageAction';
 import { PAGES_TYPES } from './constants';
 import { DateTimeCellRfc } from '../../components/Cells/DateTimeCell.tsx';
 import { TableWithDeepLink } from '../../components/tables/TableWithDeepLink.tsx';
-import { useCurrentUser } from '../../utils/usersUtils.ts';
 import * as Permission from '../../utils/permissions.ts';
 import { useParamsObject } from '../../routing/hooks/useParamsObject.tsx';
-import { baseUrls } from '../../constants/urls';
+import { baseUrls } from '../../constants/urls.ts';
+import { DisplayIfUserHasPerm } from '../../components/DisplayIfUserHasPerm.tsx';
 
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_PAGE = 1;
@@ -99,8 +103,6 @@ const Pages = () => {
         });
     };
 
-    const currentUser = useCurrentUser();
-
     const columns = useMemo(
         () => [
             {
@@ -136,51 +138,42 @@ const Pages = () => {
                 Cell: settings => {
                     return (
                         <>
-                            {/* We use the <a> tag to avoid router's redirections
-                        i.e: adding /dashboard to the path and /accountId to the params
-                        */}
-                            <a href={`/pages/${settings.row.original.slug}`}>
+                            <ExternalLinkIconButton
+                                url={`/pages/${settings.row.original.slug}`}
+                                icon="remove-red-eye"
+                                tooltipMessage={{
+                                    ...MESSAGES.viewPage,
+                                    values: { linebreak: <br /> },
+                                }}
+                            />
+                            <DisplayIfUserHasPerm
+                                permissions={[Permission.PAGE_WRITE]}
+                            >
+                                <IconButton
+                                    icon="edit"
+                                    tooltipMessage={MESSAGES.edit}
+                                    onClick={() =>
+                                        handleClickEditRow(
+                                            settings.row.original.slug,
+                                        )
+                                    }
+                                />
                                 <IconButton
-                                    icon="remove-red-eye"
-                                    tooltipMessage={{
-                                        ...MESSAGES.viewPage,
-                                        values: { linebreak: <br /> },
-                                    }}
-                                    onClick={() => null}
+                                    icon="delete"
+                                    tooltipMessage={MESSAGES.delete}
+                                    onClick={() =>
+                                        handleClickDeleteRow(
+                                            settings.row.original.slug,
+                                        )
+                                    }
                                 />
-                            </a>
-
-                            {userHasPermission(
-                                Permission.PAGE_WRITE,
-                                currentUser,
-                            ) && (
-                                <>
-                                    <IconButton
-                                        icon="edit"
-                                        tooltipMessage={MESSAGES.edit}
-                                        onClick={() =>
-                                            handleClickEditRow(
-                                                settings.row.original.slug,
-                                            )
-                                        }
-                                    />
-                                    <IconButton
-                                        icon="delete"
-                                        tooltipMessage={MESSAGES.delete}
-                                        onClick={() =>
-                                            handleClickDeleteRow(
-                                                settings.row.original.slug,
-                                            )
-                                        }
-                                    />
-                                </>
-                            )}
+                            </DisplayIfUserHasPerm>
                         </>
                     );
                 },
             },
         ],
-        [currentUser, formatMessage, handleClickDeleteRow, handleClickEditRow],
+        [formatMessage, handleClickDeleteRow, handleClickEditRow],
     );
 
     return (

diff --git a/hat/assets/js/apps/Iaso/routing/routing.ts b/hat/assets/js/apps/Iaso/routing/routing.ts
@@ -54,7 +54,8 @@ export const useGenUrl = (): GenUrlFunction => {
     const currentBaseUrl =
         Object.values(allBaseUrls)
             .filter(url => pathname.includes(`${url}`))
-            .sort((a, b) => a.length - b.length)[0] ?? baseUrls.home;
+            .sort((a, b) => b.length - a.length)[0] ?? baseUrls.home;
+
     const currentParams = useParamsObject(currentBaseUrl ?? '');
     return useCallback(
         (

diff --git a/package-lock.json b/package-lock.json