diff --git a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx index c528b40882..b4d90c249a 100644 --- a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx +++ b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx @@ -29,5 +29,5 @@ export const AllServicesCount: FC<{}> = () => { return ; } - return {value?.length ?? '-'}; + return {value ?? length ?? '-'}; }; diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index e815d470e1..f11494079f 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -108,7 +108,7 @@ export const CatalogFilter: FC<{ {item.label} - {entitiesByFilter[item.id]?.length ?? 0} + {entitiesByFilter[item.id]?.length ?? '-'} ))} diff --git a/plugins/catalog/src/components/CatalogFilter/OwnedCount.tsx b/plugins/catalog/src/components/CatalogFilter/OwnedCount.tsx deleted file mode 100644 index a48019c48a..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/OwnedCount.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { FC } from 'react'; -import { useStarredEntities } from '../../hooks/useStarredEntites'; - -export const StarredCount: FC<{}> = () => { - const { starredEntities } = useStarredEntities(); - return {starredEntities.size}; -}; diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx b/plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx deleted file mode 100644 index 546d00e854..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React from 'react'; -import { render } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; -import { StarredCount } from './StarredCount'; -import * as Hooks from '../../hooks/useStarredEntites'; - -describe('Starred Count', () => { - it('should render the count returned from the hook', async () => { - jest.spyOn(Hooks, 'useStarredEntities').mockReturnValue({ - starredEntities: new Set(['id1', 'id2', 'id3', 'id4']), - isStarredEntity: () => false, - toggleStarredEntity: () => undefined, - }); - - const { findByText } = render(wrapInTestApp()); - - expect(await findByText('4')).toBeInTheDocument(); - }); -}); diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx b/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx deleted file mode 100644 index a48019c48a..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { FC } from 'react'; -import { useStarredEntities } from '../../hooks/useStarredEntites'; - -export const StarredCount: FC<{}> = () => { - const { starredEntities } = useStarredEntities(); - return {starredEntities.size}; -}; diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts index 226ccbc683..6230b3c8fc 100644 --- a/plugins/catalog/src/data/filters.ts +++ b/plugins/catalog/src/data/filters.ts @@ -17,12 +17,10 @@ import { Entity } from '@backstage/catalog-model'; import SettingsIcon from '@material-ui/icons/Settings'; import StarIcon from '@material-ui/icons/Star'; -import { AllServicesCount } from '../components/CatalogFilter/AllServicesCount'; import { CatalogFilterGroup, CatalogFilterItem, } from '../components/CatalogFilter/CatalogFilter'; -import { StarredCount } from '../components/CatalogFilter/StarredCount'; export enum EntityFilterType { ALL = 'ALL', @@ -37,13 +35,11 @@ export const filterGroups: CatalogFilterGroup[] = [ { id: EntityFilterType.OWNED, label: 'Owned', - count: 0, icon: SettingsIcon, }, { id: EntityFilterType.STARRED, label: 'Starred', - count: StarredCount, icon: StarIcon, }, ], @@ -55,7 +51,6 @@ export const filterGroups: CatalogFilterGroup[] = [ { id: EntityFilterType.ALL, label: 'All Services', - count: AllServicesCount, }, ], }, diff --git a/plugins/catalog/src/hooks/useEntities.ts b/plugins/catalog/src/hooks/useEntities.ts new file mode 100644 index 0000000000..8dca72f095 --- /dev/null +++ b/plugins/catalog/src/hooks/useEntities.ts @@ -0,0 +1,88 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { useState, useMemo } from 'react'; +import { EntityFilterType, entityFilters } from '../data/filters'; +import { useApi } from '@backstage/core'; +import { catalogApiRef } from '..'; +import { useStarredEntities } from './useStarredEntites'; +import { Entity } from '@backstage/catalog-model'; +import useStaleWhileRevalidate from 'swr'; + +export type EntitiesByFilter = Record; + +type UseEntities = { + selectedFilter: EntityFilterType | undefined; + setSelectedFilter: (f: EntityFilterType) => void; + error: Error | null; + toggleStarredEntity: any; + isStarredEntity: (e: Entity) => boolean; + entitiesByFilter: EntitiesByFilter; +}; + +export const useEntities = (): UseEntities => { + const [selectedFilter, setSelectedFilter] = useState< + EntityFilterType | undefined + >(); + const catalogApi = useApi(catalogApiRef); + const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); + const { data: entities, error } = useStaleWhileRevalidate( + ['catalog/all', entityFilters[selectedFilter ?? EntityFilterType.ALL]], + async () => catalogApi.getEntities(), + ); + const useUser = () => { + const [user] = useState('tools@example.com'); + return user; + }; + const userId = useUser(); + + const entitiesByFilter = useMemo(() => { + const filterEntities = ( + ents: Entity[] | undefined, + filterId: EntityFilterType, + isStarred: (e: Entity) => boolean, + user: string, + ) => { + return ents?.filter((e: Entity) => + entityFilters[filterId](e, { + isStarred: isStarred(e), + userId: user, + }), + ); + }; + const data = Object.keys(EntityFilterType).reduce( + (res, key) => ({ + ...res, + [key]: filterEntities( + entities, + key as EntityFilterType, + isStarredEntity, + userId, + ), + }), + {} as EntitiesByFilter, + ); + return data; + }, [entities, isStarredEntity, userId]); + + return { + selectedFilter, + setSelectedFilter, + error, + toggleStarredEntity, + isStarredEntity, + entitiesByFilter, + }; +};