2227 - Refactor/Code cleanup WorkflowNodesTabs to reduce duplication

Author: Malay-dev

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

@@ -28,6 +28,13 @@ interface WorkflowNodesTabsProps {
     triggerComponentDefinitions: Array<ComponentDefinitionBasic>;
 }
 
+interface TabConfigProps {
+    emptyMessage: string;
+    items: Array<ComponentDefinitionBasic | DefinitionType> | undefined;
+    showFilter?: boolean;
+    value: string;
+}
+
 const WorkflowNodesTabs = ({
     actionComponentDefinitions,
     clusterElementComponentDefinitions,
@@ -123,6 +130,64 @@ const WorkflowNodesTabs = ({
         setActiveView,
     ]);
 
+    const tabConfigs: TabConfigProps[] = useMemo(
+        () => [
+            {
+                emptyMessage: 'No trigger components found.',
+                items: availableTriggers,
+                value: 'triggers',
+            },
+            {
+                emptyMessage:
+                    filterState.activeView === 'all' ? 'No action components found.' : 'No filtered components found.',
+                items: filteredComponents,
+                showFilter: true,
+                value: 'components',
+            },
+            {
+                emptyMessage: 'No flow controls found.',
+                items: availableTaskDispatchers,
+                value: 'taskDispatchers',
+            },
+            {
+                emptyMessage: 'No cluster element components found.',
+                items: availableClusterElements,
+                value: 'clusterElements',
+            },
+        ],
+        [
+            availableTriggers,
+            filteredComponents,
+            availableTaskDispatchers,
+            availableClusterElements,
+            filterState.activeView,
+        ]
+    );
+
+    const renderTabContent = (config: TabConfigProps) => (
+        <ScrollArea className="overflow-y-auto px-3">
+            <TabsContent className="mt-0 w-full flex-1" value={config.value}>
+                <ul className="space-y-2" role="list">
+                    {(!config.items || config.items.length === 0) && (
+                        <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
+                            {config.emptyMessage}
+                        </span>
+                    )}
+
+                    {config.items?.map((item) => (
+                        <WorkflowNodesTabsItem
+                            draggable={itemsDraggable}
+                            handleClick={() => onItemClick && onItemClick(item as ClickedDefinitionType)}
+                            key={item.name}
+                            node={item as DefinitionType}
+                            selected={config.value === 'components' ? selectedComponentName === item.name : undefined}
+                        />
+                    ))}
+                </ul>
+            </TabsContent>
+        </ScrollArea>
+    );
+
     return (
         <Tabs className="flex h-full flex-col" onValueChange={setActiveTab} value={activeTab}>
             <div className="px-2">
@@ -166,112 +231,13 @@ const WorkflowNodesTabs = ({
                 />
             )}
 
-            {!hideClusterElementComponents && (
-                <ScrollArea className="overflow-y-auto px-3">
-                    <TabsContent className="mt-0 w-full flex-1" value="clusterElements">
-                        <ul className="space-y-2" role="list">
-                            {!clusterElementComponentDefinitions?.length && (
-                                <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
-                                    No cluster element components found.
-                                </span>
-                            )}
+            {!hideClusterElementComponents && renderTabContent(tabConfigs[3])}
 
-                            {availableClusterElements?.map((clusterElementDefinition, index) => (
-                                <WorkflowNodesTabsItem
-                                    draggable={itemsDraggable}
-                                    handleClick={() =>
-                                        onItemClick && onItemClick(clusterElementDefinition as ClickedDefinitionType)
-                                    }
-                                    key={index}
-                                    node={clusterElementDefinition}
-                                />
-                            ))}
-                        </ul>
-                    </TabsContent>
-                </ScrollArea>
-            )}
+            {!hideTriggerComponents && renderTabContent(tabConfigs[0])}
 
-            {!hideTriggerComponents && (
-                <ScrollArea className="overflow-y-auto px-3">
-                    <TabsContent className="mt-0 w-full flex-1" value="triggers">
-                        <ul className="space-y-2" role="list">
-                            {!triggerComponentDefinitions.length && (
-                                <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
-                                    No trigger components found.
-                                </span>
-                            )}
+            {!hideActionComponents && renderTabContent(tabConfigs[1])}
 
-                            {availableTriggers.map((triggerDefinition) => (
-                                <WorkflowNodesTabsItem
-                                    draggable={itemsDraggable}
-                                    handleClick={() =>
-                                        onItemClick && onItemClick(triggerDefinition as ClickedDefinitionType)
-                                    }
-                                    key={triggerDefinition.name}
-                                    node={triggerDefinition as DefinitionType}
-                                />
-                            ))}
-                        </ul>
-                    </TabsContent>
-                </ScrollArea>
-            )}
-
-            {!hideActionComponents && (
-                <ScrollArea className="overflow-y-auto px-3">
-                    <TabsContent className="mt-0 w-full flex-1" value="components">
-                        <ul className="space-y-2" role="list">
-                            {actionComponentDefinitions.length === 0 && filterState.activeView === 'all' && (
-                                <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
-                                    No action components found.
-                                </span>
-                            )}
-
-                            {filteredComponents?.length === 0 && filterState.activeView === 'filtered' && (
-                                <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
-                                    No filtered components found.
-                                </span>
-                            )}
-
-                            {filteredComponents?.map((componentDefinition) => (
-                                <WorkflowNodesTabsItem
-                                    draggable={itemsDraggable}
-                                    handleClick={() =>
-                                        onItemClick && onItemClick(componentDefinition as ClickedDefinitionType)
-                                    }
-                                    key={componentDefinition.name}
-                                    node={componentDefinition as DefinitionType}
-                                    selected={selectedComponentName === componentDefinition.name}
-                                />
-                            ))}
-                        </ul>
-                    </TabsContent>
-                </ScrollArea>
-            )}
-
-            {!hideTaskDispatchers && (
-                <ScrollArea className="overflow-y-auto px-3">
-                    <TabsContent className="mt-0 w-full flex-1" value="taskDispatchers">
-                        <ul className="space-y-2" role="list">
-                            {!taskDispatcherDefinitions.length && (
-                                <span className="block px-3 py-2 text-xs text-content-neutral-secondary">
-                                    No flow controls found.
-                                </span>
-                            )}
-
-                            {availableTaskDispatchers.map((taskDispatcherDefinition) => (
-                                <WorkflowNodesTabsItem
-                                    draggable={itemsDraggable}
-                                    handleClick={() =>
-                                        onItemClick && onItemClick(taskDispatcherDefinition as ClickedDefinitionType)
-                                    }
-                                    key={taskDispatcherDefinition.name}
-                                    node={taskDispatcherDefinition as DefinitionType}
-                                />
-                            ))}
-                        </ul>
-                    </TabsContent>
-                </ScrollArea>
-            )}
+            {!hideTaskDispatchers && renderTabContent(tabConfigs[2])}
         </Tabs>
     );
 };