2227 - Reorganize WorkflowNodesTabs

Author: kresimir-coko

client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuComponentList.tsx

@@ -1,5 +1,5 @@
 import {Input} from '@/components/ui/input';
-import WorkflowNodesTabs from '@/pages/platform/workflow-editor/components/WorkflowNodesTabs';
+import WorkflowNodesTabs from '@/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabs';
 import useWorkflowDataStore from '@/pages/platform/workflow-editor/stores/useWorkflowDataStore';
 import CopilotButton from '@/shared/components/copilot/CopilotButton';
 import {Source} from '@/shared/components/copilot/stores/useCopilotStore';

client/src/pages/platform/workflow-editor/components/WorkflowNodesSidebar.tsx

@@ -2,7 +2,7 @@ import {Input} from '@/components/ui/input';
 import {ComponentDefinitionBasic, TaskDispatcherDefinition} from '@/shared/middleware/platform/configuration';
 import {useEffect, useState} from 'react';
 
-import WorkflowNodesTabs from './WorkflowNodesTabs';
+import WorkflowNodesTabs from './workflow-nodes-tabs/WorkflowNodesTabs';
 
 const WorkflowNodesSidebar = ({
     data,

client/src/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabContent.tsx

@@ -0,0 +1,46 @@
+import {ScrollArea} from '@/components/ui/scroll-area';
+import {TabsContent} from '@/components/ui/tabs';
+import {ComponentDefinitionBasic} from '@/shared/middleware/platform/configuration';
+import {ClickedDefinitionType, DefinitionType} from '@/shared/types';
+
+import WorkflowNodesTabsItem from './WorkflowNodesTabsItem';
+
+interface WorkflowNodesTabContentProps {
+    emptyMessage: string;
+    items: Array<ComponentDefinitionBasic | DefinitionType> | undefined;
+    itemsDraggable: boolean;
+    onItemClick?: (clickedItem: ClickedDefinitionType) => void;
+    selectedComponentName?: string;
+    tabValue: string;
+}
+
+const WorkflowNodesTabContent = ({
+    emptyMessage,
+    items,
+    itemsDraggable,
+    onItemClick,
+    selectedComponentName,
+    tabValue,
+}: WorkflowNodesTabContentProps) => (
+    <ScrollArea className="overflow-y-auto px-3">
+        <TabsContent className="mt-0 w-full flex-1" value={tabValue}>
+            <ul className="space-y-2" role="list">
+                {(!items || items.length === 0) && (
+                    <span className="block px-3 py-2 text-xs text-content-neutral-secondary">{emptyMessage}</span>
+                )}
+
+                {items?.map((item) => (
+                    <WorkflowNodesTabsItem
+                        draggable={itemsDraggable}
+                        handleClick={() => onItemClick && onItemClick(item as ClickedDefinitionType)}
+                        key={item.name}
+                        node={item as DefinitionType}
+                        selected={tabValue === 'components' ? selectedComponentName === item.name : undefined}
+                    />
+                ))}
+            </ul>
+        </TabsContent>
+    </ScrollArea>
+);
+
+export default WorkflowNodesTabContent;

…-editor/components/WorkflowNodesTabs.tsx …orkflow-nodes-tabs/WorkflowNodesTabs.tsxclient/src/pages/platform/workflow-editor/components/WorkflowNodesTabs.tsx renamed to client/src/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabs.tsx client/src/pages/platform/workflow-editor/components/WorkflowNodesTabs.tsx renamed to client/src/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabs.tsx

@@ -1,13 +1,12 @@
-import {ScrollArea} from '@/components/ui/scroll-area';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs';
 import {ComponentDefinitionBasic, TaskDispatcherDefinition} from '@/shared/middleware/platform/configuration';
 import {useFeatureFlagsStore} from '@/shared/stores/useFeatureFlagsStore';
 import {ClickedDefinitionType} from '@/shared/types';
 import {useEffect, useMemo, useState} from 'react';
 
-import {useComponentFiltering} from '../hooks/useComponentFiltering';
-import ActionComponentsFilter from './ActionComponentsFilter';
-import WorkflowNodesTabsItem from './WorkflowNodesTabsItem';
+import {useComponentFiltering} from '../../hooks/useComponentFiltering';
+import ActionComponentsFilter from '../ActionComponentsFilter';
+import WorkflowNodesTabContent from './WorkflowNodesTabContent';
 
 type DefinitionType = (ComponentDefinitionBasic | TaskDispatcherDefinition) & {
     taskDispatcher: boolean;
@@ -28,46 +27,6 @@ interface WorkflowNodesTabsProps {
     triggerComponentDefinitions: Array<ComponentDefinitionBasic>;
 }
 
-interface WorkflowNodesTabContentProps {
-    emptyMessage: string;
-    items: Array<ComponentDefinitionBasic | DefinitionType> | undefined;
-    itemsDraggable: boolean;
-    onItemClick?: (clickedItem: ClickedDefinitionType) => void;
-    selectedComponentName?: string;
-    tabValue: string;
-}
-
-const WorkflowNodesTabContent = ({
-    emptyMessage,
-    items,
-    itemsDraggable,
-    onItemClick,
-    selectedComponentName,
-    tabValue,
-}: WorkflowNodesTabContentProps) => {
-    return (
-        <ScrollArea className="overflow-y-auto px-3">
-            <TabsContent className="mt-0 w-full flex-1" value={tabValue}>
-                <ul className="space-y-2" role="list">
-                    {(!items || items.length === 0) && (
-                        <span className="block px-3 py-2 text-xs text-content-neutral-secondary">{emptyMessage}</span>
-                    )}
-
-                    {items?.map((item) => (
-                        <WorkflowNodesTabsItem
-                            draggable={itemsDraggable}
-                            handleClick={() => onItemClick && onItemClick(item as ClickedDefinitionType)}
-                            key={item.name}
-                            node={item as DefinitionType}
-                            selected={tabValue === 'components' ? selectedComponentName === item.name : undefined}
-                        />
-                    ))}
-                </ul>
-            </TabsContent>
-        </ScrollArea>
-    );
-};
-
 const WorkflowNodesTabs = ({
     actionComponentDefinitions,
     clusterElementComponentDefinitions,

…tor/components/WorkflowNodesTabsItem.tsx …low-nodes-tabs/WorkflowNodesTabsItem.tsxclient/src/pages/platform/workflow-editor/components/WorkflowNodesTabsItem.tsx renamed to client/src/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabsItem.tsx client/src/pages/platform/workflow-editor/components/WorkflowNodesTabsItem.tsx renamed to client/src/pages/platform/workflow-editor/components/workflow-nodes-tabs/WorkflowNodesTabsItem.tsx

@@ -80,6 +80,11 @@ export type ComponentType = {
     workflowNodeName: string;
 };
 
+export type DefinitionType = (ComponentDefinitionBasic | TaskDispatcherDefinition) & {
+    taskDispatcher: boolean;
+    trigger: boolean;
+};
+
 export type ClickedDefinitionType = {
     taskDispatcher?: boolean;
     trigger?: boolean;