Merge pull request Ferlab-Ste-Justine#388 from Ferlab-Ste-Justine/fix…

…/SKFP-924/auth-studies fix(authorizedwidget): SKFP-924 update to react-router v6
lflangis · Feb 9, 2024 · d8ad812 · d8ad812
2 parents 54cdbbb + d965fb4
commit d8ad812
Show file tree

Hide file tree

Showing 15 changed files with 437 additions and 427 deletions.
diff --git a/packages/ui/Release.md b/packages/ui/Release.md
@@ -1,3 +1,6 @@
+### 9.0.0 2024-02-09
+- fix: SKFP-924 fix link redirection with react-router v6 
+
 ### 8.2.1 2024-02-02
 - fix: SJIP-680 fix config corrumption when resizing the browser 
 

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "8.2.3",
+    "version": "9.0.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -49,8 +49,8 @@
         "@types/lodash": "^4.14.168",
         "@types/md5": "^2.3.2",
         "@types/react": "^18.2.0",
-        "@types/react-grid-layout": "^1.3.2",
-        "@types/react-router-dom": "^5.1.6",
+        "@types/react-grid-layout": "^1.3.5",
+        "@types/react-router-dom": "^5.3.3",
         "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "^4.10.0",
         "@typescript-eslint/parser": "^4.10.0",
@@ -64,11 +64,9 @@
         "eslint-plugin-simple-import-sort": "^7.0.0",
         "eslint-plugin-sort-destructure-keys": "^1.3.5",
         "eslint-plugin-sort-keys-fix": "^1.1.1",
-        "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.2.1",
-        "react-router-dom": "^5.2.0",
         "sass": "^1.26.12",
         "sass-loader": "^10.5.0",
         "ts-jest": "^29.0.3",
@@ -115,6 +113,8 @@
         "query-string": "^7.0.1",
         "react-grid-layout": "^1.4.4",
         "react-icons": "^4.2.0",
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0",
         "react-sizeme": "^3.0.2",
         "simplebar-react": "^2.4.3",
         "uuid": "^8.3.2"

diff --git a/packages/ui/src/components/Modal/ErrorModal.module.scss b/packages/ui/src/components/Modal/ErrorModal.module.scss
diff --git a/packages/ui/src/components/Modal/ErrorModal.tsx b/packages/ui/src/components/Modal/ErrorModal.tsx
diff --git a/packages/ui/src/components/Modal/WarningModal.module.scss b/packages/ui/src/components/Modal/WarningModal.module.scss
diff --git a/packages/ui/src/components/Modal/WarningModal.tsx b/packages/ui/src/components/Modal/WarningModal.tsx
diff --git a/packages/ui/src/components/Widgets/AuthorizedStudies/AuthorizedStudiesListItem.tsx b/packages/ui/src/components/Widgets/AuthorizedStudies/AuthorizedStudiesListItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Button, List, Progress, Space, Typography } from 'antd';
 import cx from 'classnames';
 
