Scaffolder: Revert to Navigate component

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: blam<ben@blam.sh>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>

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

@@ -22,6 +22,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
 import { ScaffolderApi, scaffolderApiRef } from '../../api';
+import { rootRouteRef } from '../../routes';
 import { TemplatePage } from './TemplatePage';
 
 const templateMock = {
@@ -96,11 +97,15 @@ describe('TemplatePage', () => {
       <ApiProvider apis={apis}>
         <TemplatePage />
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/create': rootRouteRef,
+        },
+      },
     );
 
     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 () => {
@@ -113,13 +118,18 @@ describe('TemplatePage', () => {
       <ApiProvider apis={apis}>
         <TemplatePage />
       </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/create': rootRouteRef,
+        },
+      },
     );
 
     expect(rendered.queryByText('Create a New Component')).toBeInTheDocument();
     expect(rendered.queryByTestId('loading-progress')).toBeInTheDocument();
-    // Need to cleanup the promise or will timeout
-    act(() => {
-      resolve!({ items: [] });
+
+    await act(async () => {
+      resolve!({ items: [templateMock] });
     });
   });
 

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

@@ -29,7 +29,7 @@ import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import parseGitUrl from 'git-url-parse';
 import React, { useCallback, useState } from 'react';
-import { generatePath, useNavigate } from 'react-router';
+import { generatePath, useNavigate, Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { scaffolderApiRef } from '../../api';
@@ -45,7 +45,7 @@ const useTemplate = (
       filter: { kind: 'Template', 'metadata.name': templateName },
     });
     return response.items as TemplateEntityV1alpha1[];
-  });
+  }, [catalogApi, templateName]);
   return { template: value?.[0], loading, error };
 };
 
@@ -100,8 +100,7 @@ export const TemplatePage = () => {
 
   if (!loading && !template) {
     errorApi.post(new Error('Template was not found.'));
-    navigate(rootLink());
-    return <>{null}</>;
+    return <Navigate to={rootLink()} />;
   }
 
   if (template && !template?.spec?.schema) {
@@ -110,8 +109,7 @@ export const TemplatePage = () => {
         'Template schema is corrupted, please check the template.yaml file.',
       ),
     );
-    navigate(rootLink());
-    return <>{null}</>;
+    return <Navigate to={rootLink()} />;
   }
 
   return (