From e1417c7d95110a027cfd176a4ad43cfaf4902f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 26 Jun 2020 22:50:35 +0200 Subject: [PATCH] Move local concerns into the CatalogTabs --- .../components/CatalogPage/CatalogPage.tsx | 11 +-- .../components/CatalogPage/CatalogTabs.tsx | 72 +++++++++++++++---- plugins/catalog/src/data/filters.ts | 51 +------------ 3 files changed, 62 insertions(+), 72 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index be357dfed1..b7e97227e8 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/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 ( - + setSelectedTab(label)} /> diff --git a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx b/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx index 1845404935..931874d2fc 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx +++ b/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(0); - const onChangeFn = useCallback( + const onChangeRef = useRef(); + 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 ; + return ; }; diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts index 890b267b4f..5ab77609ab 100644 --- a/plugins/catalog/src/data/filters.ts +++ b/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 = { [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];