mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced CodeMirrorWrapper internal components (#2910)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-06-28 13:05:18 -06:00
committed by GitHub
parent e7fb3e0e45
commit d1ae271111
12 changed files with 57 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/package.json
View File

@@ -19,7 +19,7 @@
"local-storage-fallback": "^4.1.1",
"lodash": "^4.17.21",
"luxon": "^3.3.0",
"mds": "https://github.com/minio/mds.git#v0.6.7",
"mds": "https://github.com/minio/mds.git#v0.6.8",
"react": "^18.1.0",
"react-component-export-image": "^1.0.6",
"react-copy-to-clipboard": "^5.0.2",

2
portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
View File

@@ -201,7 +201,7 @@ const AddServiceAccount = () => {
<Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
<CodeMirrorWrapper
value={policyJSON}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setPolicyJSON(value);
}}
editorHeight={"350px"}

48
portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
View File

@@ -15,55 +15,23 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useEffect, useState } from "react";
import { Button, ChangeAccessPolicyIcon } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
import {
formFieldStyles,
modalStyleUtils,
spacingUtils,
} from "../Common/FormComponents/common/styleLibrary";
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
import { Button, ChangeAccessPolicyIcon, Grid } from "mds";
import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { encodeURLString } from "../../../common/utils";
import { setModalErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { api } from "api";
import { errorToHandler } from "api/errors";
const styles = (theme: Theme) =>
createStyles({
codeMirrorContainer: {
marginBottom: 20,
"& label": {
marginBottom: ".5rem",
},
"& label + div": {
display: "none",
},
},
...formFieldStyles,
...modalStyleUtils,
...spacingUtils,
});
createStyles({
...modalStyleUtils,
...spacingUtils,
});
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
interface IServiceAccountPolicyProps {
classes: any;
open: boolean;
selectedAccessKey: string | null;
closeModalAndRefresh: () => void;
}
const ServiceAccountPolicy = ({
classes,
open,
selectedAccessKey,
closeModalAndRefresh,
@@ -117,17 +85,17 @@ const ServiceAccountPolicy = ({
}}
>
<Grid container>
<Grid item xs={12} className={classes.codeMirrorContainer}>
<Grid item xs={12}>
<CodeMirrorWrapper
label={`Access Key Policy`}
value={policyDefinition}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setPolicyDefinition(value);
}}
editorHeight={"350px"}
/>
</Grid>
<Grid item xs={12} className={classes.modalButtonBar}>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"cancel-sa-policy"}
type="button"
@@ -153,4 +121,4 @@ const ServiceAccountPolicy = ({
);
};
export default withStyles(styles)(ServiceAccountPolicy);
export default ServiceAccountPolicy;

6
portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
View File

@@ -156,14 +156,14 @@ const SetAccessPolicy = ({
</div>
)}
{accessPolicy === "CUSTOM" && (
<Grid item xs={12} className={classes.codeMirrorContainer}>
<Grid item xs={12}>
<CodeMirrorWrapper
label={`Write Policy`}
value={policyDefinition}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setPolicyDefinition(value);
}}
editorHeight={"350px"}
editorHeight={"300px"}
/>
</Grid>
)}

115
portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
View File

@@ -14,16 +14,9 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import Grid from "@mui/material/Grid";
import { Box, InputLabel, Tooltip } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, CopyIcon, HelpIcon } from "mds";
import { fieldBasic } from "../common/styleLibrary";
import React, { Fragment } from "react";
import { Button, CodeEditor, CopyIcon } from "mds";
import CopyToClipboard from "react-copy-to-clipboard";
import CodeEditor from "@uiw/react-textarea-code-editor";
import TooltipWrapper from "../../TooltipWrapper/TooltipWrapper";
interface ICodeWrapper {
@@ -31,98 +24,28 @@ interface ICodeWrapper {
label?: string;
mode?: string;
tooltip?: string;
classes: any;
onChange?: (editor: any, data: any, value: string) => any;
onBeforeChange: (editor: any, data: any, value: string) => any;
readOnly?: boolean;
editorHeight?: string;
onChange: (value: string) => any;
editorHeight?: string | number;
}
const styles = (theme: Theme) =>
createStyles({
...fieldBasic,
});
const CodeMirrorWrapper = ({
value,
label = "",
tooltip = "",
mode = "json",
classes,
onBeforeChange,
readOnly = false,
editorHeight = "250px",
onChange,
editorHeight = 250,
}: ICodeWrapper) => {
return (
<React.Fragment>
<Grid item xs={12} sx={{ marginBottom: "10px" }}>
<InputLabel className={classes.inputLabel}>
<span>{label}</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<div className={classes.tooltip}>
<HelpIcon />
</div>
</Tooltip>
</div>
)}
</InputLabel>
</Grid>
<Grid
item
xs={12}
style={{
maxHeight: editorHeight,
overflow: "auto",
border: "1px solid #eaeaea",
}}
>
<CodeEditor
value={value}
language={mode}
onChange={(evn) => {
onBeforeChange(null, null, evn.target.value);
}}
id={"code_wrapper"}
padding={15}
style={{
fontSize: 12,
backgroundColor: "#fefefe",
fontFamily:
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
minHeight: editorHeight || "initial",
color: "#000000",
}}
/>
</Grid>
<Grid
item
xs={12}
sx={{
background: "#f7f7f7",
border: "1px solid #eaeaea",
borderTop: 0,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
padding: "2px",
paddingRight: "5px",
justifyContent: "flex-end",
"& button": {
height: "26px",
width: "26px",
padding: "2px",
" .min-icon": {
marginLeft: "0",
},
},
}}
>
<CodeEditor
value={value}
onChange={(value) => onChange(value)}
mode={mode}
tooltip={tooltip}
editorHeight={editorHeight}
label={label}
helpTools={
<Fragment>
<TooltipWrapper tooltip={"Copy to Clipboard"}>
<CopyToClipboard text={value}>
<Button
@@ -134,10 +57,10 @@ const CodeMirrorWrapper = ({
/>
</CopyToClipboard>
</TooltipWrapper>
</Box>
</Grid>
</React.Fragment>
</Fragment>
}
/>
);
};
export default withStyles(styles)(CodeMirrorWrapper);
export default CodeMirrorWrapper;

2
portal-ui/src/screens/Console/KMS/ImportKey.tsx
View File

@@ -126,7 +126,7 @@ const ImportKey = () => {
<CodeMirrorWrapper
label={"Set key Content"}
value={keyContent}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setKeyContent(value);
}}
editorHeight={"350px"}

