feat: make entity not found page responsive (#3125)

* feat: make EntityNotFound component responsive

* feat: convert Illo from jsx file type to tsx file type

* fix: give value to alt tag of Illo

* feat: add test case for EntityNotFound component

* chore: add changeset

.changeset/slimy-garlics-eat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+update the EntityNotFound component

plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+
+import { EntityNotFound } from './EntityNotFound';
+
+describe('<EntityNotFound />', () => {
+  it('renders without exploding', async () => {
+    const { getByText } = await renderInTestApp(<EntityNotFound />);
+    expect(getByText(/entity was not found/i)).toBeInTheDocument();
+    expect(getByText(/getting started documentation/i)).toBeInTheDocument();
+    expect(getByText(/docs/i)).toBeInTheDocument();
+  });
+});

plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx

@@ -25,12 +25,21 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   container: {
     paddingTop: theme.spacing(24),
     paddingLeft: theme.spacing(8),
+    [theme.breakpoints.down('xs')]: {
+      padding: theme.spacing(2),
+    },
   },
   title: {
     paddingBottom: theme.spacing(2),
+    [theme.breakpoints.down('xs')]: {
+      fontSize: 32,
+    },
   },
   body: {
     paddingBottom: theme.spacing(6),
+    [theme.breakpoints.down('xs')]: {
+      paddingBottom: theme.spacing(5),
+    },
   },
 }));
 
@@ -38,7 +47,7 @@ export const EntityNotFound = () => {
   const classes = useStyles();
 
   return (
-    <Grid container className={classes.container}>
+    <Grid container spacing={0} className={classes.container}>
       <Illo />
       <Grid item xs={12} sm={6}>
         <Typography variant="h2" className={classes.title}>

plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx

@@ -18,16 +18,29 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core';
 import IlloSvgUrl from './illo.svg';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   illo: {
     maxWidth: '60%',
     top: 100,
     right: 20,
     position: 'absolute',
+    [theme.breakpoints.down('xs')]: {
+      maxWidth: '96%',
+      position: 'relative',
+      top: 'unset',
+      right: 'unset',
+      margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+    },
   },
-});
+}));
 
 export const Illo = () => {
   const classes = useStyles();
-  return <img src={IlloSvgUrl} className={classes.illo} alt="" />;
+  return (
+    <img
+      src={IlloSvgUrl}
+      className={classes.illo}
+      alt="Illustration on entity not found page"
+    />
+  );
 };

plugins/catalog/src/components/EntityNotFound/Illo/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Illo } from './Illo';