Skip to content

Commit 4ecbe76

Browse files
author
Benjamin Perez
committed
Migrated Buckets Pages to mds
Migrated the Buckets page to the available mds compnents Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 3ce377d commit 4ecbe76

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2114
-3059
lines changed

‎portal-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"local-storage-fallback": "^4.1.1",
1919
"lodash": "^4.17.21",
2020
"luxon": "^3.3.0",
21-
"mds": "https://github.com/minio/mds.git#v0.7.0",
21+
"mds": "https://github.com/minio/mds.git#v0.8.1",
2222
"react": "^18.1.0",
2323
"react-component-export-image": "^1.0.6",
2424
"react-copy-to-clipboard": "^5.0.2",

‎portal-ui/src/common/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,8 @@ export interface IEmbeddedCustomStyles {
9797
inputBox: IEmbeddedInputBox;
9898
switch: IEmbeddedSwitch;
9999
}
100+
101+
export interface SelectorTypes {
102+
label: any;
103+
value: string;
104+
}

‎portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx‎

Lines changed: 58 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,14 @@
1717
import React, { Fragment, useEffect, useState } from "react";
1818
import { useSelector } from "react-redux";
1919
import { useNavigate, useParams } from "react-router-dom";
20-
import { Paper } from "@mui/material";
21-
import Tabs from "@mui/material/Tabs";
22-
import Tab from "@mui/material/Tab";
23-
24-
import { TabPanel } from "../../../shared/tabs";
25-
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
20+
import { DataTable, SectionTitle, Tabs } from "mds";
21+
import { api } from "api";
22+
import { errorToHandler } from "api/errors";
2623
import {
2724
CONSOLE_UI_RESOURCE,
2825
IAM_PAGES,
2926
IAM_SCOPES,
3027
} from "../../../../common/SecureComponent/permissions";
31-
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
3228
import {
3329
hasPermission,
3430
SecureComponent,
@@ -38,15 +34,6 @@ import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
3834
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
3935
import { useAppDispatch } from "../../../../store";
4036
import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
41-
import { api } from "api";
42-
import { errorToHandler } from "api/errors";
43-
44-
function a11yProps(index: any) {
45-
return {
46-
id: `simple-tab-${index}`,
47-
"aria-controls": `simple-tabpanel-${index}`,
48-
};
49-
}
5037

5138
const AccessDetails = () => {
5239
const dispatch = useAppDispatch();
@@ -55,7 +42,7 @@ const AccessDetails = () => {
5542

5643
const loadingBucket = useSelector(selBucketDetailsLoading);
5744

58-
const [curTab, setCurTab] = useState<number>(0);
45+
const [curTab, setCurTab] = useState<string>("simple-tab-0");
5946
const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
6047
const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
6148
const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
@@ -158,65 +145,63 @@ const AccessDetails = () => {
158145

159146
return (
160147
<Fragment>
161-
<PanelTitle>Access Audit</PanelTitle>
148+
<SectionTitle separator>Access Audit</SectionTitle>
162149
<Tabs
163-
value={curTab}
164-
onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
150+
currentTabOrPath={curTab}
151+
onTabClick={(newValue: string) => {
165152
setCurTab(newValue);
166153
}}
167-
indicatorColor="primary"
168-
textColor="primary"
169-
aria-label="cluster-tabs"
170-
variant="scrollable"
171-
scrollButtons="auto"
172-
>
173-
{displayPoliciesList && <Tab label="Policies" {...a11yProps(0)} />}
174-
{displayUsersList && <Tab label="Users" {...a11yProps(1)} />}
175-
</Tabs>
176-
<Paper>
177-
<TabPanel index={0} value={curTab}>
178-
<SecureComponent
179-
scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
180-
resource={bucketName}
181-
errorProps={{ disabled: true }}
182-
>
183-
{bucketPolicy && (
184-
<TableWrapper
185-
noBackground={true}
186-
itemActions={PolicyActions}
187-
columns={[{ label: "Name", elementKey: "name" }]}
188-
isLoading={loadingPolicies}
189-
records={bucketPolicy}
190-
entityName="Policies"
191-
idField="name"
192-
/>
193-
)}
194-
</SecureComponent>
195-
</TabPanel>
196-
197-
<TabPanel index={1} value={curTab}>
198-
<SecureComponent
199-
scopes={[
200-
IAM_SCOPES.ADMIN_GET_POLICY,
201-
IAM_SCOPES.ADMIN_LIST_USERS,
202-
IAM_SCOPES.ADMIN_LIST_GROUPS,
203-
]}
204-
resource={bucketName}
205-
matchAll
206-
errorProps={{ disabled: true }}
207-
>
208-
<TableWrapper
209-
noBackground={true}
210-
itemActions={userTableActions}
211-
columns={[{ label: "User", elementKey: "accessKey" }]}
212-
isLoading={loadingUsers}
213-
records={bucketUsers}
214-
entityName="Users"
215-
idField="accessKey"
216-
/>
217-
</SecureComponent>
218-
</TabPanel>
219-
</Paper>
154+
horizontal
155+
options={[
156+
{
157+
tabConfig: { label: "Policies", id: "simple-tab-0" },
158+
content: (
159+
<SecureComponent
160+
scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
161+
resource={bucketName}
162+
errorProps={{ disabled: true }}
163+
>
164+
{bucketPolicy && (
165+
<DataTable
166+
noBackground={true}
167+
itemActions={PolicyActions}
168+
columns={[{ label: "Name", elementKey: "name" }]}
169+
isLoading={loadingPolicies}
170+
records={bucketPolicy}
171+
entityName="Policies"
172+
idField="name"
173+
/>
174+
)}
175+
</SecureComponent>
176+
),
177+
},
178+
{
179+
tabConfig: { label: "Users", id: "simple-tab-1" },
180+
content: (
181+
<SecureComponent
182+
scopes={[
183+
IAM_SCOPES.ADMIN_GET_POLICY,
184+
IAM_SCOPES.ADMIN_LIST_USERS,
185+
IAM_SCOPES.ADMIN_LIST_GROUPS,
186+
]}
187+
resource={bucketName}
188+
matchAll
189+
errorProps={{ disabled: true }}
190+
>
191+
<DataTable
192+
noBackground={true}
193+
itemActions={userTableActions}
194+
columns={[{ label: "User", elementKey: "accessKey" }]}
195+
isLoading={loadingUsers}
196+
records={bucketUsers}
197+
entityName="Users"
198+
idField="accessKey"
199+
/>
200+
</SecureComponent>
201+
),
202+
},
203+
]}
204+
/>
220205
</Fragment>
221206
);
222207
};

‎portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx‎

Lines changed: 58 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,22 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { Fragment, useEffect, useState } from "react";
18+
import { AddIcon, Button, DataTable, SectionTitle } from "mds";
1819
import { useSelector } from "react-redux";
1920
import { useParams } from "react-router-dom";
20-
import { Theme } from "@mui/material/styles";
21-
import { AddIcon, Button } from "mds";
22-
import createStyles from "@mui/styles/createStyles";
23-
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
24-
import Grid from "@mui/material/Grid";
25-
import {
26-
actionsTray,
27-
containerForHeader,
28-
objectBrowserCommon,
29-
searchField,
30-
} from "../../Common/FormComponents/common/styleLibrary";
21+
import { api } from "api";
22+
import { AccessRule as IAccessRule } from "api/consoleApi";
23+
import { errorToHandler } from "api/errors";
3124
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
32-
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
3325
import {
3426
hasPermission,
3527
SecureComponent,
3628
} from "../../../../common/SecureComponent";
37-
38-
import withSuspense from "../../Common/Components/withSuspense";
3929
import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
40-
import makeStyles from "@mui/styles/makeStyles";
4130
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
4231
import { useAppDispatch } from "../../../../store";
32+
import withSuspense from "../../Common/Components/withSuspense";
4333
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
44-
import { api } from "api";
45-
import { AccessRule as IAccessRule } from "api/consoleApi";
46-
import { errorToHandler } from "api/errors";
4734

4835
const AddAccessRuleModal = withSuspense(
4936
React.lazy(() => import("./AddAccessRule")),
@@ -55,26 +42,8 @@ const EditAccessRuleModal = withSuspense(
5542
React.lazy(() => import("./EditAccessRule")),
5643
);
5744

58-
const useStyles = makeStyles((theme: Theme) =>
59-
createStyles({
60-
"@global": {
61-
".rowLine:hover .iconFileElm": {
62-
backgroundImage: "url(/images/ob_file_filled.svg)",
63-
},
64-
".rowLine:hover .iconFolderElm": {
65-
backgroundImage: "url(/images/ob_folder_filled.svg)",
66-
},
67-
},
68-
...actionsTray,
69-
...searchField,
70-
...objectBrowserCommon,
71-
...containerForHeader,
72-
}),
73-
);
74-
7545
const AccessRule = () => {
7646
const dispatch = useAppDispatch();
77-
const classes = useStyles();
7847
const params = useParams();
7948

8049
const loadingBucket = useSelector(selBucketDetailsLoading);
@@ -196,60 +165,60 @@ const AccessRule = () => {
196165
initial={initialAccess}
197166
/>
198167
)}
199-
<Grid item xs={12} className={classes.actionsTray}>
200-
<PanelTitle>Anonymous Access</PanelTitle>
201-
<SecureComponent
202-
scopes={[
203-
IAM_SCOPES.S3_GET_BUCKET_POLICY,
204-
IAM_SCOPES.S3_PUT_BUCKET_POLICY,
205-
IAM_SCOPES.S3_GET_ACTIONS,
206-
IAM_SCOPES.S3_PUT_ACTIONS,
168+
<SectionTitle
169+
separator
170+
sx={{ marginBottom: 15 }}
171+
actions={
172+
<SecureComponent
173+
scopes={[
174+
IAM_SCOPES.S3_GET_BUCKET_POLICY,
175+
IAM_SCOPES.S3_PUT_BUCKET_POLICY,
176+
IAM_SCOPES.S3_GET_ACTIONS,
177+
IAM_SCOPES.S3_PUT_ACTIONS,
178+
]}
179+
resource={bucketName}
180+
matchAll
181+
errorProps={{ disabled: true }}
182+
>
183+
<TooltipWrapper tooltip={"Add Access Rule"}>
184+
<Button
185+
id={"add-bucket-access-rule"}
186+
onClick={() => {
187+
setAddAccessRuleOpen(true);
188+
}}
189+
label={"Add Access Rule"}
190+
icon={<AddIcon />}
191+
variant={"callAction"}
192+
/>
193+
</TooltipWrapper>
194+
</SecureComponent>
195+
}
196+
>
197+
Anonymous Access
198+
</SectionTitle>
199+
<SecureComponent
200+
scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
201+
resource={bucketName}
202+
errorProps={{ disabled: true }}
203+
>
204+
<DataTable
205+
itemActions={AccessRuleActions}
206+
columns={[
207+
{
208+
label: "Prefix",
209+
elementKey: "prefix",
210+
renderFunction: (prefix: string) => {
211+
return prefix || "/";
212+
},
213+
},
214+
{ label: "Access", elementKey: "access" },
207215
]}
208-
resource={bucketName}
209-
matchAll
210-
errorProps={{ disabled: true }}
211-
>
212-
<TooltipWrapper tooltip={"Add Access Rule"}>
213-
<Button
214-
id={"add-bucket-access-rule"}
215-
onClick={() => {
216-
setAddAccessRuleOpen(true);
217-
}}
218-
label={"Add Access Rule"}
219-
icon={<AddIcon />}
220-
variant={"callAction"}
221-
/>
222-
</TooltipWrapper>
223-
</SecureComponent>
224-
</Grid>
225-
<Grid item sx={{ border: "#EAEDEE 1px solid" }}>
226-
<SecureComponent
227-
scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
228-
resource={bucketName}
229-
errorProps={{ disabled: true }}
230-
>
231-
{accessRules && (
232-
<TableWrapper
233-
noBackground={true}
234-
itemActions={AccessRuleActions}
235-
columns={[
236-
{
237-
label: "Prefix",
238-
elementKey: "prefix",
239-
renderFunction: (prefix: string) => {
240-
return prefix || "/";
241-
},
242-
},
243-
{ label: "Access", elementKey: "access" },
244-
]}
245-
isLoading={loadingAccessRules}
246-
records={accessRules}
247-
entityName="Access Rules"
248-
idField="prefix"
249-
/>
250-
)}
251-
</SecureComponent>
252-
</Grid>
216+
isLoading={loadingAccessRules}
217+
records={accessRules || []}
218+
entityName="Access Rules"
219+
idField="prefix"
220+
/>
221+
</SecureComponent>
253222
</Fragment>
254223
);
255224
};

0 commit comments

Comments
 (0)