sort and filter by metadata.title if present

Signed-off-by: Alex Rybchenko <arybchenko@box.com>

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 {

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}