@nocobase/plugin-workflow 0.10.0-alpha.5 → 0.11.0-alpha.1

package/src/client/WorkflowLink.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import { useActionContext, useRecord } from '@nocobase/client';
+
+export const WorkflowLink = () => {
+  const { t } = useTranslation();
+  const { id } = useRecord();
+  const { setVisible } = useActionContext();
+  return (
+    <Link to={`/admin/settings/workflow/workflows/${id}`} onClick={() => setVisible(false)}>
+      {t('View')}
+    </Link>
+  );
+};

package/src/client/WorkflowPage.tsx

@@ -0,0 +1,51 @@
+import { cx, SchemaComponent } from '@nocobase/client';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { workflowPageClass } from './style';
+import { WorkflowCanvas } from './WorkflowCanvas';
+
+export const WorkflowPage = () => {
+  const params = useParams<any>();
+
+  return (
+    <div className={cx(workflowPageClass)}>
+      <SchemaComponent
+        schema={{
+          type: 'void',
+          properties: {
+            [`provider_${params.id}`]: {
+              type: 'void',
+              'x-decorator': 'ResourceActionProvider',
+              'x-decorator-props': {
+                collection: {
+                  name: 'workflows',
+                  fields: [],
+                },
+                resourceName: 'workflows',
+                request: {
+                  resource: 'workflows',
+                  action: 'get',
+                  params: {
+                    filter: { id: params.id },
+                    appends: [
+                      'nodes',
+                      'revisions.id',
+                      'revisions.createdAt',
+                      'revisions.current',
+                      'revisions.executed',
+                      'revisions.enabled',
+                    ],
+                  },
+                },
+              },
+              'x-component': 'WorkflowCanvas',
+            },
+          },
+        }}
+        components={{
+          WorkflowCanvas,
+        }}
+      />
+    </div>
+  );
+};

package/src/client/WorkflowProvider.tsx

@@ -0,0 +1,84 @@
+import {
+  CollectionManagerContext,
+  PluginManagerContext,
+  SchemaComponent,
+  SettingsCenterProvider,
+} from '@nocobase/client';
+import { Card } from 'antd';
+import React, { useContext } from 'react';
+import OpenDrawer from './components/OpenDrawer';
+import { ExecutionLink } from './ExecutionLink';
+import { ExecutionResourceProvider } from './ExecutionResourceProvider';
+import expressionField from './interfaces/expression';
+import { lang } from './locale';
+import { instructions } from './nodes';
+import { workflowSchema } from './schemas/workflows';
+import { triggers } from './triggers';
+import { WorkflowLink } from './WorkflowLink';
+
+// registerField(expressionField.group, 'expression', expressionField);
+
+export const WorkflowContext = React.createContext({});
+
+export function useWorkflowContext() {
+  return useContext(WorkflowContext);
+}
+
+function WorkflowPane() {
+  return (
+    <Card bordered={false}>
+      <SchemaComponent
+        schema={workflowSchema}
+        components={{
+          WorkflowLink,
+          ExecutionResourceProvider,
+          ExecutionLink,
+          OpenDrawer,
+        }}
+      />
+    </Card>
+  );
+}
+
+export const WorkflowProvider = (props) => {
+  const pmCtx = useContext(PluginManagerContext);
+  const cmCtx = useContext(CollectionManagerContext);
+  return (
+    <SettingsCenterProvider
+      settings={{
+        workflow: {
+          icon: 'PartitionOutlined',
+          // title: `{{t("Workflow", { ns: "${NAMESPACE}" })}}`,
+          title: lang('Workflow'),
+          tabs: {
+            workflows: {
+              isBookmark: true,
+              title: lang('Workflow'),
+              component: WorkflowPane,
+            },
+          },
+        },
+      }}
+    >
+      <PluginManagerContext.Provider
+        value={{
+          components: {
+            ...pmCtx?.components,
+          },
+        }}
+      >
+        <CollectionManagerContext.Provider
+          value={{
+            ...cmCtx,
+            interfaces: {
+              ...cmCtx.interfaces,
+              expression: expressionField,
+            },
+          }}
+        >
+          <WorkflowContext.Provider value={{ triggers, instructions }}>{props.children}</WorkflowContext.Provider>
+        </CollectionManagerContext.Provider>
+      </PluginManagerContext.Provider>
+    </SettingsCenterProvider>
+  );
+};

