Feat: support module-definition plugin

packages/velaux-data/src/plugins/definition.ts

@@ -0,0 +1,46 @@
+import { ComponentType } from 'react';
+import { PluginMeta, VelaUXPlugin } from './types';
+import { KeyValue } from '../types/data';
+
+
+export interface DefinitionPluginMeta<T extends KeyValue = KeyValue> extends PluginMeta<T> {
+  // TODO anything specific to definition?
+}
+
+export interface DefinitionRootProps<T extends KeyValue = KeyValue> {
+  meta: DefinitionPluginMeta<T>;
+
+  project?: string;
+
+  // form props
+  "data-meta"?: string;
+
+  id: string;
+
+  onChange: Function;
+
+  value?: any;
+
+  ref: any;
+}
+
+export class DefinitionPlugin<T extends KeyValue = KeyValue> extends VelaUXPlugin<DefinitionPluginMeta<T>> {
+  // Content in plugin*
+  root?: ComponentType<DefinitionRootProps<T>>;
+
+  /**
+   * Called after the module has loaded, and before the definition is used.
+   * This function may be called multiple times on the same instance.
+   * The first time, `this.meta` will be undefined
+   */
+  init(meta: DefinitionPluginMeta) {}
+
+  /**
+   * Set the component displayed*
+   *
+   * */
+  setRootPage(root: ComponentType<DefinitionRootProps<T>>) {
+    this.root = root;
+    return this;
+  }
+}

packages/velaux-data/src/plugins/index.ts

@@ -1,2 +1,3 @@
 export * from './app';
 export * from './types';
+export * from './definition';

packages/velaux-ui/src/components/Plugin/index.tsx

