diff --git a/plugins/scaffolder/src/components/TaskNotFound/TaskNotFound.tsx b/plugins/scaffolder/src/components/TaskNotFound/TaskNotFound.tsx new file mode 100644 index 0000000000..24ac8c357d --- /dev/null +++ b/plugins/scaffolder/src/components/TaskNotFound/TaskNotFound.tsx @@ -0,0 +1,59 @@ +/* + * 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(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 ( + + + + Task not found + + + No task found with this ID + + + + ); +}; diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 40a52d8b93..8c9b63fa1b 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx @@ -22,9 +22,10 @@ import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import { useParams } from 'react-router'; +import { generatePath, useParams } from 'react-router'; import { useTaskEventStream } from '../hooks/useEventStream'; import LazyLog from 'react-lazylog/build/LazyLog'; +import { Link } from 'react-router-dom'; import { Box, Button, @@ -40,8 +41,9 @@ import clsx from 'clsx'; import Check from '@material-ui/icons/Check'; import Cancel from '@material-ui/icons/Cancel'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -import { EntityRefLink } from '@backstage/plugin-catalog-react'; +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'); @@ -262,6 +264,7 @@ export const TaskPage = () => { !taskStream.task; const entityRef = taskStream.output?.entityRef; + const remoteUrl = taskStream.output?.remoteUrl; return (
{ /> {taskNotFound ? ( -
Task not found
+ ) : (
@@ -286,13 +289,37 @@ export const TaskPage = () => { currentStepId={currentStepId} onUserStepChange={setUserSelectedStepId} /> - {entityRef && ( - - + + )} + {remoteUrl && ( + + )} )}