Skip to content

Commit 542b719

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

21 files changed

+697
-1134
lines changed

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,20 @@ import {
3030
ServiceAccountIcon,
3131
} from "mds";
3232
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
33-
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
34-
import AddServiceAccountHelpBox from "./AddServiceAccountHelpBox";
35-
3633
import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
3734
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
38-
import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
39-
40-
import PanelTitle from "../Common/PanelTitle/PanelTitle";
41-
4235
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
4336
import { useAppDispatch } from "../../../store";
44-
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
4537
import { getRandomString } from "../../../common/utils";
4638
import { api } from "api";
4739
import { errorToHandler } from "api/errors";
48-
import HelpMenu from "../HelpMenu";
4940
import { ContentType } from "api/consoleApi";
41+
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
42+
import AddServiceAccountHelpBox from "./AddServiceAccountHelpBox";
43+
import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
44+
import PanelTitle from "../Common/PanelTitle/PanelTitle";
45+
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
46+
import HelpMenu from "../HelpMenu";
5047

5148
const AddServiceAccount = () => {
5249
const dispatch = useAppDispatch();
@@ -123,7 +120,7 @@ const AddServiceAccount = () => {
123120
{newServiceAccount !== null && (
124121
<CredentialsPrompt
125122
newServiceAccount={newServiceAccount}
126-
open={newServiceAccount !== null}
123+
open={true}
127124
closeModal={() => {
128125
closeCredentialsModal();
129126
}}

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

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

1717
import React, { useState } from "react";
18-
import { Button, ChangePasswordIcon } from "mds";
19-
import { Theme } from "@mui/material/styles";
20-
import createStyles from "@mui/styles/createStyles";
21-
import withStyles from "@mui/styles/withStyles";
22-
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
23-
import Grid from "@mui/material/Grid";
24-
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
18+
import { Box, Button, ChangePasswordIcon, FormLayout, InputBox } from "mds";
2519
import { LinearProgress } from "@mui/material";
26-
import {
27-
containerForHeader,
28-
formFieldStyles,
29-
modalStyleUtils,
30-
spacingUtils,
31-
} from "../Common/FormComponents/common/styleLibrary";
32-
20+
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
3321
import { setModalErrorSnackMessage } from "../../../systemSlice";
3422
import { useAppDispatch } from "../../../store";
3523
import { api } from "api";
3624
import { ChangeUserPasswordRequest } from "api/consoleApi";
3725
import { errorToHandler } from "api/errors";
38-
39-
const styles = (theme: Theme) =>
40-
createStyles({
41-
buttonContainer: {
42-
textAlign: "right",
43-
},
44-
...modalStyleUtils,
45-
...formFieldStyles,
46-
...spacingUtils,
47-
...containerForHeader,
48-
});
26+
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
4927

5028
interface IChangeUserPasswordProps {
51-
classes: any;
5229
open: boolean;
5330
userName: string;
5431
closeModal: () => void;
5532
}
5633

5734
const ChangeUserPassword = ({
58-
classes,
5935
open,
6036
userName,
6137
closeModal,
@@ -123,37 +99,31 @@ const ChangeUserPassword = ({
12399
changeUserPassword(e);
124100
}}
125101
>
126-
<Grid container>
127-
<Grid item xs={12} className={classes.modalFormScrollable}>
128-
<div className={classes.spacerBottom}>
129-
Change password for: {userName}
130-
</div>
131-
<Grid item xs={12} className={classes.formFieldRow}>
132-
<InputBoxWrapper
133-
id="new-password"
134-
name="new-password"
135-
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
136-
setNewPassword(event.target.value);
137-
}}
138-
label="New Password"
139-
type="password"
140-
value={newPassword}
141-
/>
142-
</Grid>
143-
<Grid item xs={12} className={classes.formFieldRow}>
144-
<InputBoxWrapper
145-
id="re-new-password"
146-
name="re-new-password"
147-
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
148-
setReNewPassword(event.target.value);
149-
}}
150-
label="Type New Password Again"
151-
type="password"
152-
value={reNewPassword}
153-
/>
154-
</Grid>
155-
</Grid>
156-
<Grid item xs={12} className={classes.buttonContainer}>
102+
<FormLayout withBorders={false} containerPadding={false}>
103+
<Box sx={{ margin: "10px 0 20px" }}>
104+
Change password for: <strong>{userName}</strong>
105+
</Box>
106+
<InputBox
107+
id="new-password"
108+
name="new-password"
109+
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
110+
setNewPassword(event.target.value);
111+
}}
112+
label="New Password"
113+
type="password"
114+
value={newPassword}
115+
/>
116+
<InputBox
117+
id="re-new-password"
118+
name="re-new-password"
119+
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
120+
setReNewPassword(event.target.value);
121+
}}
122+
label="Type New Password Again"
123+
type="password"
124+
value={reNewPassword}
125+
/>
126+
<Box sx={modalStyleUtils.modalButtonBar}>
157127
<Button
158128
id={"save-user-password"}
159129
type="submit"
@@ -165,16 +135,16 @@ const ChangeUserPassword = ({
165135
}
166136
label={"Save"}
167137
/>
168-
</Grid>
138+
</Box>
169139
{loading && (
170-
<Grid item xs={12}>
140+
<Box>
171141
<LinearProgress />
172-
</Grid>
142+
</Box>
173143
)}
174-
</Grid>
144+
</FormLayout>
175145
</form>
176146
</ModalWrapper>
177147
) : null;
178148
};
179149