@@ -53,67 +53,65 @@ const AuthorizedStudiesListItem = ({
             <List.Item.Meta
                 className={styles.itemMeta}
                 description={
-                    <BrowserRouter>
-                        <div className={styles.filesCount}>
-                            <Space size={4}>
-                                <span>{dictionary.authorization}</span>
-                                <Link
-                                    onClick={() => {
-                                        addQuery({
-                                            query: generateQuery({
-                                                newFilters: [
-                                                    generateValueFilter({
-                                                        field: 'study_id',
-                                                        index: queryProps.participantIndex,
-                                                        value: [data.study_id],
-                                                    }),
-                                                    generateValueFilter({
-                                                        field: 'acl',
-                                                        index: queryProps.fileIndex,
-                                                        value: data.user_acl_in_study,
-                                                    }),
-                                                ],
-                                            }),
-                                            queryBuilderId: queryProps.queryBuilderId,
-                                            setAsActive: true,
-                                        });
-                                    }}
-                                    to={queryProps.to}
-                                >
-                                    <Button className={styles.fileLink} type="link">
-                                        <span>{numberWithCommas(authorizedAndUncontrolledFilesCount)}</span>
-                                    </Button>
-                                </Link>
-                                <span className={styles.of}>{dictionary.of}</span>
-                                <Link
-                                    onClick={() => {
-                                        addQuery({
-                                            query: generateQuery({
-                                                newFilters: [
-                                                    generateValueFilter({
-                                                        field: 'study_id',
-                                                        index: queryProps.participantIndex,
-                                                        value: [data.study_id],
-                                                    }),
-                                                ],
-                                            }),
-                                            queryBuilderId: queryProps.queryBuilderId,
-                                            setAsActive: true,
-                                        });
-                                    }}
-                                    to={queryProps.to}
-                                >
-                                    <Button className={styles.fileLink} type="link">
-                                        <span>{numberWithCommas(data.total_files_count)}</span>
-                                    </Button>
-                                </Link>
-                                <span>{dictionary.files}</span>
-                            </Space>
-                        </div>
-                    </BrowserRouter>
+                    <div className={styles.filesCount}>
+                        <Space size={4}>
+                            <span>{dictionary.authorization}</span>
+                            <Link
+                                onClick={() => {
+                                    addQuery({
+                                        query: generateQuery({
+                                            newFilters: [
+                                                generateValueFilter({
+                                                    field: 'study.study_code',
+                                                    index: queryProps.participantIndex,
+                                                    value: [data.study_code],
+                                                }),
+                                                generateValueFilter({
+                                                    field: 'acl',
+                                                    index: queryProps.fileIndex,
+                                                    value: data.user_acl_in_study,
+                                                }),
+                                            ],
+                                        }),
+                                        queryBuilderId: queryProps.queryBuilderId,
+                                        setAsActive: true,
+                                    });
+                                }}
+                                to={queryProps.to}
+                            >
+                                <Button className={styles.fileLink} type="link">
+                                    <span>{numberWithCommas(authorizedAndUncontrolledFilesCount)}</span>
+                                </Button>
+                            </Link>
+                            <span className={styles.of}>{dictionary.of}</span>
+                            <Link
+                                onClick={() => {
+                                    addQuery({
+                                        query: generateQuery({
+                                            newFilters: [
+                                                generateValueFilter({
+                                                    field: 'study.study_code',
+                                                    index: queryProps.participantIndex,
+                                                    value: [data.study_code],
+                                                }),
+                                            ],
+                                        }),
+                                        queryBuilderId: queryProps.queryBuilderId,
+                                        setAsActive: true,
+                                    });
+                                }}
+                                to={queryProps.to}
+                            >
+                                <Button className={styles.fileLink} type="link">
+                                    <span>{numberWithCommas(data.total_files_count)}</span>
+                                </Button>
+                            </Link>
+                            <span>{dictionary.files}</span>
+                        </Space>
+                    </div>
                 }
                 title={
-                    <Text ellipsis title={data.title}>
+                    <Text ellipsis={{ tooltip: data.title }} title={data.title}>
                         {data.title}
                     </Text>
                 }

diff --git a/packages/ui/src/components/Widgets/AuthorizedStudies/index.tsx b/packages/ui/src/components/Widgets/AuthorizedStudies/index.tsx
@@ -61,6 +61,7 @@ export interface IAuthorizedStudy {
     total_controlled_files_count: number;
     total_files_count: number;
     study_id: string;
+    study_code: string;
 }
 
 export interface IAuthorizedStudies {

diff --git a/packages/ui/src/components/Widgets/Cavatica/CavaticaAnalyse.tsx b/packages/ui/src/components/Widgets/Cavatica/CavaticaAnalyse.tsx
@@ -1,15 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { CloudUploadOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Modal } from 'antd';
 import { BaseButtonProps } from 'antd/lib/button/button';
 
-import ErrorModal from '../../Modal/ErrorModal';
-import WarningModal from '../../Modal/WarningModal';
-
 import CavaticaAnalyseModal, {
     DEFAULT_CAVATICA_ANALYSE_MODAL_DICTIONARY,
     ICavaticaTreeNode,
-    TCavaticaAnalyseModalDictionary as TCavaticaAnalyseModalDictionary,
+    TCavaticaAnalyseModalDictionary,
 } from './CavaticaAnalyzeModal';
 import CavaticaCreateProjectModal, {
     DEFAULT_CAVATICA_CREATE_PROJECT_MODAL_DICTIONARY,
@@ -133,48 +130,43 @@ const getErrorModalTileAndDescription = (modalState: ModalState, dictionary: TCa
         case ModalState.billing_groups_error:
             return {
                 content: dictionary.billingGroupsErrorModal?.description,
-                open: true,
                 title: dictionary.billingGroupsErrorModal?.title,
             };
         case ModalState.create_project_error:
             return {
                 content: dictionary.projectCreateErrorModal?.description,
-                open: true,
                 title: dictionary.projectCreateErrorModal?.title,
             };
         case ModalState.fetch_project_error:
             return {
                 content: dictionary.projectFetchErrorModal?.description,
-                open: true,
                 title: dictionary.projectFetchErrorModal?.title,
             };
         case ModalState.unauthorized_error:
             return {
                 content: dictionary.unauthorizedModal?.description,
-                open: true,
                 title: dictionary.unauthorizedModal?.title,
             };
         case ModalState.upload_limit_reached_error:
             return {
                 content: dictionary.uploadLimitReachedModalError?.description,
-                open: true,
                 title: dictionary.uploadLimitReachedModalError?.title,
             };
         default:
-            return { open: false };
+            return undefined;
     }
 };
 
 const CavaticaAnalyse = ({
+    cavatica,
+    dictionary = DEFAULT_CAVATICA_ANALYSE_DICTIONARY,
     handleBeginAnalyse,
-    handleFilesAndFolders,
     handleConnection,
-    setCavaticaBulkImportDataStatus,
     handleCreateProject,
-    handleResetErrors,
+    handleFilesAndFolders,
     handleImportBulkData,
-    cavatica,
-    dictionary = DEFAULT_CAVATICA_ANALYSE_DICTIONARY,
+    handleResetErrors,
+    setCavaticaBulkImportDataStatus,
     ...rest
 }: ICavaticaAnalyse): JSX.Element => {
     const [modalState, setModalState] = useState<ModalState>(ModalState.unknow);
@@ -183,6 +175,34 @@ const CavaticaAnalyse = ({
         setModalState(ModalState.unknow);
     };
 
+    useEffect(() => {
+        const errorProps = getErrorModalTileAndDescription(modalState, dictionary);
+        if (!errorProps) {
+            return;
+        }
+        Modal.error({
+            ...errorProps,
+            onOk: () => {
+                onResetModal();
+                handleResetErrors();
+            },
+        });
+    }, [modalState]);
+
+    useEffect(() => {
+        if (modalState != ModalState.connection_needed) {
+            return;
+        }
+
+        Modal.warning({
+            content: dictionary?.connectionRequiredModal?.description,
+            okText: dictionary.connectionRequiredModal?.okText,
+            onCancel: onResetModal,
+            onOk: () => handleConnection(),
+            title: dictionary?.connectionRequiredModal?.title,
+        });
+    }, [modalState]);
+
     useEffect(() => {
         if (cavatica.authentification.status !== PASSPORT_AUTHENTIFICATION_STATUS.connected) {
             if (cavatica.bulkImportData.status === CAVATICA_ANALYSE_STATUS.pending_analyse) {
@@ -233,23 +253,6 @@ const CavaticaAnalyse = ({
                 {dictionary?.buttonText}
             </Button>
 
-            <WarningModal
-                content={dictionary?.connectionRequiredModal?.description}
-                okText={dictionary.connectionRequiredModal?.okText}
-                onCancel={onResetModal}
-                onOk={() => handleConnection()}
-                open={modalState === ModalState.connection_needed}
-                title={dictionary?.connectionRequiredModal?.title}
-            />
-
-            <ErrorModal
-                onOk={() => {
-                    onResetModal();
-                    handleResetErrors();
-                }}
-                {...getErrorModalTileAndDescription(modalState, dictionary)}
-            />
-
             <CavaticaAnalyseModal
                 handleCreateProjectClick={() => {
                     setModalState(ModalState.createProject);

diff --git a/packages/ui/src/components/Widgets/Cavatica/CavaticaAnalyzeModal.tsx b/packages/ui/src/components/Widgets/Cavatica/CavaticaAnalyzeModal.tsx
@@ -21,7 +21,7 @@ export const DEFAULT_CAVATICA_ANALYSE_MODAL_DICTIONARY: TCavaticaAnalyseModalDic
     files: '{files} files',
     newProject: 'New project',
     ofFiles: '(out of {files} selected) to your Cavatica workspace.',
-    title: 'Analyze in Cavatica',
+    title: 'Connect in Cavatica',
     youAreAuthorizedToCopy: 'You are authorized to copy',
 };