feat: worker_config

src/pages/backends/components/import-yaml.tsx

@@ -1,51 +1,17 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import useUserSettings from '@/hooks/use-user-settings';
-import { ImportOutlined } from '@ant-design/icons';
+import YamlEditor from '@/pages/_components/yaml-editor';
 import { useIntl } from '@umijs/max';
-import { Button, message, Typography, Upload } from 'antd';
-import { RcFile } from 'antd/lib/upload';
 import React, {
   forwardRef,
   useImperativeHandle,
   useRef,
   useState
 } from 'react';
-import styled from 'styled-components';
 import { yaml2Json, yamlTemplate } from '../config';
-import YamlEditor from './yaml-editor';
-
-const { Text } = Typography;
-
-const ErrorText = styled(Text)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 4px 6px;
-  background-color: var(--ant-color-bg-elevated);
-  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
-`;
-
-const Header = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  padding-inline: 10px;
-  border-bottom: 1px solid var(--ant-color-border);
-  background-color: var(--ant-color-fill-tertiary);
-`;
-
-const Container = styled.div`
-  position: relative;
-  border: 1px solid var(--ant-color-border);
-  border-radius: var(--ant-border-radius);
-  .monaco-editor .scroll-decoration {
-    box-shadow: none;
-  }
-`;
+import createSchema from '../config/schema/create.json';
+import updateBuiltinSchema from '../config/schema/update-builtin.json';
+import udpateCustomSchema from '../config/schema/update-custom.json';
 
 interface ImportYAMLProps {
   ref?: any;
@@ -60,7 +26,6 @@ interface ImportYAMLProps {
 const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
   ({ actionStatus, content = '' }, ref) => {
     const intl = useIntl();
-    const { userSettings } = useUserSettings();
     const editorRef = useRef<any>(null);
     const [fileContent, setFileContent] = useState<string>(
       actionStatus.action === PageAction.CREATE ? yamlTemplate : content
@@ -71,30 +36,6 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
       editorRef.current?.setValue?.(val);
     };
 
-    const beforeUpload = (file: RcFile) => {
-      const isYaml =
-        file.type === 'application/x-yaml' ||
-        file.type === 'text/yaml' ||
-        file.name.endsWith('.yaml') ||
-        file.name.endsWith('.yml');
-      if (!isYaml) {
-        message.error('You can only upload YAML file!');
-      }
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result;
-        if (typeof content === 'string') {
-          setFileContent(content);
-          setContent(content);
-        } else {
-          message.error('Failed to read file content!');
-        }
-      };
-      reader.readAsText(file);
-      // Prevent upload
-      return false;
-    };
-
     const validate = () => {
       const markers = editorRef.current?.validate();
       if (markers && markers.length > 0) {
@@ -152,25 +93,6 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
       }
     };
 
-    const renderHeader = () => {
-      return (
-        <Header>
-          <span className="title">YAML</span>
-          <Upload
-            name="file"
-            multiple={false}
-            beforeUpload={beforeUpload}
-            showUploadList={false}
-            accept=".yaml,.yml,text/yaml,application/x-yaml"
-          >
-            <Button icon={<ImportOutlined />} type="text" size="small">
-              {intl.formatMessage({ id: 'common.button.import' })}
-            </Button>
-          </Upload>
-        </Header>
-      );
-    };
-
     useImperativeHandle(ref, () => ({
       getContent: () => {
         return getContent();
@@ -182,18 +104,23 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
     }));
 
     return (
-      <Container>
-        <YamlEditor
-          ref={editorRef}
-          lang="yaml"
-          actionStatus={actionStatus}
-          theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
-          value={fileContent}
-          height={'calc(100vh - 260px)'}
-          header={renderHeader()}
-        ></YamlEditor>
-        {error && <ErrorText type="danger">{error}</ErrorText>}
-      </Container>
+      <YamlEditor
+        ref={editorRef}
+        value={fileContent}
+        height={'calc(100vh - 260px)'}
+        validateMessage={error}
+        onUpload={(content) => {
+          setError('');
+          setContent(content);
+        }}
+        schema={
+          actionStatus.action === PageAction.CREATE
+            ? createSchema
+            : actionStatus.isBuiltIn
+              ? updateBuiltinSchema
+              : udpateCustomSchema
+        }
+      ></YamlEditor>
     );
   }
 );

src/pages/backends/components/yaml-editor.tsx

@@ -1,154 +0,0 @@
-import EditorWrap from '@/components/editor-wrap';
-import { PageAction } from '@/config';
-import { PageActionType } from '@/config/types';
-import { LoadingOutlined } from '@ant-design/icons';
-import Editor, { loader } from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import { configureMonacoYaml } from 'monaco-yaml';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef
-} from 'react';
-import createSchema from '../config/schema/create.json';
-import updateBuiltinSchema from '../config/schema/update-builtin.json';
-import udpateCustomSchema from '../config/schema/update-custom.json';
-
-loader.config({ monaco });
-
-interface ViewerProps {
-  ref?: any;
-  lang: string;
-  defaultLang?: string;
-  config?: any;
-  value: string;
-  height?: string | number;
-  theme?: string;
-  header?: React.ReactNode;
-  placeholder?: string;
-  variant?: 'bordered' | 'borderless';
-  actionStatus: {
-    action: PageActionType;
-    isBuiltIn: boolean;
-  };
-}
-
-const path = 'inmemory://model/config.yaml';
-
-const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
-  const {
-    value,
-    height = 380,
-    theme = 'vs-dark',
-    header,
-    variant = 'borderless',
-    actionStatus,
-    placeholder
-  } = props;
-
-  const editorRef = useRef<any>(null);
-  const monacoRef = useRef<any>(null);
-  const monacoYamlRef = useRef<any>(null);
-
-  const handleBeforeMount = (monaco: any) => {
-    const yamlUri = monaco.Uri.parse(path);
-
-    configureMonacoYaml(monaco, {
-      schemas: [
-        {
-          uri: 'http://example.com/schema-name.json',
-          fileMatch: [yamlUri.toString()],
-          schema:
-            actionStatus.action === PageAction.CREATE
-              ? createSchema
-              : actionStatus.isBuiltIn
-                ? updateBuiltinSchema
-                : udpateCustomSchema
-        }
-      ]
-    });
-  };
-
-  const handleEditorDidMount = (editor: any, monaco: any) => {
-    editorRef.current = editor;
-    monacoRef.current = monaco;
-  };
-
-  const formatCode = () => {
-    if (editorRef.current) {
-      setTimeout(() => {
-        editorRef.current
-          ?.getAction?.('editor.action.formatDocument')
-          ?.run()
-          .then(() => {
-            console.log('format success');
-          });
-      }, 100);
-    }
-  };
-
-  // Currently, do not use this function, but keep it for future validation needs
-  const getMarkers = () => {
-    const uri = editorRef.current?.getModel()?.uri;
-    const markers = monacoRef.current?.editor.getModelMarkers({
-      resource: uri
-    });
-    return markers;
-  };
-
-  useImperativeHandle(ref, () => ({
-    format: () => {
-      formatCode();
-    },
-    getValue: () => {
-      return editorRef.current?.getValue?.();
-    },
-    setValue: (val: string) => {
-      editorRef.current?.setValue?.(val);
-    },
-    dispose: () => {
-      editorRef.current?.dispose?.();
-      monacoYamlRef.current?.dispose?.();
-    },
-    validate() {
-      return getMarkers();
-    },
-    editor: editorRef.current
-  }));
-
-  useEffect(() => {
-    formatCode();
-  }, [value]);
-
-  return (
-    <EditorWrap header={header} variant={variant}>
-      <Editor
-        path={path}
-        defaultPath={path}
-        height={height}
-        theme={theme}
-        className="monaco-editor"
-        defaultLanguage={'yaml'}
-        language={'yaml'}
-        value={value}
-        options={{
-          minimap: { enabled: false },
-          quickSuggestions: true,
-          suggestOnTriggerCharacters: true,
-          fontSize: 14,
-          scrollbar: {
-            verticalScrollbarSize: 6,
-            horizontalScrollbarSize: 6
-          },
-          placeholder: placeholder
-        }}
-        loading={<LoadingOutlined style={{ fontSize: 24 }}></LoadingOutlined>}
-        beforeMount={handleBeforeMount}
-        onMount={handleEditorDidMount}
-      />
-    </EditorWrap>
-  );
-});
-
-export default ViewerEditor;