Sort palette nodes by component label (#2277)

Fixes #2171

Co-authored-by: Nick Bourdakos <[email protected]>

Author: kiersten-stokes

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: [],

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
+      })
     );
   }
 };