chore: added default outputs to the template when there's links

Signed-off-by: blam <ben@blam.sh>

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx

@@ -24,6 +24,7 @@ import { TaskLogStream } from './TaskLogStream';
 import { nextSelectedTemplateRouteRef } from '../routes';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
+import { DefaultOutputs } from './Outputs';
 
 export const OngoingTask = () => {
   // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.
@@ -108,7 +109,7 @@ export const OngoingTask = () => {
             </Box>
           </Paper>
         </Box>
-
+        <DefaultOutputs output={taskStream.output} />
         <Box paddingBottom={2}>
           <Paper>
             <Box
@@ -130,7 +131,6 @@ export const OngoingTask = () => {
             </Box>
           </Paper>
         </Box>
-
         {logsVisible ? (
           <Box paddingBottom={2} height="100%">
             <Paper style={{ height: '100%' }}>

plugins/scaffolder/src/next/OngoingTask/Outputs/DefaultOutputs.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * 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 { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
+import { Box, Paper } from '@material-ui/core';
+import { LinkOutputs } from './LinkOutputs';
+
+export const DefaultOutputs = (props: { output?: ScaffolderTaskOutput }) => {
+  if (!props.output?.links) {
+    return null;
+  }
+
+  return (
+    <Box paddingBottom={2}>
+      <Paper>
+        <Box padding={2} justifyContent="center" display="flex" gridGap={16}>
+          <LinkOutputs output={props.output} />
+        </Box>
+      </Paper>
+    </Box>
+  );
+};

plugins/scaffolder/src/next/OngoingTask/Outputs/LinkOutputs.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * 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 { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
+import { Box, Button, makeStyles, Link } from '@material-ui/core';
+import React from 'react';
+import WebIcon from '@material-ui/icons/Web';
+import { parseEntityRef } from '@backstage/catalog-model';
+
+const useStyles = makeStyles({
+  root: {
+    '&:hover': {
+      textDecoration: 'none',
+    },
+  },
+});
+
+export const LinkOutputs = (props: { output: ScaffolderTaskOutput }) => {
+  const { links = [] } = props.output;
+  const classes = useStyles();
+  const app = useApp();
+  const entityRoute = useRouteRef(entityRouteRef);
+
+  const iconResolver = (key?: string): IconComponent =>
+    app.getSystemIcon(key!) ?? WebIcon;
+
+  return (
+    <>
+      {links
+        .filter(({ url, entityRef }) => url || entityRef)
+        .map(({ url, entityRef, title, icon }) => {
+          if (entityRef) {
+            const entityName = parseEntityRef(entityRef);
+            const target = entityRoute(entityName);
+            return { title, icon, url: target };
+          }
+          return { title, icon, url: url! };
+        })
+        .map(({ url, title, icon }, i) => {
+          const Icon = iconResolver(icon);
+          return (
+            <Link
+              classes={{ root: classes.root }}
+              href={url}
+              key={i}
+              component={Button}
+              target="_blank"
+              startIcon={<Icon />}
+            >
+              {title}
+            </Link>
+          );
+        })}
+    </>
+  );
+};

plugins/scaffolder/src/next/OngoingTask/Outputs/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * 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 { DefaultOutputs } from './DefaultOutputs';