From 10fc1ab08ce542ff46bbde10c05e2941e8ae3ffb Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Fri, 25 Sep 2020 23:28:00 +0530 Subject: [PATCH 1/5] feat: 404 page for entity not found --- .../EntityNotFound/EntityNotFound.tsx | 90 +++++++++++++++++++ .../src/components/EntityNotFound/Illo.jsx | 33 +++++++ .../src/components/EntityNotFound/illo.svg | 37 ++++++++ .../src/components/EntityNotFound/index.ts | 16 ++++ plugins/catalog/src/components/Router.tsx | 3 +- plugins/catalog/src/hooks/useEntity.ts | 15 ++-- 6 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx create mode 100644 plugins/catalog/src/components/EntityNotFound/Illo.jsx create mode 100644 plugins/catalog/src/components/EntityNotFound/illo.svg create mode 100644 plugins/catalog/src/components/EntityNotFound/index.ts diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx new file mode 100644 index 0000000000..8f57b67b7e --- /dev/null +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -0,0 +1,90 @@ +/* + * 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, { FC } from 'react'; +import { Grid, Button, Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Header, + Page, + Content, + ContentHeader, + HeaderLabel, + pageTheme, + SupportButton, +} from '@backstage/core'; +import { BackstageTheme } from '@backstage/theme'; + +import { Illo } from './Illo'; + +const useStyles = makeStyles(theme => ({ + container: { + paddingTop: theme.spacing(6), + }, + title: { + paddingBottom: theme.spacing(2), + }, + body: { + paddingBottom: theme.spacing(4), + }, +})); + +export const EntityNotFound: FC<{}> = () => { + const classes = useStyles(); + + return ( + + +
+ + +
+ + + + All your software catalog entities + + + + + Entity was not found + + + Want to help us build this? Check out our Getting Started + documentation.{' '} + + + + + + + ); +}; diff --git a/plugins/catalog/src/components/EntityNotFound/Illo.jsx b/plugins/catalog/src/components/EntityNotFound/Illo.jsx new file mode 100644 index 0000000000..47dc1b3131 --- /dev/null +++ b/plugins/catalog/src/components/EntityNotFound/Illo.jsx @@ -0,0 +1,33 @@ +/* + * 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 { makeStyles } from '@material-ui/core'; +import IlloSvgUrl from './illo.svg'; + +const useStyles = makeStyles({ + illo: { + maxWidth: '60%', + top: 200, + right: 20, + position: 'absolute', + }, +}); + +export const Illo = () => { + const classes = useStyles(); + return ; +}; diff --git a/plugins/catalog/src/components/EntityNotFound/illo.svg b/plugins/catalog/src/components/EntityNotFound/illo.svg new file mode 100644 index 0000000000..df97dfe063 --- /dev/null +++ b/plugins/catalog/src/components/EntityNotFound/illo.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/catalog/src/components/EntityNotFound/index.ts b/plugins/catalog/src/components/EntityNotFound/index.ts new file mode 100644 index 0000000000..613ea7b36d --- /dev/null +++ b/plugins/catalog/src/components/EntityNotFound/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 { EntityNotFound } from './EntityNotFound'; diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx index 61855f56d9..d1ad06a03e 100644 --- a/plugins/catalog/src/components/Router.tsx +++ b/plugins/catalog/src/components/Router.tsx @@ -15,6 +15,7 @@ */ import React, { ComponentType } from 'react'; import { CatalogPage } from './CatalogPage'; +import { EntityNotFound } from './EntityNotFound'; import { EntityPageLayout } from './EntityPageLayout'; import { Route, Routes } from 'react-router'; import { entityRoute, rootRoute } from '../routes'; @@ -47,7 +48,7 @@ const DefaultEntityPage = () => ( const EntityPageSwitch = ({ EntityPage }: { EntityPage: ComponentType }) => { const { entity } = useEntity(); // Loading and error states - if (!entity) return ; + if (!entity) return ; // Otherwise EntityPage provided from the App // Note that EntityPage will include EntityPageLayout already diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog/src/hooks/useEntity.ts index 53b1cff73a..ac4973161e 100644 --- a/plugins/catalog/src/hooks/useEntity.ts +++ b/plugins/catalog/src/hooks/useEntity.ts @@ -20,7 +20,7 @@ import { catalogApiRef } from '../api/types'; import { useAsync } from 'react-use'; import { Entity } from '@backstage/catalog-model'; -const REDIRECT_DELAY = 2000; +// const REDIRECT_DELAY = 2000; type EntityLoadingStatus = { entity?: Entity; @@ -47,12 +47,13 @@ export const useEntityFromUrl = (): EntityLoadingStatus => { ); useEffect(() => { - if (error || (!loading && !entity)) { - errorApi.post(new Error('Entity not found!')); - setTimeout(() => { - navigate('/'); - }, REDIRECT_DELAY); - } + // Commenting to check EntityNotFound page + // if (error || (!loading && !entity)) { + // errorApi.post(new Error('Entity not found!')); + // setTimeout(() => { + // navigate('/'); + // }, REDIRECT_DELAY); + // } if (!name) { errorApi.post(new Error('No name provided!')); From 62845150c0b4051624e0c34e4249a0b361d3f1a3 Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Mon, 28 Sep 2020 23:34:24 +0530 Subject: [PATCH 2/5] fix: remove header and content header --- .../EntityNotFound/EntityNotFound.tsx | 69 ++++++------------- .../src/components/EntityNotFound/Illo.jsx | 2 +- 2 files changed, 21 insertions(+), 50 deletions(-) diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index 8f57b67b7e..be38d8f025 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -17,28 +17,20 @@ import React, { FC } from 'react'; import { Grid, Button, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { - Header, - Page, - Content, - ContentHeader, - HeaderLabel, - pageTheme, - SupportButton, -} from '@backstage/core'; import { BackstageTheme } from '@backstage/theme'; import { Illo } from './Illo'; const useStyles = makeStyles(theme => ({ container: { - paddingTop: theme.spacing(6), + paddingTop: theme.spacing(24), + paddingLeft: theme.spacing(8), }, title: { paddingBottom: theme.spacing(2), }, body: { - paddingBottom: theme.spacing(4), + paddingBottom: theme.spacing(6), }, })); @@ -46,45 +38,24 @@ export const EntityNotFound: FC<{}> = () => { const classes = useStyles(); return ( - + -
- - -
- - + + Entity was not found + + + Want to help us build this? Check out our Getting Started + documentation. + + - All your software catalog entities - - - - - Entity was not found - - - Want to help us build this? Check out our Getting Started - documentation.{' '} - - - - - - + DOCS + + + ); }; diff --git a/plugins/catalog/src/components/EntityNotFound/Illo.jsx b/plugins/catalog/src/components/EntityNotFound/Illo.jsx index 47dc1b3131..36b8d84f5d 100644 --- a/plugins/catalog/src/components/EntityNotFound/Illo.jsx +++ b/plugins/catalog/src/components/EntityNotFound/Illo.jsx @@ -21,7 +21,7 @@ import IlloSvgUrl from './illo.svg'; const useStyles = makeStyles({ illo: { maxWidth: '60%', - top: 200, + top: 100, right: 20, position: 'absolute', }, From 7c78bc66b283564610a07457a6feaca7ecdabe59 Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Tue, 29 Sep 2020 13:45:59 +0530 Subject: [PATCH 3/5] fix: remove old code --- .../src/components/EntityNotFound/EntityNotFound.tsx | 4 ++-- plugins/catalog/src/hooks/useEntity.ts | 10 ---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index be38d8f025..c7560c6894 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import React from 'react'; import { Grid, Button, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; @@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export const EntityNotFound: FC<{}> = () => { +export const EntityNotFound = () => { const classes = useStyles(); return ( diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog/src/hooks/useEntity.ts index ac4973161e..1f076c0a05 100644 --- a/plugins/catalog/src/hooks/useEntity.ts +++ b/plugins/catalog/src/hooks/useEntity.ts @@ -20,8 +20,6 @@ import { catalogApiRef } from '../api/types'; import { useAsync } from 'react-use'; import { Entity } from '@backstage/catalog-model'; -// const REDIRECT_DELAY = 2000; - type EntityLoadingStatus = { entity?: Entity; loading: boolean; @@ -47,14 +45,6 @@ export const useEntityFromUrl = (): EntityLoadingStatus => { ); useEffect(() => { - // Commenting to check EntityNotFound page - // if (error || (!loading && !entity)) { - // errorApi.post(new Error('Entity not found!')); - // setTimeout(() => { - // navigate('/'); - // }, REDIRECT_DELAY); - // } - if (!name) { errorApi.post(new Error('No name provided!')); navigate('/'); From 81703f1f1a3d9e581e96e74fb3197b3ad8707e61 Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Tue, 29 Sep 2020 16:14:33 +0530 Subject: [PATCH 4/5] fix: flickering while loading --- plugins/catalog/src/components/Router.tsx | 5 +++-- plugins/catalog/src/hooks/useEntity.ts | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx index d1ad06a03e..c6e706c15b 100644 --- a/plugins/catalog/src/components/Router.tsx +++ b/plugins/catalog/src/components/Router.tsx @@ -46,9 +46,10 @@ const DefaultEntityPage = () => ( ); const EntityPageSwitch = ({ EntityPage }: { EntityPage: ComponentType }) => { - const { entity } = useEntity(); + const { entity, loading, error } = useEntity(); // Loading and error states - if (!entity) return ; + if (loading) return ; + if (error || (!loading && !entity)) return ; // Otherwise EntityPage provided from the App // Note that EntityPage will include EntityPageLayout already diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog/src/hooks/useEntity.ts index 1f076c0a05..abbfd03b5b 100644 --- a/plugins/catalog/src/hooks/useEntity.ts +++ b/plugins/catalog/src/hooks/useEntity.ts @@ -58,6 +58,8 @@ export const useEntityFromUrl = (): EntityLoadingStatus => { * Always going to return an entity, or throw an error if not a descendant of a EntityProvider. */ export const useEntity = () => { - const { entity } = useContext<{ entity: Entity }>(EntityContext as any); - return { entity }; + const { entity, loading, error } = useContext( + EntityContext as any, + ); + return { entity, loading, error }; }; From 51d6e34519c4709da243c99976b9ec34016f33d1 Mon Sep 17 00:00:00 2001 From: Shashank Bairy R Date: Tue, 29 Sep 2020 18:15:26 +0530 Subject: [PATCH 5/5] fix: type fix --- plugins/catalog/src/hooks/useEntity.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog/src/hooks/useEntity.ts index abbfd03b5b..77ea8c1569 100644 --- a/plugins/catalog/src/hooks/useEntity.ts +++ b/plugins/catalog/src/hooks/useEntity.ts @@ -58,8 +58,10 @@ export const useEntityFromUrl = (): EntityLoadingStatus => { * Always going to return an entity, or throw an error if not a descendant of a EntityProvider. */ export const useEntity = () => { - const { entity, loading, error } = useContext( - EntityContext as any, - ); + const { entity, loading, error } = useContext<{ + entity: Entity; + loading: boolean; + error: Error; + }>(EntityContext as any); return { entity, loading, error }; };