Skip to content

Commit 55b25cb

Browse files
bexsoftbexsoft
authored
Changed Styles & some routes for console menu (#2428)
Changed styles for menu Changed Settings page title Changed Service Account option to be Access Keys Changed all Service Accounts labels to be Access keys in console Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent c929a71 commit 55b25cb

23 files changed

+311
-174
lines changed

‎portal-ui/src/common/SecureComponent/permissions.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,8 @@ export const IAM_PAGES = {
126126
GROUPS: "/identity/groups",
127127
GROUPS_ADD: "/identity/groups/create-group",
128128
GROUPS_VIEW: "/identity/groups/:groupName",
129-
ACCOUNT: "/identity/account",
130-
ACCOUNT_ADD: "/identity/account/new-account",
129+
ACCOUNT: "/access-keys",
130+
ACCOUNT_ADD: "/access-keys/new-account",
131131
USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName",
132132

133133
POLICIES: "/identity/policies",

‎portal-ui/src/icons/ServiceAccountCredentialsIcon.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,11 @@ const ServiceAccountCredentialsIcon = (props: SVGProps<SVGSVGElement>) => (
4040
</defs>
4141
<g
4242
id="New_Service_Account_Created"
43-
data-name="New Service Account Created"
43+
data-name="New Access Key Created"
4444
clipPath="url(#clip-New_Service_Account_Created)"
4545
>
4646
<rect width="256" height="256" fill="#fff" />
47-
<g
48-
id="Create_Service_Account_Icon"
49-
data-name="Create Service Account Icon"
50-
>
47+
<g id="Create_Service_Account_Icon" data-name="Create Access Key Icon">
5148
<rect
5249
id="Rectángulo_1006"
5350
data-name="Rectángulo 1006"

‎portal-ui/src/screens/Console/Account/Account.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const Account = () => {
138138
const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => {
139139
setDeleteMultipleOpen(false);
140140
if (refresh) {
141-
dispatch(setSnackBarMessage(`Service accounts deleted successfully.`));
141+
dispatch(setSnackBarMessage(`Access keys deleted successfully.`));
142142
setSelectedSAs([]);
143143
setLoading(true);
144144
}
@@ -206,11 +206,11 @@ const Account = () => {
206206
open={changePasswordModalOpen}
207207
closeModal={() => setChangePasswordModalOpen(false)}
208208
/>
209-
<PageHeader label="Service Accounts" />
209+
<PageHeader label="Access Keys" />
210210
<PageLayout>
211211
<Grid item={true} xs={12} className={classes.actionsTray}>
212212
<SearchBox
213-
placeholder={"Search Service Accounts"}
213+
placeholder={"Search Access Keys"}
214214
onChange={setFilter}
215215
overrideClass={classes.searchField}
216216
value={filter}
@@ -254,7 +254,7 @@ const Account = () => {
254254
onClick={() => {
255255
navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
256256
}}
257-
label={`Create service account`}
257+
label={`Create access key`}
258258
icon={<AddIcon />}
259259
variant={"callAction"}
260260
/>
@@ -265,9 +265,9 @@ const Account = () => {
265265
<TableWrapper
266266
isLoading={loading}
267267
records={filteredRecords}
268-
entityName={"Service Accounts"}
268+
entityName={"Access Keys"}
269269
idField={""}
270-
columns={[{ label: "Service Account", elementKey: "" }]}
270+
columns={[{ label: "Access Key", elementKey: "" }]}
271271
itemActions={tableActions}
272272
selectedItems={selectedSAs}
273273
onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
@@ -276,20 +276,23 @@ const Account = () => {
276276
</Grid>
277277
<Grid item xs={12} marginTop={"15px"}>
278278
<HelpBox
279-
title={"Learn more about SERVICE ACCOUNTS"}
279+
title={"Learn more about ACCESS KEYS"}
280280
iconComponent={<AccountIcon />}
281281
help={
282282
<Fragment>
283-
MinIO service accounts are child identities of an authenticated
284-
MinIO user, including externally managed identities. Each
285-
service account inherits its privileges based on the policies
286-
attached to it’s parent user or those groups in which the parent
287-
user has membership. Service accounts also support an optional
288-
inline policy which further restricts access to a subset of
289-
actions and resources available to the parent user.
283+
MinIO access keys are child identities of an authenticated MinIO
284+
user, including externally managed identities. Each access key
285+
inherits its privileges based on the policies attached to it’s
286+
parent user or those groups in which the parent user has
287+
membership. Access Keys also support an optional inline policy
288+
which further restricts access to a subset of actions and
289+
resources available to the parent user.
290290
<br />
291291
<br />
292292
You can learn more at our{" "}
293+
{
294+
// TODO: Change this link once it is called access keys
295+
}
293296
<a
294297
href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html?ref=con#service-accounts"
295298
target="_blank"

‎portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -80,18 +80,18 @@ const AddServiceAccountHelpBox = () => {
8080
}}
8181
>
8282
<HelpIconFilled />
83-
<div>Learn more about Service Accounts</div>
83+
<div>Learn more about Access Keys</div>
8484
</Box>
8585
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
8686
<Box sx={{ paddingBottom: "20px" }}>
8787
<FeatureItem
8888
icon={<ServiceAccountIcon />}
89-
description={`Create Service Accounts`}
89+
description={`Create Access Keys`}
9090
/>
9191
<Box sx={{ paddingTop: "20px" }}>
92-
Service Accounts inherit the policies explicitly attached to the
93-
parent user, and the policies attached to each group in which the
94-
parent user has membership.
92+
Access Keys inherit the policies explicitly attached to the parent
93+
user, and the policies attached to each group in which the parent
94+
user has membership.
9595
</Box>
9696
</Box>
9797
<Box sx={{ paddingBottom: "20px" }}>
@@ -102,13 +102,13 @@ const AddServiceAccountHelpBox = () => {
102102
<Box sx={{ paddingTop: "10px" }}>
103103
Randomized access credentials are recommended, and provided by
104104
default. You may use your own custom Access Key and Secret Key by
105-
replacing the default values. After creation of any Service Account,
106-
you will be given the opportunity to view and download the account
105+
replacing the default values. After creation of any Access Key, you
106+
will be given the opportunity to view and download the account
107107
credentials.
108108
</Box>
109109
<Box sx={{ paddingTop: "10px" }}>
110-
Service Accounts support programmatic access by applications. You
111-
cannot use a Service Account to log into the MinIO Console.
110+
Access Keys support programmatic access by applications. You cannot
111+
use a Access Key to log into the MinIO Console.
112112
</Box>
113113
</Box>
114114
<Box sx={{ paddingBottom: "20px" }}>
@@ -118,14 +118,13 @@ const AddServiceAccountHelpBox = () => {
118118
/>
119119
<Box sx={{ paddingTop: "10px" }}>
120120
You can specify an optional JSON-formatted IAM policy to further
121-
restrict Service Account access to a subset of the actions and
122-
resources explicitly allowed for the parent user. Additional access
123-
beyond that of the parent user cannot be implemented through these
121+
restrict Access Key access to a subset of the actions and resources
122+
explicitly allowed for the parent user. Additional access beyond
123+
that of the parent user cannot be implemented through these
124124
policies.
125125
</Box>
126126
<Box sx={{ paddingTop: "10px" }}>
127-
You cannot modify the optional Service Account IAM policy after
128-
saving.
127+
You cannot modify the optional Access Key IAM policy after saving.
129128
</Box>
130129
</Box>
131130
</Box>

‎portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,12 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
149149
closeModal={() => {
150150
closeCredentialsModal();
151151
}}
152-
entity="Service Account"
152+
entity="Access Key"
153153
/>
154154
)}
155155
<Grid item xs={12}>
156156
<PageHeader
157-
label={<BackLink to={IAM_PAGES.ACCOUNT} label={"Service Accounts"} />}
157+
label={<BackLink to={IAM_PAGES.ACCOUNT} label={"Access Keys"} />}
158158
/>
159159
<PageLayout>
160160
<Box
@@ -171,7 +171,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
171171
>
172172
<Box>
173173
<SectionTitle icon={<ServiceAccountCredentialsIcon />}>
174-
Create Service Account
174+
Create Access Key
175175
</SectionTitle>
176176

177177
<form
@@ -256,7 +256,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
256256
}}
257257
label={"Restrict beyond user policy"}
258258
tooltip={
259-
"You can specify an optional JSON-formatted IAM policy to further restrict Service Account access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
259+
"You can specify an optional JSON-formatted IAM policy to further restrict Access Key access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
260260
}
261261
/>
262262
</Grid>
@@ -271,7 +271,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
271271
<div>
272272
<PanelTitle>
273273
Current User Policy - edit the JSON to remove
274-
permissions for this service account
274+
permissions for this Access Key
275275
</PanelTitle>
276276
</div>
277277
<Grid item xs={12} className={classes.formScrollable}>

‎portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const DeleteServiceAccount = ({
7272

7373
return (
7474
<ConfirmDialog
75-
title={`Delete Service Account`}
75+
title={`Delete Access Key`}
7676
confirmText={"Delete"}
7777
isOpen={deleteOpen}
7878
titleIcon={<ConfirmDeleteIcon />}
@@ -81,7 +81,7 @@ const DeleteServiceAccount = ({
8181
onClose={onClose}
8282
confirmationContent={
8383
<DialogContentText>
84-
Are you sure you want to delete service account{" "}
84+
Are you sure you want to delete Access Key{" "}
8585
<b className={classes.wrapText}>{selectedServiceAccount}</b>?
8686
</DialogContentText>
8787
}

‎portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const ServiceAccountPolicy = ({
112112

113113
return (
114114
<ModalWrapper
115-
title="Service Account Policy"
115+
title="Access Key Policy"
116116
modalOpen={open}
117117
onClose={() => {
118118
closeModalAndRefresh();
@@ -129,7 +129,7 @@ const ServiceAccountPolicy = ({
129129
<Grid container>
130130
<Grid item xs={12} className={classes.codeMirrorContainer}>
131131
<CodeMirrorWrapper
132-
label={`Service Account Policy`}
132+
label={`Access Key Policy`}
133133
value={policyDefinition}
134134
onBeforeChange={(editor, data, value) => {
135135
setPolicyDefinition(value);

‎portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,18 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => {
6868

6969
return (
7070
<Fragment>
71-
<PageHeader label={"Configurations"} />
71+
<PageHeader label={"Settings"} />
7272

7373
<PageLayout>
7474
<Grid item xs={12}>
7575
<div
7676
id="settings-container"
7777
className={classes.settingsOptionsContainer}
7878
>
79-
<ScreenTitle icon={<SettingsIcon />} title={"Configuration:"} />
79+
<ScreenTitle
80+
icon={<SettingsIcon />}
81+
title={"MinIO Configuration:"}
82+
/>
8083
<VerticalTabs
8184
selectedTab={selConfigTab}
8285
isRouteTabs

‎portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// This file is part of MinIO Console Server
2-
// Copyright (c) 2021 MinIO, Inc.
2+
// Copyright (c) 2022 MinIO, Inc.
33
//
44
// This program is free software: you can redistribute it and/or modify
55
// it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { useEffect, useState } from "react";
17+
import React, { useEffect, useState, Fragment } from "react";
1818
import { Box } from "@mui/material";
1919
import { useLocation } from "react-router-dom";
2020
import ListItem from "@mui/material/ListItem";
@@ -23,21 +23,24 @@ import LogoutIcon from "../../../icons/LogoutIcon";
2323
import ListItemText from "@mui/material/ListItemText";
2424
import List from "@mui/material/List";
2525
import {
26+
LogoutItemIconStyle,
2627
menuItemContainerStyles,
27-
menuItemIconStyles,
2828
menuItemMiniStyles,
2929
menuItemTextStyles,
3030
} from "./MenuStyleUtils";
3131
import MenuItem from "./MenuItem";
3232

3333
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
34+
import MenuSectionHeader from "./MenuSectionHeader";
3435

3536
const ConsoleMenuList = ({
3637
menuItems,
3738
isOpen,
39+
displayHeaders = false,
3840
}: {
3941
menuItems: any[];
4042
isOpen: boolean;
43+
displayHeaders?: boolean;
4144
}) => {
4245
const stateClsName = isOpen ? "wide" : "mini";
4346
const { pathname = "" } = useLocation();
@@ -58,6 +61,7 @@ const ConsoleMenuList = ({
5861
}, [groupToSelect]);
5962

6063
let basename = document.baseURI.replace(window.location.origin, "");
64+
let header = "";
6165

6266
return (
6367
<Box
@@ -76,6 +80,9 @@ const ConsoleMenuList = ({
7680

7781
"&.mini": {
7882
marginLeft: "10px",
83+
"& .menuHeader": {
84+
display: "none",
85+
},
7986
},
8087
}}
8188
>
@@ -100,20 +107,30 @@ const ConsoleMenuList = ({
100107
<React.Fragment>
101108
{(menuItems || []).map((menuGroup: any, index) => {
102109
if (menuGroup) {
110+
let grHeader = null;
111+
112+
if (menuGroup.group !== header && displayHeaders) {
113+
grHeader = <MenuSectionHeader label={menuGroup.group} />;
114+
header = menuGroup.group;
115+
}
116+
103117
return (
104-
<MenuItem
105-
stateClsName={stateClsName}
106-
page={menuGroup}
107-
key={`${menuGroup.id}-${index.toString()}`}
108-
id={menuGroup.id}
109-
selectedMenuItem={selectedMenuItem}
110-
setSelectedMenuItem={setSelectedMenuItem}
111-
pathValue={pathname}
112-
onExpand={setExpandGroup}
113-
expandedGroup={expandGroup}
114-
previewMenuGroup={previewMenuGroup}
115-
setPreviewMenuGroup={setPreviewMenuGroup}
116-
/>
118+
<Fragment>
119+
{grHeader}
120+
<MenuItem
121+
stateClsName={stateClsName}
122+
page={menuGroup}
123+
key={`${menuGroup.id}-${index.toString()}`}
124+
id={menuGroup.id}
125+
selectedMenuItem={selectedMenuItem}
126+
setSelectedMenuItem={setSelectedMenuItem}
127+
pathValue={pathname}
128+
onExpand={setExpandGroup}
129+
expandedGroup={expandGroup}
130+
previewMenuGroup={previewMenuGroup}
131+
setPreviewMenuGroup={setPreviewMenuGroup}
132+
/>
133+
</Fragment>
117134
);
118135
}
119136
return null;
@@ -148,13 +165,13 @@ const ConsoleMenuList = ({
148165
>
149166
<ListItemIcon
150167
sx={{
151-
...menuItemIconStyles,
168+
...LogoutItemIconStyle,
152169
}}
153170
>
154171
<LogoutIcon />
155172
</ListItemIcon>
156173
<ListItemText
157-
primary="Logout"
174+
primary="Sign Out"
158175
id={"logout"}
159176
sx={{ ...menuItemTextStyles }}
160177
className={stateClsName}

0 commit comments

Comments
 (0)