refactor(plugin-workflow): adjust style (#1079)

packages/plugins/workflow/src/client/ExecutionCanvas.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { Tag } from 'antd';
+import { Tag, Breadcrumb } from 'antd';
 import { cx } from '@emotion/css';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import {
@@ -21,7 +20,7 @@ import { lang } from './locale';
 
 
 
-function makeNodes(nodes, jobs = []): void {
+function makeNodes(nodes, jobs: any[] = []): void {
   const nodesMap = new Map();
   nodes.forEach(item => nodesMap.set(item.id, item));
   const jobsMap = new Map();
@@ -47,7 +46,7 @@ export function ExecutionCanvas() {
   const { setTitle } = useDocumentTitle();
   useEffect(() => {
     const { workflow } = data?.data ?? {};
-    setTitle(`${workflow?.title ? `${workflow.title} - ` : ''}${lang('Execution history')}`);
+    setTitle?.(`${workflow?.title ? `${workflow.title} - ` : ''}${lang('Execution history')}`);
   }, [data?.data]);
 
   if (!data?.data) {
@@ -78,17 +77,17 @@ export function ExecutionCanvas() {
     }}>
       <div className="workflow-toolbar">
         <header>
-          <span>
+          <Breadcrumb>
-            <Link to={`/admin/settings/workflow/workflows`}>
+            <Breadcrumb.Item>
-              {lang('Workflow')}
+              <Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link>
-            </Link>
+            </Breadcrumb.Item>
-          </span>
+            <Breadcrumb.Item>
-          <span>
+              <Link to={`/admin/settings/workflow/workflows/${workflow.id}`}>{workflow.title}</Link>
-            <Link to={`/admin/settings/workflow/workflows/${workflow.id}`}>
+            </Breadcrumb.Item>
-              {workflow.title}
+            <Breadcrumb.Item>
-            </Link>
+              <strong>{`#${execution.id}`}</strong>
-          </span>
+            </Breadcrumb.Item>
-          <strong>{`#${execution.id}`}</strong>
+          </Breadcrumb>
         </header>
         <aside>
           <Tag color={statusOption.color}>{compile(statusOption.label)}</Tag>

packages/plugins/workflow/src/client/FlowContext.ts

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

packages/plugins/workflow/src/client/WorkflowCanvas.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { Dropdown, Menu, Button, Tag, Switch, message } from 'antd';
+import { Dropdown, Menu, Button, Tag, Switch, message, Breadcrumb } from 'antd';
 import { DownOutlined, RightOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { cx } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
@@ -48,7 +48,7 @@ export function WorkflowCanvas() {
   const [visible, setVisible] = useState(false);
   useEffect(() => {
     const { title } = data?.data ?? {};
-    setTitle(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
+    setTitle?.(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
   }, [data?.data]);
 
   if (!data?.data && !loading) {
@@ -111,27 +111,30 @@ export function WorkflowCanvas() {
     }}>
       <div className="workflow-toolbar">
         <header>
-          <span>
+          <Breadcrumb>
-            <Link to={`/admin/settings/workflow/workflows`}>
+            <Breadcrumb.Item>
-              {lang('Workflow')}
+              <Link to={`/admin/settings/workflow/workflows`}>
-            </Link>
+                {lang('Workflow')}
-          </span>
+              </Link>
-          <strong>{workflow.title}</strong>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+              <strong>{workflow.title}</strong>
+            </Breadcrumb.Item>
+          </Breadcrumb>
         </header>
         <aside>
           <div className="workflow-versions">
-            <label>{lang('Version')}</label>
             <Dropdown
               trigger={['click']}
               overlay={
                 <Menu
                   onClick={onSwitchVersion}
-                  defaultSelectedKeys={[workflow.id]}
+                  defaultSelectedKeys={[`${workflow.id}`]}
                   className={cx(workflowVersionDropdownClass)}
                 >
                   {revisions.sort((a, b) => b.id - a.id).map((item, index) => (
                     <Menu.Item
-                      key={item.id}
+                      key={`${item.id}`}
                       icon={item.current ? <RightOutlined /> : null}
                       className={classnames({
                         executed: item.executed,
@@ -146,7 +149,11 @@ export function WorkflowCanvas() {
                 </Menu>
               }
             >
-              <Button type="link">{workflow?.id ? `#${workflow.id}` : null}<DownOutlined /></Button>
+              <Button type="text">
+                <label>{lang('Version')}</label>
+                <span>{workflow?.id ? `#${workflow.id}` : null}</span>
+                <DownOutlined />
+              </Button>
             </Dropdown>
           </div>
           <Switch

packages/plugins/workflow/src/client/style.tsx

@@ -15,13 +15,7 @@ export const workflowPageClass = css`
     header{
       display: flex;
       align-items: center;
-
+      min-height: 2rem;
-      > *:not(:last-child) {
-        &:after{
-          content: ">";
-          margin: 0 .5em;
-        }
-      }
     }
 
     aside{
@@ -29,6 +23,12 @@ export const workflowPageClass = css`
       align-items: center;
       gap: .5em;
     }
+
+    .workflow-versions{
+      label{
+        margin-right: .5em;
+      }
+    }
   }
 
   .workflow-canvas{

packages/plugins/workflow/src/client/triggers/index.tsx

@@ -12,7 +12,7 @@ import { nodeCardClass, nodeHeaderClass, nodeMetaClass, nodeTitleClass } from ".
 import { useFlowContext } from "../FlowContext";
 import collection from './collection';
 import schedule from "./schedule/";
-import { lang } from "../locale";
+import { lang, NAMESPACE } from "../locale";
 
 
 function useUpdateConfigAction() {
@@ -29,7 +29,7 @@ function useUpdateConfigAction() {
         return;
       }
       await form.submit();
-      await api.resource('workflows').update({
+      await api.resource('workflows').update?.({
         filterByTk: workflow.id,
         values: form.values
       });
@@ -98,7 +98,7 @@ function TriggerExecution() {
                 properties: {
                   createdAt: {
                     type: 'string',
-                    title: '{{t("Triggered at")}}',
+                    title: `{{t("Triggered at", { ns: "${NAMESPACE}" })}}`,
                     'x-decorator': 'FormItem',
                     'x-component': 'DatePicker',
                     'x-component-props': {
@@ -108,7 +108,7 @@ function TriggerExecution() {
                   },
                   context: {
                     type: 'object',
-                    title: '{{t("Trigger context")}}',
+                    title: `{{t("Trigger context", { ns: "${NAMESPACE}" })}}`,
                     'x-decorator': 'FormItem',
                     'x-component': 'Input.JSON',
                     'x-component-props': {