Skip to content

Commit d1ae271

Browse files
bexsoftbexsoft
authored
Replaced CodeMirrorWrapper internal components (#2910)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent e7fb3e0 commit d1ae271

File tree

12 files changed

+57
-176
lines changed

12 files changed

+57
-176
lines changed

‎portal-ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"local-storage-fallback": "^4.1.1",
2020
"lodash": "^4.17.21",
2121
"luxon": "^3.3.0",
22-
"mds": "https://github.com/minio/mds.git#v0.6.7",
22+
"mds": "https://github.com/minio/mds.git#v0.6.8",
2323
"react": "^18.1.0",
2424
"react-component-export-image": "^1.0.6",
2525
"react-copy-to-clipboard": "^5.0.2",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ const AddServiceAccount = () => {
201201
<Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
202202
<CodeMirrorWrapper
203203
value={policyJSON}
204-
onBeforeChange={(editor, data, value) => {
204+
onChange={(value) => {
205205
setPolicyJSON(value);
206206
}}
207207
editorHeight={"350px"}

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

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

1717
import React, { useEffect, useState } from "react";
18-
19-
import { Button, ChangeAccessPolicyIcon } from "mds";
20-
import { Theme } from "@mui/material/styles";
21-
import createStyles from "@mui/styles/createStyles";
22-
import withStyles from "@mui/styles/withStyles";
23-
import Grid from "@mui/material/Grid";
24-
import {
25-
formFieldStyles,
26-
modalStyleUtils,
27-
spacingUtils,
28-
} from "../Common/FormComponents/common/styleLibrary";
29-
30-
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
31-
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
18+
import { Button, ChangeAccessPolicyIcon, Grid } from "mds";
19+
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
3220
import { encodeURLString } from "../../../common/utils";
3321
import { setModalErrorSnackMessage } from "../../../systemSlice";
3422
import { useAppDispatch } from "../../../store";
3523
import { api } from "api";
3624
import { errorToHandler } from "api/errors";
37-
38-
const styles = (theme: Theme) =>
39-
createStyles({
40-
codeMirrorContainer: {
41-
marginBottom: 20,
42-
"& label": {
43-
marginBottom: ".5rem",
44-
},
45-
"& label + div": {
46-
display: "none",
47-
},
48-
},
49-
...formFieldStyles,
50-
...modalStyleUtils,
51-
...spacingUtils,
52-
});
53-
createStyles({
54-
...modalStyleUtils,
55-
...spacingUtils,
56-
});
25+
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
26+
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
5727

5828
interface IServiceAccountPolicyProps {
59-
classes: any;
6029
open: boolean;
6130
selectedAccessKey: string | null;
6231
closeModalAndRefresh: () => void;
6332
}
6433

6534
const ServiceAccountPolicy = ({
66-
classes,
6735
open,
6836
selectedAccessKey,
6937
closeModalAndRefresh,
@@ -117,17 +85,17 @@ const ServiceAccountPolicy = ({
11785
}}
11886
>
11987
<Grid container>
120-
<Grid item xs={12} className={classes.codeMirrorContainer}>
88+
<Grid item xs={12}>
12189
<CodeMirrorWrapper
12290
label={`Access Key Policy`}
12391
value={policyDefinition}
124-
onBeforeChange={(editor, data, value) => {
92+
onChange={(value) => {
12593
setPolicyDefinition(value);
12694
}}
12795
editorHeight={"350px"}
12896
/>
12997
</Grid>
130-
<Grid item xs={12} className={classes.modalButtonBar}>
98+
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
13199
<Button
132100
id={"cancel-sa-policy"}
133101
type="button"
@@ -153,4 +121,4 @@ const ServiceAccountPolicy = ({
153121
);
154122
};
155123

156-
export default withStyles(styles)(ServiceAccountPolicy);
124+
export default ServiceAccountPolicy;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,14 +156,14 @@ const SetAccessPolicy = ({
156156
</div>
157157
)}
158158
{accessPolicy === "CUSTOM" && (
159-
<Grid item xs={12} className={classes.codeMirrorContainer}>
159+
<Grid item xs={12}>
160160
<CodeMirrorWrapper
161161
label={`Write Policy`}
162162
value={policyDefinition}
163-
onBeforeChange={(editor, data, value) => {
163+
onChange={(value) => {
164164
setPolicyDefinition(value);
165165
}}
166-
editorHeight={"350px"}
166+
editorHeight={"300px"}
167167
/>
168168
</Grid>
169169
)}

‎portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx

Lines changed: 19 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -14,115 +14,38 @@
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-
import Grid from "@mui/material/Grid";
19-
import { Box, InputLabel, Tooltip } from "@mui/material";
20-
import { Theme } from "@mui/material/styles";
21-
import createStyles from "@mui/styles/createStyles";
22-
import withStyles from "@mui/styles/withStyles";
23-
import { Button, CopyIcon, HelpIcon } from "mds";
24-
import { fieldBasic } from "../common/styleLibrary";
17+
import React, { Fragment } from "react";
18+
import { Button, CodeEditor, CopyIcon } from "mds";
2519
import CopyToClipboard from "react-copy-to-clipboard";
26-
import CodeEditor from "@uiw/react-textarea-code-editor";
2720
import TooltipWrapper from "../../TooltipWrapper/TooltipWrapper";
2821

2922
interface ICodeWrapper {
3023
value: string;
3124
label?: string;
3225
mode?: string;
3326
tooltip?: string;
34-
classes: any;
35-
onChange?: (editor: any, data: any, value: string) => any;
36-
onBeforeChange: (editor: any, data: any, value: string) => any;
37-
readOnly?: boolean;
38-
editorHeight?: string;
27+
onChange: (value: string) => any;
28+
editorHeight?: string | number;
3929
}
4030

41-
const styles = (theme: Theme) =>
42-
createStyles({
43-
...fieldBasic,
44-
});
45-
4631
const CodeMirrorWrapper = ({
4732
value,
4833
label = "",
4934
tooltip = "",
5035
mode = "json",
51-
classes,
52-
onBeforeChange,
53-
readOnly = false,
54-
editorHeight = "250px",
36+
onChange,
37+
editorHeight = 250,
5538
}: ICodeWrapper) => {
5639
return (
57-
<React.Fragment>
58-
<Grid item xs={12} sx={{ marginBottom: "10px" }}>
59-
<InputLabel className={classes.inputLabel}>
60-
<span>{label}</span>
61-
{tooltip !== "" && (
62-
<div className={classes.tooltipContainer}>
63-
<Tooltip title={tooltip} placement="top-start">
64-
<div className={classes.tooltip}>
65-
<HelpIcon />
66-
</div>
67-
</Tooltip>
68-
</div>
69-
)}
70-
</InputLabel>
71-
</Grid>
72-
73-
<Grid
74-
item
75-
xs={12}
76-
style={{
77-
maxHeight: editorHeight,
78-
overflow: "auto",
79-
border: "1px solid #eaeaea",
80-
}}
81-
>
82-
<CodeEditor
83-
value={value}
84-
language={mode}
85-
onChange={(evn) => {
86-
onBeforeChange(null, null, evn.target.value);
87-
}}
88-
id={"code_wrapper"}
89-
padding={15}
90-
style={{
91-
fontSize: 12,
92-
backgroundColor: "#fefefe",
93-
fontFamily:
94-
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
95-
minHeight: editorHeight || "initial",
96-
color: "#000000",
97-
}}
98-
/>
99-
</Grid>
100-
<Grid
101-
item
102-
xs={12}
103-
sx={{
104-
background: "#f7f7f7",
105-
border: "1px solid #eaeaea",
106-
borderTop: 0,
107-
}}
108-
>
109-
<Box
110-
sx={{
111-
display: "flex",
112-
alignItems: "center",
113-
padding: "2px",
114-
paddingRight: "5px",
115-
justifyContent: "flex-end",
116-
"& button": {
117-
height: "26px",
118-
width: "26px",
119-
padding: "2px",
120-
" .min-icon": {
121-
marginLeft: "0",
122-
},
123-
},
124-
}}
125-
>
40+
<CodeEditor
41+
value={value}
42+
onChange={(value) => onChange(value)}
43+
mode={mode}
44+
tooltip={tooltip}
45+
editorHeight={editorHeight}
46+
label={label}
47+
helpTools={
48+
<Fragment>
12649
<TooltipWrapper tooltip={"Copy to Clipboard"}>
12750
<CopyToClipboard text={value}>
12851
<Button
@@ -134,10 +57,10 @@ const CodeMirrorWrapper = ({
13457
/>
13558
</CopyToClipboard>
13659
</TooltipWrapper>
137-
</Box>
138-
</Grid>
139-
</React.Fragment>
60+
</Fragment>
61+
}
62+
/>
14063
);
14164
};
14265

143-
export default withStyles(styles)(CodeMirrorWrapper);
66+
export default CodeMirrorWrapper;

‎portal-ui/src/screens/Console/KMS/ImportKey.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const ImportKey = () => {
126126
<CodeMirrorWrapper
127127
label={"Set key Content"}
128128
value={keyContent}
129-
onBeforeChange={(editor, data, value) => {
129+
onChange={(value) => {
130130
setKeyContent(value);
131131
}}
132132
editorHeight={"350px"}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const AddPolicyScreen = () => {
137137
<CodeMirrorWrapper
138138
label={"Write Policy"}
139139
value={policyDefinition}
140-
onBeforeChange={(editor, data, value) => {
140+
onChange={(value) => {
141141
setPolicyDefinition(value);
142142
}}
143143
editorHeight={"350px"}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -585,10 +585,11 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
585585
<Grid container>
586586
<Grid item xs={12}>
587587
<CodeMirrorWrapper
588-
readOnly={!canEditPolicy}
589588
value={policyDefinition}
590-
onBeforeChange={(editor, data, value) => {
591-
setPolicyDefinition(value);
589+
onChange={(value) => {
590+
if (canEditPolicy) {
591+
setPolicyDefinition(value);
592+
}
592593
}}
593594
editorHeight={"350px"}
594595
/>

‎portal-ui/src/screens/Console/Speedtest/STResults.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -337,11 +337,7 @@ const STResults = ({ results, start }: ISTResults) => {
337337
<Grid container className={classes.resultsContainer}>
338338
{jsonView ? (
339339
<Fragment>
340-
<CodeMirrorWrapper
341-
value={finalResJSON}
342-
readOnly
343-
onBeforeChange={() => {}}
344-
/>
340+
<CodeMirrorWrapper value={finalResJSON} onChange={() => {}} />
345341
</Fragment>
346342
) : (
347343
<Fragment>

‎portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
297297
<CodeMirrorWrapper
298298
label={"Policy"}
299299
value={policyJSON}
300-
onBeforeChange={(editor, data, value) => {
300+
onChange={(value) => {
301301
setPolicyJSON(value);
302302
}}
303303
/>

0 commit comments

Comments
 (0)