From 0302808d0757eb455d13f643a13e3a4ee391336e Mon Sep 17 00:00:00 2001 From: Victor Perera Date: Tue, 4 May 2021 19:39:45 -0500 Subject: [PATCH 001/475] Add owner into template card Signed-off-by: Victor Perera --- .../src/kinds/TemplateEntityV1alpha1.ts | 1 + .../components/TemplateCard/TemplateCard.tsx | 38 ++++++++++++++++--- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts b/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts index 72479c7efa..457ac93484 100644 --- a/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts +++ b/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts @@ -33,6 +33,7 @@ export interface TemplateEntityV1alpha1 extends Entity { templater: string; path?: string; schema: JSONSchema; + owner: string; }; } diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 8c64d981ad..36dcb6d73b 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -23,6 +23,7 @@ import { CardMedia, Chip, makeStyles, + Typography, useTheme, } from '@material-ui/core'; import React from 'react'; @@ -31,21 +32,32 @@ import { rootRouteRef } from '../../routes'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ cardHeader: { position: 'relative', }, title: { backgroundImage: ({ backgroundImage }: any) => backgroundImage, }, - description: { + box: { overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkit-line-clamp': 10, '-webkit-box-orient': 'vertical', + paddingBottom: '0.8em', }, -}); + label: { + color: theme.palette.text.secondary, + textTransform: 'uppercase', + fontSize: '10px', + fontWeight: 'bold', + letterSpacing: 0.5, + overflow: 'hidden', + whiteSpace: 'nowrap', + paddingBottom: '0.2rem', + }, +})); export type TemplateCardProps = { template: TemplateEntityV1alpha1; @@ -57,6 +69,7 @@ type TemplateProps = { title: string; type: string; name: string; + owner: string; }; const getTemplateCardProps = ( @@ -68,6 +81,7 @@ const getTemplateCardProps = ( title: `${(template.metadata.title || template.metadata.name) ?? ''}`, type: template.spec.type ?? '', description: template.metadata.description ?? '-', + owner: template.spec.owner ?? '-', tags: (template.metadata?.tags as string[]) ?? [], }; }; @@ -94,13 +108,27 @@ export const TemplateCard = ({ template }: TemplateCardProps) => { classes={{ root: classes.title }} /> - + + + + Description + + {templateProps.description} + + + + Owner + + {templateProps.owner} + + + Tags + {templateProps.tags?.map(tag => ( ))} - {templateProps.description} )} - {showAddExampleEntities && ( - - )} All your software catalog entities
-
- - setSelectedSidebarItem({ label, id }) - } - initiallySelected={initiallySelectedFilter} - /> - -
- + +
+ + + +
+ +
); }; - -export const CatalogPage = (props: CatalogPageProps) => ( - - - -); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index ffd5f3d190..56d2db6bba 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -20,9 +20,13 @@ import { EDIT_URL_ANNOTATION, } from '@backstage/catalog-model'; import { act, fireEvent } from '@testing-library/react'; -import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; import * as React from 'react'; import { CatalogTable } from './CatalogTable'; +import { + EntityListContext, + UserListFilter, +} from '@backstage/plugin-catalog-react'; const entities: Entity[] = [ { @@ -42,6 +46,14 @@ const entities: Entity[] = [ }, ]; +const emptyEntityListContext = { + entities: [], + backendEntities: [], + filters: [], + loading: false, + updateFilters: () => {}, +}; + describe('CatalogTable component', () => { beforeEach(() => { window.open = jest.fn(); @@ -51,16 +63,13 @@ describe('CatalogTable component', () => { jest.resetAllMocks(); }); - it('should render error message when error is passed in props', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + it('should render error message', async () => { + const rendered = await renderInTestApp( + + + , ); const errorMessage = await rendered.findByText( /Could not fetch catalog entities./, @@ -69,14 +78,16 @@ describe('CatalogTable component', () => { }); it('should display entity names when loading has finished and no error occurred', async () => { - const rendered = await renderWithEffects( - wrapInTestApp( - , - ), + const rendered = await renderInTestApp( + + + , ); expect(rendered.getByText(/Owned \(3\)/)).toBeInTheDocument(); expect(rendered.getByText(/component1/)).toBeInTheDocument(); @@ -94,14 +105,12 @@ describe('CatalogTable component', () => { }, }; - const { getByTitle } = await renderWithEffects( - wrapInTestApp( - , - ), + const { getByTitle } = await renderInTestApp( + + + , ); const editButton = getByTitle('Edit'); @@ -123,14 +132,12 @@ describe('CatalogTable component', () => { }, }; - const { getByTitle } = await renderWithEffects( - wrapInTestApp( - , - ), + const { getByTitle } = await renderInTestApp( + + + , ); const viewButton = getByTitle('View'); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 03dece50fe..ca45e2d07b 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -13,11 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - Entity, - RELATION_OWNED_BY, - RELATION_PART_OF, -} from '@backstage/catalog-model'; +import { RELATION_OWNED_BY, RELATION_PART_OF } from '@backstage/catalog-model'; import { CodeSnippet, Table, @@ -28,10 +24,12 @@ import { import { formatEntityRefTitle, getEntityRelations, + useEntityListProvider, useStarredEntities, } from '@backstage/plugin-catalog-react'; import Edit from '@material-ui/icons/Edit'; import OpenInNew from '@material-ui/icons/OpenInNew'; +import { capitalize } from 'lodash'; import React from 'react'; import { getEntityMetadataEditUrl, @@ -55,23 +53,17 @@ const defaultColumns: TableColumn[] = [ ]; type CatalogTableProps = { - entities: Entity[]; - titlePreamble: string; - loading: boolean; - error?: any; - view?: string; columns?: TableColumn[]; }; -export const CatalogTable = ({ - entities, - loading, - error, - titlePreamble, - view, - columns, -}: CatalogTableProps) => { +export const CatalogTable = ({ columns }: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); + // TODO(timbonicus): should the component loading entities register which fields it's interested in? + const { loading, error, entities, filters } = useEntityListProvider(); + + const showTypeColumn = filters.type !== undefined; + // TODO(timbonicus): this makes less sense with more complex filters, should we show filter chips instead? + const titlePreamble = capitalize(filters.user?.value ?? 'all'); if (error) { return ( @@ -152,7 +144,7 @@ export const CatalogTable = ({ const typeColumn = (columns || defaultColumns).find(c => c.title === 'Type'); if (typeColumn) { - typeColumn.hidden = view !== 'Other'; + typeColumn.hidden = !showTypeColumn; } return ( diff --git a/plugins/catalog/src/components/CatalogTable/index.ts b/plugins/catalog/src/components/CatalogTable/index.ts index 9148a22a41..280d5b4bcb 100644 --- a/plugins/catalog/src/components/CatalogTable/index.ts +++ b/plugins/catalog/src/components/CatalogTable/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 Spotify AB + * Copyright 2021 Spotify AB * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -13,4 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + export { CatalogTable } from './CatalogTable'; diff --git a/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx new file mode 100644 index 0000000000..e8ef1de8c6 --- /dev/null +++ b/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -0,0 +1,84 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useEffect, useState } from 'react'; +import { capitalize } from 'lodash'; +import { Box } from '@material-ui/core'; +import { Select, useApi } from '@backstage/core'; +import { + catalogApiRef, + EntityTypeFilter, + useEntityListProvider, +} from '@backstage/plugin-catalog-react'; +import { Entity } from '@backstage/catalog-model'; + +export const EntityTypePicker = () => { + const catalogApi = useApi(catalogApiRef); + const { filters, updateFilters } = useEntityListProvider(); + const [types, setTypes] = useState([]); + + const kindFilter = filters.kind?.value; + + // Load all valid spec.type values straight from the catalogApi - we want the full set for the + // selected kinds, not an otherwise filtered set. + useEffect(() => { + async function loadTypesForKinds() { + if (kindFilter) { + const response = await catalogApi.getEntities({ + filter: { kind: kindFilter }, + fields: ['spec.type'], + }); + const entities: Entity[] = response.items ?? []; + const newTypes = [ + ...new Set( + entities.map(e => e.spec?.type).filter(Boolean) as string[], + ), + ].sort(); + setTypes(newTypes); + + if (filters.type && !newTypes.includes(filters.type.value)) { + updateFilters({ type: undefined }); + } + } + } + loadTypesForKinds(); + }, [filters.type, catalogApi, kindFilter, updateFilters]); + + const onChange = (value: any) => { + updateFilters({ type: new EntityTypeFilter(value) }); + }; + + if (!kindFilter) return null; + + const items = [ + { value: 'all', label: 'All' }, + ...types.map(type => ({ + value: type, + label: capitalize(type), + })), + ]; + + return ( + + From 5e0ae3428f30017cdad6219d2b12cd461ee462b5 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Wed, 12 May 2021 12:08:41 -0600 Subject: [PATCH 033/475] Remove deprecated hooks Signed-off-by: Tim Hansen --- .../CatalogFilter/AllServicesCount.tsx | 33 --- .../CatalogFilter/CatalogFilter.test.tsx | 264 ------------------ .../CatalogFilter/CatalogFilter.tsx | 219 --------------- .../src/components/CatalogFilter/index.ts | 17 -- .../CatalogPage/CatalogPage.test.tsx | 3 +- .../components/CatalogPage/CatalogTabs.tsx | 95 ------- .../ResultsFilter/ResultsFilter.test.tsx | 105 ------- .../ResultsFilter/ResultsFilter.tsx | 121 -------- .../src/filter/EntityFilterGroupsProvider.tsx | 263 ----------------- plugins/catalog/src/filter/context.ts | 44 --- plugins/catalog/src/filter/index.ts | 28 -- plugins/catalog/src/filter/types.ts | 53 ---- .../src/filter/useEntityFilterGroup.test.tsx | 122 -------- .../src/filter/useEntityFilterGroup.ts | 73 ----- .../catalog/src/filter/useFilteredEntities.ts | 37 --- 15 files changed, 1 insertion(+), 1476 deletions(-) delete mode 100644 plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx delete mode 100644 plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx delete mode 100644 plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx delete mode 100644 plugins/catalog/src/components/CatalogFilter/index.ts delete mode 100644 plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx delete mode 100644 plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx delete mode 100644 plugins/catalog/src/components/ResultsFilter/ResultsFilter.tsx delete mode 100644 plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx delete mode 100644 plugins/catalog/src/filter/context.ts delete mode 100644 plugins/catalog/src/filter/index.ts delete mode 100644 plugins/catalog/src/filter/types.ts delete mode 100644 plugins/catalog/src/filter/useEntityFilterGroup.test.tsx delete mode 100644 plugins/catalog/src/filter/useEntityFilterGroup.ts delete mode 100644 plugins/catalog/src/filter/useFilteredEntities.ts diff --git a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx deleted file mode 100644 index efacfa4320..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { useApi } from '@backstage/core'; -import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { CircularProgress, useTheme } from '@material-ui/core'; -import React from 'react'; -import { useAsync } from 'react-use'; - -export const AllServicesCount = () => { - const theme = useTheme(); - const catalogApi = useApi(catalogApiRef); - const { value, loading } = useAsync(() => catalogApi.getEntities()); - - if (loading) { - return ; - } - - return {value ?? length ?? '-'}; -}; diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx deleted file mode 100644 index 0cc2108985..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx +++ /dev/null @@ -1,264 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CatalogApi } from '@backstage/catalog-client'; -import { Entity } from '@backstage/catalog-model'; -import { - ApiProvider, - ApiRegistry, - IdentityApi, - identityApiRef, - storageApiRef, -} from '@backstage/core'; -import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; -import { fireEvent, render, waitFor } from '@testing-library/react'; -import React from 'react'; -import { EntityFilterGroupsProvider } from '../../filter'; -import { ButtonGroup, CatalogFilter } from './CatalogFilter'; - -describe('Catalog Filter', () => { - const catalogApi: Partial = { - getEntities: () => - Promise.resolve({ - items: [ - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { - name: 'Entity1', - }, - spec: { - owner: 'tools@example.com', - type: 'service', - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { - name: 'Entity2', - }, - spec: { - owner: 'not-tools@example.com', - type: 'service', - }, - }, - ] as Entity[], - }), - }; - - const identityApi: Partial = { - getUserId: () => 'tools@example.com', - }; - - const renderWrapped = (children: React.ReactNode) => - render( - wrapInTestApp( - - {children}, - , - ), - ); - - it('should render the different groups', async () => { - const mockGroups: ButtonGroup[] = [ - { name: 'Test Group 1', items: [] }, - { name: 'Test Group 2', items: [] }, - ]; - const { findByText } = renderWrapped( - , - ); - for (const group of mockGroups) { - expect(await findByText(group.name)).toBeInTheDocument(); - } - }); - - it('should render the different items and their names', async () => { - const mockGroups: ButtonGroup[] = [ - { - name: 'Test Group 1', - items: [ - { - id: 'all', - label: 'First Label', - filterFn: () => true, - }, - { - id: 'starred', - label: 'Second Label', - filterFn: () => false, - }, - ], - }, - ]; - - const { findByText } = renderWrapped( - , - ); - - for (const item of mockGroups[0].items) { - expect(await findByText(item.label)).toBeInTheDocument(); - } - }); - - it('selects the first item if no desired initial one is set', async () => { - const mockGroups: ButtonGroup[] = [ - { - name: 'Test Group 1', - items: [ - { - id: 'all', - label: 'First Label', - filterFn: () => true, - }, - { - id: 'starred', - label: 'Second Label', - filterFn: () => false, - }, - ], - }, - ]; - - const onChange = jest.fn(); - - renderWrapped( - , - ); - - await waitFor(() => { - expect(onChange).toHaveBeenLastCalledWith({ - id: 'all', - label: 'First Label', - }); - }); - }); - - it('selects the initial item', async () => { - const mockGroups: ButtonGroup[] = [ - { - name: 'Test Group 1', - items: [ - { - id: 'all', - label: 'First Label', - filterFn: () => true, - }, - { - id: 'starred', - label: 'Second Label', - filterFn: () => false, - }, - ], - }, - ]; - - const onChange = jest.fn(); - - renderWrapped( - , - ); - - await waitFor(() => { - expect(onChange).toHaveBeenLastCalledWith({ - id: 'starred', - label: 'Second Label', - }); - }); - }); - - it('can change the selected item', async () => { - const mockGroups: ButtonGroup[] = [ - { - name: 'Test Group 1', - items: [ - { - id: 'all', - label: 'First Label', - filterFn: () => true, - }, - { - id: 'starred', - label: 'Second Label', - filterFn: () => false, - }, - ], - }, - ]; - - const onChange = jest.fn(); - - const { findByText } = renderWrapped( - , - ); - - await waitFor(() => { - expect(onChange).toHaveBeenLastCalledWith({ - id: 'all', - label: 'First Label', - }); - }); - - fireEvent.click(await findByText('Second Label')); - - await waitFor(() => { - expect(onChange).toHaveBeenLastCalledWith({ - id: 'starred', - label: 'Second Label', - }); - }); - }); - - it('displays match counts properly', async () => { - const mockGroups: ButtonGroup[] = [ - { - name: 'Test Group 1', - items: [ - { - id: 'owned', - label: 'First Label', - filterFn: entity => entity.spec?.owner === 'tools@example.com', - }, - ], - }, - ]; - - const { findByText } = renderWrapped( - , - ); - - expect(await findByText('1')).toBeInTheDocument(); - }); -}); diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx deleted file mode 100644 index 6de4c318b5..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ /dev/null @@ -1,219 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Entity } from '@backstage/catalog-model'; -import { IconComponent } from '@backstage/core'; -import { - Card, - List, - ListItemIcon, - ListItemSecondaryAction, - ListItemText, - makeStyles, - MenuItem, - Theme, - Typography, -} from '@material-ui/core'; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; -import { FilterGroup, useEntityFilterGroup } from '../../filter'; - -export type ButtonGroup = { - name: string; - items: { - id: string; - label: string; - icon?: IconComponent; - filterFn: (entity: Entity) => boolean; - }[]; -}; - -const useStyles = makeStyles(theme => ({ - root: { - backgroundColor: 'rgba(0, 0, 0, .11)', - boxShadow: 'none', - }, - title: { - margin: theme.spacing(1, 0, 0, 1), - textTransform: 'uppercase', - fontSize: 12, - fontWeight: 'bold', - }, - listIcon: { - minWidth: 30, - color: theme.palette.text.primary, - }, - menuItem: { - minHeight: theme.spacing(6), - }, - groupWrapper: { - margin: theme.spacing(1, 1, 2, 1), - }, - menuTitle: { - fontWeight: 500, - }, -})); - -type OnChangeCallback = (item: { id: string; label: string }) => void; - -type Props = { - buttonGroups: ButtonGroup[]; - initiallySelected: string; - onChange?: OnChangeCallback; -}; - -/** - * Sidebar filter type and human readable label for it. owned/starred/all - */ -export type CatalogFilterType = { - id: string; - label: string; -}; - -/** - * The main filter group in the sidebar, toggling owned/starred/all. - */ -export const CatalogFilter = ({ - buttonGroups, - onChange, - initiallySelected, -}: Props) => { - const classes = useStyles(); - const { currentFilter, setCurrentFilter, getFilterCount } = useFilter( - buttonGroups, - initiallySelected, - ); - - const onChangeRef = useRef(); - useEffect(() => { - onChangeRef.current = onChange; - }, [onChange]); - - const setCurrent = useCallback( - (item: { id: string; label: string }) => { - setCurrentFilter(item.id); - onChangeRef.current?.({ id: item.id, label: item.label }); - }, - [setCurrentFilter], - ); - - // Make one initial onChange to inform the surroundings about the selected - // item - useEffect(() => { - const items = buttonGroups.flatMap(g => g.items); - const item = items.find(i => i.id === initiallySelected) || items[0]; - if (item) { - onChangeRef.current?.({ id: item.id, label: item.label }); - } - // intentionally only happens on startup - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - {buttonGroups.map(group => ( - - - {group.name} - - - - {group.items.map(item => ( - setCurrent(item)} - selected={item.id === currentFilter} - className={classes.menuItem} - > - {item.icon && ( - - - - )} - - - {item.label} - - - - {getFilterCount(item.id) ?? '-'} - - - ))} - - - - ))} - - ); -}; - -function useFilter( - buttonGroups: ButtonGroup[], - initiallySelected: string, -): { - currentFilter: string; - setCurrentFilter: (filterId: string) => void; - getFilterCount: (filterId: string) => number | undefined; -} { - const [currentFilter, setCurrentFilter] = useState(initiallySelected); - - const filterGroup = useMemo( - () => ({ - filters: Object.fromEntries( - buttonGroups.flatMap(g => g.items).map(i => [i.id, i.filterFn]), - ), - }), - [buttonGroups], - ); - - const { setSelectedFilters, state } = useEntityFilterGroup( - 'primary-sidebar', - filterGroup, - [initiallySelected], - ); - - const setCurrent = useCallback( - (filterId: string) => { - setCurrentFilter(filterId); - setSelectedFilters([filterId]); - }, - [setCurrentFilter, setSelectedFilters], - ); - - const getFilterCount = useCallback( - (filterId: string) => { - if (state.type !== 'ready') { - return undefined; - } - return state.state.filters[filterId].matchCount; - }, - [state], - ); - - return { - currentFilter, - setCurrentFilter: setCurrent, - getFilterCount, - }; -} diff --git a/plugins/catalog/src/components/CatalogFilter/index.ts b/plugins/catalog/src/components/CatalogFilter/index.ts deleted file mode 100644 index 5103b16307..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { CatalogFilter } from './CatalogFilter'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 2f08fb15c1..97d747f497 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -32,7 +32,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; import { fireEvent, render, waitFor } from '@testing-library/react'; import React from 'react'; -import { EntityFilterGroupsProvider } from '../../filter'; import { createComponentRouteRef } from '../../routes'; import { CatalogPage } from './CatalogPage'; @@ -115,7 +114,7 @@ describe('CatalogPage', () => { [storageApiRef, MockStorageApi.create()], ])} > - {children}, + {children} , { mountedRoutes: { diff --git a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx b/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx deleted file mode 100644 index f00c892ed3..0000000000 --- a/plugins/catalog/src/components/CatalogPage/CatalogTabs.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Entity } from '@backstage/catalog-model'; -import { HeaderTabs } from '@backstage/core'; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; -import { FilterGroup, useEntityFilterGroup } from '../../filter'; - -/** - * A component type, and a human readable label for it. - */ -export type LabeledComponentType = { - id: string; - label: string; -}; - -/** - * Called on mount, and when the selected tab changes. - */ -export type OnChangeCallback = (tab: LabeledComponentType) => void; - -type Props = { - tabs: LabeledComponentType[]; - onChange?: OnChangeCallback; -}; - -/** - * The tabs at the top of the catalog list page, for component type filtering. - */ -export const CatalogTabs = ({ tabs, onChange }: Props) => { - const filterGroup = useMemo(() => { - const otherType = 'other'; - const wellKnownTypes = tabs.map(t => t.id).filter(t => t !== otherType); - const isOtherType = (entity: Entity) => - !wellKnownTypes.includes(entity.spec?.type as string); - - return { - filters: Object.fromEntries( - tabs.map(t => [ - t.id, - (entity: Entity) => - (t.id === otherType && isOtherType(entity)) || - entity.spec?.type === t.id, - ]), - ), - }; - }, [tabs]); - - const { setSelectedFilters } = useEntityFilterGroup('type', filterGroup, [ - tabs[0].id, - ]); - - const [currentTabIndex, setCurrentTabIndex] = useState(0); - - // Hold a reference to the callback - const onChangeRef = useRef(); - useEffect(() => { - onChangeRef.current = onChange; - }, [onChange]); - - useEffect(() => { - onChangeRef.current?.(tabs[currentTabIndex]); - }, [tabs, currentTabIndex]); - - const switchTab = useCallback( - (index: number) => { - const tab = tabs[index]; - setSelectedFilters([tab.id]); - setCurrentTabIndex(index); - onChangeRef.current?.(tab); - }, - [tabs, setSelectedFilters], - ); - - return ; -}; diff --git a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx b/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx deleted file mode 100644 index 9be1c995e8..0000000000 --- a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CatalogApi } from '@backstage/catalog-client'; -import { Entity } from '@backstage/catalog-model'; -import { - ApiProvider, - ApiRegistry, - IdentityApi, - identityApiRef, - storageApiRef, -} from '@backstage/core'; -import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; -import { render } from '@testing-library/react'; -import React from 'react'; -import { EntityFilterGroupsProvider } from '../../filter'; -import { ResultsFilter } from './ResultsFilter'; - -describe('Results Filter', () => { - const catalogApi: Partial = { - getEntities: () => - Promise.resolve({ - items: [ - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { - name: 'Entity1', - tags: ['java'], - }, - spec: { - owner: 'tools@example.com', - type: 'service', - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { - name: 'Entity2', - }, - spec: { - owner: 'not-tools@example.com', - type: 'service', - }, - }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { - name: 'Entity3', - tags: ['java', 'test'], - }, - spec: { - owner: 'tools@example.com', - type: 'service', - }, - }, - ] as Entity[], - }), - }; - - const identityApi: Partial = { - getUserId: () => 'tools@example.com', - }; - - const renderWrapped = (children: React.ReactNode) => - render( - wrapInTestApp( - - {children}, - , - ), - ); - - it('should render all available tags', async () => { - const tags = ['test', 'java']; - const { findByText } = renderWrapped( - , - ); - for (const tag of tags) { - expect(await findByText(tag)).toBeInTheDocument(); - } - }); -}); diff --git a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.tsx b/plugins/catalog/src/components/ResultsFilter/ResultsFilter.tsx deleted file mode 100644 index 8c5737b7b6..0000000000 --- a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.tsx +++ /dev/null @@ -1,121 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { - Button, - Checkbox, - Divider, - List, - ListItem, - ListItemText, - makeStyles, - Theme, - Typography, -} from '@material-ui/core'; -import React, { useCallback, useContext, useState } from 'react'; -import { filterGroupsContext } from '../../filter/context'; - -const useStyles = makeStyles(theme => ({ - filterBox: { - display: 'flex', - margin: theme.spacing(2, 0, 0, 0), - }, - filterBoxTitle: { - margin: theme.spacing(1, 0, 0, 1), - fontWeight: 'bold', - flex: 1, - }, - title: { - margin: theme.spacing(1, 0, 0, 1), - textTransform: 'uppercase', - fontSize: 12, - fontWeight: 'bold', - }, - checkbox: { - padding: theme.spacing(0, 1, 0, 1), - }, -})); - -type Props = { - availableTags: string[]; -}; - -/** - * The additional results filter in the sidebar. - */ -export const ResultsFilter = ({ availableTags }: Props) => { - const classes = useStyles(); - - const [selectedTags, setSelectedTags] = useState([]); - const context = useContext(filterGroupsContext); - if (!context) { - throw new Error(`Must be used inside an EntityFilterGroupsProvider`); - } - const setSelectedTagsFilter = context?.setSelectedTags; - - const updateSelectedTags = useCallback( - (tags: string[]) => { - setSelectedTags(tags); - setSelectedTagsFilter(tags); - }, - [setSelectedTags, setSelectedTagsFilter], - ); - - return ( - <> -
- - Refine Results - {' '} - -
- - - Tags - - - {availableTags.map(t => { - const labelId = `checkbox-list-label-${t}`; - return ( - - updateSelectedTags( - selectedTags.includes(t) - ? selectedTags.filter(s => s !== t) - : [...selectedTags, t], - ) - } - > - - - - ); - })} - - - ); -}; diff --git a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx deleted file mode 100644 index 69ae9b83d6..0000000000 --- a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx +++ /dev/null @@ -1,263 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Entity } from '@backstage/catalog-model'; -import { useApi } from '@backstage/core'; -import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { useAsyncFn } from 'react-use'; -import { filterGroupsContext, FilterGroupsContext } from './context'; -import { - EntityFilterFn, - FilterGroup, - FilterGroupState, - FilterGroupStates, -} from './types'; - -/** - * Implementation of the shared filter groups state. - */ -export const EntityFilterGroupsProvider = ({ - children, -}: { - children?: React.ReactNode; -}) => { - const state = useProvideEntityFilters(); - return ( - - {children} - - ); -}; - -// The hook that implements the actual context building -function useProvideEntityFilters(): FilterGroupsContext { - const catalogApi = useApi(catalogApiRef); - const [{ value: entities, error }, doReload] = useAsyncFn(async () => { - const response = await catalogApi.getEntities({ - filter: { kind: 'Component' }, - }); - return response.items; - }); - - const filterGroups = useRef<{ - [filterGroupId: string]: FilterGroup; - }>({}); - const selectedFilterKeys = useRef<{ - [filterGroupId: string]: Set; - }>({}); - const selectedTags = useRef([]); - const [filterGroupStates, setFilterGroupStates] = useState<{ - [filterGroupId: string]: FilterGroupStates; - }>({}); - const [matchingEntities, setMatchingEntities] = useState([]); - const [availableTags, setAvailableTags] = useState([]); - const [isCatalogEmpty, setCatalogEmpty] = useState(false); - - useEffect(() => { - doReload(); - }, [doReload]); - - const rebuild = useCallback(() => { - setFilterGroupStates( - buildStates( - filterGroups.current, - selectedFilterKeys.current, - selectedTags.current, - entities, - error, - ), - ); - setMatchingEntities( - buildMatchingEntities( - filterGroups.current, - selectedFilterKeys.current, - selectedTags.current, - entities, - ), - ); - setAvailableTags(collectTags(entities)); - setCatalogEmpty(entities !== undefined && entities.length === 0); - }, [entities, error]); - - const register = useCallback( - ( - filterGroupId: string, - filterGroup: FilterGroup, - initialSelectedFilterIds?: string[], - ) => { - filterGroups.current[filterGroupId] = filterGroup; - selectedFilterKeys.current[filterGroupId] = new Set( - initialSelectedFilterIds ?? [], - ); - rebuild(); - }, - [rebuild], - ); - - const unregister = useCallback( - (filterGroupId: string) => { - delete filterGroups.current[filterGroupId]; - delete selectedFilterKeys.current[filterGroupId]; - rebuild(); - }, - [rebuild], - ); - - const setGroupSelectedFilters = useCallback( - (filterGroupId: string, filters: string[]) => { - selectedFilterKeys.current[filterGroupId] = new Set(filters); - rebuild(); - }, - [rebuild], - ); - - const setSelectedTags = useCallback( - (tags: string[]) => { - selectedTags.current = tags; - rebuild(); - }, - [rebuild], - ); - - const reload = useCallback(async () => { - await doReload(); - }, [doReload]); - - return { - register, - unregister, - setGroupSelectedFilters, - setSelectedTags, - reload, - loading: !error && !entities, - error, - filterGroupStates, - matchingEntities, - availableTags, - isCatalogEmpty, - }; -} - -// Given all filter groups and what filters are actually selected, along with -// the loading state for entities, generate the state of each individual filter -function buildStates( - filterGroups: { [filterGroupId: string]: FilterGroup }, - selectedFilterKeys: { [filterGroupId: string]: Set }, - selectedTags: string[], - entities?: Entity[], - error?: Error, -): { [filterGroupId: string]: FilterGroupStates } { - // On error - all entries are an error state - if (error) { - return Object.fromEntries( - Object.keys(filterGroups).map(filterGroupId => [ - filterGroupId, - { type: 'error', error }, - ]), - ); - } - - // On startup - all entries are a loading state - if (!entities) { - return Object.fromEntries( - Object.keys(filterGroups).map(filterGroupId => [ - filterGroupId, - { type: 'loading' }, - ]), - ); - } - - const result: { [filterGroupId: string]: FilterGroupStates } = {}; - for (const [filterGroupId, filterGroup] of Object.entries(filterGroups)) { - const otherMatchingEntities = buildMatchingEntities( - filterGroups, - selectedFilterKeys, - selectedTags, - entities, - filterGroupId, - ); - const groupState: FilterGroupState = { filters: {} }; - for (const [filterId, filterFn] of Object.entries(filterGroup.filters)) { - const isSelected = !!selectedFilterKeys[filterGroupId]?.has(filterId); - const matchCount = otherMatchingEntities.filter(entity => - filterFn(entity), - ).length; - groupState.filters[filterId] = { isSelected, matchCount }; - } - result[filterGroupId] = { type: 'ready', state: groupState }; - } - - return result; -} - -// Given all entites, find all possible tags and provide them in a sorted list. -function collectTags(entities?: Entity[]): string[] { - const tags = new Set(); - (entities || []).forEach(e => { - if (e.metadata.tags) { - e.metadata.tags.forEach(t => tags.add(t)); - } - }); - return Array.from(tags).sort(); -} - -// Given all filter groups and what filters are actually selected, extract all -// entities that match all those filter groups. -function buildMatchingEntities( - filterGroups: { [filterGroupId: string]: FilterGroup }, - selectedFilterKeys: { [filterGroupId: string]: Set }, - selectedTags: string[], - entities?: Entity[], - excludeFilterGroupId?: string, -): Entity[] { - // Build one filter fn per filter group - const allFilters: EntityFilterFn[] = []; - for (const [filterGroupId, filterGroup] of Object.entries(filterGroups)) { - if (excludeFilterGroupId === filterGroupId) { - continue; - } - - // Pick out all of the filter functions in the group that are actually - // selected - const groupFilters: EntityFilterFn[] = []; - for (const [filterId, filterFn] of Object.entries(filterGroup.filters)) { - if (!!selectedFilterKeys[filterGroupId]?.has(filterId)) { - groupFilters.push(filterFn); - } - } - - // Need to match any of the selected filters in the group - if there is - // any at all - if (groupFilters.length) { - allFilters.push(entity => groupFilters.some(fn => fn(entity))); - } - } - - // Filter by tags, if at least one tag is selected. Include all entities - // that have at least one of the selected tags - if (selectedTags.length > 0) { - allFilters.push( - entity => - !!entity.metadata.tags && - entity.metadata.tags.some(t => selectedTags.includes(t)), - ); - } - - // All filter groups that had any checked filters need to match. Note that - // every() always returns true for an empty array. - return entities?.filter(entity => allFilters.every(fn => fn(entity))) ?? []; -} diff --git a/plugins/catalog/src/filter/context.ts b/plugins/catalog/src/filter/context.ts deleted file mode 100644 index c025480fa6..0000000000 --- a/plugins/catalog/src/filter/context.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Entity } from '@backstage/catalog-model'; -import { createContext } from 'react'; -import { FilterGroup, FilterGroupStates } from './types'; - -export type FilterGroupsContext = { - register: ( - filterGroupId: string, - filterGroup: FilterGroup, - initialSelectedFilterIds?: string[], - ) => void; - unregister: (filterGroupId: string) => void; - setGroupSelectedFilters: (filterGroupId: string, filterIds: string[]) => void; - setSelectedTags: (tags: string[]) => void; - reload: () => Promise; - loading: boolean; - error?: Error; - filterGroupStates: { [filterGroupId: string]: FilterGroupStates }; - matchingEntities: Entity[]; - availableTags: string[]; - isCatalogEmpty: boolean; -}; - -/** - * The context that maintains shared state for all visible filter groups. - */ -export const filterGroupsContext = createContext< - FilterGroupsContext | undefined ->(undefined); diff --git a/plugins/catalog/src/filter/index.ts b/plugins/catalog/src/filter/index.ts deleted file mode 100644 index da73147ef9..0000000000 --- a/plugins/catalog/src/filter/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { EntityFilterGroupsProvider } from './EntityFilterGroupsProvider'; -export type { - EntityFilterFn, - FilterGroup, - FilterGroupState, - FilterGroupStates, - FilterGroupStatesError, - FilterGroupStatesLoading, - FilterGroupStatesReady, -} from './types'; -export { useEntityFilterGroup } from './useEntityFilterGroup'; -export { useFilteredEntities } from './useFilteredEntities'; diff --git a/plugins/catalog/src/filter/types.ts b/plugins/catalog/src/filter/types.ts deleted file mode 100644 index ed08b131bf..0000000000 --- a/plugins/catalog/src/filter/types.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Entity } from '@backstage/catalog-model'; - -export type EntityFilterFn = (entity: Entity) => boolean; - -export type FilterGroup = { - filters: { - [filterId: string]: EntityFilterFn; - }; -}; - -export type FilterGroupState = { - filters: { - [filterId: string]: { - isSelected: boolean; - matchCount: number; - }; - }; -}; - -export type FilterGroupStatesReady = { - type: 'ready'; - state: FilterGroupState; -}; - -export type FilterGroupStatesError = { - type: 'error'; - error: Error; -}; - -export type FilterGroupStatesLoading = { - type: 'loading'; -}; - -export type FilterGroupStates = - | FilterGroupStatesReady - | FilterGroupStatesError - | FilterGroupStatesLoading; diff --git a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx b/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx deleted file mode 100644 index 8a5bf60b06..0000000000 --- a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx +++ /dev/null @@ -1,122 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core'; -import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { MockStorageApi } from '@backstage/test-utils'; -import { act, renderHook } from '@testing-library/react-hooks'; -import React from 'react'; -import { EntityFilterGroupsProvider } from './EntityFilterGroupsProvider'; -import { FilterGroup, FilterGroupStatesReady } from './types'; -import { useEntityFilterGroup } from './useEntityFilterGroup'; - -describe('useEntityFilterGroup', () => { - let catalogApi: jest.Mocked; - let wrapper: ({ children }: { children?: React.ReactNode }) => JSX.Element; - - beforeEach(() => { - catalogApi = { - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - addLocation: jest.fn(_a => new Promise(() => {})), - getEntities: jest.fn(), - getOriginLocationByEntity: jest.fn(), - getLocationByEntity: jest.fn(), - getLocationById: jest.fn(), - removeLocationById: jest.fn(), - removeEntityByUid: jest.fn(), - getEntityByName: jest.fn(), - }; - const apis = ApiRegistry.with(catalogApiRef, catalogApi).with( - storageApiRef, - MockStorageApi.create(), - ); - wrapper = ({ children }: { children?: React.ReactNode }) => ( - - {children} - - ); - }); - - it('works for an empty set of filters', async () => { - catalogApi.getEntities.mockResolvedValue({ items: [] }); - const group: FilterGroup = { filters: {} }; - const { result, waitFor } = renderHook( - () => useEntityFilterGroup('g1', group), - { wrapper }, - ); - - await waitFor(() => expect(result.current.state.type).toBe('ready')); - }); - - it('works for a single group', async () => { - catalogApi.getEntities.mockResolvedValue({ - items: [ - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - metadata: { name: 'n' }, - }, - ], - }); - const group: FilterGroup = { - filters: { - f1: e => e.metadata.name === 'n', - f2: e => e.metadata.name !== 'n', - }, - }; - const { result, waitFor } = renderHook( - () => useEntityFilterGroup('g1', group), - { wrapper }, - ); - - await waitFor(() => expect(result.current.state.type).toEqual('ready')); - let state = result.current.state as FilterGroupStatesReady; - expect(state.state.filters.f1).toEqual({ - isSelected: false, - matchCount: 1, - }); - expect(state.state.filters.f2).toEqual({ - isSelected: false, - matchCount: 0, - }); - - act(() => result.current.setSelectedFilters(['f1'])); - - await waitFor(() => expect(result.current.state.type).toEqual('ready')); - state = result.current.state as FilterGroupStatesReady; - expect(state.state.filters.f1).toEqual({ - isSelected: true, - matchCount: 1, - }); - expect(state.state.filters.f2).toEqual({ - isSelected: false, - matchCount: 0, - }); - - act(() => result.current.setSelectedFilters(['f2'])); - - await waitFor(() => expect(result.current.state.type).toEqual('ready')); - state = result.current.state as FilterGroupStatesReady; - expect(state.state.filters.f1).toEqual({ - isSelected: false, - matchCount: 1, - }); - expect(state.state.filters.f2).toEqual({ - isSelected: true, - matchCount: 0, - }); - }); -}); diff --git a/plugins/catalog/src/filter/useEntityFilterGroup.ts b/plugins/catalog/src/filter/useEntityFilterGroup.ts deleted file mode 100644 index 30214fad78..0000000000 --- a/plugins/catalog/src/filter/useEntityFilterGroup.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { useCallback, useContext, useEffect, useMemo } from 'react'; -import { filterGroupsContext } from './context'; -import { FilterGroup, FilterGroupStates } from './types'; - -export type EntityFilterGroupOutput = { - state: FilterGroupStates; - setSelectedFilters: (filterIds: string[]) => void; -}; - -/** - * Hook that exposes the relevant data and operations for a single filter - * group. - */ -export const useEntityFilterGroup = ( - filterGroupId: string, - filterGroup: FilterGroup, - initialSelectedFilters?: string[], -): EntityFilterGroupOutput => { - const context = useContext(filterGroupsContext); - if (!context) { - throw new Error(`Must be used inside an EntityFilterGroupsProvider`); - } - const { - register, - unregister, - setGroupSelectedFilters, - filterGroupStates, - } = context; - - // on state changes unregisters and registers the filtergroup - // ensure that it re-registers with the correct filter as the prop changes and not the default - // eslint-disable-next-line react-hooks/exhaustive-deps - const initialMemo = useMemo(() => { - return initialSelectedFilters?.slice(); - }, [initialSelectedFilters]); - - // Register the group on mount, and unregister on unmount - useEffect(() => { - register(filterGroupId, filterGroup, initialMemo); - return () => unregister(filterGroupId); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [register, unregister, filterGroupId, filterGroup]); - - const setSelectedFilters = useCallback( - (filters: string[]) => { - setGroupSelectedFilters(filterGroupId, filters); - }, - [setGroupSelectedFilters, filterGroupId], - ); - - let state = filterGroupStates[filterGroupId]; - if (!state) { - state = { type: 'loading' }; - } - - return { state, setSelectedFilters }; -}; diff --git a/plugins/catalog/src/filter/useFilteredEntities.ts b/plugins/catalog/src/filter/useFilteredEntities.ts deleted file mode 100644 index 2d7dcfd89d..0000000000 --- a/plugins/catalog/src/filter/useFilteredEntities.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { useContext } from 'react'; -import { filterGroupsContext } from './context'; - -/** - * Hook that exposes the result of applying a set of filter groups. - */ -export function useFilteredEntities() { - const context = useContext(filterGroupsContext); - if (!context) { - throw new Error(`Must be used inside an EntityFilterGroupsProvider`); - } - - return { - loading: context.loading, - error: context.error, - matchingEntities: context.matchingEntities, - availableTags: context.availableTags, - isCatalogEmpty: context.isCatalogEmpty, - reload: context.reload, - }; -} From dcd5a93a96e13d8b5bbc338ad6c5e907c0813026 Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Thu, 22 Apr 2021 20:25:01 -0400 Subject: [PATCH 034/475] fix(locationAnalyzer): don't add github slug annotation when SCM system cannot be determined Signed-off-by: Phil Kuang --- .changeset/eleven-donkeys-agree.md | 5 +++++ .changeset/gold-boats-wash.md | 5 +++++ packages/integration/api-report.md | 5 +++++ .../src/azure/AzureIntegration.test.ts | 1 + .../integration/src/azure/AzureIntegration.ts | 7 +++++++ .../bitbucket/BitbucketIntegration.test.ts | 1 + .../src/bitbucket/BitbucketIntegration.ts | 7 +++++++ .../src/github/GitHubIntegration.test.ts | 1 + .../src/github/GitHubIntegration.ts | 7 +++++++ .../src/gitlab/GitLabIntegration.test.ts | 1 + .../src/gitlab/GitLabIntegration.ts | 7 +++++++ packages/integration/src/types.ts | 5 +++++ .../src/ingestion/LocationAnalyzer.ts | 19 ++++++++++++++----- .../src/next/NextCatalogBuilder.ts | 2 +- .../src/service/CatalogBuilder.ts | 3 ++- 15 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 .changeset/eleven-donkeys-agree.md create mode 100644 .changeset/gold-boats-wash.md diff --git a/.changeset/eleven-donkeys-agree.md b/.changeset/eleven-donkeys-agree.md new file mode 100644 index 0000000000..978094095d --- /dev/null +++ b/.changeset/eleven-donkeys-agree.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-backend': patch +--- + +Correctly add `/project-slug` annotation for new catalog-info.yaml PRs based on SCM integration. diff --git a/.changeset/gold-boats-wash.md b/.changeset/gold-boats-wash.md new file mode 100644 index 0000000000..709df2baf9 --- /dev/null +++ b/.changeset/gold-boats-wash.md @@ -0,0 +1,5 @@ +--- +'@backstage/integration': patch +--- + +Expose an `annotationPrefix` property for SCM integrations diff --git a/packages/integration/api-report.md b/packages/integration/api-report.md index 5387eb12db..09d14a5a11 100644 --- a/packages/integration/api-report.md +++ b/packages/integration/api-report.md @@ -9,6 +9,7 @@ import { Config } from '@backstage/config'; // @public (undocumented) export class AzureIntegration implements ScmIntegration { constructor(integrationConfig: AzureIntegrationConfig); + get annotationPrefix(): string; // (undocumented) get config(): AzureIntegrationConfig; // (undocumented) @@ -36,6 +37,7 @@ export type AzureIntegrationConfig = { // @public (undocumented) export class BitbucketIntegration implements ScmIntegration { constructor(integrationConfig: BitbucketIntegrationConfig); + get annotationPrefix(): string; // (undocumented) get config(): BitbucketIntegrationConfig; // (undocumented) @@ -118,6 +120,7 @@ export class GithubCredentialsProvider { // @public (undocumented) export class GitHubIntegration implements ScmIntegration { constructor(integrationConfig: GitHubIntegrationConfig); + get annotationPrefix(): string; // (undocumented) get config(): GitHubIntegrationConfig; // (undocumented) @@ -148,6 +151,7 @@ export type GitHubIntegrationConfig = { // @public (undocumented) export class GitLabIntegration implements ScmIntegration { constructor(integrationConfig: GitLabIntegrationConfig); + get annotationPrefix(): string; // (undocumented) get config(): GitLabIntegrationConfig; // (undocumented) @@ -209,6 +213,7 @@ export function readGoogleGcsIntegrationConfig(config: Config): GoogleGcsIntegra // @public export interface ScmIntegration { + annotationPrefix: string; resolveEditUrl(url: string): string; resolveUrl(options: { url: string; diff --git a/packages/integration/src/azure/AzureIntegration.test.ts b/packages/integration/src/azure/AzureIntegration.test.ts index 1702602cf3..a41ee6ac5f 100644 --- a/packages/integration/src/azure/AzureIntegration.test.ts +++ b/packages/integration/src/azure/AzureIntegration.test.ts @@ -39,6 +39,7 @@ describe('AzureIntegration', () => { it('returns the basics', () => { const integration = new AzureIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('azure'); + expect(integration.annotationPrefix).toBe('dev.azure.com'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/azure/AzureIntegration.ts b/packages/integration/src/azure/AzureIntegration.ts index 50f4757620..d0f6f54ede 100644 --- a/packages/integration/src/azure/AzureIntegration.ts +++ b/packages/integration/src/azure/AzureIntegration.ts @@ -36,6 +36,13 @@ export class AzureIntegration implements ScmIntegration { return 'azure'; } + /** + * The prefix used for entity metadata.annotations for the integration. + */ + get annotationPrefix(): string { + return 'dev.azure.com'; + } + get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/bitbucket/BitbucketIntegration.test.ts b/packages/integration/src/bitbucket/BitbucketIntegration.test.ts index 350bb1d63c..27adbd1a8f 100644 --- a/packages/integration/src/bitbucket/BitbucketIntegration.test.ts +++ b/packages/integration/src/bitbucket/BitbucketIntegration.test.ts @@ -42,6 +42,7 @@ describe('BitbucketIntegration', () => { it('returns the basics', () => { const integration = new BitbucketIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('bitbucket'); + expect(integration.annotationPrefix).toBe('bitbucket.org'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/bitbucket/BitbucketIntegration.ts b/packages/integration/src/bitbucket/BitbucketIntegration.ts index 1e07507bf2..d23a78986a 100644 --- a/packages/integration/src/bitbucket/BitbucketIntegration.ts +++ b/packages/integration/src/bitbucket/BitbucketIntegration.ts @@ -41,6 +41,13 @@ export class BitbucketIntegration implements ScmIntegration { return 'bitbucket'; } + /** + * The prefix used for entity metadata.annotations for the integration. + */ + get annotationPrefix(): string { + return 'bitbucket.org'; + } + get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/github/GitHubIntegration.test.ts b/packages/integration/src/github/GitHubIntegration.test.ts index 501ae6c3bf..f224a169ce 100644 --- a/packages/integration/src/github/GitHubIntegration.test.ts +++ b/packages/integration/src/github/GitHubIntegration.test.ts @@ -46,6 +46,7 @@ describe('GitHubIntegration', () => { token: 't', }); expect(integration.type).toBe('github'); + expect(integration.annotationPrefix).toBe('github.com'); expect(integration.title).toBe('h.com'); expect(integration.config.host).toBe('h.com'); }); diff --git a/packages/integration/src/github/GitHubIntegration.ts b/packages/integration/src/github/GitHubIntegration.ts index d33057b88f..3b88233cad 100644 --- a/packages/integration/src/github/GitHubIntegration.ts +++ b/packages/integration/src/github/GitHubIntegration.ts @@ -38,6 +38,13 @@ export class GitHubIntegration implements ScmIntegration { return 'github'; } + /** + * The prefix used for entity metadata.annotations for the integration. + */ + get annotationPrefix(): string { + return 'github.com'; + } + get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/gitlab/GitLabIntegration.test.ts b/packages/integration/src/gitlab/GitLabIntegration.test.ts index 5cc6d410e3..e70b6ea094 100644 --- a/packages/integration/src/gitlab/GitLabIntegration.test.ts +++ b/packages/integration/src/gitlab/GitLabIntegration.test.ts @@ -41,6 +41,7 @@ describe('GitLabIntegration', () => { it('returns the basics', () => { const integration = new GitLabIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('gitlab'); + expect(integration.annotationPrefix).toBe('gitlab.com'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/gitlab/GitLabIntegration.ts b/packages/integration/src/gitlab/GitLabIntegration.ts index 17fb82f010..fd356581a5 100644 --- a/packages/integration/src/gitlab/GitLabIntegration.ts +++ b/packages/integration/src/gitlab/GitLabIntegration.ts @@ -38,6 +38,13 @@ export class GitLabIntegration implements ScmIntegration { return 'gitlab'; } + /** + * The prefix used for entity metadata.annotations for the integration. + */ + get annotationPrefix(): string { + return 'gitlab.com'; + } + get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/types.ts b/packages/integration/src/types.ts index f06bda285a..971b341a8e 100644 --- a/packages/integration/src/types.ts +++ b/packages/integration/src/types.ts @@ -29,6 +29,11 @@ export interface ScmIntegration { */ type: string; + /** + * The prefix used for entity metadata.annotations for the integration , e.g. "github.com". + */ + annotationPrefix: string; + /** * A human readable title for the integration, that can be shown to users to * differentiate between different integrations. diff --git a/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts b/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts index bc81cf14f8..f510bec37e 100644 --- a/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts +++ b/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts @@ -16,6 +16,8 @@ import { Logger } from 'winston'; import parseGitUrl from 'git-url-parse'; +import { Entity } from '@backstage/catalog-model'; +import { ScmIntegrationRegistry } from '@backstage/integration'; import { AnalyzeLocationRequest, AnalyzeLocationResponse, @@ -24,25 +26,32 @@ import { export class RepoLocationAnalyzer implements LocationAnalyzer { private readonly logger: Logger; + private readonly scmIntegrations: ScmIntegrationRegistry; - constructor(logger: Logger) { + constructor(logger: Logger, scmIntegrations: ScmIntegrationRegistry) { this.logger = logger; + this.scmIntegrations = scmIntegrations; } async analyzeLocation( request: AnalyzeLocationRequest, ): Promise { - const { owner, name, source } = parseGitUrl(request.location.target); - const entity = { + const { owner, name } = parseGitUrl(request.location.target); + const entity: Entity = { apiVersion: 'backstage.io/v1alpha1', kind: 'Component', metadata: { name: name, - // Probably won't handle properly self-hosted git providers with custom url - annotations: { [`${source}/project-slug`]: `${owner}/${name}` }, }, spec: { type: 'other', lifecycle: 'unknown' }, }; + const integration = this.scmIntegrations.byUrl(request.location.target); + if (integration) { + entity.metadata.annotations = { + [`${integration.annotationPrefix}/project-slug`]: `${owner}/${name}`, + }; + } + this.logger.debug(`entity created for ${request.location.target}`); return { existingEntityFiles: [], diff --git a/plugins/catalog-backend/src/next/NextCatalogBuilder.ts b/plugins/catalog-backend/src/next/NextCatalogBuilder.ts index 43f321248e..e10d13c129 100644 --- a/plugins/catalog-backend/src/next/NextCatalogBuilder.ts +++ b/plugins/catalog-backend/src/next/NextCatalogBuilder.ts @@ -275,7 +275,7 @@ export class NextCatalogBuilder { ); const locationsCatalog = new DatabaseLocationsCatalog(db); - const locationAnalyzer = new RepoLocationAnalyzer(logger); + const locationAnalyzer = new RepoLocationAnalyzer(logger, integrations); const locationService = new DefaultLocationService( locationStore, orchestrator, diff --git a/plugins/catalog-backend/src/service/CatalogBuilder.ts b/plugins/catalog-backend/src/service/CatalogBuilder.ts index b8d8b3ee61..f742e3c0db 100644 --- a/plugins/catalog-backend/src/service/CatalogBuilder.ts +++ b/plugins/catalog-backend/src/service/CatalogBuilder.ts @@ -228,6 +228,7 @@ export class CatalogBuilder { locationAnalyzer: LocationAnalyzer; }> { const { config, database, logger } = this.env; + const integrations = ScmIntegrations.fromConfig(config); const policy = this.buildEntityPolicy(); const processors = this.buildProcessors(); @@ -255,7 +256,7 @@ export class CatalogBuilder { locationReader, logger, ); - const locationAnalyzer = new RepoLocationAnalyzer(logger); + const locationAnalyzer = new RepoLocationAnalyzer(logger, integrations); return { entitiesCatalog, From c128e64ce3ad3bf8646f3c3a224d123d73ccbf9c Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Wed, 12 May 2021 15:06:25 -0400 Subject: [PATCH 035/475] revert(integration): remove annotation prefix props Signed-off-by: Phil Kuang --- .changeset/gold-boats-wash.md | 5 ----- packages/integration/api-report.md | 5 ----- .../src/azure/AzureIntegration.test.ts | 1 - .../integration/src/azure/AzureIntegration.ts | 7 ------ .../bitbucket/BitbucketIntegration.test.ts | 1 - .../src/bitbucket/BitbucketIntegration.ts | 7 ------ .../src/github/GitHubIntegration.test.ts | 1 - .../src/github/GitHubIntegration.ts | 7 ------ .../src/gitlab/GitLabIntegration.test.ts | 1 - .../src/gitlab/GitLabIntegration.ts | 7 ------ packages/integration/src/types.ts | 5 ----- .../src/ingestion/LocationAnalyzer.ts | 22 +++++++++++++++++-- 12 files changed, 20 insertions(+), 49 deletions(-) delete mode 100644 .changeset/gold-boats-wash.md diff --git a/.changeset/gold-boats-wash.md b/.changeset/gold-boats-wash.md deleted file mode 100644 index 709df2baf9..0000000000 --- a/.changeset/gold-boats-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/integration': patch ---- - -Expose an `annotationPrefix` property for SCM integrations diff --git a/packages/integration/api-report.md b/packages/integration/api-report.md index 09d14a5a11..5387eb12db 100644 --- a/packages/integration/api-report.md +++ b/packages/integration/api-report.md @@ -9,7 +9,6 @@ import { Config } from '@backstage/config'; // @public (undocumented) export class AzureIntegration implements ScmIntegration { constructor(integrationConfig: AzureIntegrationConfig); - get annotationPrefix(): string; // (undocumented) get config(): AzureIntegrationConfig; // (undocumented) @@ -37,7 +36,6 @@ export type AzureIntegrationConfig = { // @public (undocumented) export class BitbucketIntegration implements ScmIntegration { constructor(integrationConfig: BitbucketIntegrationConfig); - get annotationPrefix(): string; // (undocumented) get config(): BitbucketIntegrationConfig; // (undocumented) @@ -120,7 +118,6 @@ export class GithubCredentialsProvider { // @public (undocumented) export class GitHubIntegration implements ScmIntegration { constructor(integrationConfig: GitHubIntegrationConfig); - get annotationPrefix(): string; // (undocumented) get config(): GitHubIntegrationConfig; // (undocumented) @@ -151,7 +148,6 @@ export type GitHubIntegrationConfig = { // @public (undocumented) export class GitLabIntegration implements ScmIntegration { constructor(integrationConfig: GitLabIntegrationConfig); - get annotationPrefix(): string; // (undocumented) get config(): GitLabIntegrationConfig; // (undocumented) @@ -213,7 +209,6 @@ export function readGoogleGcsIntegrationConfig(config: Config): GoogleGcsIntegra // @public export interface ScmIntegration { - annotationPrefix: string; resolveEditUrl(url: string): string; resolveUrl(options: { url: string; diff --git a/packages/integration/src/azure/AzureIntegration.test.ts b/packages/integration/src/azure/AzureIntegration.test.ts index a41ee6ac5f..1702602cf3 100644 --- a/packages/integration/src/azure/AzureIntegration.test.ts +++ b/packages/integration/src/azure/AzureIntegration.test.ts @@ -39,7 +39,6 @@ describe('AzureIntegration', () => { it('returns the basics', () => { const integration = new AzureIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('azure'); - expect(integration.annotationPrefix).toBe('dev.azure.com'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/azure/AzureIntegration.ts b/packages/integration/src/azure/AzureIntegration.ts index d0f6f54ede..50f4757620 100644 --- a/packages/integration/src/azure/AzureIntegration.ts +++ b/packages/integration/src/azure/AzureIntegration.ts @@ -36,13 +36,6 @@ export class AzureIntegration implements ScmIntegration { return 'azure'; } - /** - * The prefix used for entity metadata.annotations for the integration. - */ - get annotationPrefix(): string { - return 'dev.azure.com'; - } - get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/bitbucket/BitbucketIntegration.test.ts b/packages/integration/src/bitbucket/BitbucketIntegration.test.ts index 27adbd1a8f..350bb1d63c 100644 --- a/packages/integration/src/bitbucket/BitbucketIntegration.test.ts +++ b/packages/integration/src/bitbucket/BitbucketIntegration.test.ts @@ -42,7 +42,6 @@ describe('BitbucketIntegration', () => { it('returns the basics', () => { const integration = new BitbucketIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('bitbucket'); - expect(integration.annotationPrefix).toBe('bitbucket.org'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/bitbucket/BitbucketIntegration.ts b/packages/integration/src/bitbucket/BitbucketIntegration.ts index d23a78986a..1e07507bf2 100644 --- a/packages/integration/src/bitbucket/BitbucketIntegration.ts +++ b/packages/integration/src/bitbucket/BitbucketIntegration.ts @@ -41,13 +41,6 @@ export class BitbucketIntegration implements ScmIntegration { return 'bitbucket'; } - /** - * The prefix used for entity metadata.annotations for the integration. - */ - get annotationPrefix(): string { - return 'bitbucket.org'; - } - get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/github/GitHubIntegration.test.ts b/packages/integration/src/github/GitHubIntegration.test.ts index f224a169ce..501ae6c3bf 100644 --- a/packages/integration/src/github/GitHubIntegration.test.ts +++ b/packages/integration/src/github/GitHubIntegration.test.ts @@ -46,7 +46,6 @@ describe('GitHubIntegration', () => { token: 't', }); expect(integration.type).toBe('github'); - expect(integration.annotationPrefix).toBe('github.com'); expect(integration.title).toBe('h.com'); expect(integration.config.host).toBe('h.com'); }); diff --git a/packages/integration/src/github/GitHubIntegration.ts b/packages/integration/src/github/GitHubIntegration.ts index 3b88233cad..d33057b88f 100644 --- a/packages/integration/src/github/GitHubIntegration.ts +++ b/packages/integration/src/github/GitHubIntegration.ts @@ -38,13 +38,6 @@ export class GitHubIntegration implements ScmIntegration { return 'github'; } - /** - * The prefix used for entity metadata.annotations for the integration. - */ - get annotationPrefix(): string { - return 'github.com'; - } - get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/gitlab/GitLabIntegration.test.ts b/packages/integration/src/gitlab/GitLabIntegration.test.ts index e70b6ea094..5cc6d410e3 100644 --- a/packages/integration/src/gitlab/GitLabIntegration.test.ts +++ b/packages/integration/src/gitlab/GitLabIntegration.test.ts @@ -41,7 +41,6 @@ describe('GitLabIntegration', () => { it('returns the basics', () => { const integration = new GitLabIntegration({ host: 'h.com' } as any); expect(integration.type).toBe('gitlab'); - expect(integration.annotationPrefix).toBe('gitlab.com'); expect(integration.title).toBe('h.com'); }); diff --git a/packages/integration/src/gitlab/GitLabIntegration.ts b/packages/integration/src/gitlab/GitLabIntegration.ts index fd356581a5..17fb82f010 100644 --- a/packages/integration/src/gitlab/GitLabIntegration.ts +++ b/packages/integration/src/gitlab/GitLabIntegration.ts @@ -38,13 +38,6 @@ export class GitLabIntegration implements ScmIntegration { return 'gitlab'; } - /** - * The prefix used for entity metadata.annotations for the integration. - */ - get annotationPrefix(): string { - return 'gitlab.com'; - } - get title(): string { return this.integrationConfig.host; } diff --git a/packages/integration/src/types.ts b/packages/integration/src/types.ts index 971b341a8e..f06bda285a 100644 --- a/packages/integration/src/types.ts +++ b/packages/integration/src/types.ts @@ -29,11 +29,6 @@ export interface ScmIntegration { */ type: string; - /** - * The prefix used for entity metadata.annotations for the integration , e.g. "github.com". - */ - annotationPrefix: string; - /** * A human readable title for the integration, that can be shown to users to * differentiate between different integrations. diff --git a/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts b/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts index f510bec37e..cacdf38ffd 100644 --- a/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts +++ b/plugins/catalog-backend/src/ingestion/LocationAnalyzer.ts @@ -46,9 +46,27 @@ export class RepoLocationAnalyzer implements LocationAnalyzer { }; const integration = this.scmIntegrations.byUrl(request.location.target); - if (integration) { + let annotationPrefix; + switch (integration?.type) { + case 'azure': + annotationPrefix = 'dev.azure.com'; + break; + case 'bitbucket': + annotationPrefix = 'bitbucket.org'; + break; + case 'github': + annotationPrefix = 'github.com'; + break; + case 'gitlab': + annotationPrefix = 'gitlab.com'; + break; + default: + break; + } + + if (annotationPrefix) { entity.metadata.annotations = { - [`${integration.annotationPrefix}/project-slug`]: `${owner}/${name}`, + [`${annotationPrefix}/project-slug`]: `${owner}/${name}`, }; } From 5666efa9da685403cf2249791c6bb4427e3a5298 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Wed, 12 May 2021 14:18:48 -0600 Subject: [PATCH 036/475] Move type-filtering logic to a hook Signed-off-by: Tim Hansen --- plugins/catalog-react/src/hooks/index.ts | 1 + .../src/hooks/useEntityTypeFilter.tsx | 97 +++++++++++++++++++ .../EntityTypePicker/EntityTypePicker.tsx | 62 ++---------- 3 files changed, 105 insertions(+), 55 deletions(-) create mode 100644 plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx diff --git a/plugins/catalog-react/src/hooks/index.ts b/plugins/catalog-react/src/hooks/index.ts index 77026d1245..5fbdc1ced2 100644 --- a/plugins/catalog-react/src/hooks/index.ts +++ b/plugins/catalog-react/src/hooks/index.ts @@ -21,6 +21,7 @@ export { useEntityListProvider, } from './useEntityListProvider'; export type { DefaultEntityFilters } from './useEntityListProvider'; +export { useEntityTypeFilter } from './useEntityTypeFilter'; export { useOwnUser } from './useOwnUser'; export { useRelatedEntities } from './useRelatedEntities'; export { useStarredEntities } from './useStarredEntities'; diff --git a/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx new file mode 100644 index 0000000000..c5e03b90c6 --- /dev/null +++ b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx @@ -0,0 +1,97 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useAsync } from 'react-use'; +import { useApi } from '@backstage/core'; +import { catalogApiRef } from '../api'; +import { + DefaultEntityFilters, + useEntityListProvider, +} from './useEntityListProvider'; +import { EntityTypeFilter } from '../types'; + +type EntityTypeReturn = { + loading: boolean; + error?: Error; + types: string[]; + selectedType: string | undefined; + setType: (type: string | undefined) => void; +}; + +/** + * A hook built on top of `useEntityListProvider` for enabling selection of valid `spec.type` values + * based on the selected EntityKindFilter. + */ +export function useEntityTypeFilter(): EntityTypeReturn { + const catalogApi = useApi(catalogApiRef); + const { + filters: { kind: kindFilter, type: typeFilter }, + updateFilters, + } = useEntityListProvider(); + + const [types, setTypes] = useState([]); + const kind = useMemo(() => kindFilter?.value, [kindFilter]); + + // Load all valid spec.type values straight from the catalogApi, paying attention to only the + // kind filter for a complete list. + const { error, loading, value: entities } = useAsync(async () => { + if (kind) { + const items = await catalogApi + .getEntities({ + filter: { kind }, + fields: ['spec.type'], + }) + .then(response => response.items); + return items; + } + return []; + }, [kind, catalogApi]); + + useEffect(() => { + // Resolve the unique set of types from returned entities; could be optimized by a new endpoint + // in the catalog-backend that does this, rather than loading entities with redundant types. + const newTypes = [ + ...new Set( + (entities ?? []).map(e => e.spec?.type).filter(Boolean) as string[], + ), + ].sort(); + setTypes(newTypes); + + // Reset type filter if no longer applicable + updateFilters((oldFilters: DefaultEntityFilters) => + oldFilters.type && !newTypes.includes(oldFilters.type.value) + ? { type: undefined } + : {}, + ); + }, [updateFilters, entities]); + + const setType = useCallback( + (type: string | undefined) => + updateFilters({ + type: type === undefined ? undefined : new EntityTypeFilter(type), + }), + [updateFilters], + ); + + return { + loading, + error, + types, + selectedType: typeFilter?.value, + setType, + }; +} diff --git a/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx b/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx index 94ad2323c9..d404c8ea85 100644 --- a/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx +++ b/plugins/catalog/src/components/EntityTypePicker/EntityTypePicker.tsx @@ -14,65 +14,21 @@ * limitations under the License. */ -import React, { useEffect, useMemo, useState } from 'react'; +import React from 'react'; import { capitalize } from 'lodash'; -import { useAsync } from 'react-use'; import { Box } from '@material-ui/core'; import { alertApiRef, Select, useApi } from '@backstage/core'; -import { - catalogApiRef, - DefaultEntityFilters, - EntityTypeFilter, - useEntityListProvider, -} from '@backstage/plugin-catalog-react'; +import { useEntityTypeFilter } from '@backstage/plugin-catalog-react'; export const EntityTypePicker = () => { - const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); - - const { - filters: { kind: kindFilter, type: typeFilter }, - updateFilters, - } = useEntityListProvider(); - const [types, setTypes] = useState([]); - - const kind = useMemo(() => kindFilter?.value, [kindFilter]); - - // Load all valid spec.type values straight from the catalogApi - we want the full set for the - // selected kinds, not an otherwise filtered set. - const { error, value: entities } = useAsync(async () => { - if (kind) { - const items = await catalogApi - .getEntities({ - filter: { kind }, - fields: ['spec.type'], - }) - .then(response => response.items); - return items; - } - return []; - }, [kind, catalogApi]); - - useEffect(() => { - const newTypes = [ - ...new Set( - (entities ?? []).map(e => e.spec?.type).filter(Boolean) as string[], - ), - ].sort(); - setTypes(newTypes); - - updateFilters((oldFilters: DefaultEntityFilters) => - oldFilters.type && !newTypes.includes(oldFilters.type.value) - ? { type: undefined } - : {}, - ); - }, [updateFilters, entities]); + const { error, types, selectedType, setType } = useEntityTypeFilter(); if (!types) return null; if (error) { alertApi.post({ - message: `Failed to load types for ${kind}`, + message: `Failed to load entity types`, severity: 'error', }); return null; @@ -80,23 +36,19 @@ export const EntityTypePicker = () => { const items = [ { value: 'all', label: 'All' }, - ...types.map(type => ({ + ...types.map((type: string) => ({ value: type, label: capitalize(type), })), ]; - const onChange = (value: any) => { - updateFilters({ type: new EntityTypeFilter(value) }); - }; - return (