chore: moving the outputs around and fixing some navigation]

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

plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx

@@ -14,11 +14,18 @@
  * 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';
+import { ScaffolderTaskOutput } from '../../../api';
 
-export const DefaultOutputs = (props: { output?: ScaffolderTaskOutput }) => {
+/**
+ * The DefaultOutputs renderer for the scaffolder task output
+ *
+ * @alpha
+ */
+export const DefaultTemplateOutputs = (props: {
+  output?: ScaffolderTaskOutput;
+}) => {
   if (!props.output?.links) {
     return null;
   }

plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx

@@ -15,12 +15,12 @@
  */
 import { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
-import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
 import { Button, makeStyles } from '@material-ui/core';
 import React from 'react';
 import WebIcon from '@material-ui/icons/Web';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
+import { ScaffolderTaskOutput } from '../../../api';
 
 const useStyles = makeStyles({
   root: {

plugins/scaffolder-react/src/next/components/TemplateOutputs/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { DefaultOutputs } from './DefaultOutputs';
+export { DefaultTemplateOutputs } from './DefaultTemplateOutputs';

plugins/scaffolder-react/src/next/components/index.ts

@@ -18,3 +18,4 @@ export * from './TemplateCard';
 export * from './ReviewState';
 export * from './TemplateGroup';
 export * from './Workflow';
+export * from './TemplateOutputs';

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

@@ -24,8 +24,11 @@ import { TaskLogStream } from './TaskLogStream';
 import { nextSelectedTemplateRouteRef } from '../routes';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
-import { DefaultOutputs } from './Outputs';
 import { ContextMenu } from './ContextMenu';
+import {
+  DefaultTemplateOutputs,
+  ScaffolderTaskOutput,
+} from '@backstage/plugin-scaffolder-react';
 
 const useStyles = makeStyles({
   contentWrapper: {
@@ -34,7 +37,11 @@ const useStyles = makeStyles({
   },
 });
 
-export const OngoingTask = () => {
+export const OngoingTask = (props: {
+  TemplateOutputsComponent?: React.ComponentType<{
+    output?: ScaffolderTaskOutput;
+  }>;
+}) => {
   // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.
   const { taskId } = useParams();
   const templateRouteRef = useRouteRef(nextSelectedTemplateRouteRef);
@@ -92,6 +99,8 @@ export const OngoingTask = () => {
     templateRouteRef,
   ]);
 
+  const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;
+
   const templateName =
     taskStream.task?.spec.templateInfo?.entity?.metadata.name;
 
@@ -134,7 +143,7 @@ export const OngoingTask = () => {
           </Paper>
         </Box>
 
-        <DefaultOutputs output={taskStream.output} />
+        <Outputs output={taskStream.output} />
 
         {logsVisible ? (
           <Box paddingBottom={2} height="100%">

plugins/scaffolder/src/next/Router/Router.tsx

@@ -19,6 +19,7 @@ import { TemplateListPage } from '../TemplateListPage';
 import { TemplateWizardPage } from '../TemplateWizardPage';
 import {
   NextFieldExtensionOptions,
+  ScaffolderTaskOutput,
   SecretsContextProvider,
   useCustomFieldExtensions,
   useCustomLayouts,
@@ -47,9 +48,21 @@ export type NextRouterProps = {
       template: TemplateEntityV1beta3;
     }>;
     TaskPageComponent?: React.ComponentType<{}>;
+    TemplateOutputsComponent?: React.ComponentType<{
+      output?: ScaffolderTaskOutput;
+    }>;
   };
   groups?: TemplateGroupFilter[];
+  // todo(blam): rename this to formProps
   FormProps?: FormProps;
+  contextMenu?: {
+    /** Whether to show a link to the template editor */
+    editor?: boolean;
+    /** Whether to show a link to the actions documentation */
+    actions?: boolean;
+    /** Whether to show a link to the tasks page */
+    tasks?: boolean;
+  };
 };
 
 /**
@@ -58,10 +71,13 @@ export type NextRouterProps = {
  * @alpha
  */
 export const Router = (props: PropsWithChildren<NextRouterProps>) => {
-  const { components: { TemplateCardComponent } = {} } = props;
+  const {
+    components: { TemplateCardComponent, TemplateOutputsComponent } = {},
+  } = props;
   const outlet = useOutlet() || props.children;
   const customFieldExtensions =
     useCustomFieldExtensions<NextFieldExtensionOptions>(outlet);
+
   const fieldExtensions = [
     ...customFieldExtensions,
     ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
@@ -81,6 +97,7 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
         element={
           <TemplateListPage
             TemplateCardComponent={TemplateCardComponent}
+            contextMenu={props.contextMenu}
             groups={props.groups}
           />
         }
@@ -97,7 +114,12 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
           </SecretsContextProvider>
         }
       />
-      <Route path={nextScaffolderTaskRouteRef.path} element={<OngoingTask />} />
+      <Route
+        path={nextScaffolderTaskRouteRef.path}
+        element={
+          <OngoingTask TemplateOutputsComponent={TemplateOutputsComponent} />
+        }
+      />
       <Route
         path="*"
         element={<ErrorPage status="404" statusMessage="Page not found" />}

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -37,12 +37,18 @@ import { RegisterExistingButton } from './RegisterExistingButton';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
 import { registerComponentRouteRef } from '../../routes';
+import { ScaffolderPageContextMenu } from '../../components/ScaffolderPage/ScaffolderPageContextMenu';
 
 export type TemplateListPageProps = {
   TemplateCardComponent?: React.ComponentType<{
     template: TemplateEntityV1beta3;
   }>;
   groups?: TemplateGroupFilter[];
+  contextMenu?: {
+    editor?: boolean;
+    actions?: boolean;
+    tasks?: boolean;
+  };
 };
 
 const defaultGroup: TemplateGroupFilter = {
@@ -61,7 +67,9 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
           pageTitleOverride="Create a new component"
           title="Create a new component"
           subtitle="Create new software components using standard templates in your organization"
-        />
+        >
+          <ScaffolderPageContextMenu {...props.contextMenu} />
+        </Header>
         <Content>
           <ContentHeader title="Available Templates">
             <RegisterExistingButton