feat: CQDG-617 add tooltip on disable buttons on data explo (#254)

Ferlab-Ste-Justine · Mar 7, 2024 · f8abacf · f8abacf
1 parent 9c938ed
commit f8abacf
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 55 deletions.
diff --git a/src/components/reports/DownloadClinicalDataDropdown.tsx b/src/components/reports/DownloadClinicalDataDropdown.tsx
@@ -2,7 +2,7 @@ import intl from 'react-intl-universal';
 import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ISqonGroupFilter } from '@ferlab/ui/core/data/sqon/types';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Tooltip } from 'antd';
 import { INDEXES } from 'graphql/constants';
 import { generateSelectionSqon } from 'views/DataExploration/utils/selectionSqon';
 
@@ -24,6 +24,7 @@ const DownloadClinicalDataDropdown = ({
 
   const getCurrentSqon = (): any =>
     sqon || generateSelectionSqon(INDEXES.PARTICIPANT, participantIds);
+  const isDisabled = !sqon?.content?.length && !participantIds.length;
 
   const MenuProps = {
     onClick: (e: { key: string }) =>
@@ -49,16 +50,18 @@ const DownloadClinicalDataDropdown = ({
   };
 
   return (
-    <Dropdown
-      key="actionDropdown"
-      disabled={!sqon?.content?.length && !participantIds.length}
-      menu={MenuProps}
-      placement="bottomLeft"
+    <Tooltip
+      title={intl.get('screen.dataExploration.youMustSelect')}
+      trigger={isDisabled ? 'hover' : 'none'}
     >
-      <Button type={type} icon={<DownloadOutlined />}>
-        {intl.get('api.report.clinicalData.download')}
-      </Button>
-    </Dropdown>
+      {/** need a empty div below to show tooltip when Dropdown is disabled */}
+      <div />
+      <Dropdown disabled={isDisabled} key="actionDropdown" menu={MenuProps} placement="bottomLeft">
+        <Button type={type} icon={<DownloadOutlined />}>
+          {intl.get('api.report.clinicalData.download')}
+        </Button>
+      </Dropdown>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/reports/DownloadFileManifestModal/index.tsx b/src/components/reports/DownloadFileManifestModal/index.tsx
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ISyntheticSqon } from '@ferlab/ui/core/data/sqon/types';
-import { Button, Checkbox, Modal } from 'antd';
+import { Button, Checkbox, Modal, Tooltip } from 'antd';
 
 import TooMuchFilesAlert from 'components/reports/TooMuchFilesAlert';
 import { ReportType } from 'services/api/reports/models';
@@ -34,7 +34,10 @@ const DownloadFileManifestModal = ({
   const [isFamilyChecked, setIsFamilyChecked] = useState(false);
 
   return (
-    <>
+    <Tooltip
+      title={intl.get('screen.dataExploration.youMustSelect')}
+      trigger={isDisabled ? 'hover' : 'none'}
+    >
       <Button
         icon={<DownloadOutlined />}
         onClick={() => setIsModalVisible(true)}
@@ -76,7 +79,7 @@ const DownloadFileManifestModal = ({
         {hasTooManyFiles && <TooMuchFilesAlert />}
         {!hasTooManyFiles && isModalVisible && <FilesTable sqon={sqon} />}
       </Modal>
-    </>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/reports/DownloadRequestAccessModal/index.tsx b/src/components/reports/DownloadRequestAccessModal/index.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
 import ExternalLink from '@ferlab/ui/core/components/ExternalLink';
 import { ISyntheticSqon } from '@ferlab/ui/core/data/sqon/types';
-import { Button, Checkbox, Modal } from 'antd';
+import { Button, Checkbox, Modal, Tooltip } from 'antd';
 import EnvVariables from 'helpers/EnvVariables';
 
 import RestrictedStudyAlert from 'components/reports/RestrictedStudyAlert';
@@ -43,7 +43,10 @@ const DownloadRequestAccessModal = ({
   )}/docs/faire-une-demande-daccès-aux-données-du-cqdg`;
 
   return (
-    <>
+    <Tooltip
+      title={intl.get('screen.dataExploration.youMustSelect')}
+      trigger={isDisabled ? 'hover' : 'none'}
+    >
       <Button
         icon={<DownloadOutlined />}
         onClick={() => setIsModalVisible(true)}
@@ -98,7 +101,7 @@ const DownloadRequestAccessModal = ({
         {!withoutFiles && hasTooManyFiles && <TooMuchFilesAlert />}
         {isRestricted && <RestrictedStudyAlert />}
       </Modal>
-    </>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/reports/DownloadSamplelDataButton.tsx b/src/components/reports/DownloadSamplelDataButton.tsx
@@ -2,7 +2,7 @@ import intl from 'react-intl-universal';
 import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
 import { ISqonGroupFilter } from '@ferlab/ui/core/data/sqon/types';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { INDEXES } from 'graphql/constants';
 import { generateSelectionSqon } from 'views/DataExploration/utils/selectionSqon';
 
@@ -19,26 +19,26 @@ const DownloadSampleDataButton = ({ sampleIds, sqon, type = 'default' }: OwnProp
   const dispatch = useDispatch();
 
   const getCurrentSqon = (): any => sqon || generateSelectionSqon(INDEXES.BIOSPECIMEN, sampleIds);
+  const isDisabled = !sampleIds.length;
 
   return (
-    <Button
-      key={1}
-      icon={<DownloadOutlined />}
-      onClick={() =>
-        dispatch(
-          fetchReport({
-            data: {
-              sqon: getCurrentSqon(),
-              name: ReportType.BIOSPECIMEN_DATA,
-            },
-          }),
-        )
-      }
-      disabled={!sampleIds.length}
-      type={type}
+    <Tooltip
+      title={intl.get('screen.dataExploration.youMustSelect')}
+      trigger={isDisabled ? 'hover' : 'none'}
     >
-      {intl.get('api.report.sampleData.download')}
-    </Button>
+      <Button
+        disabled={isDisabled}
+        type={type}
+        icon={<DownloadOutlined />}
+        onClick={() =>
+          dispatch(
+            fetchReport({ data: { sqon: getCurrentSqon(), name: ReportType.BIOSPECIMEN_DATA } }),
+          )
+        }
+      >
+        {intl.get('api.report.sampleData.download')}
+      </Button>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/uiKit/SetsManagementDropdown/index.tsx b/src/components/uiKit/SetsManagementDropdown/index.tsx
@@ -214,6 +214,7 @@ const SetsManagementDropdown = ({
   const [isEditDisabled, setIsEditDisabled] = useState(true);
   const [modal, setModal] = useState<ModalState>(modals.hideAll);
   const { savedSets, isLoading, fetchingError } = useSavedSet();
+  const isDisabled = !selectedKeys?.length;
 
   useEffect(() => {
     if (savedSets && !isLoading && !fetchingError && sqon) {
@@ -251,25 +252,32 @@ const SetsManagementDropdown = ({
           type={type}
         />
       )}
-      <Dropdown
-        disabled={!selectedKeys?.length}
-        menu={getMenuProps({
-          participantCount: getSetCount(selectedKeys || [], results.total, selectedAllResults),
-          onClick: onClick,
-          isEditDisabled: isEditDisabled,
-          type,
-        })}
-        placement="bottomLeft"
-        trigger={['click']}
-        getPopupContainer={() =>
-          document.getElementById(`${type}-set-dropdown-container`) as HTMLElement
-        }
+      <Tooltip
+        title={intl.get('screen.dataExploration.youMustSelect')}
+        trigger={isDisabled ? 'hover' : 'none'}
       >
-        <Button className={'save-set-btn'} onClick={(e) => e.preventDefault()}>
-          {getTitle(type)}
-          <DownOutlined />
-        </Button>
-      </Dropdown>
+        {/** need a empty div below to show tooltip when Dropdown is disabled */}
+        <div />
+        <Dropdown
+          disabled={isDisabled}
+          menu={getMenuProps({
+            participantCount: getSetCount(selectedKeys || [], results.total, selectedAllResults),
+            onClick: onClick,
+            isEditDisabled: isEditDisabled,
+            type,
+          })}
+          placement="bottomLeft"
+          trigger={['click']}
+          getPopupContainer={() =>
+            document.getElementById(`${type}-set-dropdown-container`) as HTMLElement
+          }
+        >
+          <Button className={'save-set-btn'} onClick={(e) => e.preventDefault()}>
+            {getTitle(type)}
+            <DownOutlined />
+          </Button>
+        </Dropdown>
+      </Tooltip>
     </div>
   );
 };

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -1112,6 +1112,7 @@ const en = {
       removeTypeSet: 'Remove from a {type} set',
       set: 'Set',
       chooseSet: 'Choose a set',
+      youMustSelect: 'You must select at least 1 item',
     },
   },
   // this facets object is also used by Ferlab-ui to override the values in the facets

diff --git a/src/locales/fr.ts b/src/locales/fr.ts
@@ -417,9 +417,9 @@ const fr = {
       results: 'Résultats',
       noResults: 'Aucun résultat',
       of: 'de',
-      selected: 'élément selectionné',
-      selectedPlural: 'éléments selectionnés',
-      selectAllResults: 'Selectionner tous les résultats',
+      selected: 'élément sélectionné',
+      selectedPlural: 'éléments sélectionnés',
+      selectAllResults: 'Sélectionner tous les résultats',
       clear: 'Effacer',
       tableExport: 'Exporter en TSV',
       reset: 'Réinitialiser',
@@ -1127,6 +1127,7 @@ const fr = {
       removeTypeSet: "Retirer de l'ensemble de {type}",
       set: 'Ensemble',
       chooseSet: 'Choisissez un ensemble',
+      youMustSelect: 'Sélectionnez au moins un élément',
     },
   },
   // this facets object is also used by Ferlab-ui to override the values in the facets