@@ -0,0 +1,59 @@
+import { DefinitionPlugin } from '@velaux/data';
+import * as React from 'react';
+import { Translation } from '../../components/Translation';
+import { getPluginSrv, importDefinitionPlugin } from '../../services/PluginService';
+
+interface Props {
+  pluginId: string;
+
+  project?: string;
+
+  // form props
+  "data-meta"?: string;
+
+  id: string;
+
+  onChange: Function;
+
+  value?: any;
+}
+
+
+function PluginRootFunction({ pluginId, ...rest }: Props, ref: React.ForwardedRef<any>) {
+  const [app, setApp] = React.useState<DefinitionPlugin>();
+  React.useEffect(() => {
+    loadDefinitionPlugin(pluginId, setApp);
+  }, [pluginId]);
+  if (!app || !app.root) {
+    return (
+      <div>
+        <Translation>No root plugin component found</Translation>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <app.root meta={app.meta} {...rest} ref={ref}/>
+    </div>
+  );
+}
+export const PluginRoot = React.forwardRef(PluginRootFunction);
+
+async function loadDefinitionPlugin(
+  pluginId: string,
+  setApp: React.Dispatch<React.SetStateAction<DefinitionPlugin | undefined>>
+) {
+  try {
+    const pluginInfo = await getPluginSrv().loadMeta(pluginId);
+    if (pluginInfo) {
+      importDefinitionPlugin(pluginInfo)
+        .then((definitionPlugin) => {
+          setApp(definitionPlugin);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  } catch (err) { }
+}

packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx

@@ -10,13 +10,17 @@ import Group from '../../extends/Group';
 import './index.less';
 import { StepSelect } from '../../extends/StepSelect';
 import i18n from '../../i18n';
-import type { DefinitionDetail , WorkflowStepBase } from '@velaux/data';
+import type { DefinitionDetail, WorkflowStepBase } from '@velaux/data';
 import { replaceUrl } from '../../utils/common';
 import DrawerWithFooter from '../Drawer';
 import { If } from '../If';
 import { Translation } from '../Translation';
 import UISchema from '../UISchema';
 
+import { PluginRoot } from '../../components/Plugin';
+import { PluginMeta } from '@velaux/data';
+import { getPluginSrv } from '../../services/PluginService';
+
 import { InputItems } from './input-item';
 import { OutputItems } from './output-item';
 import { BiCodeBlock, BiLaptop } from 'react-icons/bi';
@@ -32,6 +36,7 @@ type State = {
   definitionDetail?: DefinitionDetail;
   definitionLoading: boolean;
   propertiesMode: 'native' | 'code';
+  plugin?: PluginMeta | null,
 };
 
 class StepForm extends Component<Props, State> {
@@ -43,6 +48,7 @@ class StepForm extends Component<Props, State> {
     this.state = {
       definitionLoading: false,
       propertiesMode: 'native',
+      plugin: null,
     };
     this.field = new Field(this, {
       onChange: (name: string, value: string) => {
@@ -61,6 +67,18 @@ class StepForm extends Component<Props, State> {
       this.field.setValues({ properties: JSON.parse(properties) });
     }
     this.onDetailDefinition(type);
+    this.loadDefinitionPlugins(type);
+  };
+
+  loadDefinitionPlugins = (type: string) => {
+    return getPluginSrv()
+      .listDefinitionPlugins()
+      .then((plugins) => {
+        const plugin = plugins.find(o => o?.id === type + "-workflowstep");
+        this.setState({
+          plugin: plugin || null
+        });
+      });
   };
 
   setValues = (values: any | null) => {
@@ -110,7 +128,7 @@ class StepForm extends Component<Props, State> {
     const { Row, Col } = Grid;
     const FormItem = Form.Item;
     const { onClose, isSubStep } = this.props;
-    const { definitionDetail, propertiesMode } = this.state;
+    const { definitionDetail, propertiesMode, plugin } = this.state;
     const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
       this.uiSchemaRef.current?.validate(callback);
     };
@@ -119,6 +137,9 @@ class StepForm extends Component<Props, State> {
     const mode = isSubStep ? workflow.subMode : workflow.mode;
 
     const groupStep = this.field.getValue('type') == 'step-group';
+
+
+
     return (
       <DrawerWithFooter
         title={<Translation>{'Edit Step'}</Translation>}
@@ -143,7 +164,7 @@ class StepForm extends Component<Props, State> {
                   required={true}
                   hasToggleIcon={true}
                 >
-                  <If condition={definitionDetail}>
+                  <If condition={definitionDetail && !plugin}>
                     <FormItem required={true}>
                       <If condition={definitionDetail && definitionDetail.uiSchema}>
                         <div className="flexright">
@@ -189,6 +210,19 @@ class StepForm extends Component<Props, State> {
                       </UISchemaContext.Provider>
                     </FormItem>
                   </If>
+                  <If condition={plugin}>
+                    <PluginRoot
+                      pluginId={plugin ? plugin?.id : ""}
+                      {...init(`properties`, {
+                        rules: [
+                          {
+                            validator: validator,
+                            message: i18n.t('Please check the properties of this workflow step'),
+                          },
+                        ],
+                      })}
+                      ref={this.uiSchemaRef} />
+                  </If>
                 </Group>
               </Col>
             </Row>

packages/velaux-ui/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx

@@ -26,6 +26,10 @@ import { checkName } from '../../../../utils/common';
 import { locale } from '../../../../utils/locale';
 import { transComponentDefinitions } from '../../../../utils/utils';
 
+import { PluginRoot } from '../../../../components/Plugin';
+import { PluginMeta } from '@velaux/data';
+import { getPluginSrv } from '../../../../services/PluginService';
+
 import './index.less';
 
 import Permission from '../../../../components/Permission';
@@ -52,6 +56,7 @@ type State = {
   editComponent?: ApplicationComponent;
   loading: boolean;
   propertiesMode: string;
+  plugins: PluginMeta[];
 };
 
 @connect()
@@ -66,6 +71,7 @@ class ComponentDialog extends React.Component<Props, State> {
       isUpdateComponentLoading: false,
       loading: true,
       propertiesMode: 'native',
+      plugins: []
     };
     this.uiSchemaRef = React.createRef();
   }
@@ -103,6 +109,16 @@ class ComponentDialog extends React.Component<Props, State> {
     });
   }
 
+  loadDefinitionPlugins = () => {
+    return getPluginSrv()
+      .listDefinitionPlugins()
+      .then((plugins) => {
+        this.setState({
+          plugins: plugins
+        });
+      });
+  };
+
   onGetEditComponentInfo(callback?: () => void) {
     const { appName, componentName } = this.props;
     this.setState({ loading: true });
@@ -312,12 +328,16 @@ class ComponentDialog extends React.Component<Props, State> {
     const init = this.field.init;
     const FormItem = Form.Item;
     const { Row, Col } = Grid;
-    const { isEditComponent, componentDefinitions, onComponentClose } = this.props;
-    const { definitionDetail, loading, propertiesMode } = this.state;
+    const { isEditComponent, componentDefinitions, onComponentClose, project } = this.props;
+    const { definitionDetail, loading, propertiesMode, plugins } = this.state;
     const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
       this.uiSchemaRef.current?.validate(callback);
     };
 
+    const componentType: string = this.field.getValue('componentType') || '';
+    const plugin = plugins.find(o => o?.id === componentType + "-component");
+    const usePlugin = componentType && plugin;
+
     return (
       <DrawerWithFooter
         title={this.showComponentTitle()}
@@ -457,27 +477,27 @@ class ComponentDialog extends React.Component<Props, State> {
             subTitle={
               definitionDetail && definitionDetail.uiSchema
                 ? [
-                    <Button
-                      style={{ alignItems: 'center', display: 'flex' }}
-                      onClick={() => {
-                        if (propertiesMode === 'native') {
-                          this.setState({ propertiesMode: 'code' });
-                        } else {
-                          this.setState({ propertiesMode: 'native' });
-                        }
-                      }}
-                    >
-                      {propertiesMode === 'native' && (
-                        <BiCodeBlock size={14} title={i18n.t('Switch to the coding mode')} />
-                      )}
-                      {propertiesMode === 'code' && <BiLaptop size={14} title={i18n.t('Switch to the native mode')} />}
-                    </Button>,
-                  ]
+                  <Button
+                    style={{ alignItems: 'center', display: 'flex' }}
+                    onClick={() => {
+                      if (propertiesMode === 'native') {
+                        this.setState({ propertiesMode: 'code' });
+                      } else {
+                        this.setState({ propertiesMode: 'native' });
+                      }
+                    }}
+                  >
+                    {propertiesMode === 'native' && (
+                      <BiCodeBlock size={14} title={i18n.t('Switch to the coding mode')} />
+                    )}
+                    {propertiesMode === 'code' && <BiLaptop size={14} title={i18n.t('Switch to the native mode')} />}
+                  </Button>,
+                ]
                 : []
             }
           >
             <Row>
-              <If condition={definitionDetail}>
+              <If condition={!usePlugin && definitionDetail}>
                 <UISchema
                   {...init(`properties`, {
                     rules: [
@@ -498,6 +518,20 @@ class ComponentDialog extends React.Component<Props, State> {
                   mode={isEditComponent ? 'edit' : 'new'}
                 />
               </If>
+              <If condition={usePlugin}>
+                <PluginRoot
+                  pluginId={plugin ? plugin.id : ""}
+                  project={project}
+                  {...init(`properties`, {
+                    rules: [
+                      {
+                        validator: validator,
+                        message: i18n.t('Please check the component properties'),
+                      },
+                    ],
+                  })}
+                  ref={this.uiSchemaRef} />
+              </If>
             </Row>
           </Card>
         </Form>