UX back button to be consistent in all screens (#1726)

minio · Mar 16, 2022 · e383653 · e383653
1 parent 9301e3b
commit e383653
Show file tree

Hide file tree

Showing 22 changed files with 167 additions and 100 deletions.
diff --git a/portal-ui/src/common/BackLink.tsx b/portal-ui/src/common/BackLink.tsx
@@ -19,31 +19,46 @@ import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { BackSettingsIcon } from "../icons";
+import { BackIcon } from "../icons";
+import { Box } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
     link: {
-      display: "flex",
+      display: "inline-block",
       alignItems: "center",
+      justifyContent: "center",
       textDecoration: "none",
-      maxWidth: "300px",
-      padding: "2rem 2rem 0rem 2rem",
-      color: theme.palette.primary.light,
-      fontSize: ".8rem",
-      "&:hover": {
-        textDecoration: "underline",
+      maxWidth: "40px",
+      "&:active": {
+        color: theme.palette.primary.light,
       },
     },
     icon: {
-      marginRight: ".3rem",
+      marginRight: "11px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      height: "35px",
+      width: "35px",
+      borderRadius: "2px",
+      "&:hover": {
+        background: "rgba(234,237,238)",
+      },
       "& svg.min-icon": {
-        width: 12,
+        width: "18px",
+        height: "12px",
       },
     },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      height: "35px",
+      padding: "0 0px 0 5px",
+      fontSize: "18px",
+      fontWeight: 600,
+      color: theme.palette.primary.light,
+    },
   });
 
 interface IBackLink {
@@ -62,20 +77,27 @@ const BackLink = ({
   executeOnClick,
 }: IBackLink) => {
   return (
-    <Link
-      to={to}
-      className={`${classes.link} ${className ? className : ""}`}
-      onClick={() => {
-        if (executeOnClick) {
-          executeOnClick();
-        }
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
       }}
     >
-      <div className={classes.icon}>
-        <BackSettingsIcon />
-      </div>
+      <Link
+        to={to}
+        className={`${classes.link} ${className ? className : ""}`}
+        onClick={() => {
+          if (executeOnClick) {
+            executeOnClick();
+          }
+        }}
+      >
+        <div className={classes.icon}>
+          <BackIcon />
+        </div>
+      </Link>
       <div className={classes.label}>{label}</div>
-    </Link>
+    </Box>
   );
 };
 

diff --git a/portal-ui/src/icons/BackIcon.tsx b/portal-ui/src/icons/BackIcon.tsx
@@ -0,0 +1,44 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import React, { SVGProps } from "react";
+
+const BackIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`min-icon`}
+      fill={"currentcolor"}
+      {...props}
+      viewBox="0 0 18 12"
+    >
+      <defs />
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g fill={"currentcolor"} id="Fill-2">
+          <polygon points="17.9999987 4.99999934 3.82999951 4.99999934 7.40999918 1.4099994 5.99999946 -3.60000001e-07 -1.80000029e-07 5.99999928 5.99999946 11.9999989 7.40999918 10.5899991 3.82999951 6.99999922 17.9999987 6.99999922"></polygon>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BackIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
@@ -179,3 +179,4 @@ export { default as OpenSourceIcon } from "./OpenSourceIcon";
 export { default as ArrowRightLink } from "./ArrowRightLink";
 export { default as LicenseDocIcon } from "./LicenseDocIcon";
 export { default as SelectAllIcon } from "./SelectAllIcon";
+export { default as BackIcon } from "./BackIcon";
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -38,6 +38,7 @@ import {
   IAM_PERMISSIONS,
   IAM_ROLES,
   IAM_SCOPES,
+  IAM_PAGES,
 } from "../../../../common/SecureComponent/permissions";
 import SearchBox from "../../Common/SearchBox";
 import BackLink from "../../../../common/BackLink";
