mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrated Policies module to mds (#2911)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-06-28 18:23:58 -06:00
committed by GitHub
parent df937467a0
commit 21f20bb9ea
7 changed files with 362 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -197,8 +197,8 @@ export const actionsTray = {
actionsTray: {
display: "flex" as const,
justifyContent: "space-between" as const,
marginBottom: "1rem",
alignItems: "center",
marginBottom: "1rem",
"& button": {
flexGrow: 0,
marginLeft: 8,

10
portal-ui/src/screens/Console/Common/SearchBox.tsx
View File

@@ -23,6 +23,7 @@ type SearchBoxProps = {
value: string;
onChange: (value: string) => void;
overrideClass?: any;
id?: string;
sx?: CSSObject;
};
@@ -31,23 +32,20 @@ const SearchBox = ({
onChange,
overrideClass,
value,
id = "search-resource",
sx,
}: SearchBoxProps) => {
return (
<InputBox
placeholder={placeholder}
className={overrideClass ? overrideClass : ""}
id="search-resource"
id={id}
label=""
onChange={(e) => {
onChange(e.target.value);
}}
value={value}
overlayObject={
<SearchIcon
style={{ width: 16, height: 16, marginTop: 5, marginRight: 5 }}
/>
}
startIcon={<SearchIcon />}
sx={sx}
/>
);

16
portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
View File

@@ -15,27 +15,27 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import { Box } from "@mui/material";
import {
AddAccessRuleIcon,
BackLink,
Button,
FormLayout,
PageLayout,
Box,
Grid,
InputBox,
} from "mds";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import AddPolicyHelpBox from "./AddPolicyHelpBox";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "../../../store";
import { emptyPolicy } from "./utils";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import { api } from "../../../api";
import { Error, HttpResponse, Policy } from "../../../api/consoleApi";
import HelpMenu from "../HelpMenu";
const AddPolicyScreen = () => {
const dispatch = useAppDispatch();
@@ -119,9 +119,9 @@ const AddPolicyScreen = () => {
addRecord(e);
}}
>
<Grid container item spacing={1}>
<Grid container>
<Grid item xs={12}>
<InputBoxWrapper
<InputBox
id="policy-name"
name="policy-name"
label="Policy Name"
@@ -143,7 +143,7 @@ const AddPolicyScreen = () => {
editorHeight={"350px"}
/>
</Grid>
<Grid item xs={12} textAlign={"right"}>
<Grid item xs={12} sx={{ textAlign: "right" }}>
<Box
sx={{
display: "flex",

8
portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
View File

@@ -14,9 +14,7 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { DialogContentText } from "@mui/material";
import React, { Fragment } from "react";
import { ErrorResponseHandler } from "../../../common/types";
import useApi from "../Common/Hooks/useApi";
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
@@ -65,10 +63,10 @@ const DeletePolicy = ({
onConfirm={onConfirmDelete}
onClose={onClose}
confirmationContent={
<DialogContentText>
<Fragment>
Are you sure you want to delete policy <br />
<b>{selectedPolicy}</b>?
</DialogContentText>
</Fragment>
}
/>
);

95
portal-ui/src/screens/Console/Policies/ListPolicies.tsx
View File

@@ -15,21 +15,18 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { AddIcon, Button, HelpBox, IAMPoliciesIcon, PageLayout } from "mds";
import { useNavigate } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
import {
actionsTray,
containerForHeader,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
AddIcon,
Button,
DataTable,
Grid,
HelpBox,
IAMPoliciesIcon,
PageLayout,
} from "mds";
import { useNavigate } from "react-router-dom";
import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import {
CONSOLE_UI_RESOURCE,
createPolicyPermissions,
@@ -44,42 +41,25 @@ import {
hasPermission,
SecureComponent,
} from "../../../common/SecureComponent";
import SearchBox from "../Common/SearchBox";
import withSuspense from "../Common/Components/withSuspense";
import { encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import { api } from "../../../api";
import {
Error,
HttpResponse,
ListPoliciesResponse,
Policy,
} from "../../../api/consoleApi";
import { encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { api } from "../../../api";
import SearchBox from "../Common/SearchBox";
import withSuspense from "../Common/Components/withSuspense";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
const styles = (theme: Theme) =>
createStyles({
...actionsTray,
...searchField,
searchField: {
...searchField.searchField,
maxWidth: 380,
},
...containerForHeader,
});
interface IPoliciesProps {
classes: any;
}
const ListPolicies = ({ classes }: IPoliciesProps) => {
const ListPolicies = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
@@ -194,7 +174,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
}, []);
return (
<React.Fragment>
<Fragment>
{deleteOpen && (
<DeletePolicy
deleteOpen={deleteOpen}
@@ -204,14 +184,14 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
)}
<PageHeaderWrapper label="IAM Policies" actions={<HelpMenu />} />
<PageLayout className={classes.pageContainer}>
<Grid container spacing={1}>
<Grid item xs={12} className={classes.actionsTray}>
<PageLayout>
<Grid container sx={{ gap: 15 }}>
<Grid item xs={12} sx={actionsTray.actionsTray}>
<SearchBox
onChange={setFilterPolicies}
placeholder="Search Policies"
overrideClass={classes.searchField}
value={filterPolicies}
sx={{ maxWidth: 380 }}
/>
<SecureComponent
@@ -242,19 +222,13 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12} className={classes.tableBlock}>
<Grid item xs={12}>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TableWrapper
itemActions={tableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loading}
records={filteredRecords}
entityName="Policies"
idField="name"
<TooltipWrapper
tooltip={
canViewPolicy
? ""
@@ -263,10 +237,19 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
"view Policy details"
)
}
/>
>
<DataTable
itemActions={tableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loading}
records={filteredRecords}
entityName="Policies"
idField="name"
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} sx={{ marginTop: 15 }}>
<HelpBox
title={"Learn more about IAM POLICIES"}
iconComponent={<IAMPoliciesIcon />}
@@ -301,8 +284,8 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
</Grid>
</Grid>
</PageLayout>
</React.Fragment>
</Fragment>
);
};
export default withStyles(styles)(ListPolicies);
export default ListPolicies;

582
portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
View File

@@ -19,34 +19,23 @@ import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import {
BackLink,
Box,
Button,
IAMPoliciesIcon,
RefreshIcon,
SearchIcon,
SectionTitle,
TrashIcon,
PageLayout,
DataTable,
Grid,
IAMPoliciesIcon,
PageLayout,
RefreshIcon,
ScreenTitle,
SectionTitle,
Tabs,
TrashIcon,
} from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import {
actionsTray,
containerForHeader,
modalBasic,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import Paper from "@mui/material/Paper";
import { Grid as MUIGrid, LinearProgress } from "@mui/material";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
import { LinearProgress } from "@mui/material";
import { ErrorResponseHandler } from "../../../common/types";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
import {
CONSOLE_UI_RESOURCE,
@@ -87,38 +76,11 @@ import {
} from "../../../api/consoleApi";
import { api } from "../../../api";
import HelpMenu from "../HelpMenu";
import SearchBox from "../Common/SearchBox";
const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
display: "flex",
justifyContent: "flex-end",
paddingTop: 16,
"& button": {
marginLeft: 8,
},
},
pageContainer: {
border: "1px solid #EAEAEA",
height: "100%",
},
paperContainer: {
padding: "15px 15px 15px 50px",
minHeight: "450px",
},
...actionsTray,
...searchField,
...modalBasic,
...containerForHeader,
});
interface IPolicyDetailsProps {
classes: any;
}
const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
const PolicyDetails = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const params = useParams();
@@ -140,6 +102,7 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
const [filterGroups, setFilterGroups] = useState<string>("");
const [loadingGroups, setLoadingGroups] = useState<boolean>(true);
const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
const [selectedTab, setSelectedTab] = useState<string>("summary");
const ldapIsEnabled = (features && features.includes("ldap-idp")) || false;
@@ -386,271 +349,284 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
}
actions={<HelpMenu />}
/>
<PageLayout className={classes.pageContainer}>
<MUIGrid container spacing={1}>
<Grid item xs={12}>
<ScreenTitle
icon={
<Fragment>
<IAMPoliciesIcon width={40} />
</Fragment>
}
title={policyName}
subTitle={<Fragment>IAM Policy</Fragment>}
actions={
<Fragment>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_DELETE_POLICY]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TooltipWrapper
tooltip={
canDeletePolicy
? ""
: permissionTooltipHelper(
deletePolicyPermissions,
"delete Policies"
)
<PageLayout>
<ScreenTitle
icon={<IAMPoliciesIcon width={40} />}
title={policyName}
subTitle={<Fragment>IAM Policy</Fragment>}
actions={
<Fragment>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_DELETE_POLICY]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TooltipWrapper
tooltip={
canDeletePolicy
? ""
: permissionTooltipHelper(
deletePolicyPermissions,
"delete Policies"
)
}
>
<Button
id={"delete-policy"}
label={"Delete Policy"}
variant="secondary"
icon={<TrashIcon />}
onClick={deletePolicy}
disabled={!canDeletePolicy}
/>
</TooltipWrapper>
</SecureComponent>
<TooltipWrapper tooltip={"Refresh"}>
<Button
id={"refresh-policy"}
label={"Refresh"}
variant="regular"
icon={<RefreshIcon />}
onClick={() => {
refreshPolicyDetails();
}}
/>
</TooltipWrapper>
</Fragment>
}
sx={{ marginBottom: 15 }}
/>
<Box>
<Tabs
options={[
{
tabConfig: {
label: "Summary",
disabled: !displayPolicy,
id: "summary",
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_summary"))
}
>
<Button
id={"delete-policy"}
label={"Delete Policy"}
variant="secondary"
icon={<TrashIcon />}
onClick={deletePolicy}
disabled={!canDeletePolicy}
/>
</TooltipWrapper>
</SecureComponent>
<TooltipWrapper tooltip={"Refresh"}>
<Button
id={"refresh-policy"}
label={"Refresh"}
variant="regular"
icon={<RefreshIcon />}
onClick={() => {
refreshPolicyDetails();
}}
/>
</TooltipWrapper>
</Fragment>
}
/>
</Grid>
<VerticalTabs>
{{
tabConfig: { label: "Summary", disabled: !displayPolicy },
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_summary"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Policy Summary
</SectionTitle>
<Paper className={classes.paperContainer}>
<PolicyView policyStatements={policyStatements} />
</Paper>
</Grid>
</Fragment>
),
}}
{{
tabConfig: {
label: "Users",
disabled: !displayUsers || ldapIsEnabled,
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_users"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Users
</SectionTitle>
<Grid container>
{userList.length > 0 && (
<Grid item xs={12} className={classes.actionsTray}>
<TextField
placeholder="Search Users"
className={classes.searchField}
id="search-resource"
label=""
onChange={(val) => {
setFilterUsers(val.target.value);
}}
InputProps={{
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
variant="standard"
/>
</Grid>
)}
<TableWrapper
itemActions={userTableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingUsers}
records={filteredUsers}
entityName="Users with this Policy associated"
idField="name"
/>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Policy Summary
</SectionTitle>
<Box withBorders>
<PolicyView policyStatements={policyStatements} />
</Box>
</Grid>
</Grid>
</Fragment>
),
}}
{{
tabConfig: {
label: "Groups",
disabled: !displayGroups || ldapIsEnabled,
</Fragment>
),
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_groups"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Groups
</SectionTitle>
<Grid container>
{groupList.length > 0 && (
<Grid item xs={12} className={classes.actionsTray}>
<TextField
placeholder="Search Groups"
className={classes.searchField}
id="search-resource"
label=""
onChange={(val) => {
setFilterGroups(val.target.value);
}}
InputProps={{
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
variant="standard"
/>
</Grid>
)}
<TableWrapper
itemActions={groupTableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingGroups}
records={filteredGroups}
entityName="Groups with this Policy associated"
idField="name"
/>
</Grid>
</Grid>
</Fragment>
),
}}
{{
tabConfig: { label: "Raw Policy", disabled: !displayPolicy },
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_policy"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Raw Policy
</SectionTitle>
<form
noValidate
autoComplete="off"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
saveRecord(e);
}}
{
tabConfig: {
label: "Users",
disabled: !displayUsers || ldapIsEnabled,
id: "users",
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_users"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Users
</SectionTitle>
<Grid container>
<Grid item xs={12}>
<CodeMirrorWrapper
value={policyDefinition}
onChange={(value) => {
if (canEditPolicy) {
setPolicyDefinition(value);
}
{userList.length > 0 && (
<Grid
item
xs={12}
sx={{
...actionsTray.actionsTray,
marginBottom: 15,
}}
editorHeight={"350px"}
/>
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
{!policy && (
<button
type="button"
color="primary"
className={classes.clearButton}
onClick={() => {
resetForm();
}}
>
Clear
</button>
)}
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TooltipWrapper
tooltip={
canEditPolicy
? ""
: permissionTooltipHelper(
createPolicyPermissions,
"edit a Policy"
)
}
>
<Button
id={"save"}
type="submit"
variant="callAction"
color="primary"
disabled={
addLoading || !validSave || !canEditPolicy
}
label={"Save"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
<SearchBox
value={filterUsers}
placeholder={"Search Users"}
id="search-resource"
onChange={(val) => {
setFilterUsers(val);
}}
/>
</Grid>
)}
<DataTable
itemActions={userTableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingUsers}
records={filteredUsers}
entityName="Users with this Policy associated"
idField="name"
customPaperHeight={"500px"}
/>
</Grid>
</form>
</Grid>
</Fragment>
),
}}
</VerticalTabs>
</MUIGrid>
</Grid>
</Fragment>
),
},
{
tabConfig: {
label: "Groups",
disabled: !displayGroups || ldapIsEnabled,
id: "groups",
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_groups"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Groups
</SectionTitle>
<Grid container>
{groupList.length > 0 && (
<Grid
item
xs={12}
sx={{
...actionsTray.actionsTray,
marginBottom: 15,
}}
>
<SearchBox
value={filterUsers}
placeholder={"Search Groups"}
id="search-resource"
onChange={(val) => {
setFilterGroups(val);
}}
/>
</Grid>
)}
<DataTable
itemActions={groupTableActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingGroups}
records={filteredGroups}
entityName="Groups with this Policy associated"
idField="name"
customPaperHeight={"500px"}
/>
</Grid>
</Grid>
</Fragment>
),
},
{
tabConfig: {
label: "Raw Policy",
disabled: !displayPolicy,
id: "raw-policy",
},
content: (
<Fragment>
<Grid
onMouseMove={() =>
dispatch(setHelpName("policy_details_policy"))
}
>
<SectionTitle separator sx={{ marginBottom: 15 }}>
Raw Policy
</SectionTitle>
<form
noValidate
autoComplete="off"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
saveRecord(e);
}}
>
<Grid container>
<Grid item xs={12}>
<CodeMirrorWrapper
value={policyDefinition}
onChange={(value) => {
if (canEditPolicy) {
setPolicyDefinition(value);
}
}}
editorHeight={"350px"}
/>
</Grid>
<Grid
item
xs={12}
sx={{
display: "flex",
justifyContent: "flex-end",
paddingTop: 16,
gap: 8,
}}
>
{!policy && (
<Button
type="button"
variant={"regular"}
id={"clear-policy"}
onClick={() => {
resetForm();
}}
>
Clear
</Button>
)}
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<TooltipWrapper
tooltip={
canEditPolicy
? ""
: permissionTooltipHelper(
createPolicyPermissions,
"edit a Policy"
)
}
>
<Button
id={"save"}
type="submit"
variant="callAction"
color="primary"
disabled={
addLoading || !validSave || !canEditPolicy
}
label={"Save"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
{addLoading && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
</Grid>
</form>
</Grid>
</Fragment>
),
},
]}
currentTabOrPath={selectedTab}
onTabClick={(tab) => setSelectedTab(tab)}
/>
</Box>
</PageLayout>
</Fragment>
);
};
export default withStyles(styles)(PolicyDetails);
export default PolicyDetails;

69
portal-ui/src/screens/Console/Policies/PolicyView.tsx
View File

@@ -1,3 +1,4 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
@@ -14,12 +15,10 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useState } from "react";
import { Box } from "@mui/material";
import Grid from "@mui/material/Grid";
import SearchBox from "../Common/SearchBox";
import { Theme } from "@mui/material/styles";
import { searchField } from "../Common/FormComponents/common/styleLibrary";
import { DisabledIcon, EnabledIcon } from "mds";
import { DisabledIcon, EnabledIcon, Box, Grid } from "mds";
import { STATUS_COLORS } from "../Dashboard/BasicDashboard/Utils";
import makeStyles from "@mui/styles/makeStyles";
import { IAMStatement } from "./types";
@@ -33,8 +32,8 @@ const useStyles = makeStyles((theme: Theme) => ({
const rowGridStyle = {
display: "grid",
gridTemplateColumns: "60px 1fr",
gap: "15px",
gridTemplateColumns: "70px 1fr",
gap: 15,
};
const escapeRegExp = (str = "") =>
@@ -65,26 +64,24 @@ const PolicyView = ({
return (
<Grid container>
<Grid item xs={12}>
<Box
sx={{
display: "grid",
gridTemplateColumns: {
sm: "1fr 1fr",
xs: "1fr",
},
alignItems: "center",
justifyContent: "space-between",
gap: "15px",
}}
>
<Box>Statements</Box>
<SearchBox
placeholder={"Search"}
onChange={setFilter}
overrideClass={classes.searchField}
value={filter}
/>
</Box>
<Grid container sx={{ display: "flex", alignItems: "center" }}>
<Grid item xs={12} sm={6} sx={{ fontWeight: "bold" }}>
Statements
</Grid>
<Grid
item
xs={12}
sm={6}
sx={{ display: "flex", justifyContent: "flex-end" }}
>
<SearchBox
placeholder={"Search"}
onChange={setFilter}
overrideClass={classes.searchField}
value={filter}
/>
</Grid>
</Grid>
</Grid>
{!policyStatements && <Fragment>Policy has no statements</Fragment>}
{policyStatements && (
@@ -145,18 +142,8 @@ const PolicyView = ({
{effect}
</Box>
</Box>
<Box
sx={{
display: "grid",
gridTemplateColumns: {
sm: "1fr 1fr",
xs: "1fr",
},
gap: "15px",
}}
>
<Box sx={rowGridStyle}>
<Grid container sx={{ gap: 15 }}>
<Grid item xs={12} sm={6} sx={rowGridStyle}>
<Box className="label">Actions:</Box>
<Box>
{stmt.Action &&
@@ -166,8 +153,8 @@ const PolicyView = ({
</div>
))}
</Box>
</Box>
<Box sx={rowGridStyle}>
</Grid>
<Grid item xs={12} sm={6} sx={rowGridStyle}>
<Box className="label">Resources:</Box>
<Box>
{stmt.Resource &&
@@ -178,8 +165,8 @@ const PolicyView = ({
</div>
))}
</Box>
</Box>
</Box>
</Grid>
</Grid>
</Box>
);
})}