From c6fdddec77341830a4ca04e90de255e6cba7fc37 Mon Sep 17 00:00:00 2001 From: djamaile Date: Tue, 23 Nov 2021 22:40:03 +0100 Subject: [PATCH 01/10] feat: hide owned selector picker if user doesn't own an entity Signed-off-by: djamaile --- .changeset/modern-buses-protect.md | 5 +++++ .../UserListPicker/UserListPicker.tsx | 22 ++++++++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 .changeset/modern-buses-protect.md diff --git a/.changeset/modern-buses-protect.md b/.changeset/modern-buses-protect.md new file mode 100644 index 0000000000..d943d6c06a --- /dev/null +++ b/.changeset/modern-buses-protect.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +when a user doesn't own any entity, the user won't get the option to select on owned diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index f861355762..e5658feec9 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -176,12 +176,14 @@ export const UserListPicker = ({ setEntitiesWithoutUserFilter(backendEntities.filter(filterFn)); }, [filters, backendEntities]); + const totalOwnedUserEntities = entitiesWithoutUserFilter.filter(entity => + ownedFilter.filterEntity(entity), + ).length; + function getFilterCount(id: UserListFilterKind) { switch (id) { case 'owned': - return entitiesWithoutUserFilter.filter(entity => - ownedFilter.filterEntity(entity), - ).length; + return totalOwnedUserEntities; case 'starred': return entitiesWithoutUserFilter.filter(entity => starredFilter.filterEntity(entity), @@ -191,6 +193,20 @@ export const UserListPicker = ({ } } + function removeListItem( + arr: ButtonGroup[], + itemID: 'all' | 'owned' | 'starred', + ): ButtonGroup[] { + const index = arr[0].items.map(item => item.id).indexOf(itemID); + arr[0].items.splice(index, 1); + return arr; + } + + // should we do the same for starred? + if (totalOwnedUserEntities < 1) { + removeListItem(filterGroups, 'owned'); + } + return ( {filterGroups.map(group => ( From 26e8a1fc1d7f8f40c4dc4d5c8d297a36cd5783a3 Mon Sep 17 00:00:00 2001 From: djamaile Date: Sun, 28 Nov 2021 23:53:11 +0100 Subject: [PATCH 02/10] feat: hide owned selector picker for user and groups and redirect to all of user owns nothing Signed-off-by: djamaile --- .../UserListPicker/UserListPicker.tsx | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index e5658feec9..594f2f37d3 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -122,17 +122,7 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - - // Remove group items that aren't in availableFilters and exclude - // any now-empty groups. - const filterGroups = getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length); + const [filterGroups, setFilterGroups] = useState(); const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); @@ -193,23 +183,38 @@ export const UserListPicker = ({ } } - function removeListItem( - arr: ButtonGroup[], - itemID: 'all' | 'owned' | 'starred', - ): ButtonGroup[] { - const index = arr[0].items.map(item => item.id).indexOf(itemID); - arr[0].items.splice(index, 1); - return arr; - } + const removeOwnedFromItemList = (itemList: ButtonGroup[]) => { + const index = itemList[0].items.map(item => item.id).indexOf('owned'); + itemList[0].items.splice(index, 1); + return itemList; + }; - // should we do the same for starred? - if (totalOwnedUserEntities < 1) { - removeListItem(filterGroups, 'owned'); - } + useEffect(() => { + // Remove group items that aren't in availableFilters and exclude + // any now-empty groups. + const defaultFilterGroups = getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter( + ({ id }) => !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length); + if (totalOwnedUserEntities < 1) { + setSelectedUserFilter('all'); + } + if (['group', 'user'].some(kind => kind === queryParameters.kind)) { + setFilterGroups(removeOwnedFromItemList(defaultFilterGroups)); + } + return () => + setFilterGroups(prevState => + prevState !== defaultFilterGroups ? defaultFilterGroups : prevState, + ); + }, [totalOwnedUserEntities, queryParameters, availableFilters, orgName]); return ( - {filterGroups.map(group => ( + {filterGroups?.map(group => ( {group.name} From 5f44cf9fec6e2899ef4c9a64d3e1a82122f33ee7 Mon Sep 17 00:00:00 2001 From: djamaile Date: Mon, 29 Nov 2021 00:23:58 +0100 Subject: [PATCH 03/10] feat: trying useCallback approach Signed-off-by: djamaile --- .../UserListPicker/UserListPicker.tsx | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index 594f2f37d3..f2db87a101 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -33,7 +33,13 @@ import { import SettingsIcon from '@material-ui/icons/Settings'; import StarIcon from '@material-ui/icons/Star'; import { compact } from 'lodash'; -import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import React, { + Fragment, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { UserListFilter } from '../../filters'; import { useEntityListProvider, @@ -122,7 +128,30 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - const [filterGroups, setFilterGroups] = useState(); + // Remove group items that aren't in availableFilters and exclude + // any now-empty groups. + const initialFilterGroup = getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter( + ({ id }) => !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length); + const [filterGroups, setFilterGroups] = + useState(initialFilterGroup); + const setDefaultFilterGroups = useCallback(() => { + setFilterGroups( + getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter( + ({ id }) => !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length), + ); + }, [availableFilters, orgName]); const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); @@ -190,31 +219,20 @@ export const UserListPicker = ({ }; useEffect(() => { - // Remove group items that aren't in availableFilters and exclude - // any now-empty groups. - const defaultFilterGroups = getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length); if (totalOwnedUserEntities < 1) { setSelectedUserFilter('all'); } if (['group', 'user'].some(kind => kind === queryParameters.kind)) { - setFilterGroups(removeOwnedFromItemList(defaultFilterGroups)); - } - return () => - setFilterGroups(prevState => - prevState !== defaultFilterGroups ? defaultFilterGroups : prevState, + setFilterGroups(currentFilterGroups => + removeOwnedFromItemList(currentFilterGroups), ); - }, [totalOwnedUserEntities, queryParameters, availableFilters, orgName]); + } + return () => setDefaultFilterGroups(); + }, [totalOwnedUserEntities, queryParameters, setDefaultFilterGroups]); return ( - {filterGroups?.map(group => ( + {filterGroups.map(group => ( {group.name} From 7c6cb5a12fc92ad6ce27478da157f6c259f642c0 Mon Sep 17 00:00:00 2001 From: djamaile Date: Wed, 1 Dec 2021 22:46:23 +0100 Subject: [PATCH 04/10] chore: remove callback function Signed-off-by: djamaile --- .../UserListPicker/UserListPicker.tsx | 64 ++++++++----------- 1 file changed, 25 insertions(+), 39 deletions(-) diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index f2db87a101..a36f5f78b8 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -33,13 +33,7 @@ import { import SettingsIcon from '@material-ui/icons/Settings'; import StarIcon from '@material-ui/icons/Star'; import { compact } from 'lodash'; -import React, { - Fragment, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; import { UserListFilter } from '../../filters'; import { useEntityListProvider, @@ -128,30 +122,7 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - // Remove group items that aren't in availableFilters and exclude - // any now-empty groups. - const initialFilterGroup = getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length); - const [filterGroups, setFilterGroups] = - useState(initialFilterGroup); - const setDefaultFilterGroups = useCallback(() => { - setFilterGroups( - getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length), - ); - }, [availableFilters, orgName]); + const [filterGroups, setFilterGroups] = useState([]); const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); @@ -212,6 +183,12 @@ export const UserListPicker = ({ } } + useEffect(() => { + if (totalOwnedUserEntities < 1) { + setSelectedUserFilter('all'); + } + }, [totalOwnedUserEntities]); + const removeOwnedFromItemList = (itemList: ButtonGroup[]) => { const index = itemList[0].items.map(item => item.id).indexOf('owned'); itemList[0].items.splice(index, 1); @@ -219,16 +196,25 @@ export const UserListPicker = ({ }; useEffect(() => { - if (totalOwnedUserEntities < 1) { - setSelectedUserFilter('all'); - } + // Remove group items that aren't in availableFilters and exclude + // any now-empty groups. + const initialFilterGroup = getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter( + ({ id }) => !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length); + // TODO: avoid hardcoding kinds here if (['group', 'user'].some(kind => kind === queryParameters.kind)) { - setFilterGroups(currentFilterGroups => - removeOwnedFromItemList(currentFilterGroups), - ); + setFilterGroups(removeOwnedFromItemList(initialFilterGroup)); } - return () => setDefaultFilterGroups(); - }, [totalOwnedUserEntities, queryParameters, setDefaultFilterGroups]); + return () => + setFilterGroups(prevState => + prevState !== initialFilterGroup ? initialFilterGroup : prevState, + ); + }, [queryParameters, availableFilters, orgName]); return ( From 4a0292c67b420b55d69313c0830308a97b6aa8ac Mon Sep 17 00:00:00 2001 From: djamaile Date: Sat, 4 Dec 2021 16:59:33 +0100 Subject: [PATCH 05/10] refactor: remove useEffect functionality Signed-off-by: djamaile --- backstage.json | 3 + .../UserListPicker/UserListPicker.tsx | 81 +++++++------------ 2 files changed, 34 insertions(+), 50 deletions(-) create mode 100644 backstage.json diff --git a/backstage.json b/backstage.json new file mode 100644 index 0000000000..77e9232b75 --- /dev/null +++ b/backstage.json @@ -0,0 +1,3 @@ +{ + "version": "0.4.5" +} diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index a36f5f78b8..867c5230d4 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -122,16 +122,24 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - const [filterGroups, setFilterGroups] = useState([]); - + const userAndGroupFilterIds = ['starred', 'all']; const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); + // Remove group items that aren't in availableFilters and exclude + // any now-empty groups. + const filterGroups = getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter(({ id }) => + ['group', 'user'].some(kind => kind === queryParameters.kind) + ? userAndGroupFilterIds.includes(id) + : !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length); const { isStarredEntity } = useStarredEntities(); const { isOwnedEntity } = useEntityOwnership(); - const [selectedUserFilter, setSelectedUserFilter] = useState( - [queryParameters.user].flat()[0] ?? initialFilter, - ); // Static filters; used for generating counts of potentially unselected kinds const ownedFilter = useMemo( @@ -143,18 +151,6 @@ export const UserListPicker = ({ [isOwnedEntity, isStarredEntity], ); - useEffect(() => { - updateFilters({ - user: selectedUserFilter - ? new UserListFilter( - selectedUserFilter as UserListFilterKind, - isOwnedEntity, - isStarredEntity, - ) - : undefined, - }); - }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]); - // To show proper counts for each section, apply all other frontend filters _except_ the user // filter that's controlled by this picker. const [entitiesWithoutUserFilter, setEntitiesWithoutUserFilter] = @@ -170,6 +166,24 @@ export const UserListPicker = ({ ownedFilter.filterEntity(entity), ).length; + const [selectedUserFilter, setSelectedUserFilter] = useState( + totalOwnedUserEntities < 1 + ? 'all' + : [queryParameters.user].flat()[0] ?? initialFilter, + ); + + useEffect(() => { + updateFilters({ + user: selectedUserFilter + ? new UserListFilter( + selectedUserFilter as UserListFilterKind, + isOwnedEntity, + isStarredEntity, + ) + : undefined, + }); + }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]); + function getFilterCount(id: UserListFilterKind) { switch (id) { case 'owned': @@ -183,39 +197,6 @@ export const UserListPicker = ({ } } - useEffect(() => { - if (totalOwnedUserEntities < 1) { - setSelectedUserFilter('all'); - } - }, [totalOwnedUserEntities]); - - const removeOwnedFromItemList = (itemList: ButtonGroup[]) => { - const index = itemList[0].items.map(item => item.id).indexOf('owned'); - itemList[0].items.splice(index, 1); - return itemList; - }; - - useEffect(() => { - // Remove group items that aren't in availableFilters and exclude - // any now-empty groups. - const initialFilterGroup = getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length); - // TODO: avoid hardcoding kinds here - if (['group', 'user'].some(kind => kind === queryParameters.kind)) { - setFilterGroups(removeOwnedFromItemList(initialFilterGroup)); - } - return () => - setFilterGroups(prevState => - prevState !== initialFilterGroup ? initialFilterGroup : prevState, - ); - }, [queryParameters, availableFilters, orgName]); - return ( {filterGroups.map(group => ( From 95881167dcf1ab29b4f1dd803cb07d7949bd2800 Mon Sep 17 00:00:00 2001 From: djamaile Date: Tue, 7 Dec 2021 23:50:09 +0100 Subject: [PATCH 06/10] chore: some clean up Signed-off-by: djamaile --- .changeset/modern-buses-protect.md | 4 ++- .../UserListPicker/UserListPicker.tsx | 25 ++++++++++--------- .../src/hooks/useEntityListProvider.test.tsx | 19 ++++++++++++-- 3 files changed, 33 insertions(+), 15 deletions(-) diff --git a/.changeset/modern-buses-protect.md b/.changeset/modern-buses-protect.md index d943d6c06a..2aed52eca0 100644 --- a/.changeset/modern-buses-protect.md +++ b/.changeset/modern-buses-protect.md @@ -2,4 +2,6 @@ '@backstage/plugin-catalog-react': patch --- -when a user doesn't own any entity, the user won't get the option to select on owned +When a user has zero owned entities when viewing an entity kind in the catalog +page, it will be automatically redirected to see all the entities. Furthermore, +for the kind User and Group there are no longer the owned selector. diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index 867c5230d4..9aafdf1437 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -122,15 +122,17 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - const userAndGroupFilterIds = ['starred', 'all']; const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); + // Remove group items that aren't in availableFilters and exclude // any now-empty groups. + const userAndGroupFilterIds = ['starred', 'all']; const filterGroups = getFilterGroups(orgName) .map(filterGroup => ({ ...filterGroup, items: filterGroup.items.filter(({ id }) => + // TODO: avoid hardcoding kinds here ['group', 'user'].some(kind => kind === queryParameters.kind) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id), @@ -155,21 +157,13 @@ export const UserListPicker = ({ // filter that's controlled by this picker. const [entitiesWithoutUserFilter, setEntitiesWithoutUserFilter] = useState(backendEntities); - useEffect(() => { - const filterFn = reduceEntityFilters( - compact(Object.values({ ...filters, user: undefined })), - ); - setEntitiesWithoutUserFilter(backendEntities.filter(filterFn)); - }, [filters, backendEntities]); - const totalOwnedUserEntities = entitiesWithoutUserFilter.filter(entity => ownedFilter.filterEntity(entity), ).length; - const [selectedUserFilter, setSelectedUserFilter] = useState( - totalOwnedUserEntities < 1 - ? 'all' - : [queryParameters.user].flat()[0] ?? initialFilter, + totalOwnedUserEntities > 0 + ? [queryParameters.user].flat()[0] ?? initialFilter + : 'all', ); useEffect(() => { @@ -184,6 +178,13 @@ export const UserListPicker = ({ }); }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]); + useEffect(() => { + const filterFn = reduceEntityFilters( + compact(Object.values({ ...filters, user: undefined })), + ); + setEntitiesWithoutUserFilter(backendEntities.filter(filterFn)); + }, [filters, backendEntities]); + function getFilterCount(id: UserListFilterKind) { switch (id) { case 'owned': diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx index b96f63304a..fd5cf3b9dd 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx @@ -137,12 +137,27 @@ describe('', () => { const { result, waitFor } = renderHook(() => useEntityListProvider(), { wrapper, initialProps: { - userFilter: 'owned', + userFilter: 'all', }, }); await waitFor(() => !!result.current.entities.length); expect(result.current.backendEntities.length).toBe(2); - expect(result.current.entities.length).toBe(1); + + act(() => + result.current.updateFilters({ + user: new UserListFilter( + 'owned', + entity => entity.metadata.name === 'component-1', + () => true, + ), + }), + ); + + await waitFor(() => { + expect(result.current.backendEntities.length).toBe(2); + expect(result.current.entities.length).toBe(1); + expect(mockCatalogApi.getEntities).toHaveBeenCalledTimes(1); + }); }); it('resolves query param filter values', async () => { From 30e3fbb34b9679db783c24c9b238ba46c35178b3 Mon Sep 17 00:00:00 2001 From: djamaile Date: Thu, 9 Dec 2021 23:23:58 +0100 Subject: [PATCH 07/10] chore: remove backstage.json Signed-off-by: djamaile --- backstage.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 backstage.json diff --git a/backstage.json b/backstage.json deleted file mode 100644 index 77e9232b75..0000000000 --- a/backstage.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "version": "0.4.5" -} From 2c9e29a352c55510ec457c89a04f7f298a8881f4 Mon Sep 17 00:00:00 2001 From: djamaile Date: Mon, 27 Dec 2021 00:24:05 +0100 Subject: [PATCH 08/10] test: add fire event click to tests Signed-off-by: djamaile --- .../components/CatalogPage/CatalogPage.test.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 0a46580c12..bd216a26ad 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -181,7 +181,7 @@ describe('CatalogPage', () => { { title: 'Bar', field: 'entity.bar' }, { title: 'Baz', field: 'entity.spec.lifecycle' }, ]; - const { getAllByRole } = await renderWrapped( + const { getByTestId, getAllByRole } = await renderWrapped( , ); @@ -189,12 +189,14 @@ describe('CatalogPage', () => { c => c.tagName === 'SPAN', ); const columnHeaderLabels = columnHeader.map(c => c.textContent); - expect(columnHeaderLabels).toEqual(['Foo', 'Bar', 'Baz', 'Actions']); }, 20_000); it('should render the default actions of an item in the grid', async () => { - const { findByTitle, findByText } = await renderWrapped(); + const { getByTestId, findByTitle, findByText } = await renderWrapped( + , + ); + fireEvent.click(getByTestId('user-picker-owned')); expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); expect(await findByTitle(/View/)).toBeInTheDocument(); expect(await findByTitle(/Edit/)).toBeInTheDocument(); @@ -221,9 +223,11 @@ describe('CatalogPage', () => { }, ]; - const { findByTitle, findByText } = await renderWrapped( + const { getByTestId, findByTitle, findByText } = await renderWrapped( , ); + fireEvent.click(getByTestId('user-picker-owned')); + expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); expect(await findByTitle(/Foo Action/)).toBeInTheDocument(); expect(await findByTitle(/Bar Action/)).toBeInTheDocument(); @@ -235,6 +239,7 @@ describe('CatalogPage', () => { // https://github.com/mbrn/material-table/issues/1293 it('should render', async () => { const { findByText, getByTestId } = await renderWrapped(); + fireEvent.click(getByTestId('user-picker-owned')); await expect(findByText(/Owned \(1\)/)).resolves.toBeInTheDocument(); fireEvent.click(getByTestId('user-picker-all')); await expect(findByText(/All \(2\)/)).resolves.toBeInTheDocument(); @@ -250,7 +255,8 @@ describe('CatalogPage', () => { // this test is for fixing the bug after favoriting an entity, the matching // entities defaulting to "owned" filter and not based on the selected filter it('should render the correct entities filtered on the selected filter', async () => { - await renderWrapped(); + const { getByTestId } = await renderWrapped(); + fireEvent.click(getByTestId('user-picker-owned')); await expect(screen.findByText(/Owned \(1\)/)).resolves.toBeInTheDocument(); fireEvent.click(screen.getByTestId('user-picker-starred')); await expect( From ffe4a9a8a8e6de6f8317dac53a43234d38421000 Mon Sep 17 00:00:00 2001 From: djamaile Date: Mon, 27 Dec 2021 00:34:31 +0100 Subject: [PATCH 09/10] fix: remove unused var Signed-off-by: djamaile --- plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index bd216a26ad..4dcab6f4f7 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -181,7 +181,7 @@ describe('CatalogPage', () => { { title: 'Bar', field: 'entity.bar' }, { title: 'Baz', field: 'entity.spec.lifecycle' }, ]; - const { getByTestId, getAllByRole } = await renderWrapped( + const { getAllByRole } = await renderWrapped( , ); From caf278c9f93041382682f77d82b9d95741278e5c Mon Sep 17 00:00:00 2001 From: djamaile Date: Mon, 27 Dec 2021 01:59:04 +0100 Subject: [PATCH 10/10] fix: remove double line Signed-off-by: djamaile --- plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 4dcab6f4f7..effd9f5bc6 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -228,7 +228,6 @@ describe('CatalogPage', () => { ); fireEvent.click(getByTestId('user-picker-owned')); expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); - expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); expect(await findByTitle(/Foo Action/)).toBeInTheDocument(); expect(await findByTitle(/Bar Action/)).toBeInTheDocument(); expect((await findByTitle(/Bar Action/)).firstChild).toBeDisabled();