Skip to content

Commit

Permalink
Merge branch 'interface-rewrite' of https://github.com/KelvinTegelaar…
Browse files Browse the repository at this point in the history 
…/CIPP into interface-rewrite
  • Loading branch information
@KelvinTegelaar
KelvinTegelaar committed Jan 6, 2025
2 parents 5b69b5b + 31a6ebd commit d730451
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 82 deletions.
151 changes: 88 additions & 63 deletions src/components/CippSettings/CippCustomRoles.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
AccordionDetails,
Stack,
SvgIcon,
Skeleton,
} from "@mui/material";

import Grid from "@mui/material/Grid2";
Expand All @@ -23,6 +24,7 @@ import { useForm, useWatch } from "react-hook-form";
import { InformationCircleIcon, TrashIcon } from "@heroicons/react/24/outline";
import { CippApiDialog } from "../CippComponents/CippApiDialog";
import { useDialog } from "../../hooks/use-dialog";
import { CippApiResults } from "../CippComponents/CippApiResults";

export const CippCustomRoles = () => {
const updatePermissions = ApiPostCall({
Expand All @@ -46,7 +48,11 @@ export const CippCustomRoles = () => {
const setDefaults = useWatch({ control: formControl.control, name: "Defaults" });
const selectedPermissions = useWatch({ control: formControl.control, name: "Permissions" });

const { data: apiPermissions = [] } = ApiGetCall({
const {
data: apiPermissions = [],
isFetching: apiPermissionFetching,
isSuccess: apiPermissionSuccess,
} = ApiGetCall({
url: "/api/ExecAPIPermissionList",
queryKey: "apiPermissions",
});
Expand Down Expand Up @@ -259,8 +265,8 @@ export const CippCustomRoles = () => {

return (
<>
<Stack spacing={3} xl={8} md={12} direction="row">
<Box>
<Stack spacing={3} direction="row">
<Box width={"80%"}>
<Stack spacing={1} sx={{ mb: 3 }}>
<CippFormComponent
type="autoComplete"
Expand Down Expand Up @@ -295,77 +301,95 @@ export const CippCustomRoles = () => {
/>
{allTenantSelected && (
<Alert color="warning">
All tenants selected, no tenant restrictions will be applied.
All tenants selected, no tenant restrictions will be applied unless blocked tenants
are specified.
</Alert>
)}
</Stack>
<Box sx={{ mb: 3 }}>
<CippFormTenantSelector
label="Blocked Tenants"
formControl={formControl}
type="multiple"
allTenants={false}
name="blockedTenants"
fullWidth={true}
/>
</Box>

<Typography variant="h5">API Permissions</Typography>
<Stack
direction="row"
display="flex"
alignItems="center"
justifyContent={"space-between"}
width={"100%"}
sx={{ my: 2 }}
>
<Typography variant="body2">Set All Permissions</Typography>

<Box sx={{ pr: 5 }}>
<CippFormComponent
type="radio"
name="Defaults"
options={[
{
label: "None",
value: "None",
},
{ label: "Read", value: "Read" },
{
label: "Read / Write",
value: "ReadWrite",
},
]}
{allTenantSelected && (
<Box sx={{ mb: 3 }}>
<CippFormTenantSelector
label="Blocked Tenants"
formControl={formControl}
row={true}
type="multiple"
allTenants={false}
name="blockedTenants"
fullWidth={true}
/>
</Box>
</Stack>
<Box>
)}

{currentRole && (
<>
{Object.keys(apiPermissions)
.sort()
.map((cat, catIndex) => (
<Accordion variant="outlined" key={`accordion-item-${catIndex}`}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>{cat}</AccordionSummary>
<AccordionDetails>
{Object.keys(apiPermissions[cat])
{apiPermissionFetching && <Skeleton height={500} />}
{apiPermissionSuccess && (
<>
<Typography variant="h5">API Permissions</Typography>
<Stack
direction="row"
display="flex"
alignItems="center"
justifyContent={"space-between"}
width={"100%"}
sx={{ my: 2 }}
>
<Typography variant="body2">Set All Permissions</Typography>

<Box sx={{ pr: 5 }}>
<CippFormComponent
type="radio"
name="Defaults"
options={[
{
label: "None",
value: "None",
},
{ label: "Read", value: "Read" },
{
label: "Read / Write",
value: "ReadWrite",
},
]}
formControl={formControl}
row={true}
/>
</Box>
</Stack>
<Box>
<>
{Object.keys(apiPermissions)
.sort()
.map((obj, index) => {
return (
<Grid container key={`row-${catIndex}-${index}`} className="mb-3">
<ApiPermissionRow obj={obj} cat={cat} />
</Grid>
);
})}
</AccordionDetails>
</Accordion>
))}
.map((cat, catIndex) => (
<Accordion variant="outlined" key={`accordion-item-${catIndex}`}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
{cat}
</AccordionSummary>
<AccordionDetails>
{Object.keys(apiPermissions[cat])
.sort()
.map((obj, index) => {
return (
<Grid
container
key={`row-${catIndex}-${index}`}
className="mb-3"
>
<ApiPermissionRow obj={obj} cat={cat} />
</Grid>
);
})}
</AccordionDetails>
</Accordion>
))}
</>
</Box>
</>
)}
</>
</Box>
)}
</Box>

<Box xl={4} md={12}>
<Box xl={3} md={12} width="30%">
{selectedRole && selectedTenant?.length > 0 && (
<>
<h5>Allowed Tenants</h5>
Expand Down Expand Up @@ -424,6 +448,7 @@ export const CippCustomRoles = () => {
formControl={formControl}
relatedQueryKeys={"customRoleList"}
/>
<CippApiResults apiObject={updatePermissions} />
<Stack direction="row" spacing={2} justifyContent="flex-end">
{currentRole && (
<Button
Expand Down
4 changes: 2 additions & 2 deletions src/components/CippTable/util-columnsFromAPI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const utilColumnsFromAPI = (dataArray) => {
id: accessorKey,
accessorFn: (row) => {
let value;
if (accessorKey.startsWith("@odata")) {
if (accessorKey.includes("@odata")) {
value = row[accessorKey];
} else {
value = accessorKey.split(".").reduce((acc, part) => acc && acc[part], row);
Expand All @@ -53,7 +53,7 @@ export const utilColumnsFromAPI = (dataArray) => {
...getCippFilterVariant(key),
Cell: ({ row }) => {
let value;
if (accessorKey.startsWith("@odata")) {
if (accessorKey.includes("@odata")) {
value = row.original[accessorKey];
} else {
value = accessorKey.split(".").reduce((acc, part) => acc && acc[part], row.original);
Expand Down
Loading

0 comments on commit d730451

Please sign in to comment.