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

package/src/client/schemas/workflows.ts

@@ -0,0 +1,364 @@
+import { ISchema } from '@formily/react';
+import { message } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useRecord, useResourceActionContext, useResourceContext } from '@nocobase/client';
+import { NAMESPACE } from '../locale';
+import { triggers } from '../triggers';
+import { executionSchema } from './executions';
+
+const collection = {
+  name: 'workflows',
+  fields: [
+    {
+      type: 'string',
+      name: 'title',
+      interface: 'input',
+      uiSchema: {
+        title: '{{t("Name")}}',
+        type: 'string',
+        'x-component': 'Input',
+        required: true,
+      } as ISchema,
+    },
+    {
+      type: 'string',
+      name: 'type',
+      interface: 'select',
+      uiSchema: {
+        title: `{{t("Trigger type", { ns: "${NAMESPACE}" })}}`,
+        type: 'string',
+        'x-component': 'Select',
+        'x-decorator': 'FormItem',
+        enum: Array.from(triggers.getEntities()).map(([value, { title }]) => ({
+          value,
+          label: title,
+          color: 'gold',
+        })),
+        required: true,
+      } as ISchema,
+    },
+    {
+      type: 'string',
+      name: 'description',
+      interface: 'textarea',
+      uiSchema: {
+        title: '{{t("Description")}}',
+        type: 'string',
+        'x-component': 'Input.TextArea',
+      } as ISchema,
+    },
+    {
+      type: 'boolean',
+      name: 'enabled',
+      interface: 'radio',
+      uiSchema: {
+        title: `{{t("Status", { ns: "${NAMESPACE}" })}}`,
+        type: 'string',
+        enum: [
+          { label: `{{t("On", { ns: "${NAMESPACE}" })}}`, value: true, color: '#52c41a' },
+          { label: `{{t("Off", { ns: "${NAMESPACE}" })}}`, value: false },
+        ],
+        'x-component': 'Radio.Group',
+        'x-decorator': 'FormItem',
+        default: false,
+      } as ISchema,
+    },
+    {
+      type: 'number',
+      name: 'allExecuted',
+      interface: 'integer',
+      uiSchema: {
+        title: `{{t("Executed", { ns: "${NAMESPACE}" })}}`,
+        type: 'number',
+        'x-component': 'InputNumber',
+        'x-decorator': 'FormItem',
+      } as ISchema,
+    },
+  ],
+};
+
+export const workflowSchema: ISchema = {
+  type: 'void',
+  properties: {
+    provider: {
+      type: 'void',
+      'x-decorator': 'ResourceActionProvider',
+      'x-decorator-props': {
+        collection,
+        resourceName: 'workflows',
+        request: {
+          resource: 'workflows',
+          action: 'list',
+          params: {
+            pageSize: 20,
+            filter: {
+              current: true,
+            },
+            sort: ['-createdAt'],
+            except: ['config'],
+          },
+        },
+      },
+      'x-component': 'CollectionProvider',
+      'x-component-props': {
+        collection,
+      },
+      properties: {
+        actions: {
+          type: 'void',
+          'x-component': 'ActionBar',
+          'x-component-props': {
+            style: {
+              marginBottom: 16,
+            },
+          },
+          properties: {
+            delete: {
+              type: 'void',
+              title: '{{t("Delete")}}',
+              'x-component': 'Action',
+              'x-component-props': {
+                useAction: '{{ cm.useBulkDestroyAction }}',
+                confirm: {
+                  title: "{{t('Delete record')}}",
+                  content: "{{t('Are you sure you want to delete it?')}}",
+                },
+              },
+            },
+            create: {
+              type: 'void',
+              title: '{{t("Add new")}}',
+              'x-component': 'Action',
+              'x-component-props': {
+                type: 'primary',
+              },
+              properties: {
+                drawer: {
+                  type: 'void',
+                  'x-component': 'Action.Drawer',
+                  'x-decorator': 'Form',
+                  'x-decorator-props': {
+                    initialValue: {
+                      current: true,
+                    },
+                  },
+                  title: '{{t("Add new")}}',
+                  properties: {
+                    title: {
+                      'x-component': 'CollectionField',
+                      'x-decorator': 'FormItem',
+                    },
+                    type: {
+                      'x-component': 'CollectionField',
+                      'x-decorator': 'FormItem',
+                    },
+                    description: {
+                      'x-component': 'CollectionField',
+                      'x-decorator': 'FormItem',
+                    },
+                    footer: {
+                      type: 'void',
+                      'x-component': 'Action.Drawer.Footer',
+                      properties: {
+                        cancel: {
+                          title: '{{ t("Cancel") }}',
+                          'x-component': 'Action',
+                          'x-component-props': {
+                            useAction: '{{ cm.useCancelAction }}',
+                          },
+                        },
+                        submit: {
+                          title: '{{ t("Submit") }}',
+                          'x-component': 'Action',
+                          'x-component-props': {
+                            type: 'primary',
+                            useAction: '{{ cm.useCreateAction }}',
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        table: {
+          type: 'void',
+          'x-component': 'Table.Void',
+          'x-component-props': {
+            rowKey: 'id',
+            rowSelection: {
+              type: 'checkbox',
+            },
+            useDataSource: '{{ cm.useDataSourceFromRAC }}',
+          },
+          properties: {
+            title: {
+              type: 'void',
+              'x-decorator': 'Table.Column.Decorator',
+              'x-component': 'Table.Column',
+              properties: {
+                title: {
+                  type: 'string',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+            type: {
+              type: 'void',
+              'x-decorator': 'Table.Column.Decorator',
+              'x-component': 'Table.Column',
+              properties: {
+                type: {
+                  type: 'string',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+            enabled: {
+              type: 'void',
+              'x-decorator': 'Table.Column.Decorator',
+              'x-component': 'Table.Column',
+              properties: {
+                enabled: {
+                  type: 'boolean',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                  default: false,
+                },
+              },
+            },
+            allExecuted: {
+              type: 'void',
+              'x-decorator': 'Table.Column.Decorator',
+              'x-component': 'Table.Column',
+              properties: {
+                allExecuted: {
+                  type: 'number',
+                  'x-decorator': 'OpenDrawer',
+                  'x-decorator-props': {
+                    component: 'a',
+                  },
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                  properties: {
+                    drawer: executionSchema,
+                  },
+                },
+              },
+            },
+            actions: {
+              type: 'void',
+              title: '{{ t("Actions") }}',
+              'x-component': 'Table.Column',
+              properties: {
+                actions: {
+                  type: 'void',
+                  'x-component': 'Space',
+                  'x-component-props': {
+                    split: '|',
+                  },
+                  properties: {
+                    config: {
+                      type: 'void',
+                      'x-component': 'WorkflowLink',
+                    },
+                    update: {
+                      type: 'void',
+                      title: '{{ t("Edit") }}',
+                      'x-component': 'Action.Link',
+                      'x-component-props': {
+                        type: 'primary',
+                      },
+                      properties: {
+                        drawer: {
+                          type: 'void',
+                          'x-component': 'Action.Drawer',
+                          'x-decorator': 'Form',
+                          'x-decorator-props': {
+                            useValues: '{{ cm.useValuesFromRecord }}',
+                          },
+                          title: '{{ t("Edit") }}',
+                          properties: {
+                            title: {
+                              'x-component': 'CollectionField',
+                              'x-decorator': 'FormItem',
+                            },
+                            enabled: {
+                              'x-component': 'CollectionField',
+                              'x-decorator': 'FormItem',
+                            },
+                            description: {
+                              'x-component': 'CollectionField',
+                              'x-decorator': 'FormItem',
+                            },
+                            footer: {
+                              type: 'void',
+                              'x-component': 'Action.Drawer.Footer',
+                              properties: {
+                                cancel: {
+                                  title: '{{ t("Cancel") }}',
+                                  'x-component': 'Action',
+                                  'x-component-props': {
+                                    useAction: '{{ cm.useCancelAction }}',
+                                  },
+                                },
+                                submit: {
+                                  title: '{{ t("Submit") }}',
+                                  'x-component': 'Action',
+                                  'x-component-props': {
+                                    type: 'primary',
+                                    useAction: '{{ cm.useUpdateAction }}',
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                    revision: {
+                      type: 'void',
+                      title: `{{t("Duplicate", { ns: "${NAMESPACE}" })}}`,
+                      'x-component': 'Action.Link',
+                      'x-component-props': {
+                        useAction() {
+                          const { t } = useTranslation();
+                          const { refresh } = useResourceActionContext();
+                          const { resource, targetKey } = useResourceContext();
+                          const { [targetKey]: filterByTk } = useRecord();
+                          return {
+                            async run() {
+                              await resource.revision({ filterByTk });
+                              message.success(t('Operation succeeded'));
+                              refresh();
+                            },
+                          };
+                        },
+                      },
+                    },
+                    // delete: {
+                    //   type: 'void',
+                    //   title: '{{ t("Delete") }}',
+                    //   'x-component': 'Action.Link',
+                    //   'x-component-props': {
+                    //     confirm: {
+                    //       title: "{{t('Delete record')}}",
+                    //       content: "{{t('Are you sure you want to delete it?')}}",
+                    //     },
+                    //     useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
+                    //   },
+                    // },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/style.tsx

@@ -0,0 +1,347 @@
+import { createStyles } from '@nocobase/client';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    workflowPageClass: css`
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      .workflow-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        padding: 0.5rem 1rem;
+        background: ${token.colorBgContainer};
+        border-bottom: 1px solid ${token.colorBorder};
+
+        header {
+          display: flex;
+          align-items: center;
+          min-height: 2rem;
+        }
+
+        aside {
+          display: flex;
+          align-items: center;
+          gap: 0.5em;
+        }
+
+        .workflow-versions {
+          label {
+            margin-right: 0.5em;
+          }
+        }
+      }
+
+      .workflow-canvas {
+        flex-grow: 1;
+        overflow: auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2em;
+
+        .end {
+          cursor: default;
+
+          &:hover {
+            box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+    `,
+
+    workflowVersionDropdownClass: css`
+      .ant-dropdown-menu-item {
+        .ant-dropdown-menu-title-content {
+          text-align: right;
+
+          time {
+            margin-left: 0.5rem;
+            color: ${token.colorText};
+            font-size: 80%;
+          }
+
+          strong {
+            font-weight: normal;
+          }
+
+          > .enabled {
+            strong {
+              font-weight: bold;
+            }
+          }
+
+          > .unexecuted {
+            strong {
+              font-style: italic;
+            }
+          }
+        }
+      }
+    `,
+
+    branchBlockClass: css`
+      display: flex;
+      position: relative;
+
+      :before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: calc(50% - 0.5px);
+        width: 1px;
+        background-color: ${token.colorBorder};
+      }
+    `,
+
+    branchClass: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      min-width: 20em;
+      padding: 0 2em;
+
+      .workflow-node-list {
+        flex-grow: 1;
+      }
+
+      .workflow-branch-lines {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: ${token.colorBorder};
+      }
+
+      :before,
+      :after {
+        content: '';
+        position: absolute;
+        height: 1px;
+        background-color: ${token.colorBorder};
+      }
+
+      :before {
+        top: 0;
+      }
+
+      :after {
+        bottom: 0;
+      }
+
+      :not(:first-child):not(:last-child) {
+        :before,
+        :after {
+          left: 0;
+          width: 100%;
+        }
+      }
+
+      :last-child:not(:first-child) {
+        :before,
+        :after {
+          right: 50%;
+          width: 50%;
+        }
+      }
+
+      :first-child:not(:last-child) {
+        :before,
+        :after {
+          left: 50%;
+          width: 50%;
+        }
+      }
+    `,
+
+    nodeBlockClass: css`
+      flex-grow: 1;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    `,
+
+    nodeClass: css`
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    `,
+
+    nodeCardClass: css`
+      position: relative;
+      width: 20em;
+      background: ${token.colorBgContainer};
+      padding: 1em;
+      box-shadow: ${token.boxShadowTertiary};
+      border-radius: ${token.borderRadiusLG}px;
+      cursor: pointer;
+      transition: box-shadow 0.3s ease;
+
+      &:hover {
+        box-shadow: ${token.boxShadow};
+
+        .workflow-node-remove-button {
+          opacity: 1;
+        }
+      }
+
+      &.configuring {
+        box-shadow: ${token.boxShadow};
+      }
+
+      .workflow-node-remove-button {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: ${token.colorText};
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        &[disabled] {
+          display: none;
+        }
+
+        &:hover {
+          color: ${token.colorErrorHover};
+        }
+      }
+
+      .ant-input {
+        font-weight: bold;
+
+        &:not(:focus) {
+          transition: background-color 0.3s ease, border-color 0.3s ease;
+          border-color: ${token.colorBorderBg};
+          background-color: ${token.colorBgContainerDisabled};
+
+          &:not(:disabled):hover {
+            border-color: ${token.colorPrimaryBorderHover};
+          }
+
+          &:disabled:hover {
+            border-color: ${token.colorBorderBg};
+          }
+        }
+      }
+
+      .workflow-node-config-button {
+        padding: 0;
+      }
+
+      &:hover {
+        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
+
+        .workflow-node-remove-button {
+          opacity: 1;
+        }
+      }
+    `,
+
+    nodeJobButtonClass: css`
+      display: flex;
+      position: absolute;
+      top: calc(1em - 1px);
+      right: 1em;
+      justify-content: center;
+      align-items: center;
+      color: ${token.colorText};
+
+      &[type='button'] {
+        border: none;
+      }
+
+      &.inner {
+        position: static;
+      }
+
+      .ant-tag {
+        padding: 0;
+        width: ${token.sizeLG}px;
+        height: ${token.sizeLG}px;
+        line-height: ${token.sizeLG}px;
+        margin-right: 0;
+        border-radius: 50%;
+        text-align: center;
+      }
+    `,
+
+    nodeHeaderClass: css`
+      position: relative;
+    `,
+
+    nodeMetaClass: css`
+      margin-bottom: 0.5em;
+
+      .workflow-node-id {
+        color: ${token.colorTextDescription};
+
+        &:before {
+          content: '#';
+        }
+      }
+    `,
+
+    nodeTitleClass: css`
+      display: flex;
+      align-items: center;
+      font-weight: normal;
+      .workflow-node-id {
+        color: ${token.colorTextDescription};
+      }
+    `,
+
+    nodeSubtreeClass: css`
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+    `,
+
+    addButtonClass: css`
+      flex-shrink: 0;
+      padding: 2em 0;
+
+      > .ant-btn {
+        &:disabled {
+          visibility: hidden;
+        }
+      }
+    `,
+
+    conditionClass: css`
+      position: relative;
+      height: 2em;
+      overflow: visible;
+
+      > span {
+        position: absolute;
+        top: calc(1.5em - 1px);
+        line-height: 1em;
+        color: ${token.colorTextSecondary};
+        padding: 1px;
+      }
+    `,
+
+    loopLineClass: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2em;
+      height: 6em;
+    `,
+  };
+});
+
+export default useStyles;