Skip to content

Commit dcfc74a

Browse files
prakashsvmxdvaldivia
prakashsvmx
and
dvaldivia
authored
UX Button for page actions (#1392)
Co-authored-by: Daniel Valdivia <[email protected]>
1 parent 5745137 commit dcfc74a

27 files changed

+491
-521
lines changed

‎portal-ui/src/icons/AzureTierIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const AzureTierIcon = (props: SVGProps<SVGSVGElement>) => {
3131
id="path21"
3232
d="M459.411,505.944c6.055-1.07,11.056-1.953,11.115-1.965l.1-.024-5.717-6.8c-3.143-3.74-5.717-6.815-5.717-6.831,0-.032,5.9-16.291,5.936-16.347.012-.019,4.03,6.919,9.738,16.812,5.347,9.266,9.755,16.9,9.8,16.975l.075.132-18.168,0-18.169,0S459.411,505.944,459.411,505.944ZM437.6,503.868c0-.008,2.693-4.686,5.987-10.391l5.987-10.375,6.978-5.856c3.839-3.219,6.986-5.86,7-5.864a1.448,1.448,0,0,1-.112.282c-.075.159-3.485,7.471-7.574,16.247l-7.44,15.957-5.41.008C440.037,503.884,437.6,503.88,437.6,503.868Z"
3333
transform="translate(-437.603 -471.382)"
34-
fill="#c22e4a"
34+
fill="#2a94dc"
3535
/>
3636
</g>
3737
</g>

‎portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { Button, Paper } from "@mui/material";
22+
import { Paper } from "@mui/material";
2323
import { AppState } from "../../../../store";
2424
import { setErrorSnackMessage } from "../../../../actions";
2525
import { ISessionResponse } from "../../types";
@@ -44,6 +44,7 @@ import SecureComponent, {
4444
} from "../../../../common/SecureComponent/SecureComponent";
4545

4646
import withSuspense from "../../Common/Components/withSuspense";
47+
import RBIconButton from "./SummaryItems/RBIconButton";
4748

4849
const AddAccessRuleModal = withSuspense(
4950
React.lazy(() => import("./AddAccessRule"))
@@ -226,18 +227,16 @@ const AccessRule = ({
226227
matchAll
227228
errorProps={{ disabled: true }}
228229
>
229-
<Button
230-
variant="contained"
231-
color="primary"
232-
endIcon={<AddIcon />}
233-
component="label"
230+
<RBIconButton
231+
tooltip={"Add Access Rule"}
234232
onClick={() => {
235233
setAddAccessRuleOpen(true);
236234
}}
237-
className={classes.listButton}
238-
>
239-
Add Access Rule
240-
</Button>
235+
text={"Add Access Rule"}
236+
icon={<AddIcon />}
237+
color="primary"
238+
variant={"contained"}
239+
/>
241240
</SecureComponent>
242241
</Grid>
243242
<Paper className={classes.tableBlock}>

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -274,14 +274,14 @@ const BucketDetails = ({
274274
errorProps={{ disabled: true }}
275275
>
276276
<RBIconButton
277-
classes={{
278-
root: classes.deleteBtn,
279-
}}
277+
tooltip={"Delete Bucket"}
280278
onClick={() => {
281279
setDeleteOpen(true);
282280
}}
283-
text={`Delete Bucket`}
281+
text={"Delete Bucket"}
284282
icon={<TrashIcon />}
283+
color={"secondary"}
284+
variant={"outlined"}
285285
/>
286286
</SecureComponent>
287287
<RBIconButton

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { Button } from "@mui/material";
2322
import get from "lodash/get";
2423
import Grid from "@mui/material/Grid";
2524
import AddIcon from "../../../../icons/AddIcon";
@@ -43,6 +42,7 @@ import SecureComponent, {
4342
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
4443

4544
import withSuspense from "../../Common/Components/withSuspense";
45+
import RBIconButton from "./SummaryItems/RBIconButton";
4646

4747
const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
4848
const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -162,17 +162,16 @@ const BucketEventsPanel = ({
162162
matchAll
163163
errorProps={{ disabled: true }}
164164
>
165-
<Button
166-
variant="contained"
167-
color="primary"
168-
endIcon={<AddIcon />}
169-
size="medium"
165+
<RBIconButton
166+
tooltip={"Subscribe to Event"}
170167
onClick={() => {
171168
setAddEventScreenOpen(true);
172169
}}
173-
>
174-
Subscribe to Event
175-
</Button>
170+
text={"Subscribe to Event"}
171+
icon={<AddIcon />}
172+
color="primary"
173+
variant={"contained"}
174+
/>
176175
</SecureComponent>
177176
</Grid>
178177
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { Button } from "@mui/material";
2322
import get from "lodash/get";
2423
import * as reactMoment from "react-moment";
2524
import Grid from "@mui/material/Grid";
@@ -42,6 +41,7 @@ import SecureComponent, {
4241
hasPermission,
4342
} from "../../../../common/SecureComponent/SecureComponent";
4443
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
44+
import RBIconButton from "./SummaryItems/RBIconButton";
4545

4646
const styles = (theme: Theme) =>
4747
createStyles({
@@ -213,17 +213,16 @@ const BucketLifecyclePanel = ({
213213
matchAll
214214
errorProps={{ disabled: true }}
215215
>
216-
<Button
217-
variant="contained"
218-
color="primary"
219-
endIcon={<AddIcon />}
220-
size="medium"
216+
<RBIconButton
217+
tooltip={"Add Lifecycle Rule"}
221218
onClick={() => {
222219
setAddLifecycleOpen(true);
223220
}}
224-
>
225-
Add Lifecycle Rule
226-
</Button>
221+
text={"Add Lifecycle Rule"}
222+
icon={<AddIcon />}
223+
color="primary"
224+
variant={"contained"}
225+
/>
227226
</SecureComponent>
228227
</Grid>
229228
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { Button } from "@mui/material";
2322
import Grid from "@mui/material/Grid";
2423
import AddIcon from "../../../../icons/AddIcon";
2524
import BucketsIcon from "../../../../icons/BucketsIcon";
@@ -47,6 +46,7 @@ import SecureComponent, {
4746
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
4847

4948
import withSuspense from "../../Common/Components/withSuspense";
49+
import RBIconButton from "./SummaryItems/RBIconButton";
5050

5151
const AddReplicationModal = withSuspense(
5252
React.lazy(() => import("./AddReplicationModal"))
@@ -190,17 +190,16 @@ const BucketReplicationPanel = ({
190190
matchAll
191191
errorProps={{ disabled: true }}
192192
>
193-
<Button
194-
variant="contained"
195-
color="primary"
196-
endIcon={<AddIcon />}
197-
size="medium"
193+
<RBIconButton
194+
tooltip={"Add Replication Rule"}
198195
onClick={() => {
199196
setOpenReplicationOpen(true);
200197
}}
201-
>
202-
Add Replication Rule
203-
</Button>
198+
text={"Add Replication Rule"}
199+
icon={<AddIcon />}
200+
color="primary"
201+
variant={"contained"}
202+
/>
204203
</SecureComponent>
205204
</Grid>
206205
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,9 @@
1616

1717
import React from "react";
1818
import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
19-
import { Theme } from "@mui/material/styles";
20-
import createStyles from "@mui/styles/createStyles";
21-
import withStyles from "@mui/styles/withStyles";
2219
import { IconButtonProps } from "@mui/material";
20+
import makeStyles from "@mui/styles/makeStyles";
21+
import { Theme } from "@mui/material/styles";
2322

2423
type DeleteButtonProps = {
2524
onClick: (e: any) => void;
@@ -32,29 +31,57 @@ type DeleteButtonProps = {
3231
[x: string]: any;
3332
};
3433

35-
const styles = (theme: Theme) =>
36-
createStyles({
34+
type RBIconProps = Partial<IconButtonProps> & DeleteButtonProps;
35+
36+
const useStyles = makeStyles((theme: Theme) => {
37+
const getButtonColor = (props: RBIconProps) => {
38+
const { variant, color } = props;
39+
40+
let tgtColor = theme.palette.primary.main;
41+
42+
if (color === "primary" && variant === "contained") {
43+
tgtColor = theme.palette.primary.contrastText;
44+
} else if (color === "primary" && variant === "outlined") {
45+
tgtColor = theme.palette.primary.main;
46+
} else if (color === "secondary") {
47+
tgtColor = theme.palette.secondary.main;
48+
}
49+
50+
return tgtColor;
51+
};
52+
53+
return {
3754
root: {
38-
"& .min-icon": {
55+
padding: "7px",
56+
color: (props: RBIconProps) => getButtonColor(props),
57+
borderColor: (props: RBIconProps) =>
58+
props.color === "secondary"
59+
? theme.palette.secondary.main
60+
: theme.palette.primary.main,
61+
"& svg.min-icon": {
3962
width: 12,
40-
marginLeft: "5px",
63+
marginLeft: (props: RBIconProps) => (props.text ? "5px" : "0px"),
4164
"@media (max-width: 900px)": {
4265
width: 16,
43-
marginLeft: 0,
66+
marginLeft: "0px !important",
4467
},
4568
},
4669
},
47-
});
70+
};
71+
});
72+
73+
const RBIconButton = (props: RBIconProps) => {
74+
const classes = useStyles(props);
75+
76+
const {
77+
onClick,
78+
text = "",
79+
disabled = false,
80+
tooltip,
81+
icon = null,
82+
...restProps
83+
} = props;
4884

49-
const RBIconButton = ({
50-
onClick,
51-
text = "",
52-
disabled = false,
53-
tooltip,
54-
classes,
55-
icon = null,
56-
...restProps
57-
}: Partial<IconButtonProps> & DeleteButtonProps) => {
5885
return (
5986
<BoxIconButton
6087
classes={classes}
@@ -79,4 +106,4 @@ const RBIconButton = ({
79106
</BoxIconButton>
80107
);
81108
};
82-
export default withStyles(styles)(RBIconButton);
109+
export default RBIconButton;

‎portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
TotalObjectsIcon,
2626
} from "../../../../icons";
2727
import { Bucket } from "../types";
28-
import { Box, Button, Grid, Typography } from "@mui/material";
28+
import { Box, Grid, Typography } from "@mui/material";
2929
import { niceBytes, prettyNumber } from "../../../../common/utils";
3030
import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
3131
import { Link } from "react-router-dom";
@@ -34,6 +34,7 @@ import {
3434
IAM_ROLES,
3535
} from "../../../../common/SecureComponent/permissions";
3636
import SecureComponent from "../../../../common/SecureComponent/SecureComponent";
37+
import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
3738

3839
const styles = (theme: Theme) =>
3940
createStyles({
@@ -244,26 +245,28 @@ const BucketListItem = ({
244245
to={`/buckets/${bucket.name}/admin`}
245246
style={{ textDecoration: "none" }}
246247
>
247-
<Button
248+
<RBIconButton
249+
tooltip={"Manage"}
250+
onClick={() => {}}
251+
text={"Manage"}
252+
icon={<SettingsIcon />}
253+
color={"primary"}
248254
variant={"outlined"}
249-
endIcon={<SettingsIcon />}
250-
className={classes.manageButton}
251-
>
252-
Manage
253-
</Button>
255+
/>
254256
</Link>
255257
</SecureComponent>
256258
<Link
257259
to={`/buckets/${bucket.name}/browse`}
258260
style={{ textDecoration: "none" }}
259261
>
260-
<Button
261-
variant="contained"
262-
endIcon={<ArrowRightIcon />}
263-
className={classes.viewButton}
264-
>
265-
Browse
266-
</Button>
262+
<RBIconButton
263+
tooltip={"Browse"}
264+
onClick={() => {}}
265+
text={"Browse"}
266+
icon={<ArrowRightIcon />}
267+
color={"primary"}
268+
variant={"contained"}
269+
/>
267270
</Link>
268271
<Box display={{ xs: "none", sm: "block" }}>
269272
<div style={{ marginBottom: 10 }} />

0 commit comments

Comments
 (0)