package/src/client/components/CollectionBlockInitializer.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import {
+  CollectionProvider,
+  SchemaInitializer,
+  SchemaInitializerItemOptions,
+  useCollectionManager,
+  useRecordCollectionDataSourceItems,
+  useSchemaTemplateManager,
+} from '@nocobase/client';
+import { traverseSchema } from '../nodes/manual/utils';
+
+function InnerCollectionBlockInitializer({ insert, collection, dataSource, ...props }) {
+  const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+  const { getCollection } = useCollectionManager();
+  const items = useRecordCollectionDataSourceItems('FormItem') as SchemaInitializerItemOptions[];
+  const resovledCollection = getCollection(collection);
+
+  async function onConfirm({ item }) {
+    const template = item.template ? await getTemplateSchemaByMode(item) : null;
+    const result = {
+      type: 'void',
+      name: resovledCollection.name,
+      title: resovledCollection.title,
+      'x-decorator': 'DetailsBlockProvider',
+      'x-decorator-props': {
+        collection,
+        dataSource,
+      },
+      'x-component': 'CardItem',
+      'x-component-props': {
+        title: props.title,
+      },
+      'x-designer': 'SimpleDesigner',
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormV2',
+          'x-component-props': {
+            useProps: '{{useDetailsBlockProps}}',
+          },
+          'x-read-pretty': true,
+          properties: {
+            grid: template || {
+              type: 'void',
+              'x-component': 'Grid',
+              'x-initializer': 'ReadPrettyFormItemInitializers',
+              properties: {},
+            },
+          },
+        },
+      },
+    };
+    traverseSchema(result, (node) => {
+      if (node['x-uid']) {
+        delete node['x-uid'];
+      }
+    });
+    insert(result);
+  }
+
+  return <SchemaInitializer.Item {...props} onClick={onConfirm} items={items} />;
+}
+
+export function CollectionBlockInitializer(props) {
+  return (
+    <CollectionProvider collection={props.collection}>
+      <InnerCollectionBlockInitializer {...props} />
+    </CollectionProvider>
+  );
+}

package/src/client/components/CollectionFieldset.tsx

@@ -0,0 +1,158 @@
+import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { observer, useField, useForm } from '@formily/react';
+import {
+  CollectionField,
+  CollectionProvider,
+  css,
+  SchemaComponent,
+  useCollectionManager,
+  useCompile,
+  Variable,
+} from '@nocobase/client';
+import { Button, Dropdown, Form, Input, MenuProps } from 'antd';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { lang } from '../locale';
+import { useWorkflowVariableOptions } from '../variable';
+
+function AssociationInput(props) {
+  const { getCollectionFields } = useCollectionManager();
+  const { path } = useField();
+  const fieldName = path.segments[path.segments.length - 1] as string;
+  const { values: config } = useForm();
+  const fields = getCollectionFields(config?.collection);
+  const { type } = fields.find((item) => item.name === fieldName);
+
+  const value = Array.isArray(props.value) ? props.value.join(',') : props.value;
+  function onChange(ev) {
+    const trimed = ev.target.value.trim();
+    props.onChange(['belongsTo', 'hasOne'].includes(type) ? trimed : trimed.split(/[,\s]+/));
+  }
+  return <Input {...props} value={value} onChange={onChange} />;
+}
+
+export function useCollectionUIFields(collection) {
+  const { getCollectionFields } = useCollectionManager();
+
+  return getCollectionFields(collection).filter(
+    (field) => !field.hidden && (field.uiSchema ? !field.uiSchema['x-read-pretty'] : false),
+  );
+}
+
+// NOTE: observer for watching useProps
+const CollectionFieldSet = observer(
+  ({ value, disabled, onChange, filter }: any) => {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const form = useForm();
+    const { getCollection } = useCollectionManager();
+    const scope = useWorkflowVariableOptions();
+    const { values: config } = form;
+    const collectionName = config?.collection;
+    const collectionFields = useCollectionUIFields(collectionName);
+    const fields = filter ? collectionFields.filter(filter.bind(config)) : collectionFields;
+
+    const unassignedFields = useMemo(() => fields.filter((field) => !value || !(field.name in value)), [fields, value]);
+    const mergedDisabled = disabled || form.disabled;
+    const menu = useMemo<MenuProps>(() => {
+      return {
+        onClick: ({ key }) => {
+          onChange({ ...value, [key]: null });
+        },
+        style: {
+          maxHeight: 300,
+          overflowY: 'auto',
+        },
+        items: unassignedFields.map((field) => ({
+          key: field.name,
+          label: compile(field.uiSchema?.title ?? field.name),
+        })),
+      };
+    }, [onChange, unassignedFields, value]);
+
+    return (
+      <fieldset
+        className={css`
+          margin-top: 0.5em;
+
+          > .ant-formily-item {
+            flex-direction: column;
+
+            > .ant-formily-item-label {
+              line-height: 32px;
+            }
+          }
+        `}
+      >
+        {fields.length ? (
+          <CollectionProvider collection={getCollection(collectionName)}>
+            {fields
+              .filter((field) => value && field.name in value)
+              .map((field) => {
+                // constant for associations to use Input, others to use CollectionField
+                // dynamic values only support belongsTo/hasOne association, other association type should disable
+                const ConstantCompoent = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(field.type)
+                  ? AssociationInput
+                  : CollectionField;
+                // TODO: try to use <ObjectField> to replace this map
+                return (
+                  <Form.Item
+                    key={field.name}
+                    label={compile(field.uiSchema?.title ?? field.name)}
+                    labelAlign="left"
+                    className={css`
+                      .ant-form-item-control-input-content {
+                        display: flex;
+                      }
+                    `}
+                  >
+                    <Variable.Input
+                      scope={scope}
+                      value={value[field.name]}
+                      onChange={(next) => {
+                        onChange({ ...value, [field.name]: next });
+                      }}
+                    >
+                      <SchemaComponent
+                        schema={{
+                          type: 'void',
+                          properties: {
+                            [field.name]: {
+                              'x-component': ConstantCompoent,
+                              ['x-validator']() {
+                                return '';
+                              },
+                            },
+                          },
+                        }}
+                      />
+                    </Variable.Input>
+                    {!mergedDisabled ? (
+                      <Button
+                        type="link"
+                        icon={<CloseCircleOutlined />}
+                        onClick={() => {
+                          const { [field.name]: _, ...rest } = value;
+                          onChange(rest);
+                        }}
+                      />
+                    ) : null}
+                  </Form.Item>
+                );
+              })}
+            {unassignedFields.length ? (
+              <Dropdown menu={menu}>
+                <Button icon={<PlusOutlined />}>{t('Add field')}</Button>
+              </Dropdown>
+            ) : null}
+          </CollectionProvider>
+        ) : (
+          <p>{lang('Please select collection first')}</p>
+        )}
+      </fieldset>
+    );
+  },
+  { displayName: 'CollectionFieldSet' },
+);
+
+export default CollectionFieldSet;

