From 55b25cb00392c17c85d0d403c07dc18b416cd40e Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Mon, 7 Nov 2022 17:32:10 -0600 Subject: [PATCH] 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 --- .../src/common/SecureComponent/permissions.ts | 4 +- .../icons/ServiceAccountCredentialsIcon.tsx | 7 +- .../src/screens/Console/Account/Account.tsx | 31 +++--- .../Account/AddServiceAccountHelpBox.tsx | 27 +++-- .../Account/AddServiceAccountScreen.tsx | 10 +- .../Console/Account/DeleteServiceAccount.tsx | 4 +- .../Console/Account/ServiceAccountPolicy.tsx | 4 +- .../ConfigurationOptions.tsx | 7 +- .../screens/Console/Menu/ConsoleMenuList.tsx | 53 ++++++---- .../src/screens/Console/Menu/LicenseBadge.tsx | 33 +++---- portal-ui/src/screens/Console/Menu/Menu.tsx | 8 +- .../src/screens/Console/Menu/MenuItem.tsx | 18 ++-- .../Console/Menu/MenuSectionHeader.tsx | 39 ++++++++ .../screens/Console/Menu/MenuStyleUtils.tsx | 99 +++++++++++++++---- .../src/screens/Console/Menu/MenuToggle.tsx | 9 +- .../Console/Users/AddUserServiceAccount.tsx | 2 +- .../Users/AddUserServiceAccountHelpBox.tsx | 27 +++-- .../Users/AddUserServiceAccountScreen.tsx | 6 +- .../Users/DeleteMultipleServiceAccounts.tsx | 4 +- .../src/screens/Console/Users/DeleteUser.tsx | 8 +- .../Users/UserServiceAccountsPanel.tsx | 14 +-- portal-ui/src/screens/Console/valid-routes.ts | 70 +++++++------ portal-ui/tests/utils/elements-menu.ts | 9 +- 23 files changed, 315 insertions(+), 178 deletions(-) create mode 100644 portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts index de1c39087..49677a011 100644 --- a/portal-ui/src/common/SecureComponent/permissions.ts +++ b/portal-ui/src/common/SecureComponent/permissions.ts @@ -126,8 +126,8 @@ export const IAM_PAGES = { GROUPS: "/identity/groups", GROUPS_ADD: "/identity/groups/create-group", GROUPS_VIEW: "/identity/groups/:groupName", - ACCOUNT: "/identity/account", - ACCOUNT_ADD: "/identity/account/new-account", + ACCOUNT: "/access-keys", + ACCOUNT_ADD: "/access-keys/new-account", USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName", POLICIES: "/identity/policies", diff --git a/portal-ui/src/icons/ServiceAccountCredentialsIcon.tsx b/portal-ui/src/icons/ServiceAccountCredentialsIcon.tsx index 5aad6030f..8c3413038 100644 --- a/portal-ui/src/icons/ServiceAccountCredentialsIcon.tsx +++ b/portal-ui/src/icons/ServiceAccountCredentialsIcon.tsx @@ -40,14 +40,11 @@ const ServiceAccountCredentialsIcon = (props: SVGProps) => ( - + { const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => { setDeleteMultipleOpen(false); if (refresh) { - dispatch(setSnackBarMessage(`Service accounts deleted successfully.`)); + dispatch(setSnackBarMessage(`Access keys deleted successfully.`)); setSelectedSAs([]); setLoading(true); } @@ -206,11 +206,11 @@ const Account = () => { open={changePasswordModalOpen} closeModal={() => setChangePasswordModalOpen(false)} /> - + { onClick={() => { navigate(`${IAM_PAGES.ACCOUNT_ADD}`); }} - label={`Create service account`} + label={`Create access key`} icon={} variant={"callAction"} /> @@ -265,9 +265,9 @@ const Account = () => { selectSAs(e, setSelectedSAs, selectedSAs)} @@ -276,20 +276,23 @@ const Account = () => { } help={ - MinIO service accounts are child identities of an authenticated - MinIO user, including externally managed identities. Each - service account inherits its privileges based on the policies - attached to it’s parent user or those groups in which the parent - user has membership. Service accounts also support an optional - inline policy which further restricts access to a subset of - actions and resources available to the parent user. + MinIO access keys are child identities of an authenticated MinIO + user, including externally managed identities. Each access key + inherits its privileges based on the policies attached to it’s + parent user or those groups in which the parent user has + membership. Access Keys also support an optional inline policy + which further restricts access to a subset of actions and + resources available to the parent user.

You can learn more at our{" "} + { + // TODO: Change this link once it is called access keys + } { }} > -
Learn more about Service Accounts
+
Learn more about Access Keys
} - description={`Create Service Accounts`} + description={`Create Access Keys`} /> - Service Accounts inherit the policies explicitly attached to the - parent user, and the policies attached to each group in which the - parent user has membership. + Access Keys inherit the policies explicitly attached to the parent + user, and the policies attached to each group in which the parent + user has membership. @@ -102,13 +102,13 @@ const AddServiceAccountHelpBox = () => { Randomized access credentials are recommended, and provided by default. You may use your own custom Access Key and Secret Key by - replacing the default values. After creation of any Service Account, - you will be given the opportunity to view and download the account + replacing the default values. After creation of any Access Key, you + will be given the opportunity to view and download the account credentials. - Service Accounts support programmatic access by applications. You - cannot use a Service Account to log into the MinIO Console. + Access Keys support programmatic access by applications. You cannot + use a Access Key to log into the MinIO Console. @@ -118,14 +118,13 @@ const AddServiceAccountHelpBox = () => { /> 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 + 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. - You cannot modify the optional Service Account IAM policy after - saving. + You cannot modify the optional Access Key IAM policy after saving. diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx index c287b72a1..e8c374097 100644 --- a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx +++ b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx @@ -149,12 +149,12 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => { closeModal={() => { closeCredentialsModal(); }} - entity="Service Account" + entity="Access Key" /> )} } + label={} /> { > }> - Create Service Account + Create Access Key
{ }} label={"Restrict beyond user policy"} tooltip={ - "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." + "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." } /> @@ -271,7 +271,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
Current User Policy - edit the JSON to remove - permissions for this service account + permissions for this Access Key
diff --git a/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx b/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx index f260ef449..5fabc05b5 100644 --- a/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx +++ b/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx @@ -72,7 +72,7 @@ const DeleteServiceAccount = ({ return ( } @@ -81,7 +81,7 @@ const DeleteServiceAccount = ({ onClose={onClose} confirmationContent={ - Are you sure you want to delete service account{" "} + Are you sure you want to delete Access Key{" "} {selectedServiceAccount}? } diff --git a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx index 153974875..3650a1a68 100644 --- a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx +++ b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx @@ -112,7 +112,7 @@ const ServiceAccountPolicy = ({ return ( { closeModalAndRefresh(); @@ -129,7 +129,7 @@ const ServiceAccountPolicy = ({ { setPolicyDefinition(value); diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx index a738a8135..4efbff092 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx @@ -68,7 +68,7 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => { return ( - + @@ -76,7 +76,10 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => { id="settings-container" className={classes.settingsOptionsContainer} > - } title={"Configuration:"} /> + } + title={"MinIO Configuration:"} + /> . -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, Fragment } from "react"; import { Box } from "@mui/material"; import { useLocation } from "react-router-dom"; import ListItem from "@mui/material/ListItem"; @@ -23,21 +23,24 @@ import LogoutIcon from "../../../icons/LogoutIcon"; import ListItemText from "@mui/material/ListItemText"; import List from "@mui/material/List"; import { + LogoutItemIconStyle, menuItemContainerStyles, - menuItemIconStyles, menuItemMiniStyles, menuItemTextStyles, } from "./MenuStyleUtils"; import MenuItem from "./MenuItem"; import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; +import MenuSectionHeader from "./MenuSectionHeader"; const ConsoleMenuList = ({ menuItems, isOpen, + displayHeaders = false, }: { menuItems: any[]; isOpen: boolean; + displayHeaders?: boolean; }) => { const stateClsName = isOpen ? "wide" : "mini"; const { pathname = "" } = useLocation(); @@ -58,6 +61,7 @@ const ConsoleMenuList = ({ }, [groupToSelect]); let basename = document.baseURI.replace(window.location.origin, ""); + let header = ""; return ( @@ -100,20 +107,30 @@ const ConsoleMenuList = ({ {(menuItems || []).map((menuGroup: any, index) => { if (menuGroup) { + let grHeader = null; + + if (menuGroup.group !== header && displayHeaders) { + grHeader = ; + header = menuGroup.group; + } + return ( - + + {grHeader} + + ); } return null; @@ -148,13 +165,13 @@ const ConsoleMenuList = ({ > { - - - + /> ); }; diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx index 00ea79e26..3b04a813d 100644 --- a/portal-ui/src/screens/Console/Menu/Menu.tsx +++ b/portal-ui/src/screens/Console/Menu/Menu.tsx @@ -1,5 +1,5 @@ // This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. +// Copyright (c) 2022 MinIO, Inc. // // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU Affero General Public License as published by @@ -116,7 +116,11 @@ const Menu = ({ classes }: IMenuProps) => { isOpen={sidebarOpen} /> - + ); }; diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx index dcdf3c9af..0af07c4d8 100644 --- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx @@ -150,7 +150,6 @@ const MenuItem = ({ ...}> - {page.badge ? : null} )} @@ -159,23 +158,24 @@ const MenuItem = ({ className={stateClsName} sx={{ ...menuItemTextStyles }} primary={page.name} + secondary={page.badge ? : null} /> )} {hasChildren ? ( isActiveGroup || previewMenuGroup === page.id ? ( - - ) : ( + ) : ( + ) ) : null} diff --git a/portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx b/portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx new file mode 100644 index 000000000..d1cf3e9ec --- /dev/null +++ b/portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx @@ -0,0 +1,39 @@ +// 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 +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import React from "react"; + +interface IMenuSectionHeader { + label: string; +} + +const MenuSectionHeader = ({ label }: IMenuSectionHeader) => { + return ( +
+ {label} +
+ ); +}; + +export default MenuSectionHeader; diff --git a/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx index 2e61484f3..5a32caa94 100644 --- a/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx @@ -1,5 +1,5 @@ // This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. +// Copyright (c) 2022 MinIO, Inc. // // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU Affero General Public License as published by @@ -15,43 +15,95 @@ // along with this program. If not, see . export const menuItemContainerStyles: any = { - paddingLeft: 0, - paddingBottom: "18px", - "&.active div:nth-of-type(1)": { - border: "2px solid #ffffff", + padding: "12px 0", + "div:nth-of-type(2)": { + flexGrow: 0, + marginRight: "15px", }, - "&:hover, &:focus": { - background: "none", + + "&.active": { + background: + "transparent linear-gradient(270deg, #00000000 0%, #051d39 53%, #54545400 100%) 0% 0% no-repeat padding-box", + backgroundBlendMode: "multiply", + + "& span": { + color: "#fff", + }, + "& svg": { + fill: "#fff", + }, + "& div:nth-of-type(1)": { - background: "none", - "& svg": { - fill: "#ffffff", + border: "1px solid #fff", + }, + + "&:hover, &:focus": { + "& div:nth-of-type(1)": { + background: "none", + "& svg": { + fill: "#fff", + }, }, }, }, }; export const menuItemIconStyles: any = { - width: 37, - minWidth: 37, - height: 37, + width: 30, + minWidth: 30, + height: 30, + background: "#00274D", + border: "1px solid #002148", + display: "flex", + alignItems: "center", + borderRadius: "50%", + justifyContent: "center", + "& svg": { + width: 12, + height: 12, + fill: "#8399AB", + }, + "&.active": { + "& span": { + color: "#fff", + }, + "& svg": { + fill: "#fff", + }, + }, +}; + +export const LogoutItemIconStyle: any = { + width: 40, + minWidth: 40, + height: 40, background: "#00274D", border: "2px solid #002148", display: "flex", alignItems: "center", borderRadius: "50%", justifyContent: "center", - "& svg": { width: 16, height: 16, fill: "#8399AB", }, + "&.active": { + "& span": { + color: "#fff", + }, + "& svg": { + fill: "#fff", + }, + }, }; export const menuItemTextStyles: any = { - color: "#BCC7D1", + color: "#8399AB", fontSize: "14px", - marginLeft: "11px", + marginLeft: "18px", + display: "flex", + position: "relative", + "& span": { fontSize: "14px", }, @@ -90,11 +142,16 @@ export const menuItemStyle: any = { borderRadius: "2px", marginTop: "2px", "&.active": { - backgroundColor: "hsla(0,0%,100%,.1)", ".menu-icon": { - border: "1px solid hsla(0,0%,100%,.1)", + border: "1px solid #fff", borderRadius: "50%", background: "#072549", + "& svg": { + fill: "#fff", + }, + }, + "& span": { + color: "#fff", }, }, "& .menu-icon": { @@ -103,9 +160,13 @@ export const menuItemStyle: any = { minWidth: "28px", height: "28px", background: "none", + "& svg": { + width: "12px", + height: "12px", + fill: "#8399AB", + }, }, "&:hover, &:focus": { - background: "hsla(0,0%,100%,.25)", "& .menu-icon": { background: "#072549", borderRadius: "50%", diff --git a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx index 3859a2d6f..81ca5c583 100644 --- a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx @@ -71,7 +71,14 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => { { - return zxzzzz; + return ; }; export default withStyles(styles)(AddUserServiceAccount); diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx index a87946abd..e10d73363 100644 --- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx +++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx @@ -80,18 +80,18 @@ const AddUserServiceAccountHelpBox = () => { }} > -
Learn more about Service Accounts
+
Learn more about Access Keys
 } - description={`Create Service Accounts`} + description={`Create Access Keys`} /> - Service Accounts inherit the policies explicitly attached to the - parent user, and the policies attached to each group in which the - parent user has membership. + Access Keys inherit the policies explicitly attached to the parent + user, and the policies attached to each group in which the parent + user has membership. @@ -102,13 +102,13 @@ const AddUserServiceAccountHelpBox = () => { Randomized access credentials are recommended, and provided by default. You may use your own custom Access Key and Secret Key by - replacing the default values. After creation of any Service Account, - you will be given the opportunity to view and download the account + replacing the default values. After creation of any Access Key, you + will be given the opportunity to view and download the account credentials. - Service Accounts support programmatic access by applications. You - cannot use a Service Account to log into the MinIO Console. + Access Keys support programmatic access by applications. You cannot + use a Access Key to log into the MinIO Console. @@ -118,14 +118,13 @@ const AddUserServiceAccountHelpBox = () => { /> 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 + 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. - You cannot modify the optional Service Account IAM policy after - saving. + You cannot modify the optional Access Key IAM policy after saving. diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx index 696059d56..576bb0f41 100644 --- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx +++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx @@ -169,7 +169,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => { closeModal={() => { closeCredentialsModal(); }} - entity="Service Account" + entity="Access Key" /> )} @@ -196,7 +196,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => { > }> - {`Create Service Account for ${userName}`} + {`Create Access Key for ${userName}`} { }} label={"Restrict beyond user policy"} tooltip={ - "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." + "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." } /> diff --git a/portal-ui/src/screens/Console/Users/DeleteMultipleServiceAccounts.tsx b/portal-ui/src/screens/Console/Users/DeleteMultipleServiceAccounts.tsx index e453fa8bc..9d092b0f3 100644 --- a/portal-ui/src/screens/Console/Users/DeleteMultipleServiceAccounts.tsx +++ b/portal-ui/src/screens/Console/Users/DeleteMultipleServiceAccounts.tsx @@ -52,7 +52,7 @@ const DeleteMultipleSAs = ({ }; return ( } @@ -62,7 +62,7 @@ const DeleteMultipleSAs = ({ confirmationContent={ Are you sure you want to delete the selected {selectedSAs.length}{" "} - service accounts?{" "} + Access Keys?{" "} } /> diff --git a/portal-ui/src/screens/Console/Users/DeleteUser.tsx b/portal-ui/src/screens/Console/Users/DeleteUser.tsx index 747affe02..50b2489f5 100644 --- a/portal-ui/src/screens/Console/Users/DeleteUser.tsx +++ b/portal-ui/src/screens/Console/Users/DeleteUser.tsx @@ -139,21 +139,21 @@ const DeleteUser = ({ {hasSA ? ( diff --git a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx index 152c239b8..c5e9dfdea 100644 --- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx +++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx @@ -140,7 +140,7 @@ const UserServiceAccountsPanel = ({ const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => { setDeleteMultipleOpen(false); if (refresh) { - dispatch(setSnackBarMessage(`Service accounts deleted successfully.`)); + dispatch(setSnackBarMessage(`Access Keys deleted successfully.`)); setSelectedSAs([]); setLoading(true); } @@ -213,7 +213,7 @@ const UserServiceAccountsPanel = ({ closeModal={() => { closeCredentialsModal(); }} - entity="Service Account" + entity="Access Key" /> )} {policyOpen && ( @@ -224,7 +224,7 @@ const UserServiceAccountsPanel = ({ /> )}
- Service Accounts + Access Keys