From ceaf60291b41cd18c2798f04b2f4fb606694f3a5 Mon Sep 17 00:00:00 2001 From: Mattia Date: Sun, 17 Nov 2024 17:34:47 +0100 Subject: [PATCH 1/4] sorted props to EntityTypePicker Signed-off-by: Mattia --- .changeset/heavy-lions-burn.md | 5 ++++ .../EntityTypePicker.test.tsx | 30 +++++++++++++++++++ .../EntityTypePicker/EntityTypePicker.tsx | 9 ++++-- 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 .changeset/heavy-lions-burn.md diff --git a/.changeset/heavy-lions-burn.md b/.changeset/heavy-lions-burn.md new file mode 100644 index 0000000000..7f5cdc9b66 --- /dev/null +++ b/.changeset/heavy-lions-burn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': minor +--- + +Added sorted prop in EntityTypePicker diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx index f7954f2604..49e4287e9f 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx @@ -189,4 +189,34 @@ describe('', () => { type: new EntityTypeFilter(['tool']), }); }); + + it('sorts the available entity types when sorted prop is true', async () => { + await renderInTestApp( + + + + + , + ); + expect(screen.getByText('Type')).toBeInTheDocument(); + + const input = screen.getByTestId('select'); + fireEvent.mouseDown(within(input).getByRole('button')); + + await waitFor(() => screen.getByText('library')); + + const sortedEntities = entities + .map(e => e.spec!.type as string) + .sort((a, b) => + a + .toLocaleLowerCase('en-US') + .localeCompare(b.toLocaleLowerCase('en-US')), + ); + + sortedEntities.forEach(entityType => { + expect(screen.getByText(entityType)).toBeInTheDocument(); + }); + }); }); diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx index 082004f15b..1622607db4 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -31,11 +31,12 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; export interface EntityTypePickerProps { initialFilter?: string; hidden?: boolean; + sorted?: boolean; } /** @public */ export const EntityTypePicker = (props: EntityTypePickerProps) => { - const { hidden, initialFilter } = props; + const { hidden, initialFilter, sorted } = props; const alertApi = useApi(alertApiRef); const { error, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -54,7 +55,11 @@ export const EntityTypePicker = (props: EntityTypePickerProps) => { }, [error, alertApi, initialFilter, setSelectedTypes, t]); if (availableTypes.length === 0 || error) return null; - + if (sorted) { + availableTypes.sort((a, b) => + a.toLocaleLowerCase('en-US').localeCompare(b.toLocaleLowerCase('en-US')), + ); + } const items = [ { value: 'all', label: t('entityTypePicker.optionAllTitle') }, ...availableTypes.map((type: string) => ({ From 458878a0f520e708578902936f8ade27bff8d01c Mon Sep 17 00:00:00 2001 From: Mattia Date: Sun, 17 Nov 2024 20:31:53 +0100 Subject: [PATCH 2/4] update api report Signed-off-by: Mattia --- plugins/catalog-react/report.api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/catalog-react/report.api.md b/plugins/catalog-react/report.api.md index af5102176d..ca449d5b87 100644 --- a/plugins/catalog-react/report.api.md +++ b/plugins/catalog-react/report.api.md @@ -620,6 +620,8 @@ export interface EntityTypePickerProps { hidden?: boolean; // (undocumented) initialFilter?: string; + // (undocumented) + sorted?: boolean; } // @public (undocumented) From 01250a873f9d46043d121287f0d7ac34d113ad97 Mon Sep 17 00:00:00 2001 From: Mattia Date: Mon, 16 Dec 2024 22:43:37 +0100 Subject: [PATCH 3/4] sort type by default Signed-off-by: Mattia --- .changeset/heavy-lions-burn.md | 2 +- .../EntityTypePicker.test.tsx | 30 ------------------- .../EntityTypePicker/EntityTypePicker.tsx | 13 ++++---- 3 files changed, 7 insertions(+), 38 deletions(-) diff --git a/.changeset/heavy-lions-burn.md b/.changeset/heavy-lions-burn.md index 7f5cdc9b66..1fb5baa384 100644 --- a/.changeset/heavy-lions-burn.md +++ b/.changeset/heavy-lions-burn.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-react': minor --- -Added sorted prop in EntityTypePicker +Sort EntityTypePicker by default diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx index 49e4287e9f..f7954f2604 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.test.tsx @@ -189,34 +189,4 @@ describe('', () => { type: new EntityTypeFilter(['tool']), }); }); - - it('sorts the available entity types when sorted prop is true', async () => { - await renderInTestApp( - - - - - , - ); - expect(screen.getByText('Type')).toBeInTheDocument(); - - const input = screen.getByTestId('select'); - fireEvent.mouseDown(within(input).getByRole('button')); - - await waitFor(() => screen.getByText('library')); - - const sortedEntities = entities - .map(e => e.spec!.type as string) - .sort((a, b) => - a - .toLocaleLowerCase('en-US') - .localeCompare(b.toLocaleLowerCase('en-US')), - ); - - sortedEntities.forEach(entityType => { - expect(screen.getByText(entityType)).toBeInTheDocument(); - }); - }); }); diff --git a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx index 1622607db4..ba39536d1e 100644 --- a/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -31,12 +31,11 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; export interface EntityTypePickerProps { initialFilter?: string; hidden?: boolean; - sorted?: boolean; } /** @public */ export const EntityTypePicker = (props: EntityTypePickerProps) => { - const { hidden, initialFilter, sorted } = props; + const { hidden, initialFilter } = props; const alertApi = useApi(alertApiRef); const { error, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -55,11 +54,11 @@ export const EntityTypePicker = (props: EntityTypePickerProps) => { }, [error, alertApi, initialFilter, setSelectedTypes, t]); if (availableTypes.length === 0 || error) return null; - if (sorted) { - availableTypes.sort((a, b) => - a.toLocaleLowerCase('en-US').localeCompare(b.toLocaleLowerCase('en-US')), - ); - } + + availableTypes.sort((a, b) => + a.toLocaleLowerCase('en-US').localeCompare(b.toLocaleLowerCase('en-US')), + ); + const items = [ { value: 'all', label: t('entityTypePicker.optionAllTitle') }, ...availableTypes.map((type: string) => ({ From 75f896af83d908cf6fd756c1c6154082c0800037 Mon Sep 17 00:00:00 2001 From: Mattia Date: Mon, 16 Dec 2024 23:13:20 +0100 Subject: [PATCH 4/4] update api-report Signed-off-by: Mattia --- plugins/catalog-react/report.api.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/catalog-react/report.api.md b/plugins/catalog-react/report.api.md index ca449d5b87..af5102176d 100644 --- a/plugins/catalog-react/report.api.md +++ b/plugins/catalog-react/report.api.md @@ -620,8 +620,6 @@ export interface EntityTypePickerProps { hidden?: boolean; // (undocumented) initialFilter?: string; - // (undocumented) - sorted?: boolean; } // @public (undocumented)