catalog-react: Rename useEntityListProvider hook to useEntityList

Signed-off-by: Johan Haals <johan.haals@gmail.com>
2022-02-21 11:04:27 +01:00
parent 1482bb9349
commit b776ce5aab
21 changed files with 72 additions and 48 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Deprecated the `useEntityListProvider` hook which is now renamed to `useEntityList`
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Replaced use of deprecated `useEntityListProvider` hook with `useEntityList`.
@@ -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<CustomFilters>();
+  } = useEntityList<CustomFilters>();

  // Toggles the value, depending on whether it's already selected
  function onChange(value: string) {
@@ -559,6 +559,11 @@ export function useEntityKinds(): {
 };

 // @public
+export function useEntityList<
+  EntityFilters extends DefaultEntityFilters = DefaultEntityFilters,
+>(): EntityListContextProps<EntityFilters>;
+
+// @public @deprecated
 export function useEntityListProvider<
  EntityFilters extends DefaultEntityFilters = DefaultEntityFilters,
 >(): EntityListContextProps<EntityFilters>;
@@ -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,
  );
@@ -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 = <CheckBoxIcon fontSize="small" />;
 export const EntityLifecyclePicker = () => {
  const classes = useStyles();
  const { updateFilters, backendEntities, filters, queryParameters } =
-    useEntityListProvider();
+    useEntityList();

  const queryParamLifecycles = useMemo(
    () => [queryParameters.lifecycles].flat().filter(Boolean) as string[],
@@ -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 = <CheckBoxIcon fontSize="small" />;
 export const EntityOwnerPicker = () => {
  const classes = useStyles();
  const { updateFilters, backendEntities, filters, queryParameters } =
-    useEntityListProvider();
+    useEntityList();

  const queryParamOwners = useMemo(
    () => [queryParameters.owners].flat().filter(Boolean) as string[],
@@ -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(
@@ -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 = <CheckBoxIcon fontSize="small" />;
 export const EntityTagPicker = () => {
  const classes = useStyles();
  const { updateFilters, backendEntities, filters, queryParameters } =
-    useEntityListProvider();
+    useEntityList();

  const queryParamTags = useMemo(
    () => [queryParameters.tags].flat().filter(Boolean) as string[],
@@ -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.
@@ -30,6 +30,7 @@ export {
  EntityListContext,
  EntityListProvider,
  useEntityListProvider,
+  useEntityList,
 } from './useEntityListProvider';
 export type {
  DefaultEntityFilters,
@@ -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('<EntityListProvider />', () => {
  });

  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('<EntityListProvider />', () => {
  });

  it('resolves frontend filters', async () => {
-    const { result, waitFor } = renderHook(() => useEntityListProvider(), {
+    const { result, waitFor } = renderHook(() => useEntityList(), {
      wrapper,
      initialProps: {
        userFilter: 'all',
@@ -173,7 +167,7 @@ describe('<EntityListProvider />', () => {
    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('<EntityListProvider />', () => {
  });

  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('<EntityListProvider />', () => {

  it('debounces multiple filter changes', async () => {
    const { result, waitForNextUpdate, waitForValueToChange } = renderHook(
-      () => useEntityListProvider(),
+      () => useEntityList(),
      {
        wrapper,
      },
@@ -233,7 +227,7 @@ describe('<EntityListProvider />', () => {

  it('returns an error on catalogApi failure', async () => {
    const { result, waitForValueToChange, waitFor } = renderHook(
-      () => useEntityListProvider(),
+      () => useEntityList(),
      {
        wrapper,
      },
@@ -252,14 +252,26 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>({
 /**
 * 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<EntityFilters> {
  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<EntityFilters> {
+  const context = useContext(EntityListContext);
+  if (!context)
+    throw new Error('useEntityList must be used within EntityListProvider');
  return context;
 }
@@ -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[],
@@ -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[];
@@ -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(
@@ -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<CatalogTableRow>[] = useMemo(
    () => [
@@ -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))
@@ -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 (
@@ -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<DocsTableRow>[];
  actions?: TableProps<DocsTableRow>['actions'];
 }) => {
-  const { loading, error, entities, filters } = useEntityListProvider();
+  const { loading, error, entities, filters } = useEntityList();
  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
  const [, copyToClipboard] = useCopyToClipboard();

@@ -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<CustomFilters>();
+  const { updateFilters } = useEntityList<CustomFilters>();

  useEffect(() => {
    updateFilters({