-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #179 from bento-platform/features/disable-scope-se…
…lector feat(discovery): disable scope selection when possible
- Loading branch information
Showing
12 changed files
with
258 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React, { useMemo } from 'react'; | ||
| import { List, Avatar, Space, Typography } from 'antd'; | ||
| import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks'; | ||
| import { Link, useLocation, useNavigate } from 'react-router-dom'; | ||
| import { FaDatabase } from 'react-icons/fa'; | ||
| import { getCurrentPage } from '@/utils/router'; | ||
| import type { Project } from '@/types/metadata'; | ||
|
|
||
| type DatasetScopePickerProps = { | ||
| parentProject: Project; | ||
| }; | ||
|
|
||
| const DatasetScopePicker = ({ parentProject }: DatasetScopePickerProps) => { | ||
| const td = useTranslationDefault(); | ||
| const t = useTranslationCustom(); | ||
| const location = useLocation(); | ||
| const baseURL = '/' + location.pathname.split('/')[1]; | ||
| const navigate = useNavigate(); | ||
| const page = getCurrentPage(); | ||
|
|
||
| const { selectedScope } = useAppSelector((state) => state.metadata); | ||
| const scopeObj = selectedScope.scope; | ||
|
|
||
| const showClearDataset = useMemo( | ||
| () => | ||
| // only show the clear dataset option if the selected dataset belongs to the parentProject | ||
| scopeObj.dataset && parentProject.datasets.some((d) => d.identifier == scopeObj.dataset), | ||
| [scopeObj, parentProject] | ||
| ); | ||
| const showSelectProject = !selectedScope.fixedProject && parentProject.identifier != scopeObj.project; | ||
|
|
||
| const projectURL = `${baseURL}/p/${parentProject.identifier}/${page}`; | ||
|
|
||
| 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> | ||
| {showSelectProject && <Link to={projectURL}>{td('Select')}</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> | ||
| {showClearDataset && <Link to={projectURL}>{td('Clear dataset selection')}</Link>} | ||
| </Space> | ||
| <List | ||
| dataSource={parentProject.datasets} | ||
| bordered | ||
| renderItem={(dataset) => { | ||
| const datasetURL = `${baseURL}/p/${parentProject.identifier}/d/${dataset.identifier}/${page}`; | ||
| const selected = scopeObj.dataset && dataset.identifier === scopeObj.dataset; | ||
| return ( | ||
| <List.Item | ||
| className={`select-dataset-item${selected ? ' selected' : ''}`} | ||
| key={dataset.identifier} | ||
| onClick={() => navigate(datasetURL)} | ||
| style={{ cursor: 'pointer' }} | ||
| > | ||
| <List.Item.Meta | ||
| avatar={<Avatar icon={<FaDatabase />} />} | ||
| title={t(dataset.title)} | ||
| description={t(dataset.description)} | ||
| /> | ||
| </List.Item> | ||
| ); | ||
| }} | ||
| /> | ||
| </Space> | ||
| ); | ||
| }; | ||
|
|
||
| export default DatasetScopePicker; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React, { type CSSProperties, useCallback, useMemo, useState } from 'react'; | ||
| import { Tabs, Button } from 'antd'; | ||
| import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks'; | ||
| import { useLocation, useNavigate } from 'react-router-dom'; | ||
| import DatasetScopePicker from './DatasetScopePicker'; | ||
|
|
||
| const styles: Record<string, CSSProperties> = { | ||
| tabs: { | ||
| // Cancel out padding from modal on left side for button and item alignment | ||
| marginLeft: -24, | ||
| }, | ||
| }; | ||
|
|
||
| const ProjectScopePicker = () => { | ||
| const td = useTranslationDefault(); | ||
| const t = useTranslationCustom(); | ||
|
|
||
| const location = useLocation(); | ||
| const baseURL = '/' + location.pathname.split('/')[1]; | ||
|
|
||
| const navigate = useNavigate(); | ||
|
|
||
| const { projects, selectedScope } = useAppSelector((state) => state.metadata); | ||
| const { scope: scopeObj, fixedProject } = selectedScope; | ||
|
|
||
| const [selectedProject, setSelectedProject] = useState<string | undefined>( | ||
| scopeObj.project ?? projects[0]?.identifier ?? undefined | ||
| ); | ||
|
|
||
| const onProjectClear = useCallback(() => navigate(baseURL), [baseURL, navigate]); | ||
| const onTabChange = useCallback((key: string) => setSelectedProject(key), []); | ||
| const tabItems = useMemo( | ||
| () => | ||
| projects.map((p) => ({ | ||
| key: p.identifier, | ||
| label: t(p.title), | ||
| children: <DatasetScopePicker parentProject={p} />, | ||
| })), | ||
| [projects, t] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {fixedProject ? ( | ||
| <DatasetScopePicker parentProject={projects[0]} /> | ||
| ) : ( | ||
| // Project tabs if multiple projects | ||
| <Tabs | ||
| tabPosition="left" | ||
| activeKey={selectedProject} | ||
| onChange={onTabChange} | ||
| tabBarExtraContent={<Button onClick={onProjectClear}>{td('Clear')}</Button>} | ||
| items={tabItems} | ||
| style={styles.tabs} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectScopePicker; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import { Modal } from 'antd'; | ||
| import { useTranslationDefault } from '@/hooks'; | ||
| import ProjectScopePicker from './ProjectScopePicker'; | ||
|
|
||
| interface ScopePickerModalProps { | ||
| isModalOpen: boolean; | ||
| setIsModalOpen: (isOpen: boolean) => void; | ||
| } | ||
| const ScopePickerModal = ({ isModalOpen, setIsModalOpen }: ScopePickerModalProps) => { | ||
| const td = useTranslationDefault(); | ||
| const closeModal = () => setIsModalOpen(false); | ||
| return ( | ||
| <Modal title={td('Select Scope')} open={isModalOpen} onCancel={closeModal} footer={null} width={700}> | ||
| <ProjectScopePicker /> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default ScopePickerModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.