2
portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
View File

@@ -137,7 +137,7 @@ const AddPolicyScreen = () => {
<CodeMirrorWrapper
label={"Write Policy"}
value={policyDefinition}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setPolicyDefinition(value);
}}
editorHeight={"350px"}

7
portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
View File

@@ -585,10 +585,11 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
<Grid container>
<Grid item xs={12}>
<CodeMirrorWrapper
readOnly={!canEditPolicy}
value={policyDefinition}
onBeforeChange={(editor, data, value) => {
setPolicyDefinition(value);
onChange={(value) => {
if (canEditPolicy) {
setPolicyDefinition(value);
}
}}
editorHeight={"350px"}
/>

6
portal-ui/src/screens/Console/Speedtest/STResults.tsx
View File

@@ -337,11 +337,7 @@ const STResults = ({ results, start }: ISTResults) => {
<Grid container className={classes.resultsContainer}>
{jsonView ? (
<Fragment>
<CodeMirrorWrapper
value={finalResJSON}
readOnly
onBeforeChange={() => {}}
/>
<CodeMirrorWrapper value={finalResJSON} onChange={() => {}} />
</Fragment>
) : (
<Fragment>

2
portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
View File

@@ -297,7 +297,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
<CodeMirrorWrapper
label={"Policy"}
value={policyJSON}
onBeforeChange={(editor, data, value) => {
onChange={(value) => {
setPolicyJSON(value);
}}
/>

34
portal-ui/yarn.lock
View File

@@ -2580,9 +2580,9 @@
integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
"@types/node@*":
version "20.3.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
version "20.3.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.2.tgz#fa6a90f2600e052a03c18b8cb3fd83dd4e599898"
integrity sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==
"@types/node@18.16.0":
version "18.16.0"
@@ -4873,7 +4873,7 @@ destroy@1.2.0:
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
detect-gpu@^5.0.29:
detect-gpu@^5.0.30:
version "5.0.30"
resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-5.0.30.tgz#87278708be4be1f79d2766eb4d6dc04c4d530fde"
integrity sha512-TfoGbAsy3uRz82OklH456eYS5eO+9BoqzKRZNpwFcW73ZHN8EvNmlSSrEU2XhLqIuBE+U9GtErl74kG4qTSEYg==
@@ -5090,9 +5090,9 @@ ejs@^3.1.6:
jake "^10.8.5"
electron-to-chromium@^1.4.431:
version "1.4.440"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz#d3b1eeb36b717eb479a240c0406ac1fa67901762"
integrity sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==
version "1.4.442"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.442.tgz#455f4c5bd6ae73afb634dcffee6f356c26c8e294"
integrity sha512-RkrZF//Ya+0aJq2NM3OdisNh5ZodZq1rdXOS96G8DdDgpDKqKE81yTbbQ3F/4CKm1JBPsGu1Lp/akkna2xO06Q==
elegant-spinner@^1.0.1:
version "1.0.1"
@@ -8238,13 +8238,13 @@ mdn-data@2.0.4:
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
"mds@https://github.com/minio/mds.git#v0.6.7":
version "0.6.7"
resolved "https://github.com/minio/mds.git#e1e8f8888fd78c21be6efef3aa9ed3e1e454fe1d"
"mds@https://github.com/minio/mds.git#v0.6.8":
version "0.6.8"
resolved "https://github.com/minio/mds.git#ca84c1d329e4bccd9010d454c86ba6f8158ba7c8"
dependencies:
"@types/styled-components" "^5.1.25"
"@uiw/react-textarea-code-editor" "^2.1.7"
detect-gpu "^5.0.29"
detect-gpu "^5.0.30"
react-virtualized "^9.22.5"
styled-components "^5.3.11"
@@ -11503,9 +11503,9 @@ terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.7:
terser "^5.16.8"
terser@^5.0.0, terser@^5.10.0, terser@^5.16.8:
version "5.18.1"
resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.1.tgz#6d8642508ae9fb7b48768e48f16d675c89a78460"
integrity sha512-j1n0Ao919h/Ai5r43VAnfV/7azUYW43GPxK7qSATzrsERfW7+y2QW9Cp9ufnRF5CQUWbnLSo7UJokSWCqg4tsQ==
version "5.18.2"
resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.2.tgz#ff3072a0faf21ffd38f99acc9a0ddf7b5f07b948"
integrity sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==
dependencies:
"@jridgewell/source-map" "^0.3.3"
acorn "^8.8.2"
@@ -11966,9 +11966,9 @@ tslib@^1.8.1:
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.3, tslib@^2.4.0:
version "2.5.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
version "2.6.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
tsutils@^3.21.0:
version "3.21.0"

7
yarn.lock
View File

@@ -1,7 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"mds@https://github.com/bexsoft/mds#rollup-updates":
version "0.0.1"
resolved "https://github.com/bexsoft/mds#a6e1c84ba257c5c18a985943b8c39648f548ab3b"