tab can only use display none to hide (#976)

Author: longshuicy

frontend/src/components/auth/AuthWrapper.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../types/data";
+import { authCheck } from "../../utils/common";
 
 export const AuthWrapper = (props): JSX.Element => {
 	const { currRole, allowedRoles, children } = props;
 	const adminMode = useSelector((state: RootState) => state.user.adminMode);
 
-	return <>{adminMode || allowedRoles.includes(currRole) ? children : <></>}</>;
+	return <>{authCheck(adminMode, currRole, allowedRoles) ? children : <></>}</>;
 };

frontend/src/components/datasets/Dataset.tsx

@@ -49,6 +49,7 @@ import { ErrorModal } from "../errors/ErrorModal";
 import { Visualization } from "../visualizations/Visualization";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import config from "../../app.config";
+import { authCheck } from "../../utils/common";
 
 export const Dataset = (): JSX.Element => {
 	// path parameter
@@ -278,18 +279,22 @@ export const Dataset = (): JSX.Element => {
 							{...a11yProps(2)}
 							disabled={false}
 						/>
-						{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
-							<Tab
-								icon={<BuildIcon />}
-								iconPosition="start"
-								sx={TabStyle}
-								label="Analysis"
-								{...a11yProps(3)}
-								disabled={false}
-							/>
-						) : (
-							<></>
-						)}
+						<Tab
+							icon={<BuildIcon />}
+							iconPosition="start"
+							sx={
+								authCheck(adminMode, datasetRole.role, [
+									"owner",
+									"editor",
+									"uploader",
+								])
+									? TabStyle
+									: { display: "none" }
+							}
+							label="Analysis"
+							{...a11yProps(3)}
+							disabled={false}
+						/>
 						<Tab
 							icon={<HistoryIcon />}
 							iconPosition="start"
@@ -306,18 +311,22 @@ export const Dataset = (): JSX.Element => {
 							{...a11yProps(5)}
 							disabled={false}
 						/>
-						{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
-							<Tab
-								icon={<ShareIcon />}
-								iconPosition="start"
-								sx={TabStyle}
-								label="Sharing"
-								{...a11yProps(6)}
-								disabled={false}
-							/>
-						) : (
-							<></>
-						)}
+						<Tab
+							icon={<ShareIcon />}
+							iconPosition="start"
+							sx={
+								authCheck(adminMode, datasetRole.role, [
+									"owner",
+									"editor",
+									"uploader",
+								])
+									? TabStyle
+									: { display: "none" }
+							}
+							label="Sharing"
+							{...a11yProps(6)}
+							disabled={false}
+						/>
 					</Tabs>
 					<TabPanel value={selectedTabIndex} index={0}>
 						{folderId !== null ? (
@@ -406,26 +415,18 @@ export const Dataset = (): JSX.Element => {
 							resourceId={datasetId}
 						/>
 					</TabPanel>
-					{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
-						<TabPanel value={selectedTabIndex} index={3}>
-							<Listeners datasetId={datasetId} />
-						</TabPanel>
-					) : (
-						<></>
-					)}
+					<TabPanel value={selectedTabIndex} index={3}>
+						<Listeners datasetId={datasetId} />
+					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={4}>
 						<ExtractionHistoryTab datasetId={datasetId} />
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={5}>
 						<Visualization datasetId={datasetId} />
 					</TabPanel>
-					{datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
-						<TabPanel value={selectedTabIndex} index={6}>
-							<SharingTab datasetId={datasetId} />
-						</TabPanel>
-					) : (
-						<></>
-					)}
+					<TabPanel value={selectedTabIndex} index={6}>
+						<SharingTab datasetId={datasetId} />
+					</TabPanel>
 				</Grid>
 				<Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
 					<DatasetDetails details={about} myRole={datasetRole.role} />

frontend/src/components/files/File.tsx

@@ -10,7 +10,7 @@ import {
 	Tab,
 	Tabs,
 } from "@mui/material";
-import { downloadResource } from "../../utils/common";
+import { authCheck, downloadResource } from "../../utils/common";
 import { PreviewConfiguration, RootState } from "../../types/data";
 import { useParams, useSearchParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
@@ -95,9 +95,6 @@ export const File = (): JSX.Element => {
 	);
 	const folderPath = useSelector((state: RootState) => state.folder.folderPath);
 	const fileRole = useSelector((state: RootState) => state.file.fileRole);
-	const datasetRole = useSelector(
-		(state: RootState) => state.dataset.datasetRole
-	);
 	const storageType = useSelector(
 		(state: RootState) => state.file.fileSummary.storage_type
 	);
@@ -345,19 +342,18 @@ export const File = (): JSX.Element => {
 							{...a11yProps(2)}
 							disabled={false}
 						/>
-						<AuthWrapper
-							currRole={datasetRole.role}
-							allowedRoles={["owner", "editor"]}
-						>
-							<Tab
-								icon={<BuildIcon />}
-								iconPosition="start"
-								sx={TabStyle}
-								label="Analysis"
-								{...a11yProps(3)}
-								disabled={false}
-							/>
-						</AuthWrapper>
+						<Tab
+							icon={<BuildIcon />}
+							iconPosition="start"
+							sx={
+								authCheck(adminMode, fileRole, ["owner", "editor", "uploader"])
+									? TabStyle
+									: { display: "none" }
+							}
+							label="Analysis"
+							{...a11yProps(3)}
+							disabled={false}
+						/>
 						<Tab
 							icon={<HistoryIcon />}
 							iconPosition="start"
@@ -415,7 +411,10 @@ export const File = (): JSX.Element => {
 									resourceId={fileId}
 									publicView={false}
 								/>
-								{fileRole !== undefined && fileRole !== "viewer" ? (
+								<AuthWrapper
+									currRole={fileRole}
+									allowedRoles={["owner", "editor", "uploader"]}
+								>
 									<Box textAlign="center">
 										<Button
 											variant="contained"
@@ -427,9 +426,7 @@ export const File = (): JSX.Element => {
 											Add Metadata
 										</Button>
 									</Box>
-								) : (
-									<></>
-								)}
+								</AuthWrapper>
 							</>
 						)}
 					</TabPanel>
@@ -442,14 +439,9 @@ export const File = (): JSX.Element => {
 							version={fileSummary.version_num}
 						/>
 					</TabPanel>
-					<AuthWrapper
-						currRole={datasetRole.role}
-						allowedRoles={["owner", "editor"]}
-					>
-						<TabPanel value={selectedTabIndex} index={3}>
-							<Listeners fileId={fileId} datasetId={datasetId} />
-						</TabPanel>
-					</AuthWrapper>
+					<TabPanel value={selectedTabIndex} index={3}>
+						<Listeners fileId={fileId} datasetId={datasetId} />
+					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={4}>
 						<ExtractionHistoryTab fileId={fileId} />
 					</TabPanel>

frontend/src/utils/common.js

@@ -50,6 +50,7 @@ export async function downloadPublicResource(url) {
 		return null;
 	}
 }
+
 export async function downloadResource(url) {
 	const authHeader = getHeader();
 	const response = await fetch(url, {
@@ -273,3 +274,7 @@ export const handleErrorReport = (reason, stack) => {
 		)}&body=${encodeURIComponent(stack)}`
 	);
 };
+
+export const authCheck = (adminMode, currRole, allowedRoles = []) => {
+	return adminMode || (currRole && allowedRoles.includes(currRole));
+};