Skip to content

Commit 706e6ea

Browse files
tcnicholtcnichol
authored
hide files pagination on other tabs (#863)
* putting the buttons prev and next for file in a conditional. we do not see that except files and extractors, where it makes sense * previous and next inside of the files list dab * fixing merge conflict * fixing conflicts with main
1 parent c5efd75 commit 706e6ea

File tree

1 file changed

+56
-85
lines changed

1 file changed

+56
-85
lines changed

‎frontend/src/components/datasets/Dataset.tsx‎

Lines changed: 56 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
// lazy loading
22
import React, { useEffect, useState } from "react";
3-
import {
4-
Box,
5-
Button,
6-
ButtonGroup,
7-
Grid,
8-
Stack,
9-
Tab,
10-
Tabs,
11-
Typography,
12-
} from "@mui/material";
3+
import {Box, Button, ButtonGroup, Grid, Stack, Tab, Tabs, Typography} from "@mui/material";
134
import { useParams, useSearchParams } from "react-router-dom";
145
import { RootState } from "../../types/data";
156
import { useDispatch, useSelector } from "react-redux";
@@ -29,20 +20,14 @@ import { EditMetadata } from "../metadata/EditMetadata";
2920
import { MainBreadcrumbs } from "../navigation/BreadCrumb";
3021
import {
3122
deleteDatasetMetadata as deleteDatasetMetadataAction,
32-
fetchDatasetMetadata,
33-
fetchMetadataDefinitions,
23+
fetchDatasetMetadata, fetchMetadataDefinitions,
3424
patchDatasetMetadata as patchDatasetMetadataAction,
3525
postDatasetMetadata,
3626
} from "../../actions/metadata";
3727
import Layout from "../Layout";
3828
import { ActionsMenu } from "./ActionsMenu";
3929
import { DatasetDetails } from "./DatasetDetails";
40-
import {
41-
ArrowBack,
42-
ArrowForward,
43-
FormatListBulleted,
44-
InsertDriveFile,
45-
} from "@material-ui/icons";
30+
import {ArrowBack, ArrowForward, FormatListBulleted, InsertDriveFile} from "@material-ui/icons";
4631
import { Listeners } from "../listeners/Listeners";
4732
import AssessmentIcon from "@mui/icons-material/Assessment";
4833
import HistoryIcon from "@mui/icons-material/History";
@@ -65,7 +50,6 @@ export const Dataset = (): JSX.Element => {
6550
// search parameters
6651
const [searchParams] = useSearchParams();
6752
const folderId = searchParams.get("folder");
68-
6953
// Redux connect equivalent
7054
const dispatch = useDispatch();
7155
const updateDatasetMetadata = (
@@ -84,40 +68,34 @@ export const Dataset = (): JSX.Element => {
8468
dispatch(fetchFolderPath(folderId));
8569
const listFilesInDataset = (
8670
datasetId: string | undefined,
87-
folderId: string | null,
88-
skip: number | undefined,
89-
limit: number | undefined
90-
) => dispatch(fetchFilesInDataset(datasetId, folderId, skip, limit));
71+
folderId: string | null
72+
, skip: number | undefined, limit: number | undefined) => dispatch(fetchFilesInDataset(datasetId, folderId, skip, limit));
9173
const listFoldersInDataset = (
9274
datasetId: string | undefined,
9375
parentFolder: string | null,
94-
skip: number | undefined,
95-
limit: number | undefined
76+
skip: number | undefined, limit: number | undefined
9677
) => dispatch(fetchFoldersInDataset(datasetId, parentFolder, skip, limit));
9778
const listDatasetAbout = (datasetId: string | undefined) =>
9879
dispatch(fetchDatasetAbout(datasetId));
9980
const listDatasetMetadata = (datasetId: string | undefined) =>
10081
dispatch(fetchDatasetMetadata(datasetId));
101-
const getMetadatDefinitions = (
102-
name: string | null,
103-
skip: number,
104-
limit: number
105-
) => dispatch(fetchMetadataDefinitions(name, skip, limit));
82+
const getMetadatDefinitions = (name:string|null, skip:number, limit:number) => dispatch(fetchMetadataDefinitions(name, skip,limit));
83+
10684

10785
// mapStateToProps
10886
const about = useSelector((state: RootState) => state.dataset.about);
10987
const datasetRole = useSelector(
11088
(state: RootState) => state.dataset.datasetRole
11189
);
11290
const folderPath = useSelector((state: RootState) => state.folder.folderPath);
113-
const adminMode = useSelector((state: RootState) => state.user.adminMode);
11491

11592
// state
11693
const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
11794
const [enableAddMetadata, setEnableAddMetadata] =
11895
React.useState<boolean>(false);
11996
const [metadataRequestForms, setMetadataRequestForms] = useState({});
12097

98+
const [allowSubmit, setAllowSubmit] = React.useState<boolean>(false);
12199
// Error msg dialog
122100
const [errorOpen, setErrorOpen] = useState(false);
123101
const [showForbiddenPage, setShowForbiddenPage] = useState(false);
@@ -132,15 +110,12 @@ export const Dataset = (): JSX.Element => {
132110
const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
133111
const [nextDisabled, setNextDisabled] = useState<boolean>(false);
134112
const filesInDataset = useSelector((state: RootState) => state.dataset.files);
135-
const foldersInDataset = useSelector(
136-
(state: RootState) => state.folder.folders
137-
);
113+
const foldersInDataset = useSelector((state: RootState) => state.folder.folders);
138114

139-
// component did mount list all files in dataset
140-
useEffect(() => {
141-
getMetadatDefinitions(null, 0, 100);
142-
}, []);
143115

116+
const metadataDefinitionList = useSelector((state: RootState) => state.metadata.metadataDefinitionList);
117+
118+
// component did mount list all files in dataset
144119
useEffect(() => {
145120
listFilesInDataset(datasetId, folderId, skip, limit);
146121
listFoldersInDataset(datasetId, folderId, skip, limit);
@@ -149,17 +124,15 @@ export const Dataset = (): JSX.Element => {
149124
}, [searchParams]);
150125

151126
useEffect(() => {
152-
listFilesInDataset(datasetId, folderId, skip, limit);
153-
listFoldersInDataset(datasetId, folderId, skip, limit);
154-
listDatasetAbout(datasetId);
155-
getFolderPath(folderId);
156-
}, [adminMode]);
127+
getMetadatDefinitions(null, 0, 100);
128+
}, []);
157129

158130
useEffect(() => {
159131
// disable flipping if reaches the last page
160132
if (filesInDataset.length < limit && foldersInDataset.length < limit)
161133
setNextDisabled(true);
162-
else setNextDisabled(false);
134+
else
135+
setNextDisabled(false);
163136
}, [filesInDataset]);
164137

165138
useEffect(() => {
@@ -195,7 +168,7 @@ export const Dataset = (): JSX.Element => {
195168
setPaths(tmpPaths);
196169
}, [about, folderPath]);
197170

198-
// for pagination keep flipping until the return dataset is less than the limit
171+
// for pagination keep flipping until the return dataset is less than the limit
199172
const previous = () => {
200173
if (currPageNum - 1 >= 0) {
201174
setSkip((currPageNum - 1) * limit);
@@ -335,18 +308,17 @@ export const Dataset = (): JSX.Element => {
335308
{...a11yProps(3)}
336309
disabled={false}
337310
/>
338-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
311+
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
339312
<Tab
340313
icon={<BuildIcon />}
341314
iconPosition="start"
342315
sx={TabStyle}
343316
label="Extract"
344317
{...a11yProps(4)}
345318
disabled={false}
346-
/>
347-
) : (
319+
/> :
348320
<></>
349-
)}
321+
}
350322
<Tab
351323
icon={<HistoryIcon />}
352324
iconPosition="start"
@@ -355,18 +327,17 @@ export const Dataset = (): JSX.Element => {
355327
{...a11yProps(5)}
356328
disabled={false}
357329
/>
358-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
330+
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
359331
<Tab
360332
icon={<ShareIcon />}
361333
iconPosition="start"
362334
sx={TabStyle}
363335
label="Sharing"
364336
{...a11yProps(6)}
365337
disabled={false}
366-
/>
367-
) : (
338+
/> :
368339
<></>
369-
)}
340+
}
370341
</Tabs>
371342
<TabPanel value={selectedTabIndex} index={0}>
372343
{folderId !== null ? (
@@ -377,14 +348,33 @@ export const Dataset = (): JSX.Element => {
377348
<></>
378349
)}
379350
<FilesTable datasetId={datasetId} folderId={folderId} />
351+
<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
352+
<ButtonGroup
353+
variant="contained"
354+
aria-label="previous next buttons"
355+
>
356+
<Button
357+
aria-label="previous"
358+
onClick={previous}
359+
disabled={prevDisabled}
360+
>
361+
<ArrowBack /> Prev
362+
</Button>
363+
<Button
364+
aria-label="next"
365+
onClick={next}
366+
disabled={nextDisabled}
367+
>
368+
Next <ArrowForward />
369+
</Button>
370+
</ButtonGroup>
371+
</Box>
380372
</TabPanel>
381373
<TabPanel value={selectedTabIndex} index={1}>
382374
<Visualization datasetId={datasetId} />
383375
</TabPanel>
384376
<TabPanel value={selectedTabIndex} index={2}>
385-
{enableAddMetadata &&
386-
datasetRole.role !== undefined &&
387-
datasetRole.role !== "viewer" ? (
377+
{enableAddMetadata && datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
388378
<>
389379
<EditMetadata
390380
resourceType="dataset"
@@ -416,21 +406,18 @@ export const Dataset = (): JSX.Element => {
416406
resourceId={datasetId}
417407
/>
418408
<Box textAlign="center">
419-
{enableAddMetadata &&
420-
datasetRole.role !== undefined &&
421-
datasetRole.role !== "viewer" ? (
409+
{enableAddMetadata && datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
422410
<Button
423411
variant="contained"
424412
sx={{ m: 2 }}
425413
onClick={() => {
426414
setEnableAddMetadata(true);
427415
}}
428416
>
429-
Add Metadata
430-
</Button>
431-
) : (
417+
Add Metadata
418+
</Button> :
432419
<></>
433-
)}
420+
}
434421
</Box>
435422
</>
436423
)}
@@ -443,37 +430,21 @@ export const Dataset = (): JSX.Element => {
443430
resourceId={datasetId}
444431
/>
445432
</TabPanel>
446-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
433+
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
447434
<TabPanel value={selectedTabIndex} index={4}>
448435
<Listeners datasetId={datasetId} />
449-
</TabPanel>
450-
) : (
436+
</TabPanel> :
451437
<></>
452-
)}
438+
}
453439
<TabPanel value={selectedTabIndex} index={5}>
454440
<ExtractionHistoryTab datasetId={datasetId} />
455441
</TabPanel>
456-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
442+
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
457443
<TabPanel value={selectedTabIndex} index={6}>
458444
<SharingTab datasetId={datasetId} />
459445
</TabPanel>
460-
) : (
461-
<></>
462-
)}
463-
<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
464-
<ButtonGroup variant="contained" aria-label="previous next buttons">
465-
<Button
466-
aria-label="previous"
467-
onClick={previous}
468-
disabled={prevDisabled}
469-
>
470-
<ArrowBack /> Prev
471-
</Button>
472-
<Button aria-label="next" onClick={next} disabled={nextDisabled}>
473-
Next <ArrowForward />
474-
</Button>
475-
</ButtonGroup>
476-
</Box>
446+
: <></>
447+
}
477448
</Grid>
478449
<Grid item>
479450
<DatasetDetails details={about} />

0 commit comments

Comments
 (0)