180-
export default withStyles(styles)(ChangeUserPassword);
150+
export default ChangeUserPassword;

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

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -714,33 +714,6 @@ export const commonDashboardInfocard: any = {
714714
},
715715
};
716716

717-
export const serviceAccountStyles: any = {
718-
buttonContainer: {
719-
display: "flex",
720-
justifyContent: "flex-end",
721-
},
722-
codeMirrorContainer: {
723-
marginBottom: 20,
724-
paddingLeft: 15,
725-
"& label": {
726-
marginBottom: ".5rem",
727-
},
728-
"& label + div": {
729-
display: "none",
730-
},
731-
},
732-
stackedInputs: {
733-
display: "flex",
734-
gap: 15,
735-
paddingBottom: "1rem",
736-
paddingLeft: "1rem",
737-
flexFlow: "column",
738-
},
739-
buttonSpacer: {
740-
marginRight: "1rem",
741-
},
742-
};
743-
744717
export const tableStyles: any = {
745718
tableBlock: {
746719
display: "flex",

‎portal-ui/src/screens/Console/Common/SearchBox.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type SearchBoxProps = {
2424
onChange: (value: string) => void;
2525
overrideClass?: any;
2626
id?: string;
27+
label?: string;
2728
sx?: CSSObject;
2829
};
2930

@@ -33,14 +34,15 @@ const SearchBox = ({
3334
overrideClass,
3435
value,
3536
id = "search-resource",
37+
label = "",
3638
sx,
3739
}: SearchBoxProps) => {
3840
return (
3941
<InputBox
4042
placeholder={placeholder}
4143
className={overrideClass ? overrideClass : ""}
4244
id={id}
43-
label=""
45+
label={label}
4446
onChange={(e) => {
4547
onChange(e.target.value);
4648
}}

‎portal-ui/src/screens/Console/Policies/PolicySelectors.tsx

Lines changed: 41 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -14,73 +14,29 @@
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, { useCallback, useEffect, useState } from "react";
18-
19-
import { Theme } from "@mui/material/styles";
20-
import createStyles from "@mui/styles/createStyles";
21-
import withStyles from "@mui/styles/withStyles";
17+
import React, { Fragment, useCallback, useEffect, useState } from "react";
2218
import { LinearProgress } from "@mui/material";
23-
import Grid from "@mui/material/Grid";
19+
import { DataTable, Grid, Box } from "mds";
2420
import { policySort } from "../../../utils/sortFunctions";
25-
import {
26-
actionsTray,
27-
searchField,
28-
selectorsCommon,
29-
tableStyles,
30-
} from "../Common/FormComponents/common/styleLibrary";
31-
3221
import { ErrorResponseHandler } from "../../../common/types";
33-
import TableWrapper from "../Common/TableWrapper/TableWrapper";
3422
import SearchBox from "../Common/SearchBox";
3523
import { setModalErrorSnackMessage } from "../../../systemSlice";
3624
import { AppState, useAppDispatch } from "../../../store";
3725
import { setSelectedPolicies } from "../Users/AddUsersSlice";
3826
import { useSelector } from "react-redux";
3927
import { api } from "../../../api";
4028
import {
29+
Error,
4130
HttpResponse,
4231
ListPoliciesResponse,
43-
Error,
4432
} from "../../../api/consoleApi";
4533

4634
interface ISelectPolicyProps {
47-
classes: any;
4835
selectedPolicy?: string[];
4936
noTitle?: boolean;
5037
}
5138

52-
const styles = (theme: Theme) =>
53-
createStyles({
54-
noFound: {
55-
textAlign: "center",
56-
padding: "10px 0",
57-
},
58-
searchBox: {
59-
flex: 1,
60-
},
61-
fieldLabel: {
62-
fontWeight: 400,
63-
width: 160,
64-
marginRight: 10,
65-
},
66-
tableBlock: {
67-
...tableStyles.tableBlock,
68-
},
69-
filterBox: {
70-
display: "flex",
71-
marginBottom: 15,
72-
alignItems: "center",
73-
"& span": {
74-
fontSize: 14,
75-
},
76-
},
77-
...searchField,
78-
...tableStyles,
79-
...actionsTray,
80-
...selectorsCommon,
81-
});
82-
83-
const PolicySelectors = ({ classes, noTitle = false }: ISelectPolicyProps) => {
39+
const PolicySelectors = ({ noTitle = false }: ISelectPolicyProps) => {
8440
const dispatch = useAppDispatch();
8541
// Local State
8642
const [records, setRecords] = useState<any[]>([]);
@@ -143,49 +99,44 @@ const PolicySelectors = ({ classes, noTitle = false }: ISelectPolicyProps) => {
14399
);
144100

145101
return (
146-
<Grid container>
147-
<Grid item xs={12}>
148-
{loading && <LinearProgress />}
149-
{records.length > 0 ? (
150-
<React.Fragment>
151-
<Grid item xs={12} className={classes.filterBox}>
152-
{!noTitle && (
153-
<span className={classes.fieldLabel}>Assign Policies</span>
154-
)}
155-
<div className={classes.searchBox}>
156-
<SearchBox
157-
placeholder="Start typing to search for a Policy"
158-
onChange={(value) => {
159-
setFilter(value);
160-
}}
161-
value={filter}
162-
/>
163-
</div>
164-
</Grid>
165-
<Grid
166-
item
167-
xs={12}
168-
className={classes.tableBlock}
169-
style={{ paddingBottom: 16 }}
170-
>
171-
<TableWrapper
172-
columns={[{ label: "Policy", elementKey: "name" }]}
173-
onSelect={selectionChanged}
174-
selectedItems={currentPolicies}
175-
isLoading={loading}
176-
records={filteredRecords}
177-
entityName="Policies"
178-
idField="name"
179-
customPaperHeight={classes.multiSelectTable}
180-
/>
181-
</Grid>
182-
</React.Fragment>
183-
) : (
184-
<div className={classes.noFound}>No Policies Available</div>
185-
)}
186-
</Grid>
102+
<Grid item xs={12} className={"inputItem"}>
103+
{loading && <LinearProgress />}
104+
{records.length > 0 ? (
105+
<Fragment>
106+
<Grid item xs={12} className={"inputItem"}>
107+
<SearchBox
108+
placeholder="Start typing to search for a Policy"
109+
onChange={(value) => {
110+
setFilter(value);
111+
}}
112+
value={filter}
113+
label={!noTitle ? "Assign Policies" : ""}
114+
/>
115+
</Grid>
116+
117+
<DataTable
118+
columns={[{ label: "Policy", elementKey: "name" }]}
119+
onSelect={selectionChanged}
120+
selectedItems={currentPolicies}
121+
isLoading={loading}
122+
records={filteredRecords}
123+
entityName="Policies"
124+
idField="name"
125+
customPaperHeight={"200px"}
126+
/>
127+
</Fragment>
128+
) : (
129+
<Box
130+
sx={{
131+
textAlign: "center",
132+
padding: "10px 0",
133+
}}
134+
>
135+
No Policies Available
136+
</Box>
137+
)}
187138
</Grid>
188139
);
189140
};
190141

191-
export default withStyles(styles)(PolicySelectors);
142+
export default PolicySelectors;

0 commit comments

Comments
 (0)