package/src/client/components/Duration.tsx

@@ -0,0 +1,45 @@
+import { css } from '@nocobase/client';
+import { InputNumber, Select } from 'antd';
+import React from 'react';
+import { lang } from '../locale';
+
+const UnitOptions = [
+  { value: 1_000, label: 'Seconds' },
+  { value: 60_000, label: 'Minutes' },
+  { value: 3600_000, label: 'Hours' },
+  { value: 86400_000, label: 'Days' },
+  { value: 604800_000, label: 'Weeks' },
+];
+
+function getNumberOption(v) {
+  return UnitOptions.slice()
+    .reverse()
+    .find((item) => !(v % item.value));
+}
+
+export default function ({ value = 60000, onChange }) {
+  const option = getNumberOption(value);
+  const quantity = Math.round(value / option.value);
+
+  return (
+    <fieldset
+      className={css`
+        display: flex;
+        gap: 0.5em;
+      `}
+    >
+      <InputNumber min={1} value={quantity} onChange={(v) => onChange(Math.round(v * option.value))} />
+      <Select
+        popupMatchSelectWidth={false}
+        value={option.value}
+        onChange={(unit) => onChange(Math.round(quantity * unit))}
+      >
+        {UnitOptions.map((item) => (
+          <Select.Option key={item.value} value={item.value}>
+            {lang(item.label)}
+          </Select.Option>
+        ))}
+      </Select>
+    </fieldset>
+  );
+}

package/src/client/components/DynamicExpression.tsx

@@ -0,0 +1,53 @@
+import { onFieldInputValueChange, onFormInitialValuesChange } from '@formily/core';
+import { connect, mapReadPretty, observer, useForm, useFormEffects } from '@formily/react';
+import { Tag } from 'antd';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCollectionManager, useCompile, useRecord, Variable } from '@nocobase/client';
+
+import { NAMESPACE } from '../locale';
+import { getCollectionFieldOptions } from '../variable';
+
+const InternalExpression = observer(
+  (props: any) => {
+    const { onChange } = props;
+    const { values } = useForm();
+    const [collection, setCollection] = useState(values?.sourceCollection);
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+
+    useFormEffects(() => {
+      onFormInitialValuesChange((form) => {
+        setCollection(form.values.sourceCollection);
+      });
+      onFieldInputValueChange('sourceCollection', (f) => {
+        setCollection(f.value);
+        onChange(null);
+      });
+    });
+
+    const options = getCollectionFieldOptions({ collection, compile, getCollectionFields });
+
+    return <Variable.TextArea {...props} scope={options} />;
+  },
+  { displayName: 'InternalExpression' },
+);
+
+function Result(props) {
+  const { t } = useTranslation();
+  const values = useRecord();
+  const compile = useCompile();
+  const { getCollectionFields } = useCollectionManager();
+  const options = useMemo(
+    () => getCollectionFieldOptions({ collection: values.sourceCollection, compile, getCollectionFields }),
+    [values.sourceCollection, values.sourceCollection],
+  );
+  return props.value ? (
+    <Variable.TextArea {...props} scope={options} />
+  ) : (
+    <Tag>{t('Unconfigured', { ns: NAMESPACE })}</Tag>
+  );
+}
+
+export const DynamicExpression = connect(InternalExpression, mapReadPretty(Result));

