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

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

Browse Source
This commit is contained in:
Prakash Senthil Vel
2022-03-16 17:22:02 +00:00
committed by GitHub
parent 9301e3b7de
commit e3836538fc
22 changed files with 168 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
portal-ui/src/common/BackLink.tsx
View File

@@ -19,30 +19,45 @@ 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",
"& svg.min-icon": {
width: 12,
height: "35px",
width: "35px",
borderRadius: "2px",
"&:hover": {
background: "rgba(234,237,238)",
},
"& svg.min-icon": {
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,
},
});
@@ -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>
);
};

44
portal-ui/src/icons/BackIcon.tsx Normal file
View File

@@ -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;

1
portal-ui/src/icons/index.ts
View File

@@ -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";

9
portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
View File

@@ -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]}

2
portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
View File

@@ -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

5
portal-ui/src/screens/Console/Common/IconsScreen.tsx
View File

@@ -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

5
portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
View File

@@ -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,

2
portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
View File

@@ -60,7 +60,7 @@ const styles = (theme: Theme) =>
color: "#000",
fontSize: 18,
fontWeight: 700,
marginLeft: 34,
marginLeft: 21,
marginTop: 8,
},
rightMenu: {

11
portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
View File

@@ -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

10
portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
View File

@@ -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

6
portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
View File

@@ -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 />}

2
portal-ui/src/screens/Console/Groups/Groups.tsx
View File

@@ -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 />}

2
portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
View File

@@ -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}>

2
portal-ui/src/screens/Console/Menu/Menu.tsx
View File

@@ -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({

14
portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
View File

@@ -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>

15
portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
View File

@@ -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}>

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

@@ -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

47
portal-ui/src/screens/Console/Support/Register.tsx
View File

@@ -33,7 +33,6 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import OnlineRegistrationIcon from "../../../icons/OnlineRegistrationIcon";
import OfflineRegistrationIcon from "../../../icons/OfflineRegistrationIcon";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import OnlineRegistrationBackIcon from "../../../icons/OnlineRegistrationBackIcon";
import OfflineRegistrationBackIcon from "../../../icons/OfflineRegistrationBackIcon";
import api from "../../../common/api";
@@ -63,6 +62,7 @@ import { AppState } from "../../../store";
import RegisterHelpBox from "./RegisterHelpBox";
import RegistrationStatusBanner from "./RegistrationStatusBanner";
import BackLink from "../../../common/BackLink";
interface IRegister {
classes: any;
@@ -854,30 +854,6 @@ const Register = ({
</Grid>
) : null}
{!onlineActivation ? (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginBottom: "30px",
"& .min-icon": {
height: "25px",
width: "25px",
marginRight: "15px",
},
}}
>
<OnlineRegistrationBackIcon />
<Link
className={classes.link}
onClick={() => setOnlineActivation(!onlineActivation)}
>
Back to Online Activation
</Link>
</Box>
) : null}
{clusterRegistered ? null : formTitle}
{clusterRegistered ? null : clusterRegistrationForm}
@@ -1019,7 +995,26 @@ const Register = ({
return (
<Fragment>
<PageHeader label="Register" />
<PageHeader
label={
<Fragment>
{!onlineActivation ? (
<BackLink
to={IAM_PAGES.REGISTER_SUPPORT}
label={"Offline Registration"}
executeOnClick={() => {
fetchSubnetRegToken();
setOnlineActivation(!onlineActivation);
}}
/>
) : (
"Register"
)}
</Fragment>
}
actions={<React.Fragment />}
/>
<PageLayout>{uiToShow}</PageLayout>
</Fragment>
);

2
portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
View File

@@ -766,7 +766,7 @@ const AddTenant = ({
<PageHeader label={"Create New Tenant"} />
<BackLink
to={"/tenants"}
label={"Return to Tenant List"}
label={"Tenant List"}
executeOnClick={resetAddTenantForm}
/>
<PageLayout>

8
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
View File

@@ -328,16 +328,16 @@ const TenantDetails = ({
closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
/>
)}
<PageHeader
label={
<Fragment>
<Link to={"/tenants"} className={classes.breadcrumLink}>
Tenants
</Link>
<BackLink to={IAM_PAGES.TENANTS} label="Tenants" />
</Fragment>
}
actions={<React.Fragment />}
/>
<BackLink to={"/tenants"} label={"Return to Tenants"} />
<PageLayout className={classes.pageContainer}>
<Grid item xs={12}>
<ScreenTitle

2
portal-ui/src/screens/Console/Users/ListUsers.tsx
View File

@@ -318,7 +318,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
/>
</SecureComponent>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} marginTop={"25px"}>
<HelpBox
title={"Users"}
iconComponent={<UsersIcon />}

7
portal-ui/src/screens/Console/Users/UserDetails.tsx
View File

@@ -16,8 +16,6 @@
import React, { Fragment, useCallback, useEffect, useState } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -189,9 +187,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
<PageHeader
label={
<Fragment>
<Link to={"/users"} className={classes.breadcrumLink}>
Users
</Link>
<BackLink label={"User"} to={IAM_PAGES.USERS} />
</Fragment>
}
actions={<React.Fragment></React.Fragment>}
@@ -233,7 +229,6 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
closeModal={() => setChangeUserPasswordModalOpen(false)}
/>
)}
<BackLink label={"Return to Users"} to={IAM_PAGES.USERS} />
<PageLayout className={classes.pageContainer}>
<Grid item xs={12}>
<ScreenTitle