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,
};
};