chore: Remove commented out code for advanced and default modes in flow.ts (#1952)

This commit is contained in:
Dreammy23 2024-09-03 19:17:39 +08:00 committed by GitHub
commit 9c1f78826f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 35 additions and 10 deletions

View File

@ -35,8 +35,8 @@ export const deleteFlowById = (id: string) => {
return DELETE<null, null>(`/api/v2/serve/awel/flows/${id}`); return DELETE<null, null>(`/api/v2/serve/awel/flows/${id}`);
}; };
export const getFlowNodes = () => { export const getFlowNodes = (tags?: string) => {
return GET<null, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`); return GET<{ tags?: string }, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`, { tags });
}; };
export const refreshFlowNodeById = (data: IFlowRefreshParams) => { export const refreshFlowNodeById = (data: IFlowRefreshParams) => {

View File

@ -4,7 +4,7 @@ import { IFlowNode } from '@/types/flow';
import { FLOW_NODES_KEY } from '@/utils'; import { FLOW_NODES_KEY } from '@/utils';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'; import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import type { CollapseProps } from 'antd'; import type { CollapseProps } from 'antd';
import { Badge, Collapse, Input, Layout, Space } from 'antd'; import { Badge, Collapse, Input, Layout, Space, Tag } from 'antd';
import React, { useContext, useEffect, useMemo, useState } from 'react'; import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import StaticNodes from './static-nodes'; import StaticNodes from './static-nodes';
@ -12,6 +12,8 @@ import StaticNodes from './static-nodes';
const { Search } = Input; const { Search } = Input;
const { Sider } = Layout; const { Sider } = Layout;
const TAGS = JSON.stringify({ order: 'higher-order' });
type GroupType = { type GroupType = {
category: string; category: string;
categoryLabel: string; categoryLabel: string;
@ -41,13 +43,16 @@ const AddNodesSider: React.FC = () => {
const [resources, setResources] = useState<Array<IFlowNode>>([]); const [resources, setResources] = useState<Array<IFlowNode>>([]);
const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]); const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]); const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
const [isAllNodesVisible, setIsAllNodesVisible] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
getNodes(); getNodes(TAGS);
}, []); }, []);
async function getNodes() { // tags is optional, if tags is not passed, it will get all nodes
const [_, data] = await apiInterceptors(getFlowNodes()); async function getNodes(tags?: string) {
const [_, data] = await apiInterceptors(getFlowNodes(tags));
if (data && data.length > 0) { if (data && data.length > 0) {
localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data)); localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data));
const operatorNodes = data.filter(node => node.flow_type === 'operator'); const operatorNodes = data.filter(node => node.flow_type === 'operator');
@ -166,6 +171,16 @@ const AddNodesSider: React.FC = () => {
setSearchValue(val); setSearchValue(val);
} }
function onModeChange() {
if (isAllNodesVisible) {
getNodes(TAGS);
} else {
getNodes();
}
setIsAllNodesVisible(!isAllNodesVisible);
}
return ( return (
<Sider <Sider
className='flex justify-center items-start nodrag bg-[#ffffff80] border-r border-[#d5e5f6] dark:bg-[#ffffff29] dark:border-[#ffffff66]' className='flex justify-center items-start nodrag bg-[#ffffff80] border-r border-[#d5e5f6] dark:bg-[#ffffff29] dark:border-[#ffffff66]'
@ -179,9 +194,15 @@ const AddNodesSider: React.FC = () => {
onCollapse={collapsed => setCollapsed(collapsed)} onCollapse={collapsed => setCollapsed(collapsed)}
> >
<Space direction='vertical' className='w-[280px] pt-4 px-4 overflow-hidden overflow-y-auto scrollbar-default'> <Space direction='vertical' className='w-[280px] pt-4 px-4 overflow-hidden overflow-y-auto scrollbar-default'>
<p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'> <div className='flex justify-between align-middle'>
{t('add_node')} <p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'>
</p> {t('add_node')}
</p>
<Tag color={isAllNodesVisible ? 'green' : 'blue'} onClick={onModeChange} className='mr-0'>
{isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')}
</Tag>
</div>
<Search placeholder='Search node' onSearch={searchNode} allowClear /> <Search placeholder='Search node' onSearch={searchNode} allowClear />

View File

@ -142,7 +142,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
return ( return (
<div className='bg-zinc-100 dark:bg-zinc-700 rounded p-2'> <div className='bg-zinc-100 dark:bg-zinc-700 rounded p-2'>
<TypeLabel label='Outputs' /> <TypeLabel label='Outputs' />
{(outputs || []).map((output, index) => ( {outputs?.map((output, index) => (
<NodeHandler <NodeHandler
key={`${data.id}_input_${index}`} key={`${data.id}_input_${index}`}
node={data} node={data}

View File

@ -19,4 +19,6 @@ export const FlowEn = {
Please_Add_Nodes_First: 'Please add nodes first', Please_Add_Nodes_First: 'Please add nodes first',
Add_Global_Variable_of_Flow: 'Add global variable of flow', Add_Global_Variable_of_Flow: 'Add global variable of flow',
Add_Parameter: 'Add Parameter', Add_Parameter: 'Add Parameter',
Higher_Order_Nodes: 'Higher Order Nodes',
All_Nodes: 'All Nodes',
}; };

View File

@ -19,4 +19,6 @@ export const FlowZn = {
Please_Add_Nodes_First: '请先添加节点', Please_Add_Nodes_First: '请先添加节点',
Add_Global_Variable_of_Flow: '添加 Flow 全局变量', Add_Global_Variable_of_Flow: '添加 Flow 全局变量',
Add_Parameter: '添加参数', Add_Parameter: '添加参数',
Higher_Order_Nodes: '高阶节点',
All_Nodes: '所有节点',
}; };