Add Yaml tab to Pipeline details (#3662)

ui/src/components/Pipelines/PipelineDetails/index.tsx

@@ -1,4 +1,10 @@
 import { ListError } from '@weaveworks/progressive-delivery/api/prog/types.pb';
+import {
+  RouterTab,
+  SubRouterTabs,
+  YamlView,
+  createYamlCommand,
+} from '@weaveworks/weave-gitops';
 import { Pipeline } from '../../../api/pipelines/types.pb';
 import { useGetPipeline } from '../../../contexts/Pipelines';
 import { Routes } from '../../../utils/nav';
@@ -25,6 +31,7 @@ const PipelineDetails = ({ name, namespace }: Props) => {
     name,
     namespace,
   });
+  const path = `/pipelines/details`;
 
   return (
     <Page
@@ -42,7 +49,21 @@ const PipelineDetails = ({ name, namespace }: Props) => {
       <NotificationsWrapper
         errors={mappedErrors(data?.errors || [], namespace)}
       >
-        <Workloads pipeline={data?.pipeline || ({} as Pipeline)} />
+        <SubRouterTabs rootPath={`${path}/status`}>
+          <RouterTab name="Status" path={`${path}/status`}>
+            <Workloads pipeline={data?.pipeline || ({} as Pipeline)} />
+          </RouterTab>
+          <RouterTab name="Yaml" path={`${path}/yaml`}>
+            <YamlView
+              yaml={data?.pipeline?.yaml || ''}
+              header={createYamlCommand(
+                'Pipeline',
+                data?.pipeline?.name,
+                data?.pipeline?.namespace,
+              )}
+            />
+          </RouterTab>
+        </SubRouterTabs>
       </NotificationsWrapper>
     </Page>
   );