From b776ce5aab49f1e40adf812f5dd69a988c0a7ea4 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Mon, 21 Feb 2022 11:04:27 +0100 Subject: [PATCH] catalog-react: Rename useEntityListProvider hook to useEntityList Signed-off-by: Johan Haals --- .changeset/many-moons-kneel.md | 5 ++++ .changeset/mean-cobras-check.md | 7 ++++++ .../software-catalog/catalog-customization.md | 4 ++-- plugins/catalog-react/api-report.md | 5 ++++ .../EntityKindPicker/EntityKindPicker.tsx | 4 ++-- .../EntityLifecyclePicker.tsx | 4 ++-- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 4 ++-- .../EntitySearchBar/EntitySearchBar.tsx | 4 ++-- .../EntityTagPicker/EntityTagPicker.tsx | 4 ++-- .../UserListPicker/UserListPicker.tsx | 4 ++-- plugins/catalog-react/src/hooks/index.ts | 1 + .../src/hooks/useEntityListProvider.test.tsx | 24 +++++++------------ .../src/hooks/useEntityListProvider.tsx | 18 +++++++++++--- .../src/hooks/useEntityTypeFilter.tsx | 6 ++--- plugins/catalog-react/src/types.ts | 2 +- .../CatalogKindHeader/CatalogKindHeader.tsx | 4 ++-- .../components/CatalogTable/CatalogTable.tsx | 4 ++-- .../components/TemplateList/TemplateList.tsx | 4 ++-- .../home/components/EntityListDocsGrid.tsx | 4 ++-- .../home/components/EntityListDocsTable.tsx | 4 ++-- .../src/home/components/TechDocsPicker.tsx | 4 ++-- 21 files changed, 72 insertions(+), 48 deletions(-) create mode 100644 .changeset/many-moons-kneel.md create mode 100644 .changeset/mean-cobras-check.md diff --git a/.changeset/many-moons-kneel.md b/.changeset/many-moons-kneel.md new file mode 100644 index 0000000000..546879893c --- /dev/null +++ b/.changeset/many-moons-kneel.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Deprecated the `useEntityListProvider` hook which is now renamed to `useEntityList` diff --git a/.changeset/mean-cobras-check.md b/.changeset/mean-cobras-check.md new file mode 100644 index 0000000000..1debeaf2e8 --- /dev/null +++ b/.changeset/mean-cobras-check.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-techdocs': patch +--- + +Replaced use of deprecated `useEntityListProvider` hook with `useEntityList`. diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 821f39ff6e..80c9458aee 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -93,7 +93,7 @@ export type CustomFilters = DefaultEntityFilters & { To control this filter, we can create a React component that shows checkboxes for the security tiers. This component will make use of the -`useEntityListProvider` hook, which accepts this extended filter type as a +`useEntityList` hook, which accepts this extended filter type as a [generic](https://www.typescriptlang.org/docs/handbook/2/generics.html) parameter: @@ -103,7 +103,7 @@ export const EntitySecurityTierPicker = () => { const { filters: { securityTiers }, updateFilters, - } = useEntityListProvider(); + } = useEntityList(); // Toggles the value, depending on whether it's already selected function onChange(value: string) { diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 54f8391437..0a7bbbfc9e 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -559,6 +559,11 @@ export function useEntityKinds(): { }; // @public +export function useEntityList< + EntityFilters extends DefaultEntityFilters = DefaultEntityFilters, +>(): EntityListContextProps; + +// @public @deprecated export function useEntityListProvider< EntityFilters extends DefaultEntityFilters = DefaultEntityFilters, >(): EntityListContextProps; diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx index 17d28aad9f..1891f83df7 100644 --- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx +++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx @@ -16,7 +16,7 @@ import React, { useEffect, useState } from 'react'; import { Alert } from '@material-ui/lab'; -import { useEntityListProvider } from '../../hooks'; +import { useEntityList } from '../../hooks'; import { EntityKindFilter } from '../../filters'; /** @@ -33,7 +33,7 @@ export interface EntityKindPickerProps { export const EntityKindPicker = (props: EntityKindPickerProps) => { const { initialFilter, hidden } = props; - const { updateFilters, queryParameters } = useEntityListProvider(); + const { updateFilters, queryParameters } = useEntityList(); const [selectedKind] = useState( [queryParameters.kind].flat()[0] ?? initialFilter, ); diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 77691ab7c5..a05914fd6d 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -28,7 +28,7 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { Autocomplete } from '@material-ui/lab'; import React, { useEffect, useMemo, useState } from 'react'; -import { useEntityListProvider } from '../../hooks/useEntityListProvider'; +import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityLifecycleFilter } from '../../filters'; /** @public */ @@ -50,7 +50,7 @@ const checkedIcon = ; export const EntityLifecyclePicker = () => { const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = - useEntityListProvider(); + useEntityList(); const queryParamLifecycles = useMemo( () => [queryParameters.lifecycles].flat().filter(Boolean) as string[], diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index acb5ee9279..d025d08012 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -28,7 +28,7 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { Autocomplete } from '@material-ui/lab'; import React, { useEffect, useMemo, useState } from 'react'; -import { useEntityListProvider } from '../../hooks/useEntityListProvider'; +import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityOwnerFilter } from '../../filters'; import { getEntityRelations } from '../../utils'; import { formatEntityRefTitle } from '../EntityRefLink'; @@ -52,7 +52,7 @@ const checkedIcon = ; export const EntityOwnerPicker = () => { const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = - useEntityListProvider(); + useEntityList(); const queryParamOwners = useMemo( () => [queryParameters.owners].flat().filter(Boolean) as string[], diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index f13fb1621f..fdb07658d0 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -26,7 +26,7 @@ import Clear from '@material-ui/icons/Clear'; import Search from '@material-ui/icons/Search'; import React, { useState } from 'react'; import useDebounce from 'react-use/lib/useDebounce'; -import { useEntityListProvider } from '../../hooks/useEntityListProvider'; +import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; /** @public */ @@ -52,7 +52,7 @@ const useStyles = makeStyles( export const EntitySearchBar = () => { const classes = useStyles(); - const { filters, updateFilters } = useEntityListProvider(); + const { filters, updateFilters } = useEntityList(); const [search, setSearch] = useState(filters.text?.value ?? ''); useDebounce( diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx index a91389a653..5b5e0e7ab9 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -28,7 +28,7 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { Autocomplete } from '@material-ui/lab'; import React, { useEffect, useMemo, useState } from 'react'; -import { useEntityListProvider } from '../../hooks/useEntityListProvider'; +import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityTagFilter } from '../../filters'; /** @public */ @@ -50,7 +50,7 @@ const checkedIcon = ; export const EntityTagPicker = () => { const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = - useEntityListProvider(); + useEntityList(); const queryParamTags = useMemo( () => [queryParameters.tags].flat().filter(Boolean) as string[], diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index 3019ae32eb..d281bb31a8 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -36,7 +36,7 @@ import { compact } from 'lodash'; import React, { Fragment, useEffect, useMemo, useState } from 'react'; import { UserListFilter } from '../../filters'; import { - useEntityListProvider, + useEntityList, useStarredEntities, useEntityOwnership, } from '../../hooks'; @@ -136,7 +136,7 @@ export const UserListPicker = (props: UserListPickerProps) => { backendEntities, queryParameters, loading: loadingBackendEntities, - } = useEntityListProvider(); + } = useEntityList(); // Remove group items that aren't in availableFilters and exclude // any now-empty groups. diff --git a/plugins/catalog-react/src/hooks/index.ts b/plugins/catalog-react/src/hooks/index.ts index ba6a1c7341..170ea37394 100644 --- a/plugins/catalog-react/src/hooks/index.ts +++ b/plugins/catalog-react/src/hooks/index.ts @@ -30,6 +30,7 @@ export { EntityListContext, EntityListProvider, useEntityListProvider, + useEntityList, } from './useEntityListProvider'; export type { DefaultEntityFilters, diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx index 548561108d..c0a90fa834 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx @@ -33,10 +33,7 @@ import { DefaultStarredEntitiesApi, starredEntitiesApiRef } from '../apis'; import { EntityKindPicker, UserListPicker } from '../components'; import { EntityKindFilter, EntityTypeFilter, UserListFilter } from '../filters'; import { UserListFilterKind } from '../types'; -import { - EntityListProvider, - useEntityListProvider, -} from './useEntityListProvider'; +import { EntityListProvider, useEntityList } from './useEntityListProvider'; const entities: Entity[] = [ { @@ -129,12 +126,9 @@ describe('', () => { }); it('resolves backend filters', async () => { - const { result, waitForValueToChange } = renderHook( - () => useEntityListProvider(), - { - wrapper, - }, - ); + const { result, waitForValueToChange } = renderHook(() => useEntityList(), { + wrapper, + }); await waitForValueToChange(() => result.current.backendEntities); expect(result.current.backendEntities.length).toBe(2); expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({ @@ -143,7 +137,7 @@ describe('', () => { }); it('resolves frontend filters', async () => { - const { result, waitFor } = renderHook(() => useEntityListProvider(), { + const { result, waitFor } = renderHook(() => useEntityList(), { wrapper, initialProps: { userFilter: 'all', @@ -173,7 +167,7 @@ describe('', () => { const query = qs.stringify({ filters: { kind: 'component', type: 'service' }, }); - const { result, waitFor } = renderHook(() => useEntityListProvider(), { + const { result, waitFor } = renderHook(() => useEntityList(), { wrapper, initialProps: { location: `/catalog?${query}`, @@ -187,7 +181,7 @@ describe('', () => { }); it('does not fetch when only frontend filters change', async () => { - const { result, waitFor } = renderHook(() => useEntityListProvider(), { + const { result, waitFor } = renderHook(() => useEntityList(), { wrapper, }); @@ -214,7 +208,7 @@ describe('', () => { it('debounces multiple filter changes', async () => { const { result, waitForNextUpdate, waitForValueToChange } = renderHook( - () => useEntityListProvider(), + () => useEntityList(), { wrapper, }, @@ -233,7 +227,7 @@ describe('', () => { it('returns an error on catalogApi failure', async () => { const { result, waitForValueToChange, waitFor } = renderHook( - () => useEntityListProvider(), + () => useEntityList(), { wrapper, }, diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx index d6c4e3749a..f448e41b82 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx @@ -252,14 +252,26 @@ export const EntityListProvider = ({ /** * Hook for interacting with the entity list context provided by the {@link EntityListProvider}. * @public + * @deprecated use {@link useEntityList} instead. */ export function useEntityListProvider< EntityFilters extends DefaultEntityFilters = DefaultEntityFilters, >(): EntityListContextProps { const context = useContext(EntityListContext); if (!context) - throw new Error( - 'useEntityListProvider must be used within EntityListProvider', - ); + throw new Error('useEntityList must be used within EntityListProvider'); + return context; +} + +/** + * Hook for interacting with the entity list context provided by the {@link EntityListProvider}. + * @public + */ +export function useEntityList< + EntityFilters extends DefaultEntityFilters = DefaultEntityFilters, +>(): EntityListContextProps { + const context = useContext(EntityListContext); + if (!context) + throw new Error('useEntityList must be used within EntityListProvider'); return context; } diff --git a/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx index cfe821b4f7..4fd3fd43e8 100644 --- a/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx +++ b/plugins/catalog-react/src/hooks/useEntityTypeFilter.tsx @@ -20,7 +20,7 @@ import isEqual from 'lodash/isEqual'; import sortBy from 'lodash/sortBy'; import { useApi } from '@backstage/core-plugin-api'; import { catalogApiRef } from '../api'; -import { useEntityListProvider } from './useEntityListProvider'; +import { useEntityList } from './useEntityListProvider'; import { EntityTypeFilter } from '../filters'; /** @public */ @@ -33,7 +33,7 @@ export type EntityTypeReturn = { }; /** - * A hook built on top of `useEntityListProvider` for enabling selection of valid `spec.type` values + * A hook built on top of `useEntityList` for enabling selection of valid `spec.type` values * based on the selected EntityKindFilter. * @public */ @@ -43,7 +43,7 @@ export function useEntityTypeFilter(): EntityTypeReturn { filters: { kind: kindFilter, type: typeFilter }, queryParameters, updateFilters, - } = useEntityListProvider(); + } = useEntityList(); const queryParamTypes = useMemo( () => [queryParameters.type].flat().filter(Boolean) as string[], diff --git a/plugins/catalog-react/src/types.ts b/plugins/catalog-react/src/types.ts index 440bab2b22..41c7d75f0d 100644 --- a/plugins/catalog-react/src/types.ts +++ b/plugins/catalog-react/src/types.ts @@ -38,7 +38,7 @@ export type EntityFilter = { /** * Serialize the filter value to a string for query params. The UI component responsible for - * handling this filter should retrieve this from useEntityListProvider.queryParameters. The + * handling this filter should retrieve this from useEntityList.queryParameters. The * value restored should be in the precedence: queryParameters `>` initialValue prop `>` default. */ toQueryValue?: () => string | string[]; diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx index 3f5588853c..ed54f1fa84 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx @@ -27,7 +27,7 @@ import { import { catalogApiRef, EntityKindFilter, - useEntityListProvider, + useEntityList, } from '@backstage/plugin-catalog-react'; import useAsync from 'react-use/lib/useAsync'; import { useApi } from '@backstage/core-plugin-api'; @@ -59,7 +59,7 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) { .getEntityFacets({ facets: ['kind'] }) .then(response => response.facets.kind?.map(f => f.value).sort() || []); }); - const { updateFilters, queryParameters } = useEntityListProvider(); + const { updateFilters, queryParameters } = useEntityList(); const [selectedKind, setSelectedKind] = useState( ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase( diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index ec4868c20a..c1e6988016 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -21,7 +21,7 @@ import { getEntityMetadataEditUrl, getEntityMetadataViewUrl, getEntityRelations, - useEntityListProvider, + useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; import Edit from '@material-ui/icons/Edit'; @@ -52,7 +52,7 @@ export interface CatalogTableProps { export const CatalogTable = (props: CatalogTableProps) => { const { columns, actions } = props; const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); - const { loading, error, entities, filters } = useEntityListProvider(); + const { loading, error, entities, filters } = useEntityList(); const defaultColumns: TableColumn[] = useMemo( () => [ diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx index a7f0b49132..c95a8237eb 100644 --- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -25,7 +25,7 @@ import { Progress, WarningPanel, } from '@backstage/core-components'; -import { useEntityListProvider } from '@backstage/plugin-catalog-react'; +import { useEntityList } from '@backstage/plugin-catalog-react'; import { Typography } from '@material-ui/core'; import { TemplateCard } from '../TemplateCard'; @@ -44,7 +44,7 @@ export const TemplateList = ({ TemplateCardComponent, group, }: TemplateListProps) => { - const { loading, error, entities } = useEntityListProvider(); + const { loading, error, entities } = useEntityList(); const Card = TemplateCardComponent || TemplateCard; const maybeFilteredEntities = group ? entities.filter(e => group.filter(e)) diff --git a/plugins/techdocs/src/home/components/EntityListDocsGrid.tsx b/plugins/techdocs/src/home/components/EntityListDocsGrid.tsx index 8c04a29f66..11fb71961c 100644 --- a/plugins/techdocs/src/home/components/EntityListDocsGrid.tsx +++ b/plugins/techdocs/src/home/components/EntityListDocsGrid.tsx @@ -18,12 +18,12 @@ import { Progress, WarningPanel, } from '@backstage/core-components'; -import { useEntityListProvider } from '@backstage/plugin-catalog-react'; +import { useEntityList } from '@backstage/plugin-catalog-react'; import React from 'react'; import { DocsCardGrid } from './DocsCardGrid'; export const EntityListDocsGrid = () => { - const { loading, error, entities } = useEntityListProvider(); + const { loading, error, entities } = useEntityList(); if (error) { return ( diff --git a/plugins/techdocs/src/home/components/EntityListDocsTable.tsx b/plugins/techdocs/src/home/components/EntityListDocsTable.tsx index 4d136591ff..fa99622885 100644 --- a/plugins/techdocs/src/home/components/EntityListDocsTable.tsx +++ b/plugins/techdocs/src/home/components/EntityListDocsTable.tsx @@ -24,7 +24,7 @@ import { WarningPanel, } from '@backstage/core-components'; import { - useEntityListProvider, + useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; import { DocsTable } from './DocsTable'; @@ -39,7 +39,7 @@ export const EntityListDocsTable = ({ columns?: TableColumn[]; actions?: TableProps['actions']; }) => { - const { loading, error, entities, filters } = useEntityListProvider(); + const { loading, error, entities, filters } = useEntityList(); const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const [, copyToClipboard] = useCopyToClipboard(); diff --git a/plugins/techdocs/src/home/components/TechDocsPicker.tsx b/plugins/techdocs/src/home/components/TechDocsPicker.tsx index 9ed21da368..ce79b9a4e9 100644 --- a/plugins/techdocs/src/home/components/TechDocsPicker.tsx +++ b/plugins/techdocs/src/home/components/TechDocsPicker.tsx @@ -19,7 +19,7 @@ import { CATALOG_FILTER_EXISTS, DefaultEntityFilters, EntityFilter, - useEntityListProvider, + useEntityList, } from '@backstage/plugin-catalog-react'; class TechDocsFilter implements EntityFilter { @@ -35,7 +35,7 @@ type CustomFilters = DefaultEntityFilters & { }; export const TechDocsPicker = () => { - const { updateFilters } = useEntityListProvider(); + const { updateFilters } = useEntityList(); useEffect(() => { updateFilters({