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

Update buttons to BoxIconButton (#1174)

Browse Source 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-11-01 20:59:03 -07:00
committed by GitHub
parent 684f089f61
commit 2d51f64b5f
14 changed files with 129 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
portal-ui/src/icons/DeleteIcon.tsx
View File

@@ -15,12 +15,12 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { SvgIcon } from "@mui/material";
import { SvgIcon, SvgIconProps } from "@mui/material";
import { IIcon } from "./props";
const DeleteIcon = ({ width = 24 }: IIcon) => {
const DeleteIcon = (props: SvgIconProps) => {
return (
<SvgIcon style={{ width: width, height: width }}>
<SvgIcon {...props}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.836 12.646">
<path
data-name="Trazado 359"

11
portal-ui/src/icons/RefreshIcon.tsx
View File

@@ -15,16 +15,13 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { SvgIcon } from "@mui/material";
import { SvgIcon, SvgIconProps } from "@mui/material";
import { IIcon } from "./props";
const RefreshIcon = ({ width = 24 }: IIcon) => {
const RefreshIcon = (props: SvgIconProps) => {
return (
<SvgIcon style={{ width: width, height: width }}>
<SvgIcon {...props}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.157 21.107">
<path
data-name="Trazado 373"
d="M0 12.028a9.086 9.086 0 018.968-9.073l-1.071-1.07A1.1 1.1 0 019.449.333l3.11 3.11a1.1 1.1 0 010 1.565l-3.11 3.11a1.1 1.1 0 01-1.552-1.552l1.161-1.161a6.632 6.632 0 00-6.6 6.624 6.633 6.633 0 006.625 6.625 6.633 6.633 0 006.625-6.625 1.227 1.227 0 011.227-1.227 1.227 1.227 0 011.227 1.227 9.089 9.089 0 01-9.079 9.079A9.089 9.089 0 010 12.028z"
/>
<path d="M0 12.028a9.086 9.086 0 018.968-9.073l-1.071-1.07A1.1 1.1 0 019.449.333l3.11 3.11a1.1 1.1 0 010 1.565l-3.11 3.11a1.1 1.1 0 01-1.552-1.552l1.161-1.161a6.632 6.632 0 00-6.6 6.624 6.633 6.633 0 006.625 6.625 6.633 6.633 0 006.625-6.625 1.227 1.227 0 011.227-1.227 1.227 1.227 0 011.227 1.227 9.089 9.089 0 01-9.079 9.079A9.089 9.089 0 010 12.028z" />
</svg>
</SvgIcon>
);

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

@@ -53,6 +53,7 @@ import { BucketsIcon, DeleteIcon, FolderIcon } from "../../../../icons";
import DeleteBucket from "../ListBuckets/DeleteBucket";
import AccessRulePanel from "./AccessRulePanel";
import RefreshIcon from "../../../../icons/RefreshIcon";
import BoxIconButton from "../../Common/BoxIconButton";
const styles = (theme: Theme) =>
createStyles({
@@ -373,30 +374,28 @@ const BucketDetails = ({
actions={
<Fragment>
<Tooltip title={"Delete"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Delete"
component="span"
onClick={() => {
setDeleteOpen(true);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title={"Refresh"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setBucketDetailsLoad(true);
}}
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
</Fragment>
}

56
portal-ui/src/screens/Console/Common/BoxIconButton.tsx Normal file
View File

@@ -0,0 +1,56 @@
// 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 <http://www.gnu.org/licenses/>.
import React from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { IconButton, IconButtonProps } from "@mui/material";
const styles = (theme: Theme) =>
createStyles({
root: {
padding: 8,
marginLeft: 14,
borderWidth: 1,
borderColor: theme.palette.primary.main,
borderStyle: "solid",
borderRadius: 3,
"& .MuiSvgIcon-root": {
fontSize: 20,
},
"& .MuiTouchRipple-root span": {
backgroundColor: theme.palette.primary.main,
borderRadius: 3,
opacity: 0.3,
},
},
});
interface IBoxIconButton extends IconButtonProps {
classes: any;
children: any;
}
const BoxIconButton = ({ classes, children, ...rest }: IBoxIconButton) => {
return (
<IconButton {...rest} className={classes.root}>
{children}
</IconButton>
);
};
export default withStyles(styles)(BoxIconButton);

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

@@ -86,7 +86,7 @@ const styles = (theme: Theme) =>
maxHeight: 15,
},
"&.withLabel": {
top: 27,
top: 5,
},
},
});

8
portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
View File

@@ -14,7 +14,7 @@
// 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, { useEffect, useState, Fragment } from "react";
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
@@ -44,6 +44,7 @@ import RefreshIcon from "../../../../icons/RefreshIcon";
import SearchIcon from "../../../../icons/SearchIcon";
import PageHeader from "../../Common/PageHeader/PageHeader";
import HelpBox from "../../../../common/HelpBox";
import BoxIconButton from "../../Common/BoxIconButton";
interface IListTiersConfig {
classes: any;
@@ -210,17 +211,16 @@ const ListTiersConfiguration = ({
}}
variant="standard"
/>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setIsLoading(true);
}}
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
<Button
variant="contained"
color="primary"

16
portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
View File

@@ -14,18 +14,12 @@
// 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, { Fragment, useState, useEffect } 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";
import withStyles from "@mui/styles/withStyles";
import {
Button,
Grid,
InputAdornment,
TextField,
IconButton,
} from "@mui/material";
import { Button, Grid, InputAdornment, TextField } from "@mui/material";
import get from "lodash/get";
import GroupIcon from "@mui/icons-material/Group";
import { AddIcon } from "../../../icons";
@@ -49,6 +43,7 @@ import FormatDrives from "./FormatDrives";
import FormatErrorsResult from "./FormatErrorsResult";
import RefreshIcon from "../../../icons/RefreshIcon";
import SearchIcon from "../../../icons/SearchIcon";
import BoxIconButton from "../Common/BoxIconButton";
interface IDirectCSIMain {
classes: any;
@@ -272,10 +267,9 @@ const DirectCSIMain = ({
disabled={notAvailable}
variant="standard"
/>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh Tenant List"
component="span"
onClick={() => {
setLoading(true);
}}
@@ -283,7 +277,7 @@ const DirectCSIMain = ({
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
<Button
variant="contained"
color="primary"

4
portal-ui/src/screens/Console/License/License.tsx
View File

@@ -36,7 +36,7 @@ import PageHeader from "../Common/PageHeader/PageHeader";
import ActivationModal from "./ActivationModal";
import LicenseModal from "./LicenseModal";
import api from "../../../common/api";
import { TenantsIcon } from "../../../icons";
import { LicenseIcon } from "../../../icons";
const mapState = (state: AppState) => ({
operatorMode: state.system.operatorMode,
@@ -416,7 +416,7 @@ const License = ({ classes, operatorMode }: ILicenseProps) => {
<div className={clsx(classes.container, classes.mainContainer)}>
<Grid container>
<Grid xs={12} className={classes.icon}>
<TenantsIcon />
<LicenseIcon />
GNU Affero General Public License
</Grid>
<Grid item xs={12}>

8
portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
View File

@@ -14,7 +14,7 @@
// 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, { 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";
@@ -47,6 +47,7 @@ import RefreshIcon from "../../../icons/RefreshIcon";
import SearchIcon from "../../../icons/SearchIcon";
import history from "../../../history";
import HelpBox from "../../../common/HelpBox";
import BoxIconButton from "../Common/BoxIconButton";
interface IListNotificationEndpoints {
classes: any;
@@ -159,17 +160,16 @@ const ListNotificationEndpoints = ({
}}
variant="standard"
/>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setIsLoading(true);
}}
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
<Button
variant="contained"
color="primary"

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

@@ -27,7 +27,7 @@ import {
} from "../Common/FormComponents/common/styleLibrary";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
import { Button, IconButton, LinearProgress, Tooltip } from "@mui/material";
import { Button, LinearProgress, Tooltip } from "@mui/material";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import api from "../../../common/api";
import PageHeader from "../Common/PageHeader/PageHeader";
@@ -47,6 +47,7 @@ import IAMPoliciesIcon from "../../../icons/IAMPoliciesIcon";
import RefreshIcon from "../../../icons/RefreshIcon";
import SearchIcon from "../../../icons/SearchIcon";
import TrashIcon from "../../../icons/TrashIcon";
import BoxIconButton from "../Common/BoxIconButton";
interface IPolicyDetailsProps {
classes: any;
@@ -364,21 +365,19 @@ const PolicyDetails = ({
actions={
<Fragment>
<Tooltip title="Delete Policy">
<IconButton
<BoxIconButton
color="primary"
aria-label="Delete Policy"
component="span"
onClick={deletePolicy}
>
<TrashIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title={"Refresh"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setLoadingUsers(true);
setLoadingGroups(true);
@@ -387,7 +386,7 @@ const PolicyDetails = ({
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
</Fragment>
}

7
portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
View File

@@ -43,6 +43,7 @@ import SearchIcon from "../../../../icons/SearchIcon";
import PageHeader from "../../Common/PageHeader/PageHeader";
import TenantListItem from "./TenantListItem";
import HelpBox from "../../../../common/HelpBox";
import BoxIconButton from "../../Common/BoxIconButton";
interface ITenantsList {
classes: any;
@@ -89,6 +90,7 @@ const styles = (theme: Theme) =>
},
mainActions: {
textAlign: "right",
marginBottom: 8,
},
healthStatusIcon: {
position: "relative",
@@ -259,17 +261,16 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
<Grid item xs={12} className={classes.container}>
<Grid container>
<Grid item xs={12} className={classes.mainActions}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh Tenant List"
component="span"
onClick={() => {
setIsLoading(true);
}}
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
</Grid>
<Grid item xs={12}>

21
portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
View File

@@ -107,6 +107,10 @@ const styles = (theme: Theme) =>
fontSize: 12,
color: "#5E5E5E",
},
manageButton: {
marginRight: 8,
textTransform: "initial",
},
});
interface ITenantListItem {
@@ -162,7 +166,7 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
<Fragment>
<div className={classes.tenantItem}>
<Grid container>
<Grid item xs={10}>
<Grid item xs={8}>
<div className={classes.title}>{tenant.name}</div>
<div>
<span className={classes.titleSubKey}>Namespace:</span>
@@ -175,7 +179,20 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
</span>
</div>
</Grid>
<Grid item xs={2} textAlign={"end"}>
<Grid item xs={4} textAlign={"end"}>
<Button
size={"small"}
color={"primary"}
variant="outlined"
className={classes.manageButton}
onClick={() => {
history.push(
`/namespaces/${tenant.namespace}/tenants/${tenant.name}/hop`
);
}}
>
Manage
</Button>
<Button
endIcon={<ArrowRightIcon />}
variant="contained"

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

@@ -20,7 +20,7 @@ import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, IconButton, Tab, Tabs, Tooltip } from "@mui/material";
import { Box, Tab, Tabs, Tooltip } from "@mui/material";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import { setErrorSnackMessage, setSnackBarMessage } from "../../../../actions";
@@ -58,6 +58,7 @@ import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
import EditIcon from "../../../../icons/EditIcon";
import RefreshIcon from "../../../../icons/RefreshIcon";
import TenantsIcon from "../../../../icons/TenantsIcon";
import BoxIconButton from "../../Common/BoxIconButton";
interface ITenantDetailsProps {
classes: any;
@@ -409,47 +410,43 @@ const TenantDetails = ({
</Fragment>
}
actions={
<Fragment>
<div>
<Tooltip title={"Delete"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Delete"
component="span"
onClick={() => {
confirmDeleteTenant();
}}
size="large"
>
<DeleteIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title={"Edit YAML"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Edit YAML"
component="span"
onClick={() => {
editYaml();
}}
size="large"
>
<EditIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title={"Refresh"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setTenantDetailsLoad(true);
}}
size="large"
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
</Fragment>
</div>
}
/>
</Grid>

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

@@ -21,7 +21,7 @@ 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 { Button, Grid, IconButton, Tooltip } from "@mui/material";
import { Button, Grid, Tooltip } from "@mui/material";
import {
AddIcon,
DeleteIcon,
@@ -54,6 +54,7 @@ import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import LockIcon from "@mui/icons-material/Lock";
import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
import BoxIconButton from "../Common/BoxIconButton";
const styles = (theme: Theme) =>
createStyles({
@@ -303,26 +304,24 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
{enabled ? "Disable" : "Enable"}
</Button>
<Tooltip title="Delete User">
<IconButton
<BoxIconButton
color="primary"
aria-label="Delete User"
component="span"
onClick={deleteUser}
size="large"
>
<DeleteIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title="Change Password">
<IconButton
<BoxIconButton
color="primary"
aria-label="Change Password"
component="span"
onClick={changeUserPassword}
size="large"
>
<LockIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
</Fragment>
}