Skip to content

Commit f7b142e

Browse files
bexsoftbexsoft
authored
Replacing all buttons from console with mds (#2303)
Replaces buttons in console to start using MinIO Design System (mds) Signed-off-by: Benjamin Perez <[email protected]>
1 parent 1108cee commit f7b142e

File tree

137 files changed

+4160
-4787
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+4160
-4787
lines changed

‎portal-ui/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@mui/lab": "^5.0.0-alpha.83",
1111
"@mui/material": "^5.8.1",
1212
"@mui/styles": "^5.8.0",
13+
"@mui/x-date-pickers": "^5.0.0",
1314
"@reduxjs/toolkit": "^1.8.1",
1415
"@types/lodash": "^4.14.149",
1516
"@types/minio": "^7.0.11",
@@ -29,6 +30,7 @@
2930
"kbar": "^0.1.0-beta.34",
3031
"local-storage-fallback": "^4.1.1",
3132
"lodash": "^4.17.21",
33+
"mds": "https://github.com/minio/mds.git#v0.0.2",
3234
"minio": "^7.0.28",
3335
"moment": "^2.29.4",
3436
"react": "^18.1.0",

‎portal-ui/src/StyleHandler.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { generateOverrideTheme } from "./utils/stylesUtils";
3030
import "./index.css";
3131
import { useSelector } from "react-redux";
3232
import { AppState } from "./store";
33+
import { ThemeHandler } from "mds";
3334

3435
declare module "@mui/styles/defaultTheme" {
3536
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -85,10 +86,6 @@ const StyleHandler = ({ children }: IStyleHandler) => {
8586
width: 16,
8687
},
8788
},
88-
// You should target [class*="MuiButton-root"] instead if you nest themes.
89-
".MuiButton-root:not(.noDefaultHeight)": {
90-
height: 38,
91-
},
9289
".MuiButton-contained": {
9390
fontSize: "14px",
9491
textTransform: "capitalize",
@@ -155,11 +152,14 @@ const StyleHandler = ({ children }: IStyleHandler) => {
155152
},
156153
})(() => null);
157154

155+
// ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
158156
return (
159157
<Fragment>
160158
<GlobalCss />
161159
<StyledEngineProvider injectFirst>
162-
<ThemeProvider theme={thm}>{children}</ThemeProvider>
160+
<ThemeProvider theme={thm}>
161+
<ThemeHandler>{children}</ThemeHandler>
162+
</ThemeProvider>
163163
</StyledEngineProvider>
164164
</Fragment>
165165
);

‎portal-ui/src/screens/Console/Account/Account.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { Fragment, useEffect, useState } from "react";
18+
import { Button } from "mds";
1819
import { useSelector } from "react-redux";
1920
import { useNavigate } from "react-router-dom";
2021
import { Theme } from "@mui/material/styles";
@@ -51,14 +52,15 @@ import {
5152
IAM_SCOPES,
5253
} from "../../../common/SecureComponent/permissions";
5354
import { SecureComponent } from "../../../common/SecureComponent";
54-
import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
55+
5556
import { selectSAs } from "../Configurations/utils";
5657
import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
5758
import ServiceAccountPolicy from "./ServiceAccountPolicy";
5859
import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
5960
import makeStyles from "@mui/styles/makeStyles";
6061
import { selFeatures } from "../consoleSlice";
6162
import { useAppDispatch } from "../../../store";
63+
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
6264

