From 17f438ac3918418f107ad78aab0b7f3e552fbe9a Mon Sep 17 00:00:00 2001 From: Junyi Date: Wed, 23 Aug 2023 16:30:21 +0700 Subject: [PATCH] fix(plugin-workflow): fix status button styles (#2516) --- .../workflow/src/client/ExecutionCanvas.tsx | 18 +++--- .../workflow/src/client/WorkflowCanvas.tsx | 2 +- .../src/client/components/StatusButton.tsx | 42 ++++++++++++++ .../src/client/components/StatusIcon.tsx | 30 ---------- .../plugins/workflow/src/client/constants.tsx | 10 ++++ .../workflow/src/client/nodes/index.tsx | 58 ++++++------------- .../plugins/workflow/src/client/style.tsx | 33 ++++------- 7 files changed, 91 insertions(+), 102 deletions(-) create mode 100644 packages/plugins/workflow/src/client/components/StatusButton.tsx delete mode 100644 packages/plugins/workflow/src/client/components/StatusIcon.tsx diff --git a/packages/plugins/workflow/src/client/ExecutionCanvas.tsx b/packages/plugins/workflow/src/client/ExecutionCanvas.tsx index 9ae22798a..c2f059a93 100644 --- a/packages/plugins/workflow/src/client/ExecutionCanvas.tsx +++ b/packages/plugins/workflow/src/client/ExecutionCanvas.tsx @@ -1,6 +1,6 @@ import { ActionContextProvider, - css, + cx, SchemaComponent, useAPIClient, useCompile, @@ -12,15 +12,14 @@ import { Breadcrumb, Dropdown, Space, Tag } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { CanvasContent } from './CanvasContent'; -import { ExecutionStatusOptionsMap, JobStatusOptions, JobStatusOptionsMap } from './constants'; +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'; import { DownOutlined } from '@ant-design/icons'; -import { StatusIcon } from './components/StatusIcon'; -import classnames from 'classnames'; +import { StatusButton } from './components/StatusButton'; function attachJobs(nodes, jobs: any[] = []): void { const nodesMap = new Map(); @@ -174,18 +173,23 @@ function ExecutionsDropdown(props) { return execution ? ( { return { key: item.id, label: ( - + <> {`#${item.id}`} + + ), + icon: ( + + ), - icon: , }; }), }} diff --git a/packages/plugins/workflow/src/client/WorkflowCanvas.tsx b/packages/plugins/workflow/src/client/WorkflowCanvas.tsx index 706184b83..346e397c7 100644 --- a/packages/plugins/workflow/src/client/WorkflowCanvas.tsx +++ b/packages/plugins/workflow/src/client/WorkflowCanvas.tsx @@ -159,7 +159,7 @@ export function WorkflowCanvas() { menu={{ onClick: onSwitchVersion, defaultSelectedKeys: [`${workflow.id}`], - className: cx(styles.workflowVersionDropdownClass), + className: cx(styles.dropdownClass, styles.workflowVersionDropdownClass), items: revisions .sort((a, b) => b.id - a.id) .map((item, index) => ({ diff --git a/packages/plugins/workflow/src/client/components/StatusButton.tsx b/packages/plugins/workflow/src/client/components/StatusButton.tsx new file mode 100644 index 000000000..1651f367f --- /dev/null +++ b/packages/plugins/workflow/src/client/components/StatusButton.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Button, Tag } from 'antd'; +import classnames from 'classnames'; + +import { createStyles } from '@nocobase/client'; + +const useStyles = createStyles(({ css, token }) => ({ + statusButtonClass: css` + border: none; + .ant-tag { + width: 100%; + height: 100%; + padding: 0; + margin-right: 0; + border-radius: 50%; + text-align: center; + } + `, + noStatusButtonClass: css` + border-width: 2px; + `, +})); + +export function StatusButton(props) { + const { styles } = useStyles(); + let tag = null; + if (typeof props.status !== 'undefined' && props.statusMap?.[props.status]) { + const { icon, color } = props.statusMap[props.status]; + tag = {icon}; + } + + return ( + + ); +} diff --git a/packages/plugins/workflow/src/client/components/StatusIcon.tsx b/packages/plugins/workflow/src/client/components/StatusIcon.tsx deleted file mode 100644 index 17c67f82d..000000000 --- a/packages/plugins/workflow/src/client/components/StatusIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { Tag } from 'antd'; -import classnames from 'classnames'; - -import { createStyles } from '@nocobase/client'; - -import { JobStatusOptionsMap } from '../constants'; - -const useStyles = createStyles(({ css, token }) => ({ - statusIconClass: css` - padding: 0; - width: ${token.sizeLG}px; - height: ${token.sizeLG}px; - line-height: ${token.sizeLG}px; - margin-right: 0; - border-radius: 50%; - text-align: center; - `, -})); - -export function StatusIcon(props) { - const { icon, color } = JobStatusOptionsMap[props.status]; - const { styles } = useStyles(); - - return ( - - {icon} - - ); -} diff --git a/packages/plugins/workflow/src/client/constants.tsx b/packages/plugins/workflow/src/client/constants.tsx index 3d7ad17e5..81540129b 100644 --- a/packages/plugins/workflow/src/client/constants.tsx +++ b/packages/plugins/workflow/src/client/constants.tsx @@ -5,6 +5,8 @@ import { CheckOutlined, MinusOutlined, ExclamationOutlined, + HourglassOutlined, + LoadingOutlined, } from '@ant-design/icons'; import { NAMESPACE } from './locale'; @@ -24,48 +26,56 @@ export const ExecutionStatusOptions = [ value: EXECUTION_STATUS.QUEUEING, label: `{{t("Queueing", { ns: "${NAMESPACE}" })}}`, color: 'blue', + icon: , description: `{{t("Triggered but still waiting in queue to execute.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.STARTED, label: `{{t("On going", { ns: "${NAMESPACE}" })}}`, color: 'gold', + icon: , description: `{{t("Started and executing, maybe waiting for an async callback (manual, delay etc.).", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.RESOLVED, label: `{{t("Resolved", { ns: "${NAMESPACE}" })}}`, color: 'green', + icon: , description: `{{t("Successfully finished.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.FAILED, label: `{{t("Failed", { ns: "${NAMESPACE}" })}}`, color: 'red', + icon: , description: `{{t("Failed to satisfy node configurations.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.ERROR, label: `{{t("Error", { ns: "${NAMESPACE}" })}}`, color: 'red', + icon: , description: `{{t("Some node meets error.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.ABORTED, label: `{{t("Aborted", { ns: "${NAMESPACE}" })}}`, color: 'red', + icon: , description: `{{t("Running of some node was aborted by program flow.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.CANCELED, label: `{{t("Canceled", { ns: "${NAMESPACE}" })}}`, color: 'volcano', + icon: , description: `{{t("Manually canceled whole execution when waiting.", { ns: "${NAMESPACE}" })}}`, }, { value: EXECUTION_STATUS.REJECTED, label: `{{t("Rejected", { ns: "${NAMESPACE}" })}}`, color: 'volcano', + icon: , description: `{{t("Rejected from a manual node.", { ns: "${NAMESPACE}" })}}`, }, ]; diff --git a/packages/plugins/workflow/src/client/nodes/index.tsx b/packages/plugins/workflow/src/client/nodes/index.tsx index d210f526f..c1a1bb0c9 100644 --- a/packages/plugins/workflow/src/client/nodes/index.tsx +++ b/packages/plugins/workflow/src/client/nodes/index.tsx @@ -36,7 +36,7 @@ import query from './query'; import request from './request'; import sql from './sql'; import update from './update'; -import { StatusIcon } from '../components/StatusIcon'; +import { StatusButton } from '../components/StatusButton'; export interface Instruction { title: string; @@ -237,16 +237,6 @@ export function RemoveButton() { ); } -function InnerJobButton({ job, ...props }) { - const { styles } = useStyles(); - - return ( - - ); -} - export function JobButton() { const { execution, setViewJob } = useFlowContext(); const { jobs } = useNodeContext() ?? {}; @@ -257,20 +247,7 @@ export function JobButton() { } if (!jobs.length) { - return ( - - ); + return ; } function onOpenJob({ key }) { @@ -285,31 +262,30 @@ export function JobButton() { return { key: job.id, label: ( -
- + <> + -
+ ), }; }), onClick: onOpenJob, + className: styles.dropdownClass, }} > - +
) : ( - setViewJob(jobs[0])} /> + setViewJob(jobs[0])} + className={styles.nodeJobButtonClass} + /> ); } diff --git a/packages/plugins/workflow/src/client/style.tsx b/packages/plugins/workflow/src/client/style.tsx index 4c3d21781..a7970895d 100644 --- a/packages/plugins/workflow/src/client/style.tsx +++ b/packages/plugins/workflow/src/client/style.tsx @@ -15,12 +15,11 @@ const useStyles = createStyles(({ css, token }) => { position: relative; padding: 0.5rem 1rem; background: ${token.colorBgContainer}; - border-bottom: 1px solid ${token.colorBorder}; + border-bottom: 1px solid ${token.colorBorderSecondary}; header { display: flex; align-items: center; - min-height: 2rem; } aside { @@ -55,7 +54,7 @@ const useStyles = createStyles(({ css, token }) => { } `, - workflowVersionDropdownClass: css` + dropdownClass: css` .ant-dropdown-menu-item { justify-content: flex-end; .ant-dropdown-menu-title-content { @@ -65,11 +64,16 @@ const useStyles = createStyles(({ css, token }) => { text-align: right; time { - width: 12em; - color: ${token.colorText}; + width: 14em; font-size: 80%; } + } + } + `, + workflowVersionDropdownClass: css` + .ant-dropdown-menu-item { + .ant-dropdown-menu-title-content { strong { font-weight: normal; } @@ -90,24 +94,11 @@ const useStyles = createStyles(({ css, token }) => { `, executionsDropdownRowClass: css` - .row { - display: flex; - align-items: baseline; - - &.current { - font-weight: bold; - } - + .ant-dropdown-menu-item { .id { flex-grow: 1; text-align: right; } - - time { - width: 12em; - color: ${token.colorText}; - font-size: 80%; - } } `, @@ -283,10 +274,6 @@ const useStyles = createStyles(({ css, token }) => { justify-content: center; align-items: center; color: ${token.colorTextLightSolid}; - - &[type='button'] { - border: none; - } `, nodeHeaderClass: css`