From f108d111410f45b9e44087fca40e5988346f7631 Mon Sep 17 00:00:00 2001
From: albertojuanL <alberto.juan@lansweeper.com>
Date: Sat, 4 Feb 2023 16:44:24 +0100
Subject: [PATCH] Move default sorting logic to the UI

Signed-off-by: albertojuanL <alberto.juan@lansweeper.com>
---
 packages/catalog-client/src/CatalogClient.ts  | 16 ++-------
 .../components/CatalogTable/CatalogTable.tsx  | 36 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/packages/catalog-client/src/CatalogClient.ts b/packages/catalog-client/src/CatalogClient.ts
index 1d33b2f55d..d2d4d64d75 100644
--- a/packages/catalog-client/src/CatalogClient.ts
+++ b/packages/catalog-client/src/CatalogClient.ts
@@ -19,7 +19,7 @@ import {
   CompoundEntityRef,
   parseEntityRef,
   stringifyLocationRef,
-  DEFAULT_NAMESPACE,
+  stringifyEntityRef,
 } from '@backstage/catalog-model';
 import { ResponseError } from '@backstage/errors';
 import crossFetch from 'cross-fetch';
@@ -176,8 +176,8 @@ export class CatalogClient implements CatalogApi {
         return 0;
       }
 
-      const aRef = this.stringifySortingEntityRef(a);
-      const bRef = this.stringifySortingEntityRef(b);
+      const aRef = stringifyEntityRef(a);
+      const bRef = stringifyEntityRef(b);
       if (aRef < bRef) {
         return -1;
       }
@@ -504,14 +504,4 @@ export class CatalogClient implements CatalogApi {
 
     return await response.json();
   }
-
-  private stringifySortingEntityRef(ref: Entity): string {
-    const kind = ref.kind;
-    const namespace = ref.metadata.namespace ?? DEFAULT_NAMESPACE;
-    const name = ref.metadata.title || ref.metadata.name;
-
-    return `${kind.toLocaleLowerCase('en-US')}:${namespace.toLocaleLowerCase(
-      'en-US',
-    )}/${name.toLocaleLowerCase('en-US')}`;
-  }
 }
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 935e002375..e6f9d1458e 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -16,6 +16,8 @@
 import {
   ANNOTATION_EDIT_URL,
   ANNOTATION_VIEW_URL,
+  DEFAULT_NAMESPACE,
+  Entity,
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
@@ -62,6 +64,38 @@ const YellowStar = withStyles({
   },
 })(Star);
 
+const stringifySortingEntityRef = (ref: Entity): string => {
+  const kind = ref.kind;
+  const namespace = ref.metadata.namespace ?? DEFAULT_NAMESPACE;
+  const name = ref.metadata.title || ref.metadata.name;
+
+  return `${kind.toLocaleLowerCase('en-US')}:${namespace.toLocaleLowerCase(
+    'en-US',
+  )}/${name.toLocaleLowerCase('en-US')}`;
+};
+
+const refCompare = (a: Entity, b: Entity) => {
+  // in case field filtering is used, these fields might not be part of the response
+  if (
+    a.metadata?.name === undefined ||
+    a.kind === undefined ||
+    b.metadata?.name === undefined ||
+    b.kind === undefined
+  ) {
+    return 0;
+  }
+
+  const aRef = stringifySortingEntityRef(a);
+  const bRef = stringifySortingEntityRef(b);
+  if (aRef < bRef) {
+    return -1;
+  }
+  if (aRef > bRef) {
+    return 1;
+  }
+  return 0;
+};
+
 /** @public */
 export const CatalogTable = (props: CatalogTableProps) => {
   const { columns, actions, tableOptions, subtitle, emptyContent } = props;
@@ -177,7 +211,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
     },
   ];
 
-  const rows = entities.map(entity => {
+  const rows = entities.sort(refCompare).map(entity => {
     const partOfSystemRelations = getEntityRelations(entity, RELATION_PART_OF, {
       kind: 'system',
     });