Move local concerns into the CatalogTabs

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -24,11 +24,7 @@ import Star from '@material-ui/icons/Star';
 import StarOutline from '@material-ui/icons/StarBorder';
 import React, { useCallback, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import {
-  EntityGroup,
-  filterGroups,
-  LabeledEntityType,
-} from '../../data/filters';
+import { EntityGroup, filterGroups } from '../../data/filters';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { EntityFilterGroupsProvider, useFilteredEntities } from '../../filter';
 import { useStarredEntities } from '../../hooks/useStarredEntites';
@@ -107,16 +103,13 @@ const CatalogPageContents = () => {
     },
   ];
 
-  const onTabChanged = useCallback((type: LabeledEntityType) => {
-    setSelectedTab(type.label);
-  }, []);
   const onSidebarChanged = useCallback((filterItem: CatalogFilterItem) => {
     setSelectedSidebarItem(filterItem.label);
   }, []);
 
   return (
     <CatalogLayout>
-      <CatalogTabs onChange={onTabChanged} />
+      <CatalogTabs onChange={({ label }) => setSelectedTab(label)} />
       <Content>
         <WelcomeBanner />
         <ContentHeader title={selectedTab ?? ''}>

plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx

@@ -14,11 +14,45 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useEffect } from 'react';
-import { HeaderTabs } from '@backstage/core';
-import { labeledEntityTypes, LabeledEntityType } from '../../data/filters';
-import { useEntityFilterGroup, FilterGroup } from '../../filter';
 import { Entity } from '@backstage/catalog-model';
+import { HeaderTabs } from '@backstage/core';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FilterGroup, useEntityFilterGroup } from '../../filter';
+
+type ComponentType =
+  | 'service'
+  | 'website'
+  | 'library'
+  | 'documentation'
+  | 'other';
+
+export type LabeledComponentType = {
+  id: ComponentType;
+  label: string;
+};
+
+const labeledEntityTypes: LabeledComponentType[] = [
+  {
+    id: 'service',
+    label: 'Services',
+  },
+  {
+    id: 'website',
+    label: 'Websites',
+  },
+  {
+    id: 'library',
+    label: 'Libraries',
+  },
+  {
+    id: 'documentation',
+    label: 'Documentation',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+  },
+];
 
 const filterGroup: FilterGroup = {
   filters: Object.fromEntries(
@@ -29,27 +63,39 @@ const filterGroup: FilterGroup = {
   ),
 };
 
+type OnChangeCallback = (item: { type: string; label: string }) => void;
+
 type Props = {
-  onChange?: (type: LabeledEntityType) => void;
+  onChange?: OnChangeCallback;
 };
 
+/**
+ * The tabs at the top of the catalog list page, for component type filtering.
+ */
 export const CatalogTabs = ({ onChange }: Props) => {
   const { setSelectedFilters } = useEntityFilterGroup('type', filterGroup, [
     labeledEntityTypes[0].id,
   ]);
+  const [currentTabIndex, setCurrentTabIndex] = useState<number>(0);
 
-  const onChangeFn = useCallback(
+  const onChangeRef = useRef<OnChangeCallback>();
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    const type = labeledEntityTypes[currentTabIndex];
+    onChangeRef.current?.({ type: type.id, label: type.label });
+  }, [currentTabIndex]);
+
+  const switchTab = useCallback(
     (index: Number) => {
       const type = labeledEntityTypes[index as number];
       setSelectedFilters([type.id]);
-      onChange?.(type);
+      setCurrentTabIndex(index as number);
+      onChangeRef.current?.({ type: type.id, label: type.label });
     },
-    [onChange, setSelectedFilters],
+    [setSelectedFilters],
   );
 
-  useEffect(() => {
-    onChange?.(labeledEntityTypes[0]);
-  }, [onChange]);
-
-  return <HeaderTabs tabs={labeledEntityTypes} onChange={onChangeFn} />;
+  return <HeaderTabs tabs={labeledEntityTypes} onChange={switchTab} />;
 };

plugins/catalog/src/data/filters.ts

@@ -17,10 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import SettingsIcon from '@material-ui/icons/Settings';
 import StarIcon from '@material-ui/icons/Star';
-import {
-  CatalogFilterGroup,
-  CatalogFilterItem,
-} from '../components/CatalogFilter/CatalogFilter';
+import { CatalogFilterGroup } from '../components/CatalogFilter/CatalogFilter';
 
 export enum EntityGroup {
   ALL = 'ALL',
@@ -56,17 +53,6 @@ export const filterGroups: CatalogFilterGroup[] = [
   },
 ];
 
-export const getCatalogFilterItemByType = (filterType: EntityGroup) => {
-  for (const group of filterGroups) {
-    for (const filter of group.items) {
-      if (filter.id === filterType) {
-        return filter;
-      }
-    }
-  }
-  return null;
-};
-
 type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean;
 
 export type EntityFilterOptions = {
@@ -79,38 +65,3 @@ export const entityFilters: Record<string, EntityFilter> = {
   [EntityGroup.ALL]: () => true,
   [EntityGroup.STARRED]: (e, { isStarred }) => isStarred(e),
 };
-
-export const entityTypeFilter = (e: Entity, type: string) =>
-  (e.spec as any)?.type === type;
-
-type EntityType = 'service' | 'website' | 'library' | 'documentation' | 'other';
-
-export type LabeledEntityType = {
-  id: EntityType;
-  label: string;
-};
-
-export const labeledEntityTypes: LabeledEntityType[] = [
-  {
-    id: 'service',
-    label: 'Services',
-  },
-  {
-    id: 'website',
-    label: 'Websites',
-  },
-  {
-    id: 'library',
-    label: 'Libraries',
-  },
-  {
-    id: 'documentation',
-    label: 'Documentation',
-  },
-  {
-    id: 'other',
-    label: 'Other',
-  },
-];
-
-export const defaultFilter: CatalogFilterItem = filterGroups[0].items[0];