From 97c2cb19b31c153d0bdb891a535fc5b2bcf20590 Mon Sep 17 00:00:00 2001 From: Abhishek Jakhar Date: Tue, 27 Oct 2020 18:10:51 +0530 Subject: [PATCH] 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 | 5 ++++ .../EntityNotFound/EntityNotFound.test.tsx | 29 +++++++++++++++++++ .../EntityNotFound/EntityNotFound.tsx | 11 ++++++- .../{Illo.jsx => Illo/Illo.tsx} | 19 ++++++++++-- .../EntityNotFound/{ => Illo}/illo.svg | 0 .../components/EntityNotFound/Illo/index.ts | 16 ++++++++++ 6 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 .changeset/slimy-garlics-eat.md create mode 100644 plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx rename plugins/catalog/src/components/EntityNotFound/{Illo.jsx => Illo/Illo.tsx} (69%) rename plugins/catalog/src/components/EntityNotFound/{ => Illo}/illo.svg (100%) create mode 100644 plugins/catalog/src/components/EntityNotFound/Illo/index.ts diff --git a/.changeset/slimy-garlics-eat.md b/.changeset/slimy-garlics-eat.md new file mode 100644 index 0000000000..3ecc0ce495 --- /dev/null +++ b/.changeset/slimy-garlics-eat.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +update the EntityNotFound component diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.test.tsx new file mode 100644 index 0000000000..ddb27d584a --- /dev/null +++ b/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('', () => { + it('renders without exploding', async () => { + const { getByText } = await renderInTestApp(); + expect(getByText(/entity was not found/i)).toBeInTheDocument(); + expect(getByText(/getting started documentation/i)).toBeInTheDocument(); + expect(getByText(/docs/i)).toBeInTheDocument(); + }); +}); diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index c7560c6894..21ca09dae1 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -25,12 +25,21 @@ const useStyles = makeStyles(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 ( - + diff --git a/plugins/catalog/src/components/EntityNotFound/Illo.jsx b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx similarity index 69% rename from plugins/catalog/src/components/EntityNotFound/Illo.jsx rename to plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx index 36b8d84f5d..6c7bb9d788 100644 --- a/plugins/catalog/src/components/EntityNotFound/Illo.jsx +++ b/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 ; + return ( + Illustration on entity not found page + ); }; diff --git a/plugins/catalog/src/components/EntityNotFound/illo.svg b/plugins/catalog/src/components/EntityNotFound/Illo/illo.svg similarity index 100% rename from plugins/catalog/src/components/EntityNotFound/illo.svg rename to plugins/catalog/src/components/EntityNotFound/Illo/illo.svg diff --git a/plugins/catalog/src/components/EntityNotFound/Illo/index.ts b/plugins/catalog/src/components/EntityNotFound/Illo/index.ts new file mode 100644 index 0000000000..264a75a5b1 --- /dev/null +++ b/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';