You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2021/05/03 21:28:57 UTC
[GitHub] [apisix-dashboard] juzhiyuan commented on a change in pull request #1816: feat: Use monaco editor
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<Props> = ({
});
});
};
- 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<string, any>) => void;
};
-enum codeMirrorModeList {
+enum monacoLanguageList {
JSON = 'JSON',
YAML = 'YAML',
}
const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = {}, onClose = () => { }, onSubmit = () => { } }) => {
- const ref = useRef<any>(null);
const { formatMessage } = useIntl();
- const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
- codeMirrorModeList.JSON,
+ const [monacoLanguage, setMonacoLanguage] = useState<PluginComponent.MonacoLanguage>(
+ 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<string, any>) => void;
};
-enum codeMirrorModeList {
+enum monacoLanguageList {
JSON = 'JSON',
YAML = 'YAML',
}
const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = {}, onClose = () => { }, onSubmit = () => { } }) => {
- const ref = useRef<any>(null);
const { formatMessage } = useIntl();
- const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
- codeMirrorModeList.JSON,
+ const [monacoLanguage, setMonacoLanguage] = useState<PluginComponent.MonacoLanguage>(
+ 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'});
Review comment:
We need to add `i18n` for those untranslated tips 😊
##########
File path: web/cypress/integration/consumer/create-consumer-with-api-breaker-plugin-form.spec.js
##########
@@ -50,17 +50,13 @@ context('Create and delete consumer with api-breaker plugin form', () => {
});
cy.focused(this.domSelector.drawer).should('exist');
cy.get(this.domSelector.disabledSwitcher).click();
- // edit codemirror
- cy.get(this.domSelector.codeMirror)
- .first()
- .then((editor) => {
- editor[0].CodeMirror.setValue(
- JSON.stringify({
- key: 'test',
- }),
- );
- cy.contains('button', 'Submit').click();
- });
+ // edit
+ cy.window().then(({ monaco }) => {
+ if (monaco) {
+ monaco.setValue(JSON.stringify({ key: 'test' }));
Review comment:
What about if `monaco` doesn't exist?
##########
File path: web/src/components/RawDataEditor/RawDataEditor.tsx
##########
@@ -33,77 +33,66 @@ type Props = {
onSubmit?: (data: Record<string, any>) => void;
};
-enum codeMirrorModeList {
+enum monacoLanguageList {
JSON = 'JSON',
YAML = 'YAML',
}
const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = {}, onClose = () => { }, onSubmit = () => { } }) => {
- const ref = useRef<any>(null);
const { formatMessage } = useIntl();
- const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
- codeMirrorModeList.JSON,
+ const [monacoLanguage, setMonacoLanguage] = useState<PluginComponent.MonacoLanguage>(
+ monacoLanguageList.JSON,
);
+ const [content, setContent] = useState('')
useEffect(() => {
- setCodeMirrorMode(codeMirrorModeList.JSON);
+ switch (monacoLanguage) {
+ case monacoLanguageList.JSON:
+ setContent(JSON.stringify(data, null, 4));
Review comment:
```suggestion
setContent(JSON.stringify(data, null, 2));
```
##########
File path: web/src/components/Plugin/PluginDetail.tsx
##########
@@ -190,49 +188,53 @@ const PluginDetail: React.FC<Props> = ({
});
});
};
- 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/`,
+ fileMatch: ['*'],
+ schema
+ }
+ ]
+ };
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions(schemaConfig);
+ })
+ }
+
+ const handleModeChange = (value: PluginComponent.MonacoLanguage) => {
switch (value) {
- case codeMirrorModeList.JSON: {
- if (codeMirrorMode === codeMirrorModeList.YAML) {
- const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
+ case monacoModeList.JSON: {
+ if (monacoMode === monacoModeList.YAML) {
+ const { data: yamlData, error } = yaml2json(content, true);
if (error) {
notification.error({
message: 'Invalid Yaml data',
});
return;
}
- ref.current.editor.setValue(
- js_beautify(yamlData, {
- indent_size: 2,
- }),
- );
+ setContent(js_beautify(yamlData, { indent_size: 4 }))
} else {
- ref.current.editor.setValue(
- js_beautify(JSON.stringify(getUIFormData()), {
- indent_size: 2,
- }),
- );
+ setContent(js_beautify(JSON.stringify(getUIFormData()), { indent_size: 4 }))
Review comment:
We use 2 spaces for JSON
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org