Skip to content

Commit 9e5fcce

Browse files
longshuicylongshuicy
authored
tab can only use display none to hide (#976)
1 parent 48a04cd commit 9e5fcce

4 files changed

Lines changed: 67 additions & 68 deletions

File tree

‎frontend/src/components/auth/AuthWrapper.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from "react";
22
import { useSelector } from "react-redux";
33
import { RootState } from "../../types/data";
4+
import { authCheck } from "../../utils/common";
45

56
export const AuthWrapper = (props): JSX.Element => {
67
const { currRole, allowedRoles, children } = props;
78
const adminMode = useSelector((state: RootState) => state.user.adminMode);
89

9-
return <>{adminMode || allowedRoles.includes(currRole) ? children : <></>}</>;
10+
return <>{authCheck(adminMode, currRole, allowedRoles) ? children : <></>}</>;
1011
};

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

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import { ErrorModal } from "../errors/ErrorModal";
4949
import { Visualization } from "../visualizations/Visualization";
5050
import VisibilityIcon from "@mui/icons-material/Visibility";
5151
import config from "../../app.config";
52+
import { authCheck } from "../../utils/common";
5253

5354
export const Dataset = (): JSX.Element => {
5455
// path parameter
@@ -278,18 +279,22 @@ export const Dataset = (): JSX.Element => {
278279
{...a11yProps(2)}
279280
disabled={false}
280281
/>
281-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
282-
<Tab
283-
icon={<BuildIcon />}
284-
iconPosition="start"
285-
sx={TabStyle}
286-
label="Analysis"
287-
{...a11yProps(3)}
288-
disabled={false}
289-
/>
290-
) : (
291-
<></>
292-
)}
282+
<Tab
283+
icon={<BuildIcon />}
284+
iconPosition="start"
285+
sx={
286+
authCheck(adminMode, datasetRole.role, [
287+
"owner",
288+
"editor",
289+
"uploader",
290+
])
291+
? TabStyle
292+
: { display: "none" }
293+
}
294+
label="Analysis"
295+
{...a11yProps(3)}
296+
disabled={false}
297+
/>
293298
<Tab
294299
icon={<HistoryIcon />}
295300
iconPosition="start"
@@ -306,18 +311,22 @@ export const Dataset = (): JSX.Element => {
306311
{...a11yProps(5)}
307312
disabled={false}
308313
/>
309-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
310-
<Tab
311-
icon={<ShareIcon />}
312-
iconPosition="start"
313-
sx={TabStyle}
314-
label="Sharing"
315-
{...a11yProps(6)}
316-
disabled={false}
317-
/>
318-
) : (
319-
<></>
320-
)}
314+
<Tab
315+
icon={<ShareIcon />}
316+
iconPosition="start"
317+
sx={
318+
authCheck(adminMode, datasetRole.role, [
319+
"owner",
320+
"editor",
321+
"uploader",
322+
])
323+
? TabStyle
324+
: { display: "none" }
325+
}
326+
label="Sharing"
327+
{...a11yProps(6)}
328+
disabled={false}
329+
/>
321330
</Tabs>
322331
<TabPanel value={selectedTabIndex} index={0}>
323332
{folderId !== null ? (
@@ -406,26 +415,18 @@ export const Dataset = (): JSX.Element => {
406415
resourceId={datasetId}
407416
/>
408417
</TabPanel>
409-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
410-
<TabPanel value={selectedTabIndex} index={3}>
411-
<Listeners datasetId={datasetId} />
412-
</TabPanel>
413-
) : (
414-
<></>
415-
)}
418+
<TabPanel value={selectedTabIndex} index={3}>
419+
<Listeners datasetId={datasetId} />
420+
</TabPanel>
416421
<TabPanel value={selectedTabIndex} index={4}>
417422
<ExtractionHistoryTab datasetId={datasetId} />
418423
</TabPanel>
419424
<TabPanel value={selectedTabIndex} index={5}>
420425
<Visualization datasetId={datasetId} />
421426
</TabPanel>
422-
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
423-
<TabPanel value={selectedTabIndex} index={6}>
424-
<SharingTab datasetId={datasetId} />
425-
</TabPanel>
426-
) : (
427-
<></>
428-
)}
427+
<TabPanel value={selectedTabIndex} index={6}>
428+
<SharingTab datasetId={datasetId} />
429+
</TabPanel>
429430
</Grid>
430431
<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
431432
<DatasetDetails details={about} myRole={datasetRole.role} />

