fix: support data source import

twinkle77 · JackLian · commit ec780a2fb42f · 2022-08-04T17:25:47.000+08:00
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -9,6 +9,39 @@ preference.set('DataSourcePane', {
   dataSourceTypes: [
     {
       type: 'fetch',
+      schema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string"
+          },
+          type: {
+            type: "string"
+          },
+          isInit: {
+            type: "boolean",
+          },
+          options: {
+            type: "object",
+            properties: {
+              method: {
+                type: "string",
+              },
+              isCors: {
+                type: "boolean",
+              },
+              timeout: {
+                type: "integer",
+              },
+              uri: {
+                type: "string",
+              },
+            },
+            required: ["method", "isCors", "timeout", "uri"]
+          }
+        },
+        required: ["id", "type", "isInit", "options"]
+      }
     },
     {
       type: 'jsonp',
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceImport/DataSourceImport.tsx b/packages/plugin-datasource-pane/src/components/DataSourceImport/DataSourceImport.tsx
@@ -32,9 +32,18 @@ export class DataSourceImport extends PureComponent<
   static defaultProps = {
     defaultValue: [
       {
-        type: 'http',
-        id: 'test',
-      },
+        type: 'fetch',
+        isInit: false,
+        options: {
+          method: 'GET',
+          isCors: true,
+          timeout: 5000,
+          uri: '/info',
+          params: {},
+          headers: {}
+        },
+        id: 'info'
+      }
     ],
   };
 
@@ -47,8 +56,10 @@ export class DataSourceImport extends PureComponent<
     return new Promise((resolve, reject) => {
       const { isCodeValid, code } = this.state;
 
-      if (isCodeValid) reject(new Error('格式有误'));
-      resolve({ schema: code });
+      if (!isCodeValid) reject(new Error('导入格式有误'));
+
+      // 只 resolve 通过 schema 校验的数据
+      resolve(this.deriveValue(JSON.parse(code)));
     });
   };
 
@@ -79,14 +90,25 @@ export class DataSourceImport extends PureComponent<
 
     return (result as DataSourceConfig[]).filter((dataSource) => {
       if (!dataSource.type) return false;
+
       const dataSourceType = dataSourceTypes.find(
         (type) => type.type === dataSource.type,
       );
+
       if (!dataSourceType) return false;
-      return ajv.validate(dataSourceType.schema, dataSource);
+
+      // 校验失败的数据源，给予用户提示
+      const validate = ajv.compile(dataSourceType.schema)
+      const valid = validate(dataSource)
+      if (!valid) console.warn(validate.errors)
+      return valid
     });
   };
 
+  /**
+   * 看代码是未使用到
+   * @deprecated
+   */
   handleComplete = () => {
     if (this.monacoRef) {
       if (
@@ -116,8 +138,8 @@ export class DataSourceImport extends PureComponent<
     }
   };
 
-  handleEditorDidMount = (isFullscreen: boolean, editor: MonacoEditor, monaco: MonacoEditor) => {
-    this.monacoRef = monaco?.editor;
+  handleEditorDidMount = (editor: MonacoEditor, monaco: MonacoEditor) => {
+    this.monacoRef = editor?.editor;
   };
 
   render() {
diff --git a/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx b/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx
@@ -85,7 +85,8 @@ export class DataSourcePane extends PureComponent<
   componentDidMount() {
     this.serviceS = this.context?.stateService?.subscribe?.((state: any) => {
       this.setState({ current: state });
-      if (state.changed && state.value === 'idle') {
+      // 监听导入成功事件
+      if (state.changed && (state.value === 'idle' || state.event?.type === "FINISH_IMPORT")) {
         // TODO add hook
         this.props.onSchemaChange?.({
           list: state.context.dataSourceList,
@@ -221,7 +222,7 @@ export class DataSourcePane extends PureComponent<
           return;
         }
         const repeatedDataSourceList = data.filter(
-          (item) => !!this.state.current.dataSourceList.find(
+          (item) => !!this.state.current.context.dataSourceList.find(
               (dataSource: DataSourceConfig) => dataSource.id === item.id,
             ),
         );
@@ -237,6 +238,8 @@ export class DataSourcePane extends PureComponent<
           return;
         }
         importDataSourceList();
+      }).catch(err => {
+        console.warn(err?.message)
       });
     }
   };
