@nocobase/plugin-workflow 0.10.1-alpha.1 → 0.11.1-alpha.1

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 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

@@ -0,0 +1,160 @@
+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} />;
+}
+
+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 { token } = useToken();
+    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 style={{ color: token.colorText }}>{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,32 @@
+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

@@ -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,51 @@
+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

@@ -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>
+  );
+}

package/src/client/components/ValueBlock.tsx

@@ -0,0 +1,67 @@
+import { useFieldSchema } from '@formily/react';
+import { css, SchemaInitializer } from '@nocobase/client';
+import { parse } from '@nocobase/utils/client';
+import React from 'react';
+import { useFlowContext } from '../FlowContext';
+
+export const ValueBlock: (() => JSX.Element) & {
+  Initializer: (props) => JSX.Element;
+  Result: (props) => JSX.Element;
+} = () => {
+  return null;
+};
+
+function Initializer({ node, resultTitle, insert, ...props }) {
+  return (
+    <SchemaInitializer.Item
+      {...props}
+      onClick={() => {
+        insert({
+          type: 'void',
+          name: node.id,
+          title: node.title,
+          'x-component': 'CardItem',
+          'x-component-props': {
+            title: node.title ?? `#${node.id}`,
+          },
+          'x-designer': 'SimpleDesigner',
+          properties: {
+            result: {
+              type: 'void',
+              title: resultTitle,
+              'x-component': 'ValueBlock.Result',
+              'x-component-props': {
+                // NOTE: as same format as other reference for migration of revision
+                dataSource: `{{$jobsMapByNodeId.${node.id}}}`,
+              },
+            },
+          },
+        });
+      }}
+    />
+  );
+}
+
+function Result({ dataSource }) {
+  const field = useFieldSchema();
+  const { execution } = useFlowContext();
+  if (!execution) {
+    return field.title;
+  }
+  const result = parse(dataSource)({
+    $jobsMapByNodeId: (execution.jobs ?? []).reduce((map, job) => Object.assign(map, { [job.nodeId]: job.result }), {}),
+  });
+
+  return (
+    <pre
+      className={css`
+        margin: 0;
+      `}
+    >
+      {JSON.stringify(result, null, 2)}
+    </pre>
+  );
+}
+
+ValueBlock.Initializer = Initializer;
+ValueBlock.Result = Result;

package/src/client/components/renderEngineReference.tsx

@@ -0,0 +1,30 @@
+import { css, i18n } from '@nocobase/client';
+import { evaluators } from '@nocobase/evaluators/client';
+import React from 'react';
+
+export const renderEngineReference = (key: string) => {
+  const engine = evaluators.get(key);
+  if (!engine) {
+    return null;
+  }
+
+  return engine.link ? (
+    <>
+      <span
+        className={css`
+          &:after {
+            content: ':';
+          }
+          & + a {
+            margin-left: 0.25em;
+          }
+        `}
+      >
+        {i18n.t('Syntax references')}
+      </span>
+      <a href={engine.link} target="_blank" rel="noreferrer">
+        {engine.label}
+      </a>
+    </>
+  ) : null;
+};

package/src/client/constants.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+  CloseOutlined,
+  ClockCircleOutlined,
+  CheckOutlined,
+  MinusOutlined,
+  ExclamationOutlined,
+} from '@ant-design/icons';
+import { NAMESPACE } from './locale';
+
+export const EXECUTION_STATUS = {
+  QUEUEING: null,
+  STARTED: 0,
+  RESOLVED: 1,
+  FAILED: -1,
+  ERROR: -2,
+  ABORTED: -3,
+  CANCELED: -4,
+  REJECTED: -5,
+};
+
+export const ExecutionStatusOptions = [
+  { value: EXECUTION_STATUS.QUEUEING, label: `{{t("Queueing", { ns: "${NAMESPACE}" })}}`, color: 'blue' },
+  { value: EXECUTION_STATUS.STARTED, label: `{{t("On going", { ns: "${NAMESPACE}" })}}`, color: 'gold' },
+  { value: EXECUTION_STATUS.RESOLVED, label: `{{t("Resolved", { ns: "${NAMESPACE}" })}}`, color: 'green' },
+  { value: EXECUTION_STATUS.FAILED, label: `{{t("Failed", { ns: "${NAMESPACE}" })}}`, color: 'red' },
+  { value: EXECUTION_STATUS.ERROR, label: `{{t("Error", { ns: "${NAMESPACE}" })}}`, color: 'red' },
+  { value: EXECUTION_STATUS.ABORTED, label: `{{t("Aborted", { ns: "${NAMESPACE}" })}}`, color: 'red' },
+  { value: EXECUTION_STATUS.CANCELED, label: `{{t("Canceled", { ns: "${NAMESPACE}" })}}`, color: 'volcano' },
+  { value: EXECUTION_STATUS.REJECTED, label: `{{t("Rejected", { ns: "${NAMESPACE}" })}}`, color: 'volcano' },
+];
+
+export const ExecutionStatusOptionsMap = ExecutionStatusOptions.reduce(
+  (map, option) => Object.assign(map, { [option.value as number]: option }),
+  {},
+);
+
+export const JOB_STATUS = {
+  PENDING: 0,
+  RESOLVED: 1,
+  FAILED: -1,
+  ERROR: -2,
+  ABORTED: -3,
+  CANCELED: -4,
+  REJECTED: -5,
+};
+
+export const JobStatusOptions = [
+  {
+    value: JOB_STATUS.PENDING,
+    label: `{{t("Pending", { ns: "${NAMESPACE}" })}}`,
+    color: 'gold',
+    icon: <ClockCircleOutlined />,
+  },
+  {
+    value: JOB_STATUS.RESOLVED,
+    label: `{{t("Resolved", { ns: "${NAMESPACE}" })}}`,
+    color: 'green',
+    icon: <CheckOutlined />,
+  },
+  {
+    value: JOB_STATUS.FAILED,
+    label: `{{t("Failed", { ns: "${NAMESPACE}" })}}`,
+    color: 'red',
+    icon: <ExclamationOutlined />,
+  },
+  { value: JOB_STATUS.ERROR, label: `{{t("Error", { ns: "${NAMESPACE}" })}}`, color: 'red', icon: <CloseOutlined /> },
+  {
+    value: JOB_STATUS.ABORTED,
+    label: `{{t("Aborted", { ns: "${NAMESPACE}" })}}`,
+    color: 'red',
+    icon: <MinusOutlined rotate={90} />,
+  },
+  {
+    value: JOB_STATUS.CANCELED,
+    label: `{{t("Canceled", { ns: "${NAMESPACE}" })}}`,
+    color: 'volcano',
+    icon: <MinusOutlined rotate={45} />,
+  },
+  {
+    value: JOB_STATUS.REJECTED,
+    label: `{{t("Rejected", { ns: "${NAMESPACE}" })}}`,
+    color: 'volcano',
+    icon: <MinusOutlined />,
+  },
+];
+
+export const JobStatusOptionsMap = JobStatusOptions.reduce(
+  (map, option) => Object.assign(map, { [option.value]: option }),
+  {},
+);