Merge branch 'master' of github.com:spotify/backstage into migrate-to-msw

* 'master' of github.com:spotify/backstage: (139 commits)
  Cleanup
  Update PinButton.test.tsx
  feat: update github insights plugin version (#2973)
  Ignore IntelliJ *.iml files (#2971)
  chore(deps): bump rollup-plugin-dts from 1.4.11 to 1.4.13
  fix the plugin card on plugins page
  align 'Add to Marketplace' button on plugins page
  fix the PluginGrid on mobiles sizes
  use getBy query instead of queryBy when asserting for elements present in document (#2951)
  Update PinButton.tsx
  Add test case for Progress component (#2953)
  fix the styling of footer copy on mobile
  add changeset
  handle the case where no entities are available to show
  core-api: work around issue with ApiRef export const declarations
  core-api: move utility api system implementation into apis/system
  Update docs regarding npm config ignore-scripts flag
  Another try
  Fix Core Features configuration id (#2948)
  Fix test?
  ...

plugins/tech-radar/src/components/RadarComponent.test.tsx

@@ -19,6 +19,7 @@ import { render, waitForElement } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
 import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
+import { act } from 'react-dom/test-utils';
 import { withLogCollector } from '@backstage/test-utils';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
@@ -34,8 +35,9 @@ describe('RadarComponent', () => {
   });
 
   it('should render a progress bar', async () => {
-    const errorApi = { post: () => {} };
+    jest.useFakeTimers();
 
+    const errorApi = { post: () => {} };
     const { getByTestId, queryByTestId } = render(
       <ThemeProvider theme={lightTheme}>
         <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
@@ -48,9 +50,13 @@ describe('RadarComponent', () => {
       </ThemeProvider>,
     );
 
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
     expect(getByTestId('progress')).toBeInTheDocument();
 
     await waitForElement(() => queryByTestId('tech-radar-svg'));
+    jest.useRealTimers();
   });
 
   it('should call the errorApi if load fails', async () => {

plugins/tech-radar/src/components/RadarPage.test.tsx

@@ -22,6 +22,7 @@ import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
 import { RadarPage } from './RadarPage';
+import { act } from 'react-dom/test-utils';
 import { MockErrorApi, wrapInTestApp } from '@backstage/test-utils';
 
 describe('RadarPage', () => {
@@ -34,6 +35,8 @@ describe('RadarPage', () => {
   });
 
   it('should render a progress bar', async () => {
+    jest.useFakeTimers();
+
     const techRadarProps = {
       width: 1200,
       height: 800,
@@ -48,9 +51,13 @@ describe('RadarPage', () => {
       ),
     );
 
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
     expect(getByTestId('progress')).toBeInTheDocument();
 
     await waitForElement(() => queryByTestId('tech-radar-svg'));
+    jest.useRealTimers();
   });
 
   it('should render a header with a svg', async () => {

plugins/tech-radar/src/components/RadarPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -23,11 +23,16 @@ import {
   Header,
   HeaderLabel,
   SupportButton,
-  pageTheme,
 } from '@backstage/core';
 import RadarComponent from '../components/RadarComponent';
 import { TechRadarComponentProps } from '../api';
 
+const useStyles = makeStyles(() => ({
+  overflowXScroll: {
+    overflowX: 'scroll',
+  },
+}));
+
 export type TechRadarPageProps = TechRadarComponentProps & {
   title?: string;
   subtitle?: string;
@@ -39,28 +44,31 @@ export const RadarPage = ({
   subtitle,
   pageTitle,
   ...props
-}: TechRadarPageProps): JSX.Element => (
-  <Page theme={pageTheme.tool}>
-    <Header title={title} subtitle={subtitle}>
-      <HeaderLabel label="Owner" value="Spotify" />
-      <HeaderLabel label="Lifecycle" value="Beta" />
-    </Header>
-    <Content>
-      <ContentHeader title={pageTitle}>
-        <SupportButton>
-          This is used for visualizing the official guidelines of different
-          areas of software development such as languages, frameworks,
-          infrastructure and processes.
-        </SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="row">
-        <Grid item xs={12} sm={6} md={4}>
-          <RadarComponent {...props} />
+}: TechRadarPageProps): JSX.Element => {
+  const classes = useStyles();
+  return (
+    <Page themeId="tool">
+      <Header title={title} subtitle={subtitle}>
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Beta" />
+      </Header>
+      <Content className={classes.overflowXScroll}>
+        <ContentHeader title={pageTitle}>
+          <SupportButton>
+            This is used for visualizing the official guidelines of different
+            areas of software development such as languages, frameworks,
+            infrastructure and processes.
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="row">
+          <Grid item xs={12} sm={6} md={4}>
+            <RadarComponent {...props} />
+          </Grid>
         </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
+      </Content>
+    </Page>
+  );
+};
 
 RadarPage.defaultProps = {
   title: 'Tech Radar',