juzhiyuan commented on a change in pull request #1816:
URL: https://github.com/apache/apisix-dashboard/pull/1816#discussion_r625377805
##
File path: web/package.json
##
@@ -131,7 +132,8 @@
"prettier": "^2.0.1",
"pro-download": "1.0.1",
"puppeteer-core": "^4.0.1",
-"stylelint": "^13.0.0"
+"stylelint": "^13.0.0",
+"webpack": "^5.35.0"
Review comment:
Do we need to maintain webpack manually here?
##
File path: web/src/components/Plugin/PluginDetail.tsx
##
@@ -190,49 +188,53 @@ const PluginDetail: React.FC = ({
});
});
};
- const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
+
+ const editorWillMount = (monaco: typeof monacoEditor) => {
+fetchSchema(name, schemaType).then((schema)=> {
+ const schemaConfig = {
+validate: true,
+schemas: [
+ {
+uri: `https://apisix.apache.org/`,
Review comment:
May I know what's this opinion does?
##
File path: web/src/components/RawDataEditor/RawDataEditor.tsx
##
@@ -33,77 +33,66 @@ type Props = {
onSubmit?: (data: Record) => void;
};
-enum codeMirrorModeList {
+enum monacoLanguageList {
JSON = 'JSON',
YAML = 'YAML',
}
const RawDataEditor: React.FC = ({ visible, readonly = true, type, data
= {}, onClose = () => { }, onSubmit = () => { } }) => {
- const ref = useRef(null);
const { formatMessage } = useIntl();
- const [codeMirrorMode, setCodeMirrorMode] =
useState(
-codeMirrorModeList.JSON,
+ const [monacoLanguage, setMonacoLanguage] =
useState(
+monacoLanguageList.JSON,
);
+ const [content, setContent] = useState('')
useEffect(() => {
-setCodeMirrorMode(codeMirrorModeList.JSON);
+switch (monacoLanguage) {
+ case monacoLanguageList.JSON:
+setContent(JSON.stringify(data, null, 4));
+break;
+ case monacoLanguageList.YAML: {
+const {data: yamlData} = json2yaml(JSON.stringify(data, null, 4));
+setContent(yamlData)
+break;
+ }
+ default:
+}
+ }, [data])
+
+ useEffect(() => {
+setMonacoLanguage(monacoLanguageList.JSON);
}, [visible])
const modeOptions = [
-{ label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON },
-{ label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
+{ label: monacoLanguageList.JSON, value: monacoLanguageList.JSON },
+{ label: monacoLanguageList.YAML, value: monacoLanguageList.YAML },
];
- const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
+ const handleModeChange = (value: PluginComponent.MonacoLanguage) => {
switch (value) {
- case codeMirrorModeList.JSON: {
-const { data: yamlData, error } =
yaml2json(ref.current.editor.getValue(), true);
-
-if (error) {
- notification.error({
-message: 'Invalid Yaml data',
- });
- return;
-}
-ref.current.editor.setValue(
- js_beautify(yamlData, {
-indent_size: 2,
- }),
-);
+ case monacoLanguageList.JSON:
+setContent(c => {
+ const {data:jsonData,error} = yaml2json(c, true);
+ if (error){
+notification.error({message: 'Invalid Yaml data'});
+return c;
+ }
+ return js_beautify(jsonData, {indent_size: 4});
+})
break;
- }
- case codeMirrorModeList.YAML: {
-const { data: jsonData, error } =
json2yaml(ref.current.editor.getValue());
-
-if (error) {
- notification.error({
-message: 'Invalid JSON data',
- });
- return;
-}
-ref.current.editor.setValue(jsonData);
+ case monacoLanguageList.YAML:
+setContent(c => {
+ const {data:yamlData,error} = json2yaml(c);
+ if (error){
+notification.error({message: 'Invalid Json data'});
Review comment:
ditto
##
File path: web/src/components/RawDataEditor/RawDataEditor.tsx
##
@@ -33,77 +33,66 @@ type Props = {
onSubmit?: (data: Record) => void;
};
-enum codeMirrorModeList {
+enum monacoLanguageList {
JSON = 'JSON',
YAML = 'YAML',
}
const RawDataEditor: React.FC = ({ visible, readonly = true, type, data
= {}, onClose = () => { }, onSubmit = () => { } }) => {
- const ref = useRef(null);
const { formatMessage } = useIntl();
- const [codeMirrorMode, setCodeMirrorMode] =
useState(
-codeMirrorModeList.JSON,
+ const [monacoLanguage, setMonacoLanguage] =
useState(
+monacoLanguageList.JSON,
);
+ const [content, setContent] = useState('')
useEffect(() => {
-setCodeMirrorMode(codeMirrorModeList.JSON);
+switch (monacoLanguage) {
+ case monacoLanguageList.JSON:
+setContent(JSON.stringify(data, null, 4));
+break;
+ case monacoLanguageList.YAML: {
+const {data: yamlData} = json2yaml(JSON.stringify(data, null, 4));
+
