From ef4d733b692a1bb3bc9d66054c89b11a5f6f858f Mon Sep 17 00:00:00 2001
From: Kiersten Stokes <Kiersten.Stokes@ibm.com>
Date: Fri, 5 Nov 2021 12:16:14 -0500
Subject: [PATCH] Sort palette nodes by component label (#2277)

Fixes #2171

Co-authored-by: Nick Bourdakos <bourdakos1@gmail.com>
---
 packages/pipeline-editor/src/pipeline-hooks.spec.ts | 3 ++-
 packages/pipeline-editor/src/pipeline-hooks.ts      | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/pipeline-editor/src/pipeline-hooks.spec.ts b/packages/pipeline-editor/src/pipeline-hooks.spec.ts
index a9c87bcd2..5af0eee1a 100644
--- a/packages/pipeline-editor/src/pipeline-hooks.spec.ts
+++ b/packages/pipeline-editor/src/pipeline-hooks.spec.ts
@@ -45,7 +45,8 @@ const createMockCategory = (
 
 const createMockComponent = (name: string): Component => {
   return {
-    op: name,
+    op: 'string',
+    label: name,
     id: 'string',
     type: 'execution_node',
     inputs: [],
diff --git a/packages/pipeline-editor/src/pipeline-hooks.ts b/packages/pipeline-editor/src/pipeline-hooks.ts
index c27fccfd5..46d3e0a03 100644
--- a/packages/pipeline-editor/src/pipeline-hooks.ts
+++ b/packages/pipeline-editor/src/pipeline-hooks.ts
@@ -85,6 +85,7 @@ export interface IRuntimeComponent {
   node_types: {
     op: string;
     id: string;
+    label: string;
     type: 'execution_node';
     inputs: { app_data: any }[];
     outputs: { app_data: any }[];
@@ -138,7 +139,9 @@ export const sortPalette = (palette: {
 
   for (const components of palette.categories) {
     components.node_types.sort((a, b) =>
-      a.op.localeCompare(b.op, undefined, { numeric: true })
+      a.label.localeCompare(b.label, undefined, {
+        numeric: true
+      })
     );
   }
 };