@nocobase/plugin-workflow 0.11.1-alpha.5 → 0.12.0-alpha.2

package/src/client/WorkflowPage.tsx

@@ -1,52 +0,0 @@
-import { cx, SchemaComponent } from '@nocobase/client';
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import useStyles from './style';
-import { WorkflowCanvas } from './WorkflowCanvas';
-
-export const WorkflowPage = () => {
-  const params = useParams<any>();
-  const { styles } = useStyles();
-
-  return (
-    <div className={cx(styles.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

@@ -1,84 +0,0 @@
-import {
-  CollectionManagerContext,
-  PluginManagerContext,
-  SchemaComponent,
-  SettingsCenterProvider,
-} from '@nocobase/client';
-import { Card } from 'antd';
-import React, { useContext } from 'react';
-import { ExecutionLink } from './ExecutionLink';
-import { ExecutionResourceProvider } from './ExecutionResourceProvider';
-import { WorkflowLink } from './WorkflowLink';
-import OpenDrawer from './components/OpenDrawer';
-import expressionField from './interfaces/expression';
-import { lang } from './locale';
-import { instructions } from './nodes';
-import { workflowSchema } from './schemas/workflows';
-import { triggers } from './triggers';
-
-// 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

@@ -1,71 +0,0 @@
-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 resolvedCollection = getCollection(collection);
-
-  async function onConfirm({ item }) {
-    const template = item.template ? await getTemplateSchemaByMode(item) : null;
-    const result = {
-      type: 'void',
-      name: resolvedCollection.name,
-      title: resolvedCollection.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

@@ -1,152 +0,0 @@
-import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { observer, useField, useForm } from '@formily/react';
-import {
-  CollectionField,
-  CollectionProvider,
-  SchemaComponent,
-  Variable,
-  css,
-  useCollectionManager,
-  useCompile,
-  useToken,
-} 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} />;
-}
-
-// NOTE: observer for watching useProps
-const CollectionFieldSet = observer(
-  ({ value, disabled, onChange, filter }: any) => {
-    const { token } = useToken();
-    const { t } = useTranslation();
-    const compile = useCompile();
-    const form = useForm();
-    const { getCollection, getCollectionFields } = useCollectionManager();
-    const scope = useWorkflowVariableOptions();
-    const { values: config } = form;
-    const collectionName = config?.collection;
-    const collectionFields = getCollectionFields(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 style={{ color: token.colorText }}>{lang('Please select collection first')}</p>
-        )}
-      </fieldset>
-    );
-  },
-  { displayName: 'CollectionFieldSet' },
-);
-
-export default CollectionFieldSet;

package/src/client/components/Duration.tsx

@@ -1,45 +0,0 @@
-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

@@ -1,57 +0,0 @@
-import { onFieldInputValueChange, onFormInitialValuesChange } from '@formily/core';
-import { connect, mapReadPretty, observer, useField, 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 field = useField<any>();
-    // TODO(refactor): better to provide another context like useFieldset()
-    const form = useForm();
-    const basePath = field.path.segments.slice(0, -1);
-    const collectionPath = [...basePath, 'sourceCollection'].join('.');
-    const [collection, setCollection] = useState(form.getValuesIn(collectionPath));
-    const compile = useCompile();
-    const { getCollectionFields } = useCollectionManager();
-
-    useFormEffects(() => {
-      onFormInitialValuesChange((form) => {
-        setCollection(form.getValuesIn(collectionPath));
-      });
-      onFieldInputValueChange(collectionPath, (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

@@ -1,32 +0,0 @@
-import { observer, useForm } from '@formily/react';
-import { Select } from 'antd';
-import React from 'react';
-
-import { useCollectionManager, useCompile } from '@nocobase/client';
-
-function defaultFilter() {
-  return true;
-}
-
-export const FieldsSelect = observer(
-  (props: any) => {
-    const { filter = defaultFilter, ...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

@@ -1,15 +0,0 @@
-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

@@ -1,51 +0,0 @@
-import { createStyles, cx } from '@nocobase/client';
-import { Tag } from 'antd';
-import React from 'react';
-import { lang } from '../locale';
-
-const useStyles = createStyles(({ css, token }) => {
-  return {
-    container: css`
-      margin-bottom: 1.5em;
-      padding: 1em;
-      background-color: ${token.colorFillAlter};
-
-      > *:last-child {
-        margin-bottom: 0;
-      }
-
-      dl {
-        display: flex;
-
-        dt {
-          color: ${token.colorText};
-          &:after {
-            content: ':';
-            margin-right: 0.5em;
-          }
-        }
-      }
-
-      p {
-        color: ${token.colorTextDescription};
-      }
-    `,
-  };
-});
-
-export function NodeDescription(props) {
-  const { instruction } = props;
-  const { styles } = useStyles();
-
-  return (
-    <div className={cx(styles.container, props.className)}>
-      <dl>
-        <dt>{lang('Node type')}</dt>
-        <dd>
-          <Tag style={{ background: 'none' }}>{instruction.title}</Tag>
-        </dd>
-      </dl>
-      {instruction.description ? <p>{instruction.description}</p> : null}
-    </div>
-  );
-}

package/src/client/components/NullRender.tsx

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

package/src/client/components/OpenDrawer.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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>
-  );
-}