This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch feat-upstream in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
commit 68f4fb87d1b15985aa2f7df036ab27905ec454e5 Author: juzhiyuan <[email protected]> AuthorDate: Sun Apr 4 17:16:59 2021 +0800 chore: use UpperCase for JSON/YAML --- web/src/components/Plugin/PluginDetail.tsx | 25 +++++++++++----------- web/src/components/Plugin/typing.d.ts | 2 +- web/src/components/RawDataEditor/RawDataEditor.tsx | 23 ++++++++++---------- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 6ad7d9c..8c3eac7 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -87,24 +87,24 @@ const PluginDetail: React.FC<Props> = ({ readonly = false, maskClosable = true, initialData = {}, - onClose = () => {}, - onChange = () => {}, + onClose = () => { }, + onChange = () => { }, }) => { const { formatMessage } = useIntl(); enum codeMirrorModeList { - Json = 'Json', - Yaml = 'Yaml', + JSON = 'JSON', + YAML = 'YAML', } const [form] = Form.useForm(); const ref = useRef<any>(null); const data = initialData[name] || {}; const pluginType = pluginList.find((item) => item.name === name)?.type; const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>( - codeMirrorModeList.Json, + codeMirrorModeList.JSON, ); const modeOptions = [ - { label: codeMirrorModeList.Json, value: codeMirrorModeList.Json }, - { label: codeMirrorModeList.Yaml, value: codeMirrorModeList.Yaml }, + { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON }, + { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML }, ]; useEffect(() => { @@ -160,8 +160,8 @@ const PluginDetail: React.FC<Props> = ({ }; const handleModeChange = (value: PluginComponent.CodeMirrorMode) => { switch (value) { - case codeMirrorModeList.Json: { - const { data: yamlData , error } = yaml2json(ref.current.editor.getValue(), true); + case codeMirrorModeList.JSON: { + const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true); if (error) { notification.error({ @@ -176,7 +176,7 @@ const PluginDetail: React.FC<Props> = ({ ); break; } - case codeMirrorModeList.Yaml: { + case codeMirrorModeList.YAML: { const { data: jsonData, error } = json2yaml(ref.current.editor.getValue()); if (error) { @@ -250,7 +250,7 @@ const PluginDetail: React.FC<Props> = ({ onClick={() => { try { const editorData = - codeMirrorMode === codeMirrorModeList.Json + codeMirrorMode === codeMirrorModeList.JSON ? JSON.parse(ref.current?.editor.getValue()) : yaml2json(ref.current?.editor.getValue(), false).data; validateData(name, editorData).then((value) => { @@ -320,7 +320,7 @@ const PluginDetail: React.FC<Props> = ({ {formatMessage({ id: 'component.global.document' })} </Button>, <Select - defaultValue={codeMirrorModeList.Json} + defaultValue={codeMirrorModeList.JSON} value={codeMirrorMode} options={modeOptions} onChange={(value: PluginComponent.CodeMirrorMode) => { @@ -338,6 +338,7 @@ const PluginDetail: React.FC<Props> = ({ ref.current = codemirror; if (codemirror) { // NOTE: for debug & test + // @ts-ignore window.codemirror = codemirror.editor; } }} diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts index 533fa6a..79dda49 100644 --- a/web/src/components/Plugin/typing.d.ts +++ b/web/src/components/Plugin/typing.d.ts @@ -30,5 +30,5 @@ declare namespace PluginComponent { type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin'; - type CodeMirrorMode = 'Json' | 'Yaml'; + type CodeMirrorMode = 'JSON' | 'YAML'; } diff --git a/web/src/components/RawDataEditor/RawDataEditor.tsx b/web/src/components/RawDataEditor/RawDataEditor.tsx index 588cebd..087b8a6 100644 --- a/web/src/components/RawDataEditor/RawDataEditor.tsx +++ b/web/src/components/RawDataEditor/RawDataEditor.tsx @@ -34,29 +34,29 @@ type Props = { }; enum codeMirrorModeList { - Json = 'Json', - Yaml = 'Yaml', + 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, + codeMirrorModeList.JSON, ); useEffect(() => { - setCodeMirrorMode(codeMirrorModeList.Json); + setCodeMirrorMode(codeMirrorModeList.JSON); }, [visible]) const modeOptions = [ - { label: codeMirrorModeList.Json, value: codeMirrorModeList.Json }, - { label: codeMirrorModeList.Yaml, value: codeMirrorModeList.Yaml }, + { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON }, + { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML }, ]; const handleModeChange = (value: PluginComponent.CodeMirrorMode) => { switch (value) { - case codeMirrorModeList.Json: { + case codeMirrorModeList.JSON: { const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true); if (error) { @@ -72,12 +72,12 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = ); break; } - case codeMirrorModeList.Yaml: { + case codeMirrorModeList.YAML: { const { data: jsonData, error } = json2yaml(ref.current.editor.getValue()); if (error) { notification.error({ - message: 'Invalid Json data', + message: 'Invalid JSON data', }); return; } @@ -126,7 +126,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = onClick={() => { try { const editorData = - codeMirrorMode === codeMirrorModeList.Json + codeMirrorMode === codeMirrorModeList.JSON ? JSON.parse(ref.current?.editor.getValue()) : yaml2json(ref.current?.editor.getValue(), false).data; onSubmit(editorData); @@ -159,7 +159,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = Document </Button>, <Select - defaultValue={codeMirrorModeList.Json} + defaultValue={codeMirrorModeList.JSON} value={codeMirrorMode} options={modeOptions} onChange={(value: PluginComponent.CodeMirrorMode) => { @@ -192,6 +192,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = ref.current = codemirror; if (codemirror) { // NOTE: for debug & test + // @ts-ignore window.codemirror = codemirror.editor; } }}
