refact(discovery): improved scope select/clear options

bento-platform · Sep 13, 2024 · 6e875e7 · 6e875e7
1 parent 86789b2
commit 6e875e7
Showing 1 changed file with 31 additions and 9 deletions.
diff --git a/src/js/components/Scope/DatasetScopePicker.tsx b/src/js/components/Scope/DatasetScopePicker.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { List, Avatar, Space, Typography } from 'antd';
 import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks';
 import { Link, useLocation } from 'react-router-dom';
 import { FaDatabase } from 'react-icons/fa';
 import { getCurrentPage } from '@/utils/router';
-import type { Project } from '@/types/metadata';
+import type { Dataset, Project } from '@/types/metadata';
+
+const datasetIconColor = (dataset: Dataset, selectedID: string) => {
+  return dataset.identifier === selectedID ? '#33ffaa' : 'grey';
+};
 
 type DatasetScopePickerProps = {
   parentProject: Project;
@@ -18,26 +22,39 @@ const DatasetScopePicker = ({ parentProject, isSingleProject }: DatasetScopePick
   const page = getCurrentPage();
 
   const selectedScope = useAppSelector((state) => state.metadata.selectedScope);
+  const showClearDataset = useMemo(() => {
+    // only show the clear dataset option if the selected dataset belongs to the parentProject
+    return selectedScope.dataset && parentProject.datasets.some((d) => d.identifier == selectedScope.dataset);
+  }, [selectedScope, parentProject]);
+
   return (
     <Space direction="vertical" style={{ display: 'flex' }}>
       <Space align="baseline" size="large">
         <Typography.Title level={4} className="no-margin-top">
           {td('Project')}: {t(parentProject.title)}
         </Typography.Title>
-        {!isSingleProject && (
-          <Link to={`${baseURL}/p/${parentProject.identifier}/${page}`} key="3">
-            <Typography.Link>{td('Select')}</Typography.Link>
+        {isSingleProject && selectedScope.project ? (
+          // project scope clearing when projects tab is hidden
+          <Link to={baseURL} key="1">
+            <Typography.Link>{td('Clear project selection')}</Typography.Link>
           </Link>
+        ) : (
+          // project selection if not selected already
+          parentProject.identifier != selectedScope?.project && (
+            <Link to={`${baseURL}/p/${parentProject.identifier}/${page}`} key="2">
+              <Typography.Link>{td('Select')}</Typography.Link>
+            </Link>
+          )
         )}
       </Space>
       <Typography.Text>{t(parentProject.description)}</Typography.Text>
       <Space align="baseline" size="large">
         <Typography.Title level={5} className="no-margin-top">
           {td('Datasets')}
         </Typography.Title>
-        {selectedScope?.dataset && (
-          <Link to={`${baseURL}/p/${parentProject.identifier}/${page}`} >
-            <Typography.Link>{td('Clear selection')}</Typography.Link>
+        {showClearDataset && (
+          <Link to={`${baseURL}/p/${parentProject.identifier}/${page}`}>
+            <Typography.Link>{td('Clear dataset selection')}</Typography.Link>
           </Link>
         )}
       </Space>
@@ -48,7 +65,12 @@ const DatasetScopePicker = ({ parentProject, isSingleProject }: DatasetScopePick
           <Link to={`${baseURL}/p/${parentProject.identifier}/d/${item.identifier}/${page}`}>
             <List.Item className="select-dataset-hover" key={item.identifier}>
               <List.Item.Meta
-                avatar={<Avatar style={{ backgroundColor: '#33ccff' }} icon={<FaDatabase />} />}
+                avatar={
+                  <Avatar
+                    style={{ backgroundColor: datasetIconColor(item, selectedScope.dataset ?? '') }}
+                    icon={<FaDatabase />}
+                  />
+                }
                 title={
                   <Link to={`${baseURL}/p/${parentProject.identifier}/d/${item.identifier}/${page}`}>
                     {t(item.title)}