Skip to content

Commit f027860

Browse files
bexsoftbexsoft
authored
Migrated Groups Module components to mds (#2923)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 542b719 commit f027860

File tree

12 files changed

+468
-694
lines changed

12 files changed

+468
-694
lines changed

‎portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -358,12 +358,6 @@ export const objectBrowserCommon = {
358358
// ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
359359
// "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
360360

361-
export const selectorsCommon = {
362-
multiSelectTable: {
363-
height: 200,
364-
},
365-
};
366-
367361
export const settingsCommon: any = {
368362
settingsFormContainer: {
369363
padding: 38,

‎portal-ui/src/screens/Console/Groups/AddGroupMember.tsx

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
import React, { useState } from "react";
2-
import UsersSelectors from "./UsersSelectors";
3-
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
4-
import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
5-
import Grid from "@mui/material/Grid";
6-
import { AddMembersToGroupIcon, Button } from "mds";
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2023 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
716

8-
import { Theme } from "@mui/material/styles";
9-
import createStyles from "@mui/styles/createStyles";
10-
import {
11-
formFieldStyles,
12-
modalBasic,
13-
modalStyleUtils,
14-
} from "../Common/FormComponents/common/styleLibrary";
15-
import withStyles from "@mui/styles/withStyles";
17+
import React, { useState } from "react";
18+
import { AddMembersToGroupIcon, Button, FormLayout, Grid, ReadBox } from "mds";
19+
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
1620
import { encodeURLString } from "../../../common/utils";
1721
import { setModalErrorSnackMessage } from "../../../systemSlice";
1822
import { useAppDispatch } from "../../../store";
1923
import { api } from "api";
2024
import { errorToHandler } from "api/errors";
25+
import UsersSelectors from "./UsersSelectors";
26+
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
2127

2228
type UserPickerModalProps = {
23-
classes?: any;
2429
title?: string;
2530
preSelectedUsers?: string[];
2631
selectedGroup?: string;
@@ -30,21 +35,7 @@ type UserPickerModalProps = {
3035
groupStatus?: string;
3136
};
3237

33-
const styles = (theme: Theme) =>
34-
createStyles({
35-
userSelector: {
36-
"& .MuiPaper-root": {
37-
padding: 0,
38-
marginBottom: 15,
39-
},
40-
},
41-
...modalStyleUtils,
42-
...formFieldStyles,
43-
...modalBasic,
44-
});
45-
4638
const AddGroupMember = ({
47-
classes,
4839
title = "",
4940
groupStatus = "enabled",
5041
preSelectedUsers = [],
@@ -77,21 +68,17 @@ const AddGroupMember = ({
7768
title={title}
7869
titleIcon={<AddMembersToGroupIcon />}
7970
>
80-
<Grid container>
81-
<Grid item xs={12}>
82-
<div className={classes.formFieldRow}>
83-
<PredefinedList label={`Selected Group`} content={selectedGroup} />
84-
</div>
85-
<div className={classes.userSelector}>
86-
<UsersSelectors
87-
selectedUsers={selectedUsers}
88-
setSelectedUsers={setSelectedUsers}
89-
editMode={!selectedGroup}
90-
/>
91-
</div>
92-
</Grid>
93-
</Grid>
94-
<Grid item xs={12} className={classes.modalButtonBar}>
71+
<FormLayout withBorders={false} containerPadding={false}>
72+
<ReadBox label={`Selected Group`} sx={{ width: "100%" }}>
73+
{selectedGroup}
74+
</ReadBox>
75+
<UsersSelectors
76+
selectedUsers={selectedUsers}
77+
setSelectedUsers={setSelectedUsers}
78+
editMode={!selectedGroup}
79+
/>
80+
</FormLayout>
81+
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
9582
<Button
9683
id={"reset-add-group-member"}
9784
type="button"
@@ -116,4 +103,4 @@ const AddGroupMember = ({
116103
);
117104
};
118105

119-
export default withStyles(styles)(AddGroupMember);
106+
export default AddGroupMember;

‎portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx

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

1717
import React, { Fragment, useEffect, useState } from "react";
18-
import { Theme } from "@mui/material/styles";
1918
import { useNavigate } from "react-router-dom";
20-
import createStyles from "@mui/styles/createStyles";
21-
import withStyles from "@mui/styles/withStyles";
22-
import {
23-
formFieldStyles,
24-
modalStyleUtils,
25-
} from "../Common/FormComponents/common/styleLibrary";
26-
import Grid from "@mui/material/Grid";
19+
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
2720
import { LinearProgress } from "@mui/material";
28-
import { BackLink, Button, CreateGroupIcon, FormLayout, PageLayout } from "mds";
29-
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
30-
import AddGroupHelpBox from "./AddGroupHelpBox";
31-
import UsersSelectors from "./UsersSelectors";
21+
import {
22+
BackLink,
23+
Button,
24+
CreateGroupIcon,
25+
FormLayout,
26+
Grid,
27+
InputBox,
28+
PageLayout,
29+
} from "mds";
30+
import { api } from "api";
31+
import { errorToHandler } from "api/errors";
3232
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
33-
3433
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
3534
import { useAppDispatch } from "../../../store";
35+
import AddGroupHelpBox from "./AddGroupHelpBox";
36+
import UsersSelectors from "./UsersSelectors";
3637
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
3738
import HelpMenu from "../HelpMenu";
38-
import { api } from "api";
39-
import { errorToHandler } from "api/errors";
40-
41-
interface IAddGroupProps {
42-
classes: any;
43-
}
4439

45-
const styles = (theme: Theme) =>
46-
createStyles({
47-
...formFieldStyles,
48-
...modalStyleUtils,
49-
});
50-
51-
const AddGroupScreen = ({ classes }: IAddGroupProps) => {
40+
const AddGroupScreen = () => {
5241
const dispatch = useAppDispatch();
5342
const navigate = useNavigate();
5443
const [groupName, setGroupName] = useState<string>("");
@@ -101,73 +90,64 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
10190

10291
return (
10392
<Fragment>
104-
<Grid item xs={12}>
105-
<PageHeaderWrapper
106-
label={
107-
<BackLink
108-
label={"Groups"}
109-
onClick={() => navigate(IAM_PAGES.GROUPS)}
93+
<PageHeaderWrapper
94+
label={
95+
<BackLink
96+
label={"Groups"}
97+
onClick={() => navigate(IAM_PAGES.GROUPS)}
98+
/>
99+
}
100+
actions={<HelpMenu />}
101+
/>
102+
<PageLayout>
103+
<FormLayout
104+
title={"Create Group"}
105+
icon={<CreateGroupIcon />}
106+
helpBox={<AddGroupHelpBox />}
107+
>
108+
<form noValidate autoComplete="off" onSubmit={setSaving}>
109+
<InputBox
110+
id="group-name"
111+
name="group-name"
112+
label="Group Name"
113+
autoFocus={true}
114+
value={groupName}
115+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
116+
setGroupName(e.target.value);
117+
}}
110118
/>
111-
}
112-
actions={<HelpMenu />}
113-
/>
114-
<PageLayout>
115-
<FormLayout
116-
title={"Create Group"}
117-
icon={<CreateGroupIcon />}
118-
helpBox={<AddGroupHelpBox />}
119-
>
120-
<form noValidate autoComplete="off" onSubmit={setSaving}>
121-
<Grid container>
122-
<Grid item xs={12} className={classes.formFieldRow}>
123-
<InputBoxWrapper
124-
id="group-name"
125-
name="group-name"
126-
label="Group Name"
127-
autoFocus={true}
128-
value={groupName}
129-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
130-
setGroupName(e.target.value);
131-
}}
132-
/>
133-
</Grid>
134-
<Grid item xs={12} className={classes.userSelector}>
135-
<UsersSelectors
136-
selectedUsers={selectedUsers}
137-
setSelectedUsers={setSelectedUsers}
138-
editMode={true}
139-
/>
140-
</Grid>
141-
</Grid>
142-
<Grid item xs={12} className={classes.modalButtonBar}>
143-
<Button
144-
id={"clear-group"}
145-
type="button"
146-
variant="regular"
147-
style={classes.spacerRight}
148-
onClick={resetForm}
149-
label={"Clear"}
150-
/>
119+
<UsersSelectors
120+
selectedUsers={selectedUsers}
121+
setSelectedUsers={setSelectedUsers}
122+
editMode={true}
123+
/>
124+
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
125+
<Button
126+
id={"clear-group"}
127+
type="button"
128+
variant="regular"
129+
onClick={resetForm}
130+
label={"Clear"}
131+
/>
151132

152-
<Button
153-
id={"save-group"}
154-
type="submit"
155-
variant="callAction"
156-
disabled={saving || !validGroup}
157-
label={"Save"}
158-
/>
133+
<Button
134+
id={"save-group"}
135+
type="submit"
136+
variant="callAction"
137+
disabled={saving || !validGroup}
138+
label={"Save"}
139+
/>
140+
</Grid>
141+
{saving && (
142+
<Grid item xs={12}>
143+
<LinearProgress />
159144
</Grid>
160-
{saving && (
161-
<Grid item xs={12}>
162-
<LinearProgress />
163-
</Grid>
164-
)}
165-
</form>
166-
</FormLayout>
167-
</PageLayout>
168-
</Grid>
145+
)}
146+
</form>
147+
</FormLayout>
148+
</PageLayout>
169149
</Fragment>
170150
);
171151
};
172152

173-
export default withStyles(styles)(AddGroupScreen);
153+
export default AddGroupScreen;

‎portal-ui/src/screens/Console/Groups/DeleteGroup.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,14 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React from "react";
18-
19-
import { DialogContentText } from "@mui/material";
20-
17+
import React, { Fragment } from "react";
2118
import { ErrorResponseHandler } from "../../../common/types";
22-
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
23-
import useApi from "../Common/Hooks/useApi";
2419
import { ConfirmDeleteIcon } from "mds";
2520
import { encodeURLString } from "../../../common/utils";
2621
import { setErrorSnackMessage } from "../../../systemSlice";
2722
import { useAppDispatch } from "../../../store";
23+
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
24+
import useApi from "../Common/Hooks/useApi";
2825

2926
interface IDeleteGroup {
3027
selectedGroups: string[];
@@ -72,11 +69,12 @@ const DeleteGroup = ({
7269
onConfirm={onDeleteGroups}
7370
onClose={onClose}
7471
confirmationContent={
75-
<DialogContentText>
76-
Are you sure you want to delete the following {selectedGroups.length}{" "}
77-
group{selectedGroups.length > 1 ? "s?" : "?"}
72+
<Fragment>
73+
Are you sure you want to delete the following{" "}
74+
{selectedGroups.length === 1 ? "" : selectedGroups.length} group
75+
{selectedGroups.length > 1 ? "s?" : "?"}
7876
{renderGroups}
79-
</DialogContentText>
77+
</Fragment>
8078
}
8179
/>
8280
);

‎portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)