Feat: support module-definition plugin

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

@@ -6,14 +6,38 @@ export interface AppPluginMeta<T extends KeyValue = KeyValue> extends PluginMeta
   // TODO anything specific to apps?
 }
 
-export interface AppRootProps<T extends KeyValue = KeyValue> {
+export interface PluginRootProps<T extends KeyValue = KeyValue>{
   meta: AppPluginMeta<T>;
+}
+
+export interface PageRootProps<T extends KeyValue = KeyValue> extends PluginRootProps<T>{
   /**
    * base URL segment for an app, /app/pluginId
    */
   basename: string; // The URL path to this page
 }
 
+export interface DefinitionRootProps<T extends KeyValue = KeyValue> extends PluginRootProps<T> {
+  // form props
+  "data-meta"?: string;
+
+  project?: string;
+
+  id?: string;
+
+  onChange?: Function;
+
+  registerForm?: Function;
+
+  value?: any;
+
+  ref?: any;
+}
+
+export interface AppRootProps<T extends KeyValue = KeyValue> extends DefinitionRootProps<T>, PageRootProps<T>{
+
+}
+
 export class AppPagePlugin<T extends KeyValue = KeyValue> extends VelaUXPlugin<AppPluginMeta<T>> {
   // Content under: /a/${plugin-id}/*
   root?: ComponentType<AppRootProps<T>>;

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

@@ -61,6 +61,7 @@ export interface PluginMeta<T extends KeyValue = {}> extends PluginLink, SourceA
   // System.load & relative URLS
   module: string;
   baseUrl: string;
+  position?: string;
 
   // Define plugin requirements
   dependencies?: PluginDependencies;

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 {  DefinitinPluginRoot } from '../../layout/AppRootPage';
+import { PluginMeta, PluginType } 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()
+      .listAppPagePlugins( PluginType.Definition)
+      .then((plugins) => {
+        const plugin = plugins.find(o => o?.position === "definition.workflow_step." + type);
+        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}>
+                    <DefinitinPluginRoot
+                      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/layout/AppRootPage/index.tsx

@@ -13,9 +13,15 @@ interface Props {
   dispatch: any;
   pluginList: PluginMeta[];
   loading: any;
+  project?: string;
 }
 
-function RootPage({ pluginId }: Props) {
+interface DefinitinProps {
+  pluginId: string;
+  project?: string;
+}
+
+function RootPage({ pluginId, ...rest }: Props | DefinitinProps, ref: React.ForwardedRef<any>) {
   const [app, setApp] = React.useState<AppPagePlugin>();
   React.useEffect(() => {
     loadAppPlugin(pluginId, setApp);
@@ -31,7 +37,7 @@ function RootPage({ pluginId }: Props) {
   const AppRootPage = app.root
   return (
     <div>
-      <AppRootPage meta={app.meta} basename={locationService.getLocation().pathname} />
+      <AppRootPage meta={app.meta} basename={locationService.getLocation().pathname} {...rest} ref={ref}/>
     </div>
   );
 }
@@ -272,3 +278,4 @@ const mapStateToProps = (store: any) => ({
 
 export const AppConfigPage = connect(mapStateToProps)(ConfigPage)
 export const AppRootPage = connect(mapStateToProps)(RootPage)
+export const DefinitinPluginRoot = React.forwardRef(RootPage);

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 { DefinitinPluginRoot } from '../../../../layout/AppRootPage';
+import { PluginMeta, PluginType } 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()
+      .listAppPagePlugins(PluginType.Definition)
+      .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?.position === "definition.component." + componentType);
+    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}>
+                <DefinitinPluginRoot
+                  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>