QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

First pass at permissions; Updated auth0 to work with access token instead of id token

Browse Source
This commit is contained in:
darin.kelkhoff
2023-01-11 16:31:39 -06:00
parent eff5a04c0f
commit e096e055a4
16 changed files with 273 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -7,7 +7,7 @@
"@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.40",
"@kingsrook/qqq-frontend-core": "1.0.41",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",

69
src/App.tsx
View File

@ -40,6 +40,7 @@ import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
import theme from "qqq/components/legacy/Theme";
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
import AppHome from "qqq/pages/apps/Home";
import NoApps from "qqq/pages/apps/NoApps";
import ProcessRun from "qqq/pages/processes/ProcessRun";
import ReportRun from "qqq/pages/processes/ReportRun";
import EntityCreate from "qqq/pages/records/create/RecordCreate";
@ -53,7 +54,6 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
const qController = Client.getInstance();
export const SESSION_ID_COOKIE_NAME = "sessionId";
LicenseInfo.setLicenseKey(process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);
export default function App()
{
@ -63,6 +63,9 @@ export default function App()
const [isFullyAuthenticated, setIsFullyAuthenticated] = useState(false);
const [profileRoutes, setProfileRoutes] = useState({});
const [branding, setBranding] = useState({} as QBrandingMetaData);
const [needLicenseKey, setNeedLicenseKey] = useState(true);
const [defaultRoute, setDefaultRoute] = useState("/no-apps");
useEffect(() =>
{
@ -83,17 +86,21 @@ export default function App()
/////////////////////////////////////////
try
{
console.log("Loading token...");
await getAccessTokenSilently();
const idToken = await getIdTokenClaims();
setCookie(SESSION_ID_COOKIE_NAME, idToken.__raw, {path: "/"});
console.log("Loading token from auth0...");
const accessToken = await getAccessTokenSilently();
qController.setAuthorizationHeaderValue("Bearer " + accessToken);
/////////////////////////////////////////////////////////////////////////////////
// we've stopped using session id cook with auth0, so make sure it is not set. //
/////////////////////////////////////////////////////////////////////////////////
removeCookie(SESSION_ID_COOKIE_NAME);
setIsFullyAuthenticated(true);
console.log("Token load complete.");
}
catch (e)
{
console.log(`Error loading token: ${JSON.stringify(e)}`);
removeCookie(SESSION_ID_COOKIE_NAME);
qController.clearAuthenticationMetaDataLocalStorage();
logout();
return;
@ -105,6 +112,7 @@ export default function App()
// use a random token if anonymous or mock //
/////////////////////////////////////////////
console.log("Generating random token...");
qController.setAuthorizationHeaderValue(null);
setIsFullyAuthenticated(true);
setCookie(SESSION_ID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
console.log("Token generation complete.");
@ -119,6 +127,16 @@ export default function App()
})();
}, [loadingToken]);
if(needLicenseKey)
{
(async () =>
{
const metaData: QInstance = await qController.loadMetaData();
LicenseInfo.setLicenseKey(metaData.environmentValues.get("MATERIAL_UI_LICENSE_KEY") || process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);
setNeedLicenseKey(false);
})();
}
const [controller, dispatch] = useMaterialUIController();
const {miniSidenav, direction, layout, openConfigurator, sidenavColor} = controller;
const [onMouseEnter, setOnMouseEnter] = useState(false);
@ -205,6 +223,8 @@ export default function App()
}
}
let foundFirstApp = false;
function addAppToAppRoutesList(metaData: QInstance, app: QAppTreeNode, routeList: any[], parentPath: string, depth: number)
{
const path = `${parentPath}/${app.name}`;
@ -224,6 +244,16 @@ export default function App()
route: path,
component: <AppHome app={metaData.apps.get(app.name)} />,
});
if(!foundFirstApp)
{
/////////////////////////////////////////////////////////////////////////////////////////////////////
// keep track of what the top-most app the user has access to is. set that as their default route //
/////////////////////////////////////////////////////////////////////////////////////////////////////
foundFirstApp = true;
setDefaultRoute(path);
console.log("Set default route to: " + path);
}
}
else if (app.type === QAppNodeType.TABLE)
{
@ -363,15 +393,30 @@ export default function App()
const sideNavAppList = [] as any[];
const appRoutesList = [] as any[];
///////////////////////////////////////////////////////////////////////////////////
// iterate throught the list to find the 'main dashboard so we can put it first' //
///////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
// iterate through the list to find the 'main dashboard so we can put it first' //
//////////////////////////////////////////////////////////////////////////////////
if(metaData.appTree && metaData.appTree.length)
{
for (let i = 0; i < metaData.appTree.length; i++)
{
const app = metaData.appTree[i];
addAppToSideNavList(app, sideNavAppList, "", 0);
addAppToAppRoutesList(metaData, app, appRoutesList, "", 0);
}
}
else
{
///////////////////////////////////////////////////////////////////
// if the user doesn't have access to any apps, push this route. //
///////////////////////////////////////////////////////////////////
appRoutesList.push({
name: "No Apps",
key: "no-apps",
route: "/no-apps",
component: <NoApps />,
});
}
const newSideNavRoutes = [];
// @ts-ignore
@ -390,10 +435,8 @@ export default function App()
console.error(e);
if (e instanceof QException)
{
if ((e as QException).message.indexOf("status code 401") !== -1)
if ((e as QException).status === "401")
{
removeCookie(SESSION_ID_COOKIE_NAME);
//////////////////////////////////////////////////////
// todo - this is auth0 logout... make more generic //
//////////////////////////////////////////////////////
@ -486,7 +529,7 @@ export default function App()
onMouseLeave={handleOnMouseLeave}
/>
<Routes>
<Route path="*" element={<Navigate to="/dashboards/overview" />} />
<Route path="*" element={<Navigate to={defaultRoute} />} />
{appRoutes && getRoutes(appRoutes)}
{profileRoutes && getRoutes([profileRoutes])}
</Routes>

6
src/index.tsx
View File

@ -81,6 +81,9 @@ authenticationMetaDataPromise.then((authenticationMetaData) =>
// @ts-ignore
const clientId = authenticationMetaData.data.clientId;
// @ts-ignore
const audience = authenticationMetaData.data.audience;
if(!domain || !clientId)
{
render(
@ -103,7 +106,8 @@ authenticationMetaDataPromise.then((authenticationMetaData) =>
<Auth0ProviderWithRedirectCallback
domain={domain}
clientId={clientId}
redirectUri={`${window.location.origin}/dashboards/overview`}
audience={audience}
redirectUri={`${window.location.origin}/`}
>
<MaterialUIControllerProvider>
<ProtectedRoute component={App} />

23
src/qqq/components/forms/EntityForm.tsx
View File

@ -88,7 +88,7 @@ function EntityForm(props: Props): JSX.Element
const [tableSections, setTableSections] = useState(null as QTableSection[]);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [noCapabilityError, setNoCapabilityError] = useState(null as string);
const [notAllowedError, setNotAllowedError] = useState(null as string);
const {pageHeader, setPageHeader} = useContext(QContext);
@ -189,7 +189,11 @@ function EntityForm(props: Props): JSX.Element
if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
{
setNoCapabilityError("You may not edit records in this table");
setNotAllowedError("Records may not be edited in this table");
}
else if (!tableMetaData.editPermission)
{
setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
}
}
else
@ -206,7 +210,11 @@ function EntityForm(props: Props): JSX.Element
if (!tableMetaData.capabilities.has(Capability.TABLE_INSERT))
{
setNoCapabilityError("You may not create records in this table");
setNotAllowedError("Records may not be created in this table");
}
else if (!tableMetaData.insertPermission)
{
setNotAllowedError(`You do not have permission to create ${tableMetaData.label} records`);
}
////////////////////////////////////////////////////////////////////////////////////////////////
@ -420,14 +428,19 @@ function EntityForm(props: Props): JSX.Element
const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
let body;
if (noCapabilityError)
if (notAllowedError)
{
body = (
<Box mb={3}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Box mb={3}>
<Alert severity="error">{noCapabilityError}</Alert>
<Alert severity="error">{notAllowedError}</Alert>
{props.isModal &&
<Box mt={5}>
<QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} label="Close" disabled={false} />
</Box>
}
</Box>
</Grid>
</Grid>

4
src/qqq/components/processes/GoogleDriveFolderPicker.tsx
View File

@ -39,8 +39,8 @@ interface Props
export function GoogleDriveFolderPicker({showDefaultFoldersView, showSharedDrivesView, qInstance}: Props): JSX.Element
{
const clientId = "649816208522-m6oa971vqicrc1hlam7333pt4qck0tm8.apps.googleusercontent.com";
const appApiKey = "AIzaSyBhXK34CF2fUfCgUS1VIHoKZbHxEBuHtDM";
const clientId = qInstance.environmentValues.get("GOOGLE_APP_CLIENT_ID") || process.env.REACT_APP_GOOGLE_APP_CLIENT_ID;
const appApiKey = qInstance.environmentValues.get("GOOGLE_APP_API_KEY") || process.env.REACT_APP_GOOGLE_APP_API_KEY;
if(!clientId)
{
console.error("Missing environmentValue GOOGLE_APP_CLIENT_ID")

21
src/qqq/components/processes/ProcessLinkCard.tsx
View File

@ -24,6 +24,7 @@ import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import colors from "qqq/assets/theme/base/colors";
import MDTypography from "qqq/components/legacy/MDTypography";
interface Props
@ -37,33 +38,34 @@ interface Props
label: string;
};
icon: ReactNode;
isDisabled?: boolean;
[key: string]: any;
}
function ProcessLinkCard({
color, isReport, title, percentage, icon,
color, isReport, title, percentage, icon, isDisabled
}: Props): JSX.Element
{
return (
<Card>
<Box display="flex" justifyContent="space-between" pt={3} px={2}>
<Box display="flex" justifyContent="space-between" pt={3} px={2} title={isDisabled ? `You do not have permission to access this ${isReport ? "report" : "process"}` : ""}>
<Box
color={color === "light" ? "dark" : "white"}
color={color === "light" ? "#000000" : "#FFFFFF"}
borderRadius="xl"
display="flex"
justifyContent="center"
alignItems="center"
width="4rem"
height="4rem"
mt={-3}
sx={{backgroundColor: color}}
mt={-1.5}
sx={{borderRadius: "10px", backgroundColor: isDisabled ? colors.secondary.main : colors.info.main}}
>
<Icon fontSize="medium" color="inherit">
{icon}
</Icon>
</Box>
<Box textAlign="right" lineHeight={1.25}>
<Box textAlign="right" lineHeight={1.25} mt={1}>
<MDTypography variant="button" fontWeight="bold" color="text">
{title}
</MDTypography>
@ -81,9 +83,15 @@ function ProcessLinkCard({
{percentage.amount}
</MDTypography>
{
isDisabled ? (
isReport
? `You do not have permission to access the ${title} report.`
: `You do not have permission to run the process called ${title}.`
) : (
isReport
? `Click here to access the ${title} report.`
: `Click here to run the process called ${title}.`
)
}
{percentage.label}
</MDTypography>
@ -100,6 +108,7 @@ ProcessLinkCard.defaultProps = {
text: "",
label: "",
},
isDisabled: false,
};
export default ProcessLinkCard;

5
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -61,7 +61,10 @@ function RecordGridWidget({title, data}: Props): JSX.Element
const tableMetaData = new QTableMetaData(data.childTableMetaData);
const {rows, columnsToRender} = DataGridUtils.makeRows(records, tableMetaData);
const childTablePath = data.tablePath + (data.tablePath.endsWith("/") ? "" : "/")
/////////////////////////////////////////////////////////////////////////////////
// note - tablePath may be null, if the user doesn't have access to the table. //
/////////////////////////////////////////////////////////////////////////////////
const childTablePath = data.tablePath ? data.tablePath + (data.tablePath.endsWith("/") ? "" : "/") : data.tablePath;
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender, childTablePath);
////////////////////////////////////////////////////////////////

5
src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx
View File

@ -46,6 +46,7 @@ interface Props {
component: ReactNode;
};
direction?: "right" | "left";
isDisabled?: boolean;
[key: string]: any;
}
@ -56,6 +57,7 @@ function MiniStatisticsCard({
percentage,
icon,
direction,
isDisabled,
}: Props): JSX.Element
{
const [controller] = useMaterialUIController();
@ -108,7 +110,7 @@ function MiniStatisticsCard({
justifyContent="center"
alignItems="center"
color="#FFFFFF"
sx={{borderRadius: "10px", backgroundColor: colors.info.main}}
sx={{borderRadius: "10px", backgroundColor: isDisabled ? colors.secondary.main : colors.info.main}}
>
<Icon fontSize="medium" color="inherit">
{icon.component}
@ -134,6 +136,7 @@ MiniStatisticsCard.defaultProps = {
text: "",
},
direction: "right",
isDisabled: false,
};
export default MiniStatisticsCard;

54
src/qqq/pages/apps/Home.tsx
View File

@ -125,7 +125,7 @@ function AppHome({app}: Props): JSX.Element
{
const tableMetaData = await qController.loadTableMetaData(table.name);
let countResult = null;
if(tableMetaData.capabilities.has(Capability.TABLE_COUNT))
if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
{
countResult = await qController.count(table.name);
@ -183,6 +183,20 @@ function AppHome({app}: Props): JSX.Element
}, 1);
};
const hasTablePermission = (tableName: string) =>
{
return tables.find(t => t.name === tableName && (t.readPermission || t.insertPermission || t.editPermission || t.deletePermission));
};
const hasProcessPermission = (processName: string) =>
{
return processes.find(p => p.name === processName && p.hasPermission);
};
const hasReportPermission = (reportName: string) =>
{
return reports.find(r => r.name === reportName && r.hasPermission);
};
return (
<BaseLayout>
@ -210,7 +224,7 @@ function AppHome({app}: Props): JSX.Element
</Box>
{
section.processes ? (
<Box p={3} pl={5} pt={0}>
<Box p={3} pl={5} pt={0} pb={1}>
<MDTypography variant="h6">Actions</MDTypography>
</Box>
) : null
@ -224,12 +238,19 @@ function AppHome({app}: Props): JSX.Element
let process = app.childMap.get(processName);
return (
<Grid key={process.name} item xs={12} md={12} lg={tileSizeLg}>
{hasProcessPermission(processName) ?
<Link to={process.name}>
<ProcessLinkCard
icon={process.iconName || app.iconName}
title={process.label}
/>
</Link>
</Link> :
<ProcessLinkCard
icon={process.iconName || app.iconName}
title={process.label}
isDisabled={true}
/>
}
</Grid>
);
})
@ -244,7 +265,7 @@ function AppHome({app}: Props): JSX.Element
}
{
section.reports ? (
<Box p={3} pl={5} pt={0}>
<Box p={3} pl={5} pt={0} pb={1}>
<MDTypography variant="h6">Reports</MDTypography>
</Box>
) : null
@ -258,13 +279,21 @@ function AppHome({app}: Props): JSX.Element
let report = app.childMap.get(reportName);
return (
<Grid key={report.name} item xs={12} md={12} lg={tileSizeLg}>
{hasReportPermission(reportName) ?
<Link to={report.name}>
<ProcessLinkCard
icon={report.iconName || app.iconName}
title={report.label}
isReport={true}
/>
</Link>
</Link> :
<ProcessLinkCard
icon={report.iconName || app.iconName}
title={report.label}
isReport={true}
isDisabled={true}
/>
}
</Grid>
);
})
@ -279,7 +308,7 @@ function AppHome({app}: Props): JSX.Element
}
{
section.tables ? (
<Box p={3} pl={5} pb={0} pt={0}>
<Box p={3} pl={5} pb={1} pt={0}>
<MDTypography variant="h6">Data</MDTypography>
</Box>
) : null
@ -293,6 +322,7 @@ function AppHome({app}: Props): JSX.Element
let table = app.childMap.get(tableName);
return (
<Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
{hasTablePermission(tableName) ?
<Link to={table.name}>
<Box mb={3}>
<MiniStatisticsCard
@ -302,7 +332,17 @@ function AppHome({app}: Props): JSX.Element
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
/>
</Box>
</Link>
</Link> :
<Box mb={3} title="You do not have permission to access this table">
<MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}}
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
isDisabled={true}
/>
</Box>
}
</Grid>
);
})

23
src/qqq/pages/apps/NoApps.tsx Normal file
View File

@ -0,0 +1,23 @@
import {Alert} from "@mui/material";
import BaseLayout from "qqq/layouts/BaseLayout";
interface Props
{
foo: string;
}
NoApps.defaultProps = {
foo: null,
};
function NoApps({foo}: Props): JSX.Element
{
return (
<BaseLayout>
<Alert color="error">You do not have permission to access any apps.</Alert>
</BaseLayout>
);
}
export default NoApps;

32
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -71,16 +71,18 @@ interface Props
defaultProcessValues?: any;
isModal?: boolean;
isWidget?: boolean;
isReport?: boolean;
recordIds?: string | QQueryFilter;
closeModalHandler?: (event: object, reason: string) => void;
forceReInit?: number;
overrideLabel?: string
}
const INITIAL_RETRY_MILLIS = 1_500;
const RETRY_MAX_MILLIS = 12_000;
const BACKOFF_AMOUNT = 1.5;
function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler, forceReInit}: Props): JSX.Element
function ProcessRun({process, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
{
const processNameParam = useParams().processName;
const processName = process === null ? processNameParam : process.name;
@ -236,9 +238,9 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
Error
</MDTypography>
<MDTypography color="body" variant="button">
An error occurred while running the process:
An error occurred while running the {isReport ? "report" : "process"}:
{" "}
{process.label}
{overrideLabel ?? process.label}
{
isUserFacingError ? (
<Box mt={1}>
@ -331,7 +333,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
!isWidget &&
<MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
{(isModal) ? `${process.label}: ` : ""}
{(isModal) ? `${overrideLabel ?? process.label}: ` : ""}
{step?.label}
</MDTypography>
}
@ -616,7 +618,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
if(! isWidget)
{
setPageHeader(processMetaData.label);
setPageHeader(overrideLabel ?? processMetaData.label);
}
let newIndex = null;
@ -935,6 +937,18 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
}
}, [needToCheckJobStatus, retryMillis]);
const handlePermissionDenied = (e: any): boolean =>
{
if ((e as QException).status === "403")
{
setProcessError(`You do not have permission to run this ${isReport ? "report" : "process"}.`, true)
return (true);
}
return (false);
}
//////////////////////////////////////////////////////////////////////////////////////////
// do the initial load of data for the process - that is, meta data, plus the init step //
// also - allow the component that contains this component to force a re-init, by //
@ -1011,7 +1025,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
}
catch (e)
{
setProcessError("Error loading process definition.");
handlePermissionDenied(e) || setProcessError("Error loading process definition.");
return;
}
@ -1031,7 +1045,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
}
catch (e)
{
setProcessError("Error initializing process.");
handlePermissionDenied(e) || setProcessError("Error initializing process.");
}
})();
}
@ -1286,9 +1300,11 @@ ProcessRun.defaultProps = {
defaultProcessValues: {},
isModal: false,
isWidget: false,
isReport: false,
recordIds: null,
closeModalHandler: null,
forceReInit: 0
forceReInit: 0,
overrideLabel: null,
};
export default ProcessRun;

