scaffolder: Use default ErrorPage

plugins/scaffolder/src/components/TaskNotFound/TaskNotFound.tsx

@@ -1,59 +0,0 @@
-/*
- * 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 { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
-
-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),
-    },
-  },
-}));
-
-export const TaskNotFound = () => {
-  const classes = useStyles();
-
-  return (
-    <Grid container spacing={0} className={classes.container}>
-      <Grid item xs={12} sm={6}>
-        <Typography variant="h2" className={classes.title}>
-          Task not found
-        </Typography>
-        <Typography variant="body1" className={classes.body}>
-          No task found with this ID
-        </Typography>
-      </Grid>
-    </Grid>
-  );
-};

plugins/scaffolder/src/components/TaskPage/TaskPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Page, Header, Lifecycle, Content } from '@backstage/core';
+import { Page, Header, Lifecycle, Content, ErrorPage } from '@backstage/core';
 import React, { useState, useEffect, memo, useMemo } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
@@ -43,7 +43,6 @@ import Cancel from '@material-ui/icons/Cancel';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import { entityRoute } from '@backstage/plugin-catalog-react';
 import { parseEntityName } from '@backstage/catalog-model';
-import { TaskNotFound } from '../TaskNotFound/TaskNotFound';
 
 // typings are wrong for this library, so fallback to not parsing types.
 const humanizeDuration = require('humanize-duration');
@@ -278,7 +277,11 @@ export const TaskPage = () => {
       />
       <Content>
         {taskNotFound ? (
-          <TaskNotFound />
+          <ErrorPage
+            status="404"
+            statusMessage="Task not found"
+            additionalInfo="No task found with this ID"
+          />
         ) : (
           <div>
             <Grid container>