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

package/src/client/AddButton.tsx

@@ -1,111 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { cx, css, useAPIClient, useCompile } from '@nocobase/client';
-import { Button, Dropdown, MenuProps } from 'antd';
-import React, { useCallback, useMemo } from 'react';
-import { useFlowContext } from './FlowContext';
-import { NAMESPACE } from './locale';
-import { Instruction, instructions } from './nodes';
-import useStyles from './style';
-
-interface AddButtonProps {
-  upstream;
-  branchIndex?: number | null;
-}
-
-export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
-  const compile = useCompile();
-  const api = useAPIClient();
-  const { workflow, refresh } = useFlowContext() ?? {};
-  const instructionList = Array.from(instructions.getValues()) as Instruction[];
-  const { styles } = useStyles();
-
-  const groups = useMemo(() => {
-    return [
-      { key: 'control', label: `{{t("Control", { ns: "${NAMESPACE}" })}}` },
-      { key: 'collection', label: `{{t("Collection operations", { ns: "${NAMESPACE}" })}}` },
-      { key: 'manual', label: `{{t("Manual", { ns: "${NAMESPACE}" })}}` },
-      { key: 'extended', label: `{{t("Extended types", { ns: "${NAMESPACE}" })}}` },
-    ]
-      .filter((group) => instructionList.filter((item) => item.group === group.key).length)
-      .map((group) => {
-        const groupInstructions = instructionList.filter((item) => item.group === group.key);
-
-        return {
-          ...group,
-          type: 'group',
-          children: groupInstructions.map((item) => ({
-            key: item.type,
-            label: item.title,
-            type: item.options ? 'subMenu' : null,
-            children: item.options
-              ? item.options.map((option) => ({
-                  key: option.key,
-                  label: option.label,
-                }))
-              : null,
-          })),
-        };
-      });
-  }, [instructionList]);
-  const resource = useMemo(() => {
-    if (!workflow) {
-      return null;
-    }
-    return api.resource('workflows.nodes', workflow.id);
-  }, [workflow?.id]);
-  const onCreate = useCallback(
-    async ({ keyPath }) => {
-      const type = keyPath.pop();
-      const config = {};
-      const [optionKey] = keyPath;
-      const instruction = instructions.get(type);
-      if (optionKey) {
-        const { value } = instruction.options?.find((item) => item.key === optionKey) ?? {};
-        Object.assign(config, value);
-      }
-
-      if (resource) {
-        await resource.create({
-          values: {
-            type,
-            upstreamId: upstream?.id ?? null,
-            branchIndex,
-            title: compile(instruction.title),
-            config,
-          },
-        });
-        refresh();
-      }
-    },
-    [branchIndex, resource?.create, upstream?.id],
-  );
-
-  const menu = useMemo<MenuProps>(() => {
-    return {
-      onClick: onCreate,
-      items: compile(groups),
-    };
-  }, [groups, onCreate]);
-
-  if (!workflow) {
-    return null;
-  }
-
-  return (
-    <div className={styles.addButtonClass}>
-      <Dropdown
-        trigger={['click']}
-        menu={menu}
-        disabled={workflow.executed}
-        overlayClassName={css`
-          .ant-dropdown-menu-root{
-            max-height: 30em;
-            overflow-y: auto;
-          }
-        `}
-      >
-        <Button shape="circle" icon={<PlusOutlined />} />
-      </Dropdown>
-    </div>
-  );
-}

package/src/client/Branch.tsx

