From 488f3727c8eb99f61bb8670b11862c83e7cced0c Mon Sep 17 00:00:00 2001 From: cbolles Date: Mon, 1 Apr 2024 15:56:49 -0400 Subject: [PATCH 01/11] Add ability for project admin to view project accessible datasets --- .../src/components/SideBar.component.tsx | 4 +-- .../src/pages/datasets/DatasetControls.tsx | 31 ++++++++++++++----- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/client/src/components/SideBar.component.tsx b/packages/client/src/components/SideBar.component.tsx index f50c2467..65ebc604 100644 --- a/packages/client/src/components/SideBar.component.tsx +++ b/packages/client/src/components/SideBar.component.tsx @@ -59,10 +59,10 @@ export const SideBar: FC = ({ open, drawerWidth }) => { name: t('menu.datasets'), action: () => {}, icon: , - visible: (p) => p!.owner, + visible: (p) => p!.projectAdmin, permission, subItems: [ - { name: t('menu.datasetControl'), action: () => navigate('/dataset/controls'), visible: (p) => p!.owner }, + { name: t('menu.datasetControl'), action: () => navigate('/dataset/controls'), visible: (p) => p!.projectAdmin }, { name: t('menu.projectAccess'), action: () => navigate('/dataset/projectaccess'), visible: (p) => p!.owner } ] }, diff --git a/packages/client/src/pages/datasets/DatasetControls.tsx b/packages/client/src/pages/datasets/DatasetControls.tsx index a9d8310e..1c6590a7 100644 --- a/packages/client/src/pages/datasets/DatasetControls.tsx +++ b/packages/client/src/pages/datasets/DatasetControls.tsx @@ -4,26 +4,41 @@ import { AddDataset } from '../../components/AddDataset.component'; import { useEffect, useState } from 'react'; import { UploadEntries } from '../../components/UploadEntries.component'; import { Dataset } from '../../graphql/graphql'; -import { useGetDatasetsLazyQuery } from '../../graphql/dataset/dataset'; +import { useGetDatasetsByProjectLazyQuery, useGetDatasetsLazyQuery } from '../../graphql/dataset/dataset'; import { DatasetsView } from '../../components/DatasetsView.component'; import { useTranslation } from 'react-i18next'; +import { usePermission } from '../../context/Permission.context'; +import { useProject } from '../../context/Project.context'; export const DatasetControls: React.FC = () => { const [add, setAdd] = useState(false); const [upload, setUpload] = useState(false); const [datasets, setDatasets] = useState([]); - const [getDatasets, getDatasetsResults] = useGetDatasetsLazyQuery(); + const [getAllDatasets, getAllDatasetsResults] = useGetDatasetsLazyQuery(); + const [getProjectDatasets, getProjectDatasetsResults] = useGetDatasetsByProjectLazyQuery(); + const { project } = useProject(); const { t } = useTranslation(); + const { permission } = usePermission(); + + const fetchDatasets = () => { + if (permission?.owner) { + getAllDatasets({ fetchPolicy: 'network-only' }); + } else if (permission?.projectAdmin && project) { + getProjectDatasets({ variables: { project: project._id } }); + } + }; useEffect(() => { - getDatasets(); - }, []); + fetchDatasets(); + }, [permission]); useEffect(() => { - if (getDatasetsResults.data) { - setDatasets(getDatasetsResults.data.getDatasets); + if (getAllDatasetsResults.data) { + setDatasets(getAllDatasetsResults.data.getDatasets); + } else if (getProjectDatasetsResults.data) { + setDatasets(getProjectDatasetsResults.data.getDatasetsByProject); } - }, [getDatasetsResults.data]); + }, [getAllDatasetsResults.data, getProjectDatasetsResults.data]); const handleClick = (type: string) => { if (type === 'add') { @@ -36,7 +51,7 @@ export const DatasetControls: React.FC = () => { const toggleAdd = (newDatasetCreated: boolean) => { setAdd((add) => !add); if (newDatasetCreated) { - getDatasets({ fetchPolicy: 'network-only' }); + fetchDatasets(); } }; From 03e48881f7055b737dd84313283570a921a85c0a Mon Sep 17 00:00:00 2001 From: cbolles Date: Tue, 2 Apr 2024 13:07:58 -0400 Subject: [PATCH 02/11] Start making project select JSON forms elements --- .../src/components/ProjectListSelect.component.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/client/src/components/ProjectListSelect.component.tsx diff --git a/packages/client/src/components/ProjectListSelect.component.tsx b/packages/client/src/components/ProjectListSelect.component.tsx new file mode 100644 index 00000000..92b3fd00 --- /dev/null +++ b/packages/client/src/components/ProjectListSelect.component.tsx @@ -0,0 +1,12 @@ +import { ControlProps, rankWith, RankedTester } from '@jsonforms/core'; +import { withJsonFormsControlProps } from '@jsonforms/react'; + +const ProjectListSelect: React.FC = (props) => { + return

hello world

; +}; + +export const videoFieldTester: RankedTester = rankWith(10, (uischema, _schema, _rootSchema) => { + return uischema.options != undefined && uischema.options && uischema.options.customType === 'projectList'; +}); + +export default withJsonFormsControlProps(ProjectListSelect); From b7e485b0113bddfe051f65a3903985f9bb4b319a Mon Sep 17 00:00:00 2001 From: cbolles Date: Thu, 4 Apr 2024 15:45:55 -0400 Subject: [PATCH 03/11] Add Chip style select --- .../src/components/AddDataset.component.tsx | 23 ++++++++++- .../ProjectListSelect.component.tsx | 38 ++++++++++++++++++- 2 files changed, 58 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/AddDataset.component.tsx b/packages/client/src/components/AddDataset.component.tsx index 8d7f8113..2e4287f6 100644 --- a/packages/client/src/components/AddDataset.component.tsx +++ b/packages/client/src/components/AddDataset.component.tsx @@ -10,6 +10,8 @@ import { Button } from '@mui/material'; import { ErrorObject } from 'ajv'; import { useSnackbar } from '../context/Snackbar.context'; import { useTranslation } from 'react-i18next'; +import { JsonFormsRendererRegistryEntry } from '@jsonforms/core'; +import ProjectListSelect, { projectListTester } from './ProjectListSelect.component'; interface ShowProps { show: boolean; @@ -26,6 +28,12 @@ const schema = { description: { type: 'string', description: 'Please enter new dataset description' + }, + projects: { + type: 'array', + items: { + type: 'string' + } } }, required: ['name', 'description'] @@ -43,6 +51,14 @@ const uischema = { type: 'Control', label: 'Description', scope: '#/properties/description' + }, + { + type: 'Control', + label: 'Projects with Access', + scope: '#/properties/projects', + options: { + customType: 'projectList' + } } ] }; @@ -100,6 +116,11 @@ export const AddDataset: React.FC = (props: ShowProps) => { createDataset({ variables: { dataset: data } }); }; + const renderers: JsonFormsRendererRegistryEntry[] = [ + ...materialRenderers, + { tester: projectListTester, renderer: ProjectListSelect } + ]; + return (
@@ -109,7 +130,7 @@ export const AddDataset: React.FC = (props: ShowProps) => { schema={schema} uischema={uischema} data={data} - renderers={materialRenderers} + renderers={renderers} cells={materialCells} onChange={({ data, errors }) => handleChange(data, errors)} additionalErrors={additionalErrors} diff --git a/packages/client/src/components/ProjectListSelect.component.tsx b/packages/client/src/components/ProjectListSelect.component.tsx index 92b3fd00..31466208 100644 --- a/packages/client/src/components/ProjectListSelect.component.tsx +++ b/packages/client/src/components/ProjectListSelect.component.tsx @@ -1,11 +1,45 @@ import { ControlProps, rankWith, RankedTester } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; +import { OutlinedInput, Select, Box, Chip, MenuItem, SelectChangeEvent } from '@mui/material'; +import { useState } from 'react'; const ProjectListSelect: React.FC = (props) => { - return

hello world

; + const [projectIds, setProjectIds] = useState([]); + + const names = [ + 'First', + 'Second', + 'Third' + ]; + + const handleChange = (event: SelectChangeEvent) => { + setProjectIds(typeof event.target.value === 'string' ? event.target.value.split(',') : event.target.value); + }; + + return ( + <> + + + ); }; -export const videoFieldTester: RankedTester = rankWith(10, (uischema, _schema, _rootSchema) => { +export const projectListTester: RankedTester = rankWith(10, (uischema, _schema, _rootSchema) => { return uischema.options != undefined && uischema.options && uischema.options.customType === 'projectList'; }); From 52d3c7f5008a95cf0b7fc812acb2fc049a18db8e Mon Sep 17 00:00:00 2001 From: cbolles Date: Thu, 4 Apr 2024 16:25:28 -0400 Subject: [PATCH 04/11] Visualize the select with checkboxes --- .../client/src/components/ProjectListSelect.component.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/ProjectListSelect.component.tsx b/packages/client/src/components/ProjectListSelect.component.tsx index 31466208..dfc3d404 100644 --- a/packages/client/src/components/ProjectListSelect.component.tsx +++ b/packages/client/src/components/ProjectListSelect.component.tsx @@ -1,6 +1,6 @@ import { ControlProps, rankWith, RankedTester } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; -import { OutlinedInput, Select, Box, Chip, MenuItem, SelectChangeEvent } from '@mui/material'; +import { OutlinedInput, Select, Box, Chip, MenuItem, SelectChangeEvent, Checkbox, ListItemText } from '@mui/material'; import { useState } from 'react'; const ProjectListSelect: React.FC = (props) => { @@ -32,7 +32,10 @@ const ProjectListSelect: React.FC = (props) => { )} > {names.map(name => ( - {name} + + -1} /> + + ))} From dc53c8cc565d0e4f63feac956c2702956b221868 Mon Sep 17 00:00:00 2001 From: cbolles Date: Thu, 4 Apr 2024 16:31:02 -0400 Subject: [PATCH 05/11] Add a label to the select box --- packages/client/src/components/AddDataset.component.tsx | 2 ++ .../client/src/components/ProjectListSelect.component.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/AddDataset.component.tsx b/packages/client/src/components/AddDataset.component.tsx index 2e4287f6..e9140f95 100644 --- a/packages/client/src/components/AddDataset.component.tsx +++ b/packages/client/src/components/AddDataset.component.tsx @@ -30,6 +30,8 @@ const schema = { description: 'Please enter new dataset description' }, projects: { + description: 'Select project that will have access to the dataset', + label: 'Project Access', type: 'array', items: { type: 'string' diff --git a/packages/client/src/components/ProjectListSelect.component.tsx b/packages/client/src/components/ProjectListSelect.component.tsx index dfc3d404..b1973279 100644 --- a/packages/client/src/components/ProjectListSelect.component.tsx +++ b/packages/client/src/components/ProjectListSelect.component.tsx @@ -1,6 +1,6 @@ import { ControlProps, rankWith, RankedTester } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; -import { OutlinedInput, Select, Box, Chip, MenuItem, SelectChangeEvent, Checkbox, ListItemText } from '@mui/material'; +import { OutlinedInput, Select, Box, Chip, MenuItem, SelectChangeEvent, Checkbox, ListItemText, InputLabel } from '@mui/material'; import { useState } from 'react'; const ProjectListSelect: React.FC = (props) => { @@ -18,11 +18,13 @@ const ProjectListSelect: React.FC = (props) => { return ( <> + {props.label} diff --git a/packages/client/src/components/SideBar.component.tsx b/packages/client/src/components/SideBar.component.tsx index 65ebc604..f50c2467 100644 --- a/packages/client/src/components/SideBar.component.tsx +++ b/packages/client/src/components/SideBar.component.tsx @@ -59,10 +59,10 @@ export const SideBar: FC = ({ open, drawerWidth }) => { name: t('menu.datasets'), action: () => {}, icon: , - visible: (p) => p!.projectAdmin, + visible: (p) => p!.owner, permission, subItems: [ - { name: t('menu.datasetControl'), action: () => navigate('/dataset/controls'), visible: (p) => p!.projectAdmin }, + { name: t('menu.datasetControl'), action: () => navigate('/dataset/controls'), visible: (p) => p!.owner }, { name: t('menu.projectAccess'), action: () => navigate('/dataset/projectaccess'), visible: (p) => p!.owner } ] }, From 4ddc28e85a961ae91e693bba660588c0f2ea83db Mon Sep 17 00:00:00 2001 From: cbolles Date: Fri, 5 Apr 2024 12:03:19 -0400 Subject: [PATCH 07/11] Fix issue with check box --- .../src/components/ProjectListSelect.component.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/client/src/components/ProjectListSelect.component.tsx b/packages/client/src/components/ProjectListSelect.component.tsx index cfa2e0f0..b27e1ace 100644 --- a/packages/client/src/components/ProjectListSelect.component.tsx +++ b/packages/client/src/components/ProjectListSelect.component.tsx @@ -9,14 +9,14 @@ import { useSnackbar } from '../context/Snackbar.context'; const ProjectListSelect: React.FC = (props) => { const [projects, setProjects] = useState([]); - const [projectIds, setProjectIds] = useState([]); + const [selectedProjects, setSelectedProjects] = useState([]); const getProjects = useGetProjectsQuery(); const { t } = useTranslation(); const { pushSnackbarMessage } = useSnackbar(); - const handleChange = (event: SelectChangeEvent) => { - setProjectIds(typeof event.target.value === 'string' ? event.target.value.split(',') : event.target.value); + const handleChange = (event: SelectChangeEvent) => { + setSelectedProjects(event.target.value as Project[]); }; useEffect(() => { @@ -33,20 +33,20 @@ const ProjectListSelect: React.FC = (props) => {