catalog-client: change entities interface, add fields support (#3296)

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -53,10 +53,12 @@ export const ScaffolderPage = () => {
 
   const { data: templates, isValidating, error } = useStaleWhileRevalidate(
     'templates/all',
-    async () =>
-      catalogApi.getEntities({ kind: 'Template' }) as Promise<
-        TemplateEntityV1alpha1[]
-      >,
+    async () => {
+      const response = await catalogApi.getEntities({
+        filter: { kind: 'Template' },
+      });
+      return response.items as TemplateEntityV1alpha1[];
+    },
   );
 
   useEffect(() => {

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

@@ -13,18 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { TemplatePage } from './TemplatePage';
-import { wrapInTestApp, renderWithEffects } from '@backstage/test-utils';
-import { ApiRegistry, errorApiRef, ApiProvider } from '@backstage/core';
-import { scaffolderApiRef, ScaffolderApi } from '../../api';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog';
-import { mutate } from 'swr';
-import { act } from 'react-dom/test-utils';
-import { Route, MemoryRouter } from 'react-router';
-import { rootRoute } from '../../routes';
-import { ThemeProvider } from '@material-ui/core';
+import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { renderInTestApp, renderWithEffects } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter, Route } from 'react-router';
+import { ScaffolderApi, scaffolderApiRef } from '../../api';
+import { rootRoute } from '../../routes';
+import { TemplatePage } from './TemplatePage';
 
 const templateMock = {
   apiVersion: 'backstage.io/v1alpha1',
@@ -90,48 +89,43 @@ const apis = ApiRegistry.from([
 ]);
 
 describe('TemplatePage', () => {
-  afterEach(async () => {
-    // Cleaning up swr's cache
-    await act(async () => {
-      await mutate('templates/test');
-    });
-  });
+  beforeEach(() => jest.resetAllMocks());
+
   it('renders correctly', async () => {
-    catalogApiMock.getEntities.mockResolvedValueOnce([templateMock]);
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <TemplatePage />
-        </ApiProvider>,
-      ),
+    catalogApiMock.getEntities.mockResolvedValueOnce({ items: [templateMock] });
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <TemplatePage />
+      </ApiProvider>,
     );
 
     expect(rendered.queryByText('Create a new component')).toBeInTheDocument();
     expect(rendered.queryByText('React SSR Template')).toBeInTheDocument();
     // await act(async () => await mutate('templates/test'));
   });
+
   it('renders spinner while loading', async () => {
     let resolve: Function;
     const promise = new Promise<any>(res => {
       resolve = res;
     });
-    catalogApiMock.getEntities.mockResolvedValueOnce(promise);
-    const rendered = await renderWithEffects(
-      wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <TemplatePage />
-        </ApiProvider>,
-      ),
+    catalogApiMock.getEntities.mockReturnValueOnce(promise);
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <TemplatePage />
+      </ApiProvider>,
     );
 
     expect(rendered.queryByText('Create a new component')).toBeInTheDocument();
     expect(rendered.queryByTestId('loading-progress')).toBeInTheDocument();
     // Need to cleanup the promise or will timeout
-    resolve!();
+    act(() => {
+      resolve!({ items: [] });
+    });
   });
 
   it('navigates away if no template was loaded', async () => {
-    catalogApiMock.getEntities.mockResolvedValueOnce([]);
+    catalogApiMock.getEntities.mockResolvedValueOnce({ items: [] });
 
     const rendered = await renderWithEffects(
       <ApiProvider apis={apis}>

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -27,28 +27,26 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import useStaleWhileRevalidate from 'swr';
-import { scaffolderApiRef } from '../../api';
-import { JobStatusModal } from '../JobStatusModal';
-import { Job } from '../../types';
-import { MultistepJsonForm } from '../MultistepJsonForm';
 import { Navigate } from 'react-router';
+import { useParams } from 'react-router-dom';
+import { useAsync } from 'react-use';
+import { scaffolderApiRef } from '../../api';
 import { rootRoute } from '../../routes';
+import { Job } from '../../types';
+import { JobStatusModal } from '../JobStatusModal';
+import { MultistepJsonForm } from '../MultistepJsonForm';
 
 const useTemplate = (
   templateName: string,
   catalogApi: typeof catalogApiRef.T,
 ) => {
-  const { data, error } = useStaleWhileRevalidate(
-    `templates/${templateName}`,
-    async () =>
-      catalogApi.getEntities({
-        kind: 'Template',
-        'metadata.name': templateName,
-      }) as Promise<TemplateEntityV1alpha1[]>,
-  );
-  return { template: data?.[0], loading: !error && !data, error };
+  const { value, loading, error } = useAsync(async () => {
+    const response = await catalogApi.getEntities({
+      filter: { kind: 'Template', 'metadata.name': templateName },
+    });
+    return response.items as TemplateEntityV1alpha1[];
+  });
+  return { template: value?.[0], loading, error };
 };
 
 const OWNER_REPO_SCHEMA = {
@@ -110,7 +108,7 @@ export const TemplatePage = () => {
   const handleCreateComplete = async (job: Job) => {
     const target = job.metadata.remoteUrl?.replace(
       /\.git$/,
-      // TODO(Rugvip): This is not the location we want. As part of scaffodler v2 we
+      // TODO(Rugvip): This is not the location we want. As part of scaffolder v2 we
       //               want this to be more flexible, but before that we might want
       //               to update all templates to use catalog-info.yaml instead.
       '/blob/master/component-info.yaml',