From 9ec79c9737a1763c36cab3df3628c77c96f7536a Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Sat, 4 Feb 2023 14:13:24 +0100 Subject: [PATCH 1/9] Use title instead of name when it exists, to sort the list of entities by default Signed-off-by: albertojuanL --- packages/catalog-client/src/CatalogClient.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/catalog-client/src/CatalogClient.ts b/packages/catalog-client/src/CatalogClient.ts index af4262b842..a110cfacc7 100644 --- a/packages/catalog-client/src/CatalogClient.ts +++ b/packages/catalog-client/src/CatalogClient.ts @@ -20,6 +20,7 @@ import { parseEntityRef, stringifyEntityRef, stringifyLocationRef, + DEFAULT_NAMESPACE, } from '@backstage/catalog-model'; import { ResponseError } from '@backstage/errors'; import crossFetch from 'cross-fetch'; @@ -176,8 +177,8 @@ export class CatalogClient implements CatalogApi { return 0; } - const aRef = stringifyEntityRef(a); - const bRef = stringifyEntityRef(b); + const aRef = this.stringifySortingEntityRef(a); + const bRef = this.stringifySortingEntityRef(b); if (aRef < bRef) { return -1; } @@ -504,4 +505,14 @@ 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')}`; + } } From d7f55f6bd22633a0718e236ee91c707cc786ec72 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Sat, 4 Feb 2023 14:19:58 +0100 Subject: [PATCH 2/9] Updated Changeset Signed-off-by: albertojuanL --- .changeset/brown-kings-wait.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brown-kings-wait.md diff --git a/.changeset/brown-kings-wait.md b/.changeset/brown-kings-wait.md new file mode 100644 index 0000000000..01ff1ae5eb --- /dev/null +++ b/.changeset/brown-kings-wait.md @@ -0,0 +1,5 @@ +--- +'@backstage/catalog-client': patch +--- + +The list of entities takes into account the title when its different from the name to sort the entities. From a6e109ee761d3a7e30fc795f7222621a8c1ce212 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Sat, 4 Feb 2023 14:57:50 +0100 Subject: [PATCH 3/9] remove unused import Signed-off-by: albertojuanL --- packages/catalog-client/src/CatalogClient.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/catalog-client/src/CatalogClient.ts b/packages/catalog-client/src/CatalogClient.ts index a110cfacc7..1d33b2f55d 100644 --- a/packages/catalog-client/src/CatalogClient.ts +++ b/packages/catalog-client/src/CatalogClient.ts @@ -18,7 +18,6 @@ import { Entity, CompoundEntityRef, parseEntityRef, - stringifyEntityRef, stringifyLocationRef, DEFAULT_NAMESPACE, } from '@backstage/catalog-model'; From f108d111410f45b9e44087fca40e5988346f7631 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Sat, 4 Feb 2023 16:44:24 +0100 Subject: [PATCH 4/9] Move default sorting logic to the UI Signed-off-by: albertojuanL --- 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', }); From cee0a7ec16b1d245ca8ae211f44d3947dbe97cf6 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Sat, 4 Feb 2023 16:52:08 +0100 Subject: [PATCH 5/9] Revert file dummy change Signed-off-by: albertojuanL --- packages/catalog-client/src/CatalogClient.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/catalog-client/src/CatalogClient.ts b/packages/catalog-client/src/CatalogClient.ts index d2d4d64d75..af4262b842 100644 --- a/packages/catalog-client/src/CatalogClient.ts +++ b/packages/catalog-client/src/CatalogClient.ts @@ -18,8 +18,8 @@ import { Entity, CompoundEntityRef, parseEntityRef, - stringifyLocationRef, stringifyEntityRef, + stringifyLocationRef, } from '@backstage/catalog-model'; import { ResponseError } from '@backstage/errors'; import crossFetch from 'cross-fetch'; From 86ee5f2ed84e01eb80f71670ddd3f0dca94d76e6 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Mon, 6 Feb 2023 19:38:58 +0100 Subject: [PATCH 6/9] Use title when exits or humanitizeEntityRef for the default catalog entities sorting Signed-off-by: albertojuanL --- .../components/CatalogTable/CatalogTable.tsx | 30 +++++-------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index e6f9d1458e..8cee912219 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -16,7 +16,6 @@ import { ANNOTATION_EDIT_URL, ANNOTATION_VIEW_URL, - DEFAULT_NAMESPACE, Entity, RELATION_OWNED_BY, RELATION_PART_OF, @@ -64,29 +63,16 @@ 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 toRef = (entity: Entity) => + entity.metadata.title?.toLocaleLowerCase('en-US') || + humanizeEntityRef(entity, { + defaultKind: 'Component', + }); + + const aRef = toRef(a); + const bRef = toRef(b); - const aRef = stringifySortingEntityRef(a); - const bRef = stringifySortingEntityRef(b); if (aRef < bRef) { return -1; } From 9d4a9598f418f7e1108cd4f6618e63ec89f2f8a0 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Mon, 6 Feb 2023 19:46:51 +0100 Subject: [PATCH 7/9] To sort correctly humanitizeEntityRef needs to be in lowercase Signed-off-by: albertojuanL --- plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 8cee912219..f8617ba4b2 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -68,7 +68,7 @@ const refCompare = (a: Entity, b: Entity) => { entity.metadata.title?.toLocaleLowerCase('en-US') || humanizeEntityRef(entity, { defaultKind: 'Component', - }); + }).toLocaleLowerCase('en-US'); const aRef = toRef(a); const bRef = toRef(b); From f99f81b25be391e3e1a9d18dfaef92b7e523c81a Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Mon, 6 Feb 2023 20:01:37 +0100 Subject: [PATCH 8/9] Change to use the same way of sorting as the custom sorting Signed-off-by: albertojuanL --- .../src/components/CatalogTable/CatalogTable.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index f8617ba4b2..18080bb7b0 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -65,21 +65,12 @@ const YellowStar = withStyles({ const refCompare = (a: Entity, b: Entity) => { const toRef = (entity: Entity) => - entity.metadata.title?.toLocaleLowerCase('en-US') || + entity.metadata.title || humanizeEntityRef(entity, { defaultKind: 'Component', - }).toLocaleLowerCase('en-US'); + }); - const aRef = toRef(a); - const bRef = toRef(b); - - if (aRef < bRef) { - return -1; - } - if (aRef > bRef) { - return 1; - } - return 0; + return toRef(a).localeCompare(toRef(b)); }; /** @public */ From 57fc2e9011113b3441b411705030d72a79dcb148 Mon Sep 17 00:00:00 2001 From: albertojuanL Date: Thu, 9 Feb 2023 13:03:27 +0100 Subject: [PATCH 9/9] Fix changeset info Signed-off-by: albertojuanL --- .changeset/brown-kings-wait.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/brown-kings-wait.md b/.changeset/brown-kings-wait.md index 01ff1ae5eb..db3fc0ee86 100644 --- a/.changeset/brown-kings-wait.md +++ b/.changeset/brown-kings-wait.md @@ -1,5 +1,5 @@ --- -'@backstage/catalog-client': patch +'@backstage/plugin-catalog': patch --- The list of entities takes into account the title when its different from the name to sort the entities.