diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx index a19459b236..56268697c8 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { render, fireEvent, waitFor, screen } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { CatalogFilter, CatalogFilterGroup } from './CatalogFilter'; -import { EntityFilterType } from '../../data/filters'; +import { EntityGroup } from '../../data/filters'; describe('Catalog Filter', () => { const comp1 = { @@ -52,12 +52,12 @@ describe('Catalog Filter', () => { }, }; const defaultFilterProps = { - selectedFilter: EntityFilterType.ALL, - onFilterChange: (type: EntityFilterType) => type, + selectedFilter: EntityGroup.ALL, + onFilterChange: (type: EntityGroup) => type, entitiesByFilter: { - [EntityFilterType.ALL]: [comp1, comp2, comp3], - [EntityFilterType.STARRED]: [comp1], - [EntityFilterType.OWNED]: [comp1], + [EntityGroup.ALL]: [comp1, comp2, comp3], + [EntityGroup.STARRED]: [comp1], + [EntityGroup.OWNED]: [comp1], }, }; it('should render the different groups', async () => { @@ -82,11 +82,11 @@ describe('Catalog Filter', () => { name: 'Test Group 1', items: [ { - id: EntityFilterType.ALL, + id: EntityGroup.ALL, label: 'First Label', }, { - id: EntityFilterType.STARRED, + id: EntityGroup.STARRED, label: 'Second Label', }, ], @@ -111,12 +111,12 @@ describe('Catalog Filter', () => { name: 'Test Group 1', items: [ { - id: EntityFilterType.ALL, + id: EntityGroup.ALL, label: 'First Label', count: 3, }, { - id: EntityFilterType.STARRED, + id: EntityGroup.STARRED, label: 'Second Label', count: 1, }, @@ -135,8 +135,7 @@ describe('Catalog Filter', () => { screen.getAllByText( new RegExp( `(${ - defaultFilterProps.entitiesByFilter[key as EntityFilterType] - .length + defaultFilterProps.entitiesByFilter[key as EntityGroup].length })`, ), ), @@ -150,12 +149,12 @@ describe('Catalog Filter', () => { name: 'Test Group 1', items: [ { - id: EntityFilterType.ALL, + id: EntityGroup.ALL, label: 'First Label', count: 100, }, { - id: EntityFilterType.STARRED, + id: EntityGroup.STARRED, label: 'Second Label', count: 400, }, @@ -190,12 +189,12 @@ describe('Catalog Filter', () => { name: 'Test Group 1', items: [ { - id: EntityFilterType.ALL, + id: EntityGroup.ALL, label: 'First Label', count: () => BACKSTAGE!, }, { - id: EntityFilterType.STARRED, + id: EntityGroup.STARRED, label: 'Second Label', count: 400, }, diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index cc3d269e61..61a83fccd8 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -26,11 +26,11 @@ import { makeStyles, } from '@material-ui/core'; import type { IconComponent } from '@backstage/core'; -import { EntityFilterType } from '../../data/filters'; +import { EntityGroup } from '../../data/filters'; import { EntitiesByFilter } from '../../hooks/useEntities'; export type CatalogFilterItem = { - id: EntityFilterType; + id: EntityGroup; label: string; icon?: IconComponent; count?: number | FC; @@ -68,8 +68,8 @@ const useStyles = makeStyles(theme => ({ })); export const CatalogFilter: FC<{ - selectedFilter: EntityFilterType; - onFilterChange: (type: EntityFilterType) => void; + selectedFilter: EntityGroup; + onFilterChange: (type: EntityGroup) => void; entitiesByFilter: EntitiesByFilter; groups: CatalogFilterGroup[]; }> = ({ diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 08014fdc74..68506136d2 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -37,7 +37,7 @@ import { useEntities } from '../../hooks/useEntities'; import { findLocationForEntityMeta } from '../../data/utils'; import { getCatalogFilterItemByType, - EntityFilterType, + EntityGroup, filterGroups, labeledEntityTypes, } from '../../data/filters'; @@ -64,12 +64,11 @@ export const CatalogPage: FC<{}> = () => { toggleStarredEntity, isStarredEntity, setSelectedFilter, - selectedTab, - setSelectedTab, + selectedTypeFilter: selectedTab, + selectTypeFilter: setSelectedTab, } = useEntities(); - const filteredEntities = - entitiesByFilter[selectedFilter ?? EntityFilterType.ALL]; + const filteredEntities = entitiesByFilter[selectedFilter ?? EntityGroup.ALL]; const styles = useStyles(); @@ -160,14 +159,14 @@ export const CatalogPage: FC<{}> = () => {
{ +export const getCatalogFilterItemByType = (filterType: EntityGroup) => { for (const group of filterGroups) { for (const filter of group.items) { if (filter.id === filterType) { @@ -72,7 +72,6 @@ type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean; type EntityFilterOptions = Partial<{ isStarred: boolean; userId: string; - type: string; }>; type Owned = { @@ -80,12 +79,12 @@ type Owned = { }; export const entityFilters: Record = { - [EntityFilterType.OWNED]: (e, { userId }) => { + [EntityGroup.OWNED]: (e, { userId }) => { const owner = (e.spec! as Owned).owner; return owner === userId; }, - [EntityFilterType.ALL]: () => true, - [EntityFilterType.STARRED]: (_, { isStarred }) => !!isStarred, + [EntityGroup.ALL]: () => true, + [EntityGroup.STARRED]: (_, { isStarred }) => !!isStarred, }; export const entityTypeFilter = (e: Entity, type: string) => diff --git a/plugins/catalog/src/hooks/useEntities.ts b/plugins/catalog/src/hooks/useEntities.ts index d9065b645e..6509bd9b4b 100644 --- a/plugins/catalog/src/hooks/useEntities.ts +++ b/plugins/catalog/src/hooks/useEntities.ts @@ -15,7 +15,7 @@ */ import { useState, useMemo } from 'react'; import { - EntityFilterType, + EntityGroup, entityFilters, entityTypeFilter, labeledEntityTypes, @@ -26,48 +26,42 @@ import { useStarredEntities } from './useStarredEntites'; import { Entity } from '@backstage/catalog-model'; import useStaleWhileRevalidate from 'swr'; -export type EntitiesByFilter = Record; +export type EntitiesByFilter = Record; type UseEntities = { - selectedFilter: EntityFilterType | undefined; - setSelectedFilter: (f: EntityFilterType) => void; + selectedFilter: EntityGroup | undefined; + setSelectedFilter: (f: EntityGroup) => void; error: Error | null; toggleStarredEntity: any; isStarredEntity: (e: Entity) => boolean; entitiesByFilter: EntitiesByFilter; loading: boolean; + selectedTypeFilter: string; + selectTypeFilter: (id: string) => void; }; export const useEntities = (): UseEntities => { const [selectedFilter, setSelectedFilter] = useState< - EntityFilterType | undefined + EntityGroup | undefined >(); const catalogApi = useApi(catalogApiRef); const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); const { data: entities, error } = useStaleWhileRevalidate( - ['catalog/all', entityFilters[selectedFilter ?? EntityFilterType.ALL]], + ['catalog/all', entityFilters[selectedFilter ?? EntityGroup.ALL]], async () => catalogApi.getEntities(), ); const indentityApi = useApi(identityApiRef); const userId = indentityApi.getUserId(); - const [selectedTab, setSelectedTab] = useState( + const [selectedTypeFilter, selectTypeFilter] = useState( labeledEntityTypes[0].id, ); - // const filteredEntities = useMemo(() => { - // const typeFilter = entityFilters[EntityFilterType.TYPE]; - // const leftMenuFilter = entityFilters[selectedFilter.id]; - // return entities - // ?.filter(e => leftMenuFilter(e, { isStarred: isStarredEntity(e) })) - // .filter(e => typeFilter(e, { type: selectedTab })); - // }, [selectedFilter.id, selectedTab, isStarredEntity, entities?.filter]); - const entitiesByFilter = useMemo(() => { const filterEntities = ( ents: Entity[] | undefined, - filterId: EntityFilterType, + filterId: EntityGroup, isStarred: (e: Entity) => boolean, user: string, ) => { @@ -78,14 +72,14 @@ export const useEntities = (): UseEntities => { userId: user, }), ) - .filter(e => entityTypeFilter(e, selectedTab)); + .filter(e => entityTypeFilter(e, selectedTypeFilter)); }; - const data = Object.keys(EntityFilterType).reduce( + const data = Object.keys(EntityGroup).reduce( (res, key) => ({ ...res, [key]: filterEntities( entities, - key as EntityFilterType, + key as EntityGroup, isStarredEntity, userId, ), @@ -93,7 +87,7 @@ export const useEntities = (): UseEntities => { {} as EntitiesByFilter, ); return data; - }, [entities, isStarredEntity, userId, selectedTab]); + }, [entities, isStarredEntity, userId, selectedTypeFilter]); return { selectedFilter, @@ -103,7 +97,7 @@ export const useEntities = (): UseEntities => { isStarredEntity, entitiesByFilter, loading: entities === undefined, - selectedTab, - setSelectedTab, + selectedTypeFilter, + selectTypeFilter, }; };