chore(catalog): rename stuff

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: () => <b>BACKSTAGE!</b>,
           },
           {
-            id: EntityFilterType.STARRED,
+            id: EntityGroup.STARRED,
             label: 'Second Label',
             count: 400,
           },

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>(theme => ({
 }));
 
 export const CatalogFilter: FC<{
-  selectedFilter: EntityFilterType;
-  onFilterChange: (type: EntityFilterType) => void;
+  selectedFilter: EntityGroup;
+  onFilterChange: (type: EntityGroup) => void;
   entitiesByFilter: EntitiesByFilter;
   groups: CatalogFilterGroup[];
 }> = ({

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<{}> = () => {
           <div>
             <CatalogFilter
               groups={filterGroups}
-              selectedFilter={selectedFilter ?? EntityFilterType.ALL}
+              selectedFilter={selectedFilter ?? EntityGroup.ALL}
               onFilterChange={setSelectedFilter}
               entitiesByFilter={entitiesByFilter}
             />
           </div>
           <CatalogTable
             titlePreamble={
-              getCatalogFilterItemByType(selectedFilter ?? EntityFilterType.ALL)
+              getCatalogFilterItemByType(selectedFilter ?? EntityGroup.ALL)
                 ?.label ?? ''
             }
             entities={filteredEntities || []}

plugins/catalog/src/data/filters.ts

@@ -22,7 +22,7 @@ import {
   CatalogFilterItem,
 } from '../components/CatalogFilter/CatalogFilter';
 
-export enum EntityFilterType {
+export enum EntityGroup {
   ALL = 'ALL',
   STARRED = 'STARRED',
   OWNED = 'OWNED',
@@ -33,12 +33,12 @@ export const filterGroups: CatalogFilterGroup[] = [
     name: 'Personal',
     items: [
       {
-        id: EntityFilterType.OWNED,
+        id: EntityGroup.OWNED,
         label: 'Owned',
         icon: SettingsIcon,
       },
       {
-        id: EntityFilterType.STARRED,
+        id: EntityGroup.STARRED,
         label: 'Starred',
         icon: StarIcon,
       },
@@ -49,14 +49,14 @@ export const filterGroups: CatalogFilterGroup[] = [
     name: 'Company',
     items: [
       {
-        id: EntityFilterType.ALL,
+        id: EntityGroup.ALL,
         label: 'All Services',
       },
     ],
   },
 ];
 
-export const getCatalogFilterItemByType = (filterType: EntityFilterType) => {
+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<string, EntityFilter> = {
-  [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) =>

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<EntityFilterType, Entity[] | undefined>;
+export type EntitiesByFilter = Record<EntityGroup, Entity[] | undefined>;
 
 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<string>(
+  const [selectedTypeFilter, selectTypeFilter] = useState<string>(
     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,
   };
 };