Merge pull request #28107 from backstage/blam/move-to-useapi

use `useApi` instead of `apiHolder` for `formFieldsApi`

plugins/scaffolder-react/src/hooks/useCustomFieldExtensions.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { useAsync, useMountEffect } from '@react-hookz/web';
-import { useApiHolder, useElementFilter } from '@backstage/core-plugin-api';
+import { useApi, useElementFilter } from '@backstage/core-plugin-api';
 import { formFieldsApiRef } from '../next';
 import { FieldExtensionOptions } from '../extensions';
 import {
@@ -33,10 +33,9 @@ export const useCustomFieldExtensions = <
   outlet: React.ReactNode,
 ) => {
   // Get custom fields created with FormFieldBlueprint
-  const apiHolder = useApiHolder();
-  const formFieldsApi = apiHolder.get(formFieldsApiRef);
+  const formFieldsApi = useApi(formFieldsApiRef);
   const [{ result: blueprintFields }, methods] = useAsync(
-    formFieldsApi?.getFormFields ?? (async () => []),
+    formFieldsApi.getFormFields,
     [],
   );
   useMountEffect(methods.execute);

plugins/scaffolder/src/components/Router/Router.test.tsx

@@ -15,7 +15,11 @@
  */
 import React from 'react';
 import { Router } from './Router';
-import { renderInTestApp } from '@backstage/test-utils';
+import {
+  renderInTestApp,
+  TestApiProvider,
+  TestAppOptions,
+} from '@backstage/test-utils';
 import {
   createScaffolderFieldExtension,
   ScaffolderFieldExtensions,
@@ -26,12 +30,26 @@ import {
   ScaffolderLayouts,
 } from '@backstage/plugin-scaffolder-react';
 import { TemplateListPage, TemplateWizardPage } from '../../alpha/components';
+import { formFieldsApiRef } from '@backstage/plugin-scaffolder-react/alpha';
 
 jest.mock('../../alpha/components', () => ({
   TemplateWizardPage: jest.fn(() => null),
   TemplateListPage: jest.fn(() => null),
 }));
 
+const wrapInApisAndRender = (
+  element: React.ReactElement,
+  opts?: TestAppOptions,
+) =>
+  renderInTestApp(
+    <TestApiProvider
+      apis={[[formFieldsApiRef, { getFormFields: async () => [] }]]}
+    >
+      {element}
+    </TestApiProvider>,
+    opts,
+  );
+
 describe('Router', () => {
   beforeEach(() => {
     (TemplateWizardPage as jest.Mock).mockClear();
@@ -39,13 +57,13 @@ describe('Router', () => {
   });
   describe('/', () => {
     it('should render the TemplateListPage', async () => {
-      await renderInTestApp(<Router />);
+      await wrapInApisAndRender(<Router />);
 
       expect(TemplateListPage).toHaveBeenCalled();
     });
 
     it('should render user-provided TemplateListPage', async () => {
-      const { getByText } = await renderInTestApp(
+      const { getByText } = await wrapInApisAndRender(
         <Router
           components={{
             EXPERIMENTAL_TemplateListPageComponent: () => <>foobar</>,
@@ -62,7 +80,7 @@ describe('Router', () => {
 
   describe('/templates/:templateName', () => {
     it('should render the TemplateWizard page', async () => {
-      await renderInTestApp(<Router />, {
+      await wrapInApisAndRender(<Router />, {
         routeEntries: ['/templates/default/foo'],
       });
 
@@ -70,7 +88,7 @@ describe('Router', () => {
     });
 
     it('should render user-provided TemplateWizardPage', async () => {
-      const { getByText } = await renderInTestApp(
+      const { getByText } = await wrapInApisAndRender(
         <Router
           components={{
             EXPERIMENTAL_TemplateWizardPageComponent: () => <>foobar</>,
@@ -87,13 +105,14 @@ describe('Router', () => {
     it('should pass through the FormProps property', async () => {
       const transformErrorsMock = jest.fn();
 
-      await renderInTestApp(
+      await wrapInApisAndRender(
         <Router
           formProps={{
             transformErrors: transformErrorsMock,
             noHtml5Validate: true,
           }}
         />,
+
         {
           routeEntries: ['/templates/default/foo'],
         },
@@ -118,7 +137,7 @@ describe('Router', () => {
         }),
       );
 
-      await renderInTestApp(
+      await wrapInApisAndRender(
         <Router>
           <ScaffolderFieldExtensions>
             <CustomFieldExtension />
@@ -146,7 +165,7 @@ describe('Router', () => {
         }),
       );
 
-      await renderInTestApp(
+      await wrapInApisAndRender(
         <Router>
           <ScaffolderLayouts>
             <Layout />