@@ -98,13 +99,7 @@ const BrowserHandler = ({
   return (
     <Fragment>
       <PageHeader
-        label={
-          <BackLink
-            label={"Back to Buckets"}
-            to={"/buckets"}
-            className={classes.backToBuckets}
-          />
-        }
+        label={<BackLink label={"Buckets"} to={IAM_PAGES.BUCKETS} />}
         actions={
           <SecureComponent
             scopes={IAM_PERMISSIONS[IAM_ROLES.BUCKET_ADMIN]}

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -266,7 +266,7 @@ const AddBucket = ({
   return (
     <Fragment>
       <PageHeader label={"Create a Bucket"} />
-      <BackLink label={"Return to Buckets"} to={"/buckets"} />
+      <BackLink label={"Buckets"} to={"/buckets"} />
       <PageLayout>
         <Grid item xs={12} className={classes.boxy}>
           <form

diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -1082,6 +1082,11 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           <br />
           LicenseDocIcon
         </Grid>
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.BackIcon />
+          <br />
+          BackIcon
+        </Grid>
       </Grid>
       <h1>Menu Icons</h1>
       <Grid

diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
@@ -47,11 +47,6 @@ interface IModalProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...deleteDialogStyles,
-    root: {
-      "& .MuiPaper-root": {
-        padding: "0 2rem 2rem 1rem",
-      },
-    },
     content: {
       padding: 25,
       paddingBottom: 0,

diff --git a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
@@ -60,7 +60,7 @@ const styles = (theme: Theme) =>
       color: "#000",
       fontSize: 18,
       fontWeight: 700,
-      marginLeft: 34,
+      marginLeft: 21,
       marginTop: 8,
     },
     rightMenu: {

diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -310,9 +310,14 @@ const AddTierConfiguration = ({
 
   return (
     <Fragment>
-      <PageHeader label="Tiers" />
-
-      <BackLink to={IAM_PAGES.TIERS_ADD} label="Back To Tier Type Selection" />
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink to={IAM_PAGES.TIERS_ADD} label={"Add Tier"} />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
+      />
 
       <PageLayout>
         <Grid

diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -35,8 +35,14 @@ const TierTypeSelector = ({ history }: ITypeTiersConfig) => {
 
   return (
     <Fragment>
-      <PageHeader label="Tier Configuration" />
-      <BackLink to={IAM_PAGES.TIERS} label="Return to Configured Tiers" />
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink to={IAM_PAGES.TIERS} label="Tier Types" />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
+      />
 
       <PageLayout>
         <Box

diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from "react";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import BackLink from "../../../common/BackLink";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -23,9 +23,7 @@ const GroupDetailsHeader = ({ classes }: DetailsHeaderProps) => {
     <PageHeader
       label={
         <Fragment>
-          <Link to={IAM_PAGES.GROUPS} className={classes.breadcrumLink}>
-            Groups
-          </Link>
+          <BackLink to={IAM_PAGES.GROUPS} label={"Groups"} />
         </Fragment>
       }
       actions={<React.Fragment />}

diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -259,7 +259,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
                     />
                   </SecureComponent>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item xs={12} marginTop={"25px"}>
                   <HelpBox
                     title={"Groups"}
                     iconComponent={<GroupsIcon />}

diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -33,7 +33,6 @@ import DeleteGroup from "./DeleteGroup";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PageLayout from "../Common/Layout/PageLayout";
-import BackLink from "../../../common/BackLink";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
 import SearchBox from "../Common/SearchBox";
 import {
@@ -277,7 +276,6 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   return (
     <React.Fragment>
       <GroupDetailsHeader />
-      <BackLink to={IAM_PAGES.GROUPS} label={"Return to Groups"} />
 
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>

diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -35,7 +35,7 @@ import MenuToggle from "./MenuToggle";
 import ConsoleMenuList from "./ConsoleMenuList";
 import { validRoutes } from "../valid-routes";
 
-const drawerWidth = 245;
+const drawerWidth = 250;
 
 const styles = (theme: Theme) =>
   createStyles({

diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
@@ -187,10 +187,16 @@ const AddNotificationEndpoint = ({
 
   return (
     <Fragment>
-      <PageHeader label="Notifications" />
-      <BackLink
-        to="/notification-endpoints/add"
-        label={" Back To Supported Services"}
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink
+              to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD}
+              label="Notification Endpoint"
+            />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
       />
 
       <PageLayout>

diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -44,11 +44,16 @@ const styles = (theme: Theme) =>
 const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
   return (
     <Fragment>
-      <PageHeader label="Notification Endpoints" />
-      <BackLink
-        to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS}
-        label="Return to Configured Endpoints"
-        className={classes.link}
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink
+              to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS}
+              label="Notification Targets"
+            />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
       />
       <PageLayout>
         <div className={classes.iconContainer}>

diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -31,7 +31,6 @@ import { Button, LinearProgress } from "@mui/material";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Link } from "react-router-dom";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
@@ -333,13 +332,11 @@ const PolicyDetails = ({
       <PageHeader
         label={
           <Fragment>
-            <Link to={IAM_PAGES.POLICIES} className={classes.breadcrumLink}>
-              Policy
-            </Link>
+            <BackLink to={IAM_PAGES.POLICIES} label={"Policy"} />
           </Fragment>
         }
       />
-      <BackLink to={IAM_PAGES.POLICIES} label={"Return to Policies"} />
+
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle