From 9b06748cefd08867f5d3f7f256369cc27aed5066 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Thu, 4 Nov 2021 15:29:31 -0700 Subject: [PATCH] Match button's height. Remove Margin+Padding on Panel Titles. Move List bucket Buttons. (#1191) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- portal-ui/src/index.tsx | 9 +- .../BucketDetails/AccessDetailsPanel.tsx | 5 +- .../Buckets/BucketDetails/AccessRulePanel.tsx | 8 +- .../BucketDetails/BucketEventsPanel.tsx | 3 +- .../BucketDetails/BucketLifecyclePanel.tsx | 5 +- .../BucketDetails/BucketReplicationPanel.tsx | 7 +- .../BucketDetails/BucketSummaryPanel.tsx | 3 +- .../Buckets/ListBuckets/ListBuckets.tsx | 312 +++++++++--------- .../screens/Console/Common/BoxIconButton.tsx | 2 +- .../FormComponents/common/styleLibrary.ts | 6 +- .../Console/Common/PageHeader/PageHeader.tsx | 4 +- .../src/screens/Console/Common/PanelTitle.tsx | 40 +++ .../screens/Console/Groups/GroupsDetails.tsx | 9 +- .../src/screens/Console/Users/ListUsers.tsx | 2 +- .../src/screens/Console/Users/UserDetails.tsx | 7 +- .../Users/UserServiceAccountsPanel.tsx | 4 +- 16 files changed, 231 insertions(+), 195 deletions(-) create mode 100644 portal-ui/src/screens/Console/Common/PanelTitle.tsx diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx index 5fe92e412..089dcafb5 100644 --- a/portal-ui/src/index.tsx +++ b/portal-ui/src/index.tsx @@ -21,9 +21,9 @@ import Routes from "./Routes"; import configureStore from "./store"; import * as serviceWorker from "./serviceWorker"; import { - ThemeProvider, - Theme, StyledEngineProvider, + Theme, + ThemeProvider, } from "@mui/material/styles"; import withStyles from "@mui/styles/withStyles"; import "react-virtualized/styles.css"; @@ -42,10 +42,13 @@ const GlobalCss = withStyles({ // @global is handled by jss-plugin-global. "@global": { // You should target [class*="MuiButton-root"] instead if you nest themes. + ".MuiButton-root": { + height: 38, + }, ".MuiButton-contained": { fontSize: "14px", textTransform: "capitalize", - padding: "16px 25px 16px 25px", + padding: "15px 25px 15px 25px", borderRadius: 3, }, ".MuiButton-sizeSmall": { diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx index f3345fff2..810378772 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx +++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState, Fragment } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -40,6 +40,7 @@ import { ADMIN_LIST_USER_POLICIES, ADMIN_LIST_USERS, } from "../../../../types"; +import PanelTitle from "../../Common/PanelTitle"; const styles = (theme: Theme) => createStyles({}); @@ -159,7 +160,7 @@ const AccessDetails = ({ return ( -

Access Audit

