feat(core): add support config & button/error components

This adds a new app.support top level config that can be used to
configure various support links and other information. This can later be
extended for plugins to append their own specific support items.

plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx

@@ -17,9 +17,9 @@
 import { DomainEntity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { render, waitFor } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { waitFor } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { DomainExplorerContent } from './DomainExplorerContent';
 
 describe('<DomainExplorerContent />', () => {
@@ -33,11 +33,9 @@ describe('<DomainExplorerContent />', () => {
   };
 
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <MemoryRouter>
-      <ApiProvider apis={ApiRegistry.with(catalogApiRef, catalogApi)}>
-        {children}
-      </ApiProvider>
-    </MemoryRouter>
+    <ApiProvider apis={ApiRegistry.with(catalogApiRef, catalogApi)}>
+      {children}
+    </ApiProvider>
   );
 
   beforeEach(() => {
@@ -69,9 +67,11 @@ describe('<DomainExplorerContent />', () => {
     ];
     catalogApi.getEntities.mockResolvedValue({ items: entities });
 
-    const { getByText } = render(<DomainExplorerContent />, {
-      wrapper: Wrapper,
-    });
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <DomainExplorerContent />
+      </Wrapper>,
+    );
 
     await waitFor(() => {
       expect(getByText('artists')).toBeInTheDocument();
@@ -82,9 +82,11 @@ describe('<DomainExplorerContent />', () => {
   it('renders empty state', async () => {
     catalogApi.getEntities.mockResolvedValue({ items: [] });
 
-    const { getByText } = render(<DomainExplorerContent />, {
-      wrapper: Wrapper,
-    });
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <DomainExplorerContent />
+      </Wrapper>,
+    );
 
     await waitFor(() =>
       expect(getByText('No domains to display')).toBeInTheDocument(),
@@ -95,9 +97,11 @@ describe('<DomainExplorerContent />', () => {
     const catalogError = new Error('Network timeout');
     catalogApi.getEntities.mockRejectedValueOnce(catalogError);
 
-    const { getByText } = render(<DomainExplorerContent />, {
-      wrapper: Wrapper,
-    });
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <DomainExplorerContent />
+      </Wrapper>,
+    );
 
     await waitFor(() =>
       expect(getByText(/Could not load domains/)).toBeInTheDocument(),

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx

@@ -19,11 +19,11 @@ import {
   ExploreTool,
   exploreToolsConfigRef,
 } from '@backstage/plugin-explore-react';
+import { renderInTestApp } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
-import { render, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { ToolExplorerContent } from './ToolExplorerContent';
 
 describe('<ToolExplorerContent />', () => {
@@ -33,13 +33,11 @@ describe('<ToolExplorerContent />', () => {
 
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
     <ThemeProvider theme={lightTheme}>
-      <MemoryRouter>
-        <ApiProvider
-          apis={ApiRegistry.with(exploreToolsConfigRef, exploreToolsConfigApi)}
-        >
-          {children}
-        </ApiProvider>
-      </MemoryRouter>
+      <ApiProvider
+        apis={ApiRegistry.with(exploreToolsConfigRef, exploreToolsConfigApi)}
+      >
+        {children}
+      </ApiProvider>
     </ThemeProvider>
   );
 
@@ -70,9 +68,11 @@ describe('<ToolExplorerContent />', () => {
     ];
     exploreToolsConfigApi.getTools.mockResolvedValue(tools);
 
-    const { getByText } = render(<ToolExplorerContent />, {
-      wrapper: Wrapper,
-    });
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <ToolExplorerContent />
+      </Wrapper>,
+    );
 
     await waitFor(() => {
       expect(getByText('Lighthouse')).toBeInTheDocument();
@@ -83,9 +83,11 @@ describe('<ToolExplorerContent />', () => {
   it('renders empty state', async () => {
     exploreToolsConfigApi.getTools.mockResolvedValue([]);
 
-    const { getByText } = render(<ToolExplorerContent />, {
-      wrapper: Wrapper,
-    });
+    const { getByText } = await renderInTestApp(
+      <Wrapper>
+        <ToolExplorerContent />
+      </Wrapper>,
+    );
 
     await waitFor(() =>
       expect(getByText('No tools to display')).toBeInTheDocument(),