@@ -1,37 +0,0 @@
-import { cx } from '@nocobase/client';
-import React from 'react';
-import { AddButton } from './AddButton';
-import { Node } from './nodes';
-import useStyles from './style';
-
-export function Branch({
-  from = null,
-  entry = null,
-  branchIndex = null,
-  controller = null,
-}: {
-  from?: any;
-  entry?: any;
-  branchIndex?: number | null;
-  controller?: any;
-}) {
-  const { styles } = useStyles();
-
-  const list: any[] = [];
-  for (let node = entry; node; node = node.downstream) {
-    list.push(node);
-  }
-
-  return (
-    <div className={cx(styles.branchClass)}>
-      <div className="workflow-branch-lines" />
-      {controller}
-      <AddButton upstream={from} branchIndex={branchIndex} />
-      <div className="workflow-node-list">
-        {list.map((item) => (
-          <Node data={item} key={item.id} />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/client/CanvasContent.tsx

@@ -1,25 +0,0 @@
-import { cx } from '@nocobase/client';
-import { Tag } from 'antd';
-import React from 'react';
-import { Branch } from './Branch';
-import { lang } from './locale';
-import useStyles from './style';
-import { TriggerConfig } from './triggers';
-
-export function CanvasContent({ entry }) {
-  const { styles } = useStyles();
-
-  return (
-    <div className="workflow-canvas">
-      <TriggerConfig />
-      <div className={styles.branchBlockClass}>
-        <Branch entry={entry} />
-      </div>
-      <div className={cx('end', styles.nodeCardClass)}>
-        <div className={cx(styles.nodeMetaClass)}>
-          <Tag color="#333">{lang('End')}</Tag>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/client/ExecutionCanvas.tsx

@@ -1,166 +0,0 @@
-import {
-  ActionContextProvider,
-  css,
-  SchemaComponent,
-  useCompile,
-  useDocumentTitle,
-  useResourceActionContext,
-} from '@nocobase/client';
-import { str2moment } from '@nocobase/utils/client';
-import { Breadcrumb, Tag } from 'antd';
-import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { CanvasContent } from './CanvasContent';
-import { ExecutionStatusOptionsMap, JobStatusOptions } from './constants';
-import { FlowContext, useFlowContext } from './FlowContext';
-import { lang, NAMESPACE } from './locale';
-import { instructions } from './nodes';
-import useStyles from './style';
-import { linkNodes } from './utils';
-
-function attachJobs(nodes, jobs: any[] = []): void {
-  const nodesMap = new Map();
-  nodes.forEach((item) => {
-    item.jobs = [];
-    nodesMap.set(item.id, item);
-  });
-  jobs.forEach((item) => {
-    const node = nodesMap.get(item.nodeId);
-    node.jobs.push(item);
-    item.node = {
-      id: node.id,
-      title: node.title,
-      type: node.type,
-    };
-  });
-  nodes.forEach((item) => {
-    item.jobs = item.jobs.sort((a, b) => a.id - b.id);
-  });
-}
-
-function JobModal() {
-  const compile = useCompile();
-  const { viewJob: job, setViewJob } = useFlowContext();
-  const { styles } = useStyles();
-
-  const { node = {} } = job ?? {};
-  const instruction = instructions.get(node.type);
-
-  return (
-    <ActionContextProvider value={{ visible: Boolean(job), setVisible: setViewJob }}>
-      <SchemaComponent
-        schema={{
-          type: 'void',
-          properties: {
-            [`${job?.id}-modal`]: {
-              type: 'void',
-              'x-decorator': 'Form',
-              'x-decorator-props': {
-                initialValue: job,
-              },
-              'x-component': 'Action.Modal',
-              title: (
-                <div className={styles.nodeTitleClass}>
-                  <Tag>{compile(instruction?.title)}</Tag>
-                  <strong>{node.title}</strong>
-                  <span className="workflow-node-id">#{node.id}</span>
-                </div>
-              ),
-              properties: {
-                status: {
-                  type: 'number',
-                  title: `{{t("Status", { ns: "${NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Select',
-                  enum: JobStatusOptions,
-                  'x-read-pretty': true,
-                },
-                updatedAt: {
-                  type: 'string',
-                  title: `{{t("Executed at", { ns: "${NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'DatePicker',
-                  'x-component-props': {
-                    showTime: true,
-                  },
-                  'x-read-pretty': true,
-                },
-                result: {
-                  type: 'object',
-                  title: `{{t("Node result", { ns: "${NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.JSON',
-                  'x-component-props': {
-                    className: css`
-                      padding: 1em;
-                      background-color: #eee;
-                    `,
-                  },
-                  'x-read-pretty': true,
-                },
-              },
-            },
-          },
-        }}
-      />
-    </ActionContextProvider>
-  );
-}
-
-export function ExecutionCanvas() {
-  const compile = useCompile();
-  const { data, loading } = useResourceActionContext();
-  const { setTitle } = useDocumentTitle();
-  const [viewJob, setViewJob] = useState(null);
-  useEffect(() => {
-    const { workflow } = data?.data ?? {};
-    setTitle?.(`${workflow?.title ? `${workflow.title} - ` : ''}${lang('Execution history')}`);
-  }, [data?.data]);
-
-  if (!data?.data) {
-    if (loading) {
-      return <div>{lang('Loading')}</div>;
-    } else {
-      return <div>{lang('Load failed')}</div>;
-    }
-  }
-
-  const { jobs = [], workflow: { nodes = [], revisions = [], ...workflow } = {}, ...execution } = data?.data ?? {};
-
-  linkNodes(nodes);
-  attachJobs(nodes, jobs);
-
-  const entry = nodes.find((item) => !item.upstream);
-
-  const statusOption = ExecutionStatusOptionsMap[execution.status];
-
-  return (
-    <FlowContext.Provider
-      value={{
-        workflow: workflow.type ? workflow : null,
-        nodes,
-        execution,
-        viewJob,
-        setViewJob,
-      }}
-    >
-      <div className="workflow-toolbar">
-        <header>
-          <Breadcrumb
-            items={[
-              { title: <Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link> },
-              { title: <Link to={`/admin/settings/workflow/workflows/${workflow.id}`}>{workflow.title}</Link> },
-              { title: <strong>{`#${execution.id}`}</strong> },
-            ]}
-          />
-        </header>
-        <aside>
-          <Tag color={statusOption.color}>{compile(statusOption.label)}</Tag>
-          <time>{str2moment(execution.updatedAt).format('YYYY-MM-DD HH:mm:ss')}</time>
-        </aside>
-      </div>
-      <CanvasContent entry={entry} />
-      <JobModal />
-    </FlowContext.Provider>
-  );
-}

package/src/client/ExecutionLink.tsx

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

package/src/client/ExecutionPage.tsx

@@ -1,45 +0,0 @@
-import { cx, SchemaComponent } from '@nocobase/client';
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { ExecutionCanvas } from './ExecutionCanvas';
-import useStyles from './style';
-
-export const ExecutionPage = () => {
-  const params = useParams<any>();
-  const { styles } = useStyles();
-
-  return (
-    <div className={cx(styles.workflowPageClass)}>
-      <SchemaComponent
-        schema={{
-          type: 'void',
-          properties: {
-            [`execution_${params.id}`]: {
-              type: 'void',
-              'x-decorator': 'ResourceActionProvider',
-              'x-decorator-props': {
-                collection: {
-                  name: 'executions',
-                  fields: [],
-                },
-                resourceName: 'executions',
-                request: {
-                  resource: 'executions',
-                  action: 'get',
-                  params: {
-                    filter: params,
-                    appends: ['jobs', 'workflow', 'workflow.nodes'],
-                  },
-                },
-              },
-              'x-component': 'ExecutionCanvas',
-            },
-          },
-        }}
-        components={{
-          ExecutionCanvas,
-        }}
-      />
-    </div>
-  );
-};

package/src/client/ExecutionResourceProvider.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ResourceActionProvider, useRecord } from '@nocobase/client';
-
-export const ExecutionResourceProvider = ({ request, filter = {}, ...others }) => {
-  const workflow = useRecord();
-  const props = {
-    ...others,
-    request: {
-      ...request,
-      params: {
-        ...request?.params,
-        filter: {
-          ...request?.params?.filter,
-          key: workflow.key,
-        },
-      },
-    },
-  };
-
-  return <ResourceActionProvider {...props} />;
-};

package/src/client/FlowContext.ts

@@ -1,7 +0,0 @@
-import React, { useContext } from 'react';
-
-export const FlowContext = React.createContext<any>({});
-
-export function useFlowContext() {
-  return useContext(FlowContext);
-}

package/src/client/WorkflowCanvas.tsx

@@ -1,221 +0,0 @@
-import { DownOutlined, EllipsisOutlined, RightOutlined } from '@ant-design/icons';
-import {
-  ActionContextProvider,
-  ResourceActionProvider,
-  SchemaComponent,
-  cx,
-  useDocumentTitle,
-  useResourceActionContext,
-  useResourceContext,
-} from '@nocobase/client';
-import { App, Breadcrumb, Button, Dropdown, Switch, message } from 'antd';
-import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
-import { CanvasContent } from './CanvasContent';
-import { ExecutionLink } from './ExecutionLink';
-import { FlowContext, useFlowContext } from './FlowContext';
-import { lang } from './locale';
-import { executionSchema } from './schemas/executions';
-import useStyles from './style';
-import { linkNodes } from './utils';
-
-function ExecutionResourceProvider({ request, filter = {}, ...others }) {
-  const { workflow } = useFlowContext();
-  const props = {
-    ...others,
-    request: {
-      ...request,
-      params: {
-        ...request?.params,
-        filter: {
-          ...request?.params?.filter,
-          key: workflow.key,
-        },
-      },
-    },
-  };
-
-  return <ResourceActionProvider {...props} />;
-}
-
-export function WorkflowCanvas() {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { data, refresh, loading } = useResourceActionContext();
-  const { resource } = useResourceContext();
-  const { setTitle } = useDocumentTitle();
-  const [visible, setVisible] = useState(false);
-  const { styles } = useStyles();
-  const { modal } = App.useApp();
-
-  useEffect(() => {
-    const { title } = data?.data ?? {};
-    setTitle?.(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
-  }, [data?.data]);
-
-  if (!data?.data) {
-    return <div>{loading ? lang('Loading') : lang('Load failed')}</div>;
-  }
-
-  const { nodes = [], revisions = [], ...workflow } = data?.data ?? {};
-  linkNodes(nodes);
-
-  const entry = nodes.find((item) => !item.upstream);
-
-  function onSwitchVersion({ key }) {
-    if (key != workflow.id) {
-      navigate(`/admin/settings/workflow/workflows/${key}`);
-    }
-  }
-
-  async function onToggle(value) {
-    await resource.update({
-      filterByTk: workflow.id,
-      values: {
-        enabled: value,
-      },
-    });
-    refresh();
-  }
-
-  async function onRevision() {
-    const {
-      data: { data: revision },
-    } = await resource.revision({
-      filterByTk: workflow.id,
-      filter: {
-        key: workflow.key,
-      },
-    });
-    message.success(t('Operation succeeded'));
-
-    navigate(`/admin/settings/workflow/workflows/${revision.id}`);
-  }
-
-  async function onDelete() {
-    const content = workflow.current
-      ? lang('Delete a main version will cause all other revisions to be deleted too.')
-      : '';
-    modal.confirm({
-      title: t('Are you sure you want to delete it?'),
-      content,
-      async onOk() {
-        await resource.destroy({
-          filterByTk: workflow.id,
-        });
-        message.success(t('Operation succeeded'));
-
-        navigate(
-          workflow.current
-            ? '/admin/settings/workflow/workflows'
-            : `/admin/settings/workflow/workflows/${revisions.find((item) => item.current)?.id}`,
-        );
-      },
-    });
-  }
-
-  async function onMenuCommand({ key }) {
-    switch (key) {
-      case 'history':
-        setVisible(true);
-        return;
-      case 'revision':
-        return onRevision();
-      case 'delete':
-        return onDelete();
-      default:
-        break;
-    }
-  }
-
-  const revisionable =
-    workflow.executed &&
-    !revisions.find((item) => !item.executed && new Date(item.createdAt) > new Date(workflow.createdAt));
-
-  return (
-    <FlowContext.Provider
-      value={{
-        workflow,
-        nodes,
-        refresh,
-      }}
-    >
-      <div className="workflow-toolbar">
-        <header>
-          <Breadcrumb
-            items={[
-              { title: <Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link> },
-              { title: <strong>{workflow.title}</strong> },
-            ]}
-          />
-        </header>
-        <aside>
-          <div className="workflow-versions">
-            <Dropdown
-              trigger={['click']}
-              menu={{
-                onClick: onSwitchVersion,
-                defaultSelectedKeys: [`${workflow.id}`],
-                className: cx(styles.workflowVersionDropdownClass),
-                items: revisions
-                  .sort((a, b) => b.id - a.id)
-                  .map((item, index) => ({
-                    key: `${item.id}`,
-                    icon: item.current ? <RightOutlined /> : null,
-                    label: (
-                      <span
-                        className={classnames({
-                          executed: item.executed,
-                          unexecuted: !item.executed,
-                          enabled: item.enabled,
-                        })}
-                      >
-                        <strong>{`#${item.id}`}</strong>
-                        <time>{new Date(item.createdAt).toLocaleString()}</time>
-                      </span>
-                    ),
-                  })),
-              }}
-            >
-              <Button type="text">
-                <label>{lang('Version')}</label>
-                <span>{workflow?.id ? `#${workflow.id}` : null}</span>
-                <DownOutlined />
-              </Button>
-            </Dropdown>
-          </div>
-          <Switch
-            checked={workflow.enabled}
-            onChange={onToggle}
-            checkedChildren={lang('On')}
-            unCheckedChildren={lang('Off')}
-          />
-          <Dropdown
-            menu={{
-              items: [
-                { key: 'history', label: lang('Execution history'), disabled: !workflow.allExecuted },
-                { key: 'revision', label: lang('Copy to new version'), disabled: !revisionable },
-                { key: 'delete', label: t('Delete') },
-              ],
-              onClick: onMenuCommand,
-            }}
-          >
-            <Button type="text" icon={<EllipsisOutlined />} />
-          </Dropdown>
-          <ActionContextProvider value={{ visible, setVisible }}>
-            <SchemaComponent
-              schema={executionSchema}
-              components={{
-                ExecutionResourceProvider,
-                ExecutionLink,
-              }}
-            />
-          </ActionContextProvider>
-        </aside>
-      </div>
-      <CanvasContent entry={entry} />
-    </FlowContext.Provider>
-  );
-}

package/src/client/WorkflowLink.tsx

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