From 686068ea015b0602ff1262e3d50195cd3256c0b4 Mon Sep 17 00:00:00 2001
From: Alex Rybchenko <arybchenko@box.com>
Date: Fri, 8 Oct 2021 17:30:56 +0200
Subject: [PATCH] sort and filter by `metadata.title` if present

Signed-off-by: Alex Rybchenko <arybchenko@box.com>
---
 .../src/components/EntityTable/columns.tsx    | 11 ++++++----
 .../src/components/CatalogTable/columns.tsx   | 21 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx
index 9a48b2d554..1f4f5ee0d0 100644
--- a/plugins/catalog-react/src/components/EntityTable/columns.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx
@@ -20,6 +20,7 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
+import { OverflowTooltip, TableColumn } from '@backstage/core-components';
 import React from 'react';
 import { getEntityRelations } from '../../utils';
 import {
@@ -27,7 +28,6 @@ import {
   EntityRefLinks,
   formatEntityRefTitle,
 } from '../EntityRefLink';
-import { OverflowTooltip, TableColumn } from '@backstage/core-components';
 
 export function createEntityRefColumn<T extends Entity>({
   defaultKind,
@@ -35,9 +35,12 @@ export function createEntityRefColumn<T extends Entity>({
   defaultKind?: string;
 }): TableColumn<T> {
   function formatContent(entity: T): string {
-    return formatEntityRefTitle(entity, {
-      defaultKind,
-    });
+    return (
+      entity.metadata?.title ||
+      formatEntityRefTitle(entity, {
+        defaultKind,
+      })
+    );
   }
 
   return {
diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx
index 89c1a23966..683ac33132 100644
--- a/plugins/catalog/src/components/CatalogTable/columns.tsx
+++ b/plugins/catalog/src/components/CatalogTable/columns.tsx
@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 import React from 'react';
-import { EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import {
+  formatEntityRefTitle,
+  EntityRefLink,
+  EntityRefLinks,
+} from '@backstage/plugin-catalog-react';
 import { Chip } from '@material-ui/core';
 import { EntityRow } from './types';
 import { OverflowTooltip, TableColumn } from '@backstage/core-components';
+import { Entity } from '@backstage/catalog-model';
 
 type NameColumnProps = {
   defaultKind?: string;
@@ -26,10 +31,24 @@ type NameColumnProps = {
 export function createNameColumn(
   props?: NameColumnProps,
 ): TableColumn<EntityRow> {
+  function formatContent(entity: Entity): string {
+    return (
+      entity.metadata?.title ||
+      formatEntityRefTitle(entity, {
+        defaultKind: props?.defaultKind,
+      })
+    );
+  }
+
   return {
     title: 'Name',
     field: 'resolved.name',
     highlight: true,
+    customSort({ entity: entity1 }, { entity: entity2 }) {
+      // TODO: We could implement this more efficiently by comparing field by field.
+      // This has similar issues as above.
+      return formatContent(entity1).localeCompare(formatContent(entity2));
+    },
     render: ({ entity }) => (
       <EntityRefLink
         entityRef={entity}