6365
const DeleteServiceAccount = withSuspense(
6466
React.lazy(() => import("./DeleteServiceAccount"))
@@ -220,40 +222,41 @@ const Account = () => {
220222
}}
221223
>
222224
{" "}
223-
<RBIconButton
224-
tooltip={"Delete Selected"}
225-
onClick={() => {
226-
setDeleteMultipleOpen(true);
227-
}}
228-
text={"Delete Selected"}
229-
icon={<DeleteIcon />}
230-
color="secondary"
231-
disabled={selectedSAs.length === 0}
232-
variant={"outlined"}
233-
/>
225+
<TooltipWrapper tooltip={"Delete Selected"}>
226+
<Button
227+
id={"delete-selected-accounts"}
228+
onClick={() => {
229+
setDeleteMultipleOpen(true);
230+
}}
231+
label={"Delete Selected"}
232+
icon={<DeleteIcon />}
233+
disabled={selectedSAs.length === 0}
234+
variant={"secondary"}
235+
/>
236+
</TooltipWrapper>
234237
<SecureComponent
235238
scopes={[IAM_SCOPES.ADMIN_CREATE_USER]}
236239
resource={CONSOLE_UI_RESOURCE}
237240
matchAll
238241
errorProps={{ disabled: true }}
239242
>
240-
<RBIconButton
243+
<Button
244+
id={"change-password"}
241245
onClick={() => setChangePasswordModalOpen(true)}
242-
text={`Change Password`}
246+
label={`Change Password`}
243247
icon={<PasswordKeyIcon />}
244-
color={"primary"}
245-
variant={"outlined"}
248+
variant={"regular"}
246249
disabled={userIDP}
247250
/>
248251
</SecureComponent>
249-
<RBIconButton
250-
onClick={(e) => {
252+
<Button
253+
id={"create-service-account"}
254+
onClick={() => {
251255
navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
252256
}}
253-
text={`Create service account`}
257+
label={`Create service account`}
254258
icon={<AddIcon />}
255-
color={"primary"}
256-
variant={"contained"}
259+
variant={"callAction"}
257260
/>
258261
</Box>
259262
</Grid>

‎portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@
1717
import React, { Fragment, useEffect, useState } from "react";
1818
import { Theme } from "@mui/material/styles";
1919
import { useNavigate } from "react-router-dom";
20+
import { Button } from "mds";
2021
import createStyles from "@mui/styles/createStyles";
2122
import withStyles from "@mui/styles/withStyles";
2223
import {
2324
formFieldStyles,
2425
modalStyleUtils,
2526
} from "../Common/FormComponents/common/styleLibrary";
2627
import Grid from "@mui/material/Grid";
27-
import { Box, Button } from "@mui/material";
28+
import { Box } from "@mui/material";
2829
import {
2930
IAMPoliciesIcon,
3031
PasswordKeyIcon,
@@ -287,17 +288,20 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
287288
</Grid>
288289
<Grid item xs={12} className={classes.modalButtonBar}>
289290
<Button
291+
id={"clear"}
290292
type="button"
291-
variant="outlined"
292-
color="primary"
293+
variant="regular"
293294
onClick={resetForm}
294-
>
295-
Clear
296-
</Button>
295+
label={"Clear"}
296+
/>
297297

298-
<Button type="submit" variant="contained" color="primary">
299-
Create
300-
</Button>
298+
<Button
299+
id={"create-sa"}
300+
type="submit"
301+
variant="callAction"
302+
color="primary"
303+
label={"Create"}
304+
/>
301305
</Grid>
302306
</Grid>
303307
</form>

‎portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { useState } from "react";
18-
18+
import { Button } from "mds";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
2222
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
2323
import Grid from "@mui/material/Grid";
2424
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
25-
import { Button, LinearProgress } from "@mui/material";
25+
import { LinearProgress } from "@mui/material";
2626
import {
2727
containerForHeader,
2828
formFieldStyles,
@@ -193,8 +193,9 @@ const ChangePassword = ({
193193
</Grid>
194194
<Grid item xs={12} className={classes.modalButtonBar}>
195195
<Button
196+
id={"save-password-modal"}
196197
type="submit"
197-
variant="contained"
198+
variant="callAction"
198199
color="primary"
199200
disabled={
200201
loading ||
@@ -204,9 +205,8 @@ const ChangePassword = ({
204205
reNewPassword.length > 0
205206
)
206207
}
207-
>
208-
Save
209-
</Button>
208+
label="Save"
209+
/>
210210
</Grid>
211211
{loading && (
212212
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { useState } from "react";
18-
18+
import { Button } from "mds";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
2222
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
2323
import Grid from "@mui/material/Grid";
2424
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
25-
import { Button, LinearProgress } from "@mui/material";
25+
import { LinearProgress } from "@mui/material";
2626
import {
2727
containerForHeader,
2828
formFieldStyles,
@@ -156,16 +156,16 @@ const ChangeUserPassword = ({
156156
</Grid>
157157
<Grid item xs={12} className={classes.buttonContainer}>
158158
<Button
159+
id={"save-user-password"}
159160
type="submit"
160-
variant="contained"
161+
variant="callAction"
161162
color="primary"
162163
disabled={
163164
loading ||
164165
!(reNewPassword.length > 0 && newPassword === reNewPassword)
165166
}
166-
>
167-
Save
168-
</Button>
167+
label={"Save"}
168+
/>
169169
</Grid>
170170
{loading && (
171171
<Grid item xs={12}>

‎portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx‎

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

1717
import React, { useEffect, useState } from "react";
1818

19-
import { Button } from "@mui/material";
19+
import { Button } from "mds";
2020
import { Theme } from "@mui/material/styles";
2121
import createStyles from "@mui/styles/createStyles";
2222
import withStyles from "@mui/styles/withStyles";
@@ -139,24 +139,23 @@ const ServiceAccountPolicy = ({
139139
</Grid>
140140
<Grid item xs={12} className={classes.modalButtonBar}>
141141
<Button
142+
id={"cancel-sa-policy"}
142143
type="button"
143-
variant="outlined"
144-
color="primary"
144+
variant="regular"
145145
onClick={() => {
146146
closeModalAndRefresh();
147147
}}
148148
disabled={loading}
149-
>
150-
Cancel
151-
</Button>
149+
label={"Cancel"}
150+
/>
152151
<Button
152+
id={"save-sa-policy"}
153153
type="submit"
154-
variant="contained"
154+
variant="callAction"
155155
color="primary"
156156
disabled={loading}
157-
>
158-
Set
159-
</Button>
157+
label={"Set"}
158+
/>
160159
</Grid>
161160
</Grid>
162161
</form>

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ import React, { Fragment, useEffect, useState } from "react";
1818
import { useSelector } from "react-redux";
1919
import { useParams } from "react-router-dom";
2020
import { Theme } from "@mui/material/styles";
21-
import createStyles from "@mui/styles/createStyles";
21+
import { Button } from "mds";
2222
import { Paper } from "@mui/material";
23+
import createStyles from "@mui/styles/createStyles";
2324
import { ErrorResponseHandler } from "../../../../common/types";
2425
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
2526
import api from "../../../../common/api";
@@ -41,11 +42,11 @@ import {
4142
} from "../../../../common/SecureComponent";
4243

4344
import withSuspense from "../../Common/Components/withSuspense";
44-
import RBIconButton from "./SummaryItems/RBIconButton";
4545
import { setErrorSnackMessage } from "../../../../systemSlice";
4646
import makeStyles from "@mui/styles/makeStyles";
4747
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
4848
import { useAppDispatch } from "../../../../store";
49+
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
4950

5051
const AddAccessRuleModal = withSuspense(
5152
React.lazy(() => import("./AddAccessRule"))
@@ -203,16 +204,17 @@ const AccessRule = () => {
203204
matchAll
204205
errorProps={{ disabled: true }}
205206
>
206-
<RBIconButton
207-
tooltip={"Add Access Rule"}
208-
onClick={() => {
209-
setAddAccessRuleOpen(true);
210-
}}
211-
text={"Add Access Rule"}
212-
icon={<AddIcon />}
213-
color="primary"
214-
variant={"contained"}
215-
/>
207+
<TooltipWrapper tooltip={"Add Access Rule"}>
208+
<Button
209+
id={"add-bucket-access-rule"}
210+
onClick={() => {
211+
setAddAccessRuleOpen(true);
212+
}}
213+
label={"Add Access Rule"}
214+
icon={<AddIcon />}
215+
variant={"callAction"}
216+
/>
217+
</TooltipWrapper>
216218
</SecureComponent>
217219
</Grid>
218220
<Paper className={classes.tableBlock}>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616

1717
import React, { useState } from "react";
1818
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
19-
import { Button, Grid } from "@mui/material";
19+
import { Grid } from "@mui/material";
20+
import { Button } from "mds";
2021
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
2122
import { Theme } from "@mui/material/styles";
2223
import createStyles from "@mui/styles/createStyles";
@@ -121,22 +122,21 @@ const AddAccessRule = ({
121122
</Grid>
122123
<Grid item xs={12} className={classes.modalButtonBar}>
123124
<Button
125+
id={"clear"}
124126
type="button"
125-
color="primary"
126-
variant="outlined"
127+
variant="regular"
127128
onClick={resetForm}
128-
>
129-
Clear
130-
</Button>
129+
label={"Clear"}
130+
/>
131+
131132
<Button
133+
id={"add-access-save"}
132134
type="submit"
133-
variant="contained"
134-
color="primary"
135+
variant="callAction"
135136
disabled={prefix.trim() === ""}
136137
onClick={createProcess}
137-
>
138-
Save
139-
</Button>
138+
label={"Save"}
139+
/>
140140
</Grid>
141141
</Grid>
142142
</ModalWrapper>

0 commit comments

Comments
 (0)