Move header creation outside yaml view to allow for custom text (#4069)

* move header creation outside yaml view to allow for custom text

* tests

ui/components/AutomationDetail.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { createCanaryCondition, useGetInventory } from "../hooks/inventory";
 import { Condition, Kind, ObjectRef } from "../lib/api/core/types.pb";
 import { Automation, HelmRelease } from "../lib/objects";
-import { automationLastUpdated } from "../lib/utils";
+import { automationLastUpdated, createYamlCommand } from "../lib/utils";
 import Alert from "./Alert";
 import Collapsible from "./Collapsible";
 import DependenciesView from "./DependenciesView";
@@ -152,11 +152,11 @@ function AutomationDetail({
         return (
           <YamlView
             yaml={automation.yaml}
-            object={{
-              kind: automation.type,
-              name: automation.name,
-              namespace: automation.namespace,
-            }}
+            header={createYamlCommand(
+              automation.type,
+              automation.name,
+              automation.namespace
+            )}
           />
         );
       },

ui/components/DetailModal.tsx

@@ -4,13 +4,16 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import { AppContext } from "../contexts/AppContext";
 import { FluxObject, FluxObjectNode } from "../lib/objects";
+import { createYamlCommand } from "../lib/utils";
 import Flex from "./Flex";
 import Text from "./Text";
 import { DialogYamlView } from "./YamlView";
 
+type PRPreviewProps = { path: string; yaml: string; name: string };
+
 export type DetailViewProps = {
   className?: string;
-  object: FluxObject | FluxObjectNode;
+  object: FluxObject | FluxObjectNode | PRPreviewProps;
 };
 
 const HeaderFlex = styled(Flex)`
@@ -22,20 +25,16 @@ export enum AltKinds {
 }
 
 const content = (object) => {
-  switch (object.type) {
+  const { type, name, namespace, yaml } = object;
+  switch (type) {
     // PodDetail Page - turned off for now
     // case AltKinds.Pod:
     //   return <PodPage object={object} />;
     default:
       return (
         <DialogYamlView
-          object={{
-            name: object.name,
-            namespace: object.namespace,
-            clusterName: object.clusterName,
-            kind: object.type,
-          }}
-          yaml={object.yaml}
+          header={createYamlCommand(type, name, namespace, object.path || "")}
+          yaml={yaml}
         />
       );
   }

ui/components/ImageAutomation/ImageAutomationDetails.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import styled from "styled-components";
 import { Kind } from "../../lib/api/core/types.pb";
+import { createYamlCommand } from "../../lib/utils";
 import EventsTable from "../EventsTable";
 import Flex from "../Flex";
 import PageStatus from "../PageStatus";
 import HeaderRows, { RowItem } from "../Policies/Utils/HeaderRows";
 import SubRouterTabs, { RouterTab } from "../SubRouterTabs";
 import SyncActions from "../SyncActions";
 import YamlView from "../YamlView";
-
 interface Props {
   className?: string;
   data: any;
@@ -26,7 +26,7 @@ const ImageAutomationDetails = ({
   infoFields,
   children,
 }: Props) => {
-  const { name, namespace, clusterName, suspended, conditions } = data;
+  const { name, namespace, clusterName, suspended, conditions, yaml } = data;
 
   return (
     <Flex wide tall column className={className} gap="4">
@@ -62,12 +62,8 @@ const ImageAutomationDetails = ({
         </RouterTab>
         <RouterTab name="yaml" path={`${rootPath}/yaml`}>
           <YamlView
-            yaml={data.yaml}
-            object={{
-              kind: kind,
-              name: name,
-              namespace: namespace,
-            }}
+            yaml={yaml}
+            header={createYamlCommand(kind, name, namespace)}
           />
         </RouterTab>
       </SubRouterTabs>

ui/components/PodDetail.tsx

@@ -2,6 +2,7 @@ import { Tabs } from "@material-ui/core";
 import * as React from "react";
 import styled from "styled-components";
 import { Container, FluxObject } from "../lib/objects";
+import { createYamlCommand } from "../lib/utils";
 import DataTable from "./DataTable";
 import Flex from "./Flex";
 import InfoList from "./InfoList";
@@ -142,12 +143,7 @@ function PodDetail({ className, pod }: Props) {
         return (
           <DialogYamlView
             yaml={pod.yaml}
-            object={{
-              kind: pod.type,
-              name: pod.name,
-              namespace: pod.namespace,
-              clusterName: pod.clusterName,
-            }}
+            header={createYamlCommand(pod.type, pod.name, pod.namespace)}
           />
         );
     }

ui/components/ProviderDetail.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { useListAlerts } from "../hooks/notifications";
 import { Kind } from "../lib/api/core/types.pb";
 import { Provider } from "../lib/objects";
+import { createYamlCommand } from "../lib/utils";
 import Alert from "./Alert";
 import AlertsTable from "./AlertsTable";
 import Flex from "./Flex";
@@ -30,11 +31,11 @@ function ProviderDetail({ className, provider }: Props) {
         </RouterTab>
         <RouterTab name="Yaml" path={`${path}/yaml`}>
           <YamlView
-            object={{
-              name: provider.name,
-              namespace: provider.namespace,
-              kind: Kind.Provider,
-            }}
+            header={createYamlCommand(
+              Kind.Provider,
+              provider.name,
+              provider.namespace
+            )}
             yaml={provider.yaml}
           />
         </RouterTab>

ui/components/SourceDetail.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import { useListAutomations } from "../hooks/automations";
 import { Kind } from "../lib/api/core/types.pb";
 import { HelmRelease, OCIRepository, Source } from "../lib/objects";
-import { getSourceRefForAutomation } from "../lib/utils";
+import { createYamlCommand, getSourceRefForAutomation } from "../lib/utils";
 import AutomationsTable from "./AutomationsTable";
 import EventsTable from "./EventsTable";
 import Flex from "./Flex";
@@ -120,11 +120,7 @@ function SourceDetail({ className, source, info, type, customActions }: Props) {
         <RouterTab name="yaml" path={`${path}/yaml`}>
           <YamlView
             yaml={yaml}
-            object={{
-              kind: type,
-              name: name,
-              namespace: namespace,
-            }}
+            header={createYamlCommand(type, name, namespace)}
           />
         </RouterTab>
       </SubRouterTabs>

ui/components/YamlView.tsx

@@ -4,16 +4,14 @@ import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import styled from "styled-components";
 import { ThemeTypes } from "../contexts/AppContext";
 import { useInDarkMode } from "../hooks/theme";
-import { ObjectRef } from "../lib/api/core/types.pb";
-import { createYamlCommand } from "../lib/utils";
 import CopyToClipboard from "./CopyToCliboard";
 import Flex from "./Flex";
 
 export type YamlViewProps = {
   className?: string;
   type?: string;
   yaml: string;
-  object?: ObjectRef;
+  header?: string;
   theme?: ThemeTypes;
 };
 
@@ -28,17 +26,11 @@ const YamlHeader = styled(Flex)`
 
 function UnstyledYamlView({
   yaml,
-  object,
+  header,
   className,
   theme,
   type = "yaml",
 }: YamlViewProps) {
-  const headerText = createYamlCommand(
-    object?.kind,
-    object?.name,
-    object?.namespace
-  );
-
   const dark = theme ? theme === ThemeTypes.Dark : useInDarkMode();
 
   const styleProps = {
@@ -60,11 +52,11 @@ function UnstyledYamlView({
 
   return (
     <div className={className}>
-      {headerText && (
+      {header && (
         <YamlHeader wide gap="4" alignItems="center">
-          {headerText}
+          {header}
           <CopyToClipboard
-            value={headerText}
+            value={header}
             className="yamlheader-copy"
             size="small"
           />

ui/components/__tests__/YamlView.test.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import renderer from "react-test-renderer";
 import { Kind } from "../../lib/api/core/types.pb";
 import { withContext, withTheme } from "../../lib/test-utils";
+import { createYamlCommand } from "../../lib/utils";
 import YamlView from "../YamlView";
 
 describe("YamlView", () => {
@@ -13,11 +14,11 @@ describe("YamlView", () => {
           withTheme(
             withContext(
               <YamlView
-                object={{
-                  kind: Kind.Kustomization,
-                  name: "podinfo",
-                  namespace: "flux-system",
-                }}
+                header={createYamlCommand(
+                  Kind.Kustomization,
+                  "podinfo",
+                  "flux-system"
+                )}
                 yaml="yaml\nyaml\nyaml\n"
               />,
               "",

ui/lib/__tests__/utils.test.ts

@@ -425,6 +425,11 @@ describe("createYamlCommand", () => {
       null
     );
   });
+  it("uses the path prop if it is defined", () => {
+    expect(createYamlCommand(undefined, undefined, undefined, "http")).toEqual(
+      "http"
+    );
+  });
 
   describe("getBasePath", () => {
     describe("without a base tag set in the dom", () => {

ui/lib/utils.ts

@@ -244,10 +244,12 @@ export function formatLogTimestamp(timestamp?: string, zone?: string): string {
 }
 
 export const createYamlCommand = (
-  kind: string,
-  name: string,
-  namespace: string
+  kind?: string,
+  name?: string,
+  namespace?: string,
+  path?: string
 ): string => {
+  if (path) return path;
   if (kind && name) {
     const namespaceString = namespace ? ` -n ${namespace}` : "";
     return `kubectl get ${kind.toLowerCase()} ${name}${namespaceString} -o yaml`;