+ Access Audit , newValue: number) => { diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx index 5b4945433..e00263178 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx +++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState, Fragment } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -40,6 +40,7 @@ import { import { BucketInfo } from "../types"; import { displayComponent } from "../../../../utils/permissions"; import { S3_GET_BUCKET_POLICY, S3_PUT_BUCKET_POLICY } from "../../../../types"; +import PanelTitle from "../../Common/PanelTitle"; const styles = (theme: Theme) => createStyles({ @@ -240,7 +241,7 @@ const AccessRule = ({ /> )} -

Access Rules

+ Access Rules {displayAddAccessRules && ( + + + { + setLoading(true); + }} + size="large" + > + + {canCreateBucket && ( - - - - )} - - - } - /> - - - - - - - - - -
- - {loading && } - {!loading && ( - - {filteredRecords.map((bucket, index) => { - return ( - - ); - })} - {filteredRecords.length === 0 && ( - } + onClick={() => { + addBucketOpen(true); + }} + className={classes.addBucket} > - - } - title={"Buckets"} - help={ - - MinIO uses buckets to organize objects. A bucket is - similar to a folder or directory in a filesystem, - where each bucket can hold an arbitrary number of - objects. -
-
- To get started,  - - - } - /> - - + Create Bucket + )} - )} + + + +
+ + {loading && } + {!loading && ( + + {filteredRecords.map((bucket, index) => { + return ( + + ); + })} + {filteredRecords.length === 0 && filterBuckets !== "" && ( + + + } + title={"No Results"} + help={ + + No buckets match the filtering condition + + } + /> + + + )} + {filteredRecords.length === 0 && filterBuckets === "" && ( + + + } + title={"Buckets"} + help={ + + MinIO uses buckets to organize objects. A bucket is + similar to a folder or directory in a filesystem, where + each bucket can hold an arbitrary number of objects. +
+
+ To get started,  + + + } + /> + + + )} + + )} ); diff --git a/portal-ui/src/screens/Console/Common/BoxIconButton.tsx b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx index 5f4ed13ec..ca63fd605 100644 --- a/portal-ui/src/screens/Console/Common/BoxIconButton.tsx +++ b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx @@ -24,7 +24,7 @@ const styles = (theme: Theme) => createStyles({ root: { padding: 8, - marginLeft: 14, + marginLeft: 8, borderWidth: 1, borderColor: theme.palette.primary.main, borderStyle: "solid", diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 420c07369..e7610cad3 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -201,7 +201,7 @@ export const actionsTray = { justifyContent: "space-between" as const, "& button": { flexGrow: 0, - marginLeft: 15, + marginLeft: 8, }, }, filterContainer: { @@ -222,9 +222,9 @@ export const actionsTray = { export const searchField = { searchField: { flexGrow: 1, - height: 40, + height: 38, background: "#FFFFFF", - borderRadius: 5, + borderRadius: 3, border: "#EAEDEE 1px solid", display: "flex", justifyContent: "center", diff --git a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx index 56bb98b91..7fcbd9f9a 100644 --- a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx +++ b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx @@ -70,7 +70,7 @@ const PageHeader = ({   - + {!sidebarOpen && (
{operatorMode ? : } @@ -81,7 +81,7 @@ const PageHeader = ({ {actions && ( - + {actions} )} diff --git a/portal-ui/src/screens/Console/Common/PanelTitle.tsx b/portal-ui/src/screens/Console/Common/PanelTitle.tsx new file mode 100644 index 000000000..85cb3e3ec --- /dev/null +++ b/portal-ui/src/screens/Console/Common/PanelTitle.tsx @@ -0,0 +1,40 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2021 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"; +import { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import withStyles from "@mui/styles/withStyles"; +import { IconButtonProps } from "@mui/material"; + +const styles = (theme: Theme) => + createStyles({ + root: { + padding: 0, + margin: 0, + }, + }); + +interface IPanelTitle extends IconButtonProps { + classes: any; + children: any; +} + +const PanelTitle = ({ classes, children }: IPanelTitle) => { + return

{children}

; +}; + +export default withStyles(styles)(PanelTitle); diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx index 3b0ca285b..a8fb03c9c 100644 --- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx +++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx @@ -28,6 +28,7 @@ import SetPolicy from "../Policies/SetPolicy"; import AddGroupMember from "./AddGroupMember"; import { ErrorResponseHandler } from "../../../common/types"; import DeleteGroup from "./DeleteGroup"; +import PanelTitle from "../Common/PanelTitle"; const styles = (theme: Theme) => createStyles({ @@ -219,7 +220,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
-

Members

+ Members
-
+ {
-

Policies

+ Policies
-
+ { variant="standard" />
-
{
-

Policies

+ Policies
-
)}
-

Service Accounts

+ Service Accounts
-