package/src/client/components/FieldsSelect.tsx

@@ -0,0 +1,28 @@
+import { observer, useForm } from '@formily/react';
+import { Select } from 'antd';
+import React from 'react';
+
+import { useCollectionManager, useCompile } from '@nocobase/client';
+
+export const FieldsSelect = observer(
+  (props: any) => {
+    const { filter = () => true, ...others } = props;
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const { values } = useForm();
+    const fields = getCollectionFields(values?.collection);
+
+    return (
+      <Select
+        className="full-width"
+        popupMatchSelectWidth={false}
+        {...others}
+        options={fields.filter(filter).map((field) => ({
+          label: compile(field.uiSchema?.title),
+          value: field.name,
+        }))}
+      />
+    );
+  },
+  { displayName: 'FieldsSelect' },
+);

package/src/client/components/FilterDynamicComponent.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Variable } from '@nocobase/client';
+
+import { useWorkflowVariableOptions } from '../variable';
+
+export function FilterDynamicComponent({ value, onChange, renderSchemaComponent }) {
+  const scope = useWorkflowVariableOptions();
+
+  return (
+    <Variable.Input value={value} onChange={onChange} scope={scope}>
+      {renderSchemaComponent()}
+    </Variable.Input>
+  );
+}

package/src/client/components/NodeDescription.tsx

@@ -0,0 +1,44 @@
+import { css, cx } from '@nocobase/client';
+import { Tag } from 'antd';
+import React from 'react';
+import { lang } from '../locale';
+
+export function NodeDescription(props) {
+  const { instruction } = props;
+  const className = css`
+    margin-bottom: 1.5em;
+    padding: 1em;
+    background: #f6f6f6;
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    dl {
+      display: flex;
+
+      dt {
+        &:after {
+          content: ':';
+          margin-right: 0.5em;
+        }
+      }
+    }
+
+    p {
+      color: rgba(0, 0, 0, 0.45);
+    }
+  `;
+
+  return (
+    <div className={cx(className, props.className)}>
+      <dl>
+        <dt>{lang('Node type')}</dt>
+        <dd>
+          <Tag>{instruction.title}</Tag>
+        </dd>
+      </dl>
+      {instruction.description ? <p>{instruction.description}</p> : null}
+    </div>
+  );
+}

package/src/client/components/NullRender.tsx

@@ -0,0 +1,3 @@
+export function NullRender() {
+  return null;
+}

package/src/client/components/OpenDrawer.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { useFieldSchema } from '@formily/react';
+
+import { ActionContextProvider, SchemaComponent } from '@nocobase/client';
+
+export default function ({ component = 'div', children, ...props }) {
+  const [visible, setVisible] = useState(false);
+  const fieldSchema = useFieldSchema();
+  return (
+    <ActionContextProvider value={{ visible, setVisible, fieldSchema }}>
+      {React.createElement(
+        component,
+        {
+          ...props,
+          onClick() {
+            setVisible(true);
+          },
+        },
+        children,
+      )}
+      <SchemaComponent schema={fieldSchema} onlyRenderProperties />
+    </ActionContextProvider>
+  );
+}

package/src/client/components/RadioWithTooltip.tsx

@@ -0,0 +1,38 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { css, useCompile } from '@nocobase/client';
+import { Radio, Tooltip } from 'antd';
+import React from 'react';
+
+export interface RadioWithTooltipOption {
+  value: any;
+  label: string;
+  tooltip?: string;
+}
+
+export function RadioWithTooltip(props) {
+  const { options = [], ...other } = props;
+  const compile = useCompile();
+
+  return (
+    <Radio.Group {...other}>
+      {options.map((option) => (
+        <Radio key={option.value} value={option.value}>
+          <span
+            className={css`
+              & + .anticon {
+                margin-left: 0.25em;
+              }
+            `}
+          >
+            {compile(option.label)}
+          </span>
+          {option.tooltip && (
+            <Tooltip title={compile(option.tooltip)}>
+              <QuestionCircleOutlined style={{ color: '#666' }} />
+            </Tooltip>
+          )}
+        </Radio>
+      ))}
+    </Radio.Group>
+  );
+}