2
src/qqq/pages/processes/ReportRun.tsx
View File

@ -53,7 +53,7 @@ function ReportRun({report}: Props): JSX.Element
setPageHeader(report.label);
const process = metaData.processes.get(report.processName);
const defaultProcessValues = {reportName: report.name};
return (<ProcessRun process={process} defaultProcessValues={defaultProcessValues} />);
return (<ProcessRun process={process} overrideLabel={report.label} isReport={true} defaultProcessValues={defaultProcessValues} />);
}
else
{

23
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -1044,27 +1044,27 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
keepMounted
>
{
table.capabilities.has(Capability.TABLE_INSERT) &&
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
<MenuItem onClick={bulkLoadClicked}>
<ListItemIcon><Icon>library_add</Icon></ListItemIcon>
Bulk Load
</MenuItem>
}
{
table.capabilities.has(Capability.TABLE_UPDATE) &&
table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission &&
<MenuItem onClick={bulkEditClicked}>
<ListItemIcon><Icon>edit</Icon></ListItemIcon>
Bulk Edit
</MenuItem>
}
{
table.capabilities.has(Capability.TABLE_DELETE) &&
table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission &&
<MenuItem onClick={bulkDeleteClicked}>
<ListItemIcon><Icon>delete</Icon></ListItemIcon>
Bulk Delete
</MenuItem>
}
{(table.capabilities.has(Capability.TABLE_INSERT) || table.capabilities.has(Capability.TABLE_UPDATE) || table.capabilities.has(Capability.TABLE_DELETE)) && tableProcesses.length > 0 && <Divider />}
{((table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) || (table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)) && tableProcesses.length > 0 && <Divider />}
{tableProcesses.map((process) => (
<MenuItem key={process.name} onClick={() => processClicked(process)}>
<ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>
@ -1072,7 +1072,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</MenuItem>
))}
{
tableProcesses.length == 0 && !table.capabilities.has(Capability.TABLE_INSERT) && !table.capabilities.has(Capability.TABLE_UPDATE) && !table.capabilities.has(Capability.TABLE_DELETE) &&
tableProcesses.length == 0 && !(table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) && !(table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) && !(table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission) &&
<MenuItem disabled>
<ListItemIcon><Icon>block</Icon></ListItemIcon>
<i>No actions available</i>
@ -1112,6 +1112,17 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
document.scrollingElement.scrollTop = 0;
}, [ pageNumber, rowsPerPage ]);
if(tableMetaData && !tableMetaData.readPermission)
{
return (
<DashboardLayout>
<NavBar />
<Alert severity="error">
You do not have permission to view {tableMetaData?.label} records
</Alert>
</DashboardLayout>
);
}
return (
<DashboardLayout>
@ -1148,7 +1159,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</Box>
{
table.capabilities.has(Capability.TABLE_INSERT) &&
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
<QCreateNewButton />
}

62
src/qqq/pages/records/view/RecordView.tsx
View File

@ -95,6 +95,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
const [allTableProcesses, setAllTableProcesses] = useState([] as QProcessMetaData[]);
const [actionsMenu, setActionsMenu] = useState(null);
const [notFoundMessage, setNotFoundMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null as string);
const [searchParams] = useSearchParams();
const {setPageHeader} = useContext(QContext);
const [activeModalProcess, setActiveModalProcess] = useState(null as QProcessMetaData);
@ -108,6 +109,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
const reload = () =>
{
setSuccessMessage(null);
setNotFoundMessage(null);
setAsyncLoadInited(false);
setTableMetaData(null);
@ -267,12 +269,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element
}
catch (e)
{
if (e instanceof QException)
const historyPurge = (path: string) =>
{
if ((e as QException).status === "404")
{
setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
try
{
HistoryUtils.ensurePathNotInHistory(location.pathname);
@ -281,7 +279,20 @@ function RecordView({table, launchProcess}: Props): JSX.Element
{
console.error("Error pushing history: " + e);
}
}
if (e instanceof QException)
{
if ((e as QException).status === "404")
{
setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
historyPurge(location.pathname)
return;
}
else if ((e as QException).status === "403")
{
setNotFoundMessage(`You do not have permission to view ${tableMetaData.label} records`);
historyPurge(location.pathname)
return;
}
}
@ -298,7 +309,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
console.error("Error pushing history: " + e);
}
/////////////////////////////////////////////////
// define the sections, e.g., for the left-bar //
/////////////////////////////////////////////////
@ -344,10 +354,10 @@ function RecordView({table, launchProcess}: Props): JSX.Element
{
section.fieldNames.map((fieldName: string) => (
<Box key={fieldName} flexDirection="row" pr={2}>
<Typography variant="button" textTransform="none" fontWeight="bold" pr={1}>
<Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)">
{tableMetaData.fields.get(fieldName).label}:
</Typography>
<Typography variant="button" textTransform="none" fontWeight="regular" color="text">
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
{ValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
</Typography>
</Box>
@ -396,6 +406,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
setSectionFieldElements(sectionFieldElements);
setNonT1TableSections(nonT1TableSections);
if (searchParams.get("createSuccess") || searchParams.get("updateSuccess"))
{
setSuccessMessage(`${tableMetaData.label} successfully ${searchParams.get("createSuccess") ? "created" : "updated"}`);
}
forceUpdate();
})();
}
@ -445,14 +460,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
keepMounted
>
{
table.capabilities.has(Capability.TABLE_UPDATE) &&
table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission &&
<MenuItem onClick={() => navigate("edit")}>
<ListItemIcon><Icon>edit</Icon></ListItemIcon>
Edit
</MenuItem>
}
{
table.capabilities.has(Capability.TABLE_DELETE) &&
table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission &&
<MenuItem onClick={() =>
{
setActionsMenu(null);
@ -463,7 +478,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
Delete
</MenuItem>
}
{tableProcesses.length > 0 && (table.capabilities.has(Capability.TABLE_UPDATE) || table.capabilities.has(Capability.TABLE_DELETE)) && <Divider />}
{tableProcesses.length > 0 && ((table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)) && <Divider />}
{tableProcesses.map((process) => (
<MenuItem key={process.name} onClick={() => processClicked(process)}>
<ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>
@ -552,21 +567,18 @@ function RecordView({table, launchProcess}: Props): JSX.Element
{
notFoundMessage
?
<Box>{notFoundMessage}</Box>
<Alert color="error" sx={{mb: 3}}>{notFoundMessage}</Alert>
:
<Box pb={3}>
{
(searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
<Alert color="success" onClose={() =>
{}}>
{tableMetaData?.label}
{" "}
successfully
{" "}
{searchParams.get("createSuccess") ? "created" : "updated"}
successMessage ?
<Alert color="success" sx={{mb: 3}} onClose={() =>
{
setSuccessMessage(null)
}}>
{successMessage}
</Alert>
) : ("")
: ("")
}
<Grid container spacing={3}>
@ -588,7 +600,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
</Box>
<Box display="flex" justifyContent="space-between" width="100%" alignItems="center">
<Typography variant="h5">
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel || ""}` : ""}
</Typography>
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
{renderActionsMenu}
@ -610,10 +622,10 @@ function RecordView({table, launchProcess}: Props): JSX.Element
<Box component="form" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
{
table.capabilities.has(Capability.TABLE_DELETE) && <QDeleteButton onClickHandler={handleClickDeleteButton} />
table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission && <QDeleteButton onClickHandler={handleClickDeleteButton} />
}
{
table.capabilities.has(Capability.TABLE_UPDATE) && <QEditButton />
table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission && <QEditButton />
}
</Grid>
</Box>

2
src/qqq/utils/DataGridUtils.tsx
View File

@ -182,7 +182,7 @@ export default class DataGridUtils
);
}
if (key === tableMetaData.primaryKeyField)
if (key === tableMetaData.primaryKeyField && linkBase)
{
columns.splice(0, 0, column);
column.renderCell = (cellValues: any) => (

4
src/qqq/utils/qqq/ValueUtils.tsx
View File

@ -95,8 +95,8 @@ class ValueUtils
let tablePath = ValueUtils.getQInstance().getTablePathByName(toRecordFromTable);
if (!tablePath)
{
console.log("Couldn't find path for table: " + tablePath);
return ("");
console.log("Couldn't find path for table: " + toRecordFromTable);
return (displayValue ?? rawValue);
}
if (!tablePath.endsWith("/"))