‎frontend/src/components/files/File.tsx‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Tab,
1111
Tabs,
1212
} from "@mui/material";
13-
import { downloadResource } from "../../utils/common";
13+
import { authCheck, downloadResource } from "../../utils/common";
1414
import { PreviewConfiguration, RootState } from "../../types/data";
1515
import { useParams, useSearchParams } from "react-router-dom";
1616
import { useDispatch, useSelector } from "react-redux";
@@ -95,9 +95,6 @@ export const File = (): JSX.Element => {
9595
);
9696
const folderPath = useSelector((state: RootState) => state.folder.folderPath);
9797
const fileRole = useSelector((state: RootState) => state.file.fileRole);
98-
const datasetRole = useSelector(
99-
(state: RootState) => state.dataset.datasetRole
100-
);
10198
const storageType = useSelector(
10299
(state: RootState) => state.file.fileSummary.storage_type
103100
);
@@ -345,19 +342,18 @@ export const File = (): JSX.Element => {
345342
{...a11yProps(2)}
346343
disabled={false}
347344
/>
348-
<AuthWrapper
349-
currRole={datasetRole.role}
350-
allowedRoles={["owner", "editor"]}
351-
>
352-
<Tab
353-
icon={<BuildIcon />}
354-
iconPosition="start"
355-
sx={TabStyle}
356-
label="Analysis"
357-
{...a11yProps(3)}
358-
disabled={false}
359-
/>
360-
</AuthWrapper>
345+
<Tab
346+
icon={<BuildIcon />}
347+
iconPosition="start"
348+
sx={
349+
authCheck(adminMode, fileRole, ["owner", "editor", "uploader"])
350+
? TabStyle
351+
: { display: "none" }
352+
}
353+
label="Analysis"
354+
{...a11yProps(3)}
355+
disabled={false}
356+
/>
361357
<Tab
362358
icon={<HistoryIcon />}
363359
iconPosition="start"
@@ -415,7 +411,10 @@ export const File = (): JSX.Element => {
415411
resourceId={fileId}
416412
publicView={false}
417413
/>
418-
{fileRole !== undefined && fileRole !== "viewer" ? (
414+
<AuthWrapper
415+
currRole={fileRole}
416+
allowedRoles={["owner", "editor", "uploader"]}
417+
>
419418
<Box textAlign="center">
420419
<Button
421420
variant="contained"
@@ -427,9 +426,7 @@ export const File = (): JSX.Element => {
427426
Add Metadata
428427
</Button>
429428
</Box>
430-
) : (
431-
<></>
432-
)}
429+
</AuthWrapper>
433430
</>
434431
)}
435432
</TabPanel>
@@ -442,14 +439,9 @@ export const File = (): JSX.Element => {
442439
version={fileSummary.version_num}
443440
/>
444441
</TabPanel>
445-
<AuthWrapper
446-
currRole={datasetRole.role}
447-
allowedRoles={["owner", "editor"]}
448-
>
449-
<TabPanel value={selectedTabIndex} index={3}>
450-
<Listeners fileId={fileId} datasetId={datasetId} />
451-
</TabPanel>
452-
</AuthWrapper>
442+
<TabPanel value={selectedTabIndex} index={3}>
443+
<Listeners fileId={fileId} datasetId={datasetId} />
444+
</TabPanel>
453445
<TabPanel value={selectedTabIndex} index={4}>
454446
<ExtractionHistoryTab fileId={fileId} />
455447
</TabPanel>

‎frontend/src/utils/common.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export async function downloadPublicResource(url) {
5050
return null;
5151
}
5252
}
53+
5354
export async function downloadResource(url) {
5455
const authHeader = getHeader();
5556
const response = await fetch(url, {
@@ -273,3 +274,7 @@ export const handleErrorReport = (reason, stack) => {
273274
)}&body=${encodeURIComponent(stack)}`
274275
);
275276
};
277+
278+
export const authCheck = (adminMode, currRole, allowedRoles = []) => {
279+
return adminMode || (currRole && allowedRoles.includes(currRole));
280+
};

0 commit comments

Comments
 (0)