From 579ace87ceaed1905e07818ef738f53824fa1931 Mon Sep 17 00:00:00 2001
From: Joshua Israel <65822698+joshri@users.noreply.github.com>
Date: Sat, 7 Oct 2023 19:37:16 -0400
Subject: [PATCH] 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             | 12 ++++++------
 ui/components/DetailModal.tsx                  | 17 ++++++++---------
 .../ImageAutomation/ImageAutomationDetails.tsx | 12 ++++--------
 ui/components/PodDetail.tsx                    |  8 ++------
 ui/components/ProviderDetail.tsx               | 11 ++++++-----
 ui/components/SourceDetail.tsx                 |  8 ++------
 ui/components/YamlView.tsx                     | 18 +++++-------------
 ui/components/__tests__/YamlView.test.tsx      | 11 ++++++-----
 ui/lib/__tests__/utils.test.ts                 |  5 +++++
 ui/lib/utils.ts                                |  8 +++++---
 10 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/ui/components/AutomationDetail.tsx b/ui/components/AutomationDetail.tsx
index 9b3439585e..f1f9b48cbd 100644
--- a/ui/components/AutomationDetail.tsx
+++ b/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
+            )}
           />
         );
       },
diff --git a/ui/components/DetailModal.tsx b/ui/components/DetailModal.tsx
index f4546e4b8b..b458d938b5 100644
--- a/ui/components/DetailModal.tsx
+++ b/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}
         />
       );
   }
diff --git a/ui/components/ImageAutomation/ImageAutomationDetails.tsx b/ui/components/ImageAutomation/ImageAutomationDetails.tsx
index d0de32fcde..fada8cbacc 100644
--- a/ui/components/ImageAutomation/ImageAutomationDetails.tsx
+++ b/ui/components/ImageAutomation/ImageAutomationDetails.tsx
@@ -1,6 +1,7 @@
 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";
@@ -8,7 +9,6 @@ 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>
diff --git a/ui/components/PodDetail.tsx b/ui/components/PodDetail.tsx
index 51bbacb35b..19520c2a47 100644
--- a/ui/components/PodDetail.tsx
+++ b/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)}
           />
         );
     }
diff --git a/ui/components/ProviderDetail.tsx b/ui/components/ProviderDetail.tsx
index a2b17a992a..be33bb399d 100644
--- a/ui/components/ProviderDetail.tsx
+++ b/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>
diff --git a/ui/components/SourceDetail.tsx b/ui/components/SourceDetail.tsx
index b8e09d48d0..605976f51f 100644
--- a/ui/components/SourceDetail.tsx
+++ b/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>
diff --git a/ui/components/YamlView.tsx b/ui/components/YamlView.tsx
index 57dfa8dafe..d248a16ef8 100644
--- a/ui/components/YamlView.tsx
+++ b/ui/components/YamlView.tsx
@@ -4,8 +4,6 @@ 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";
 
@@ -13,7 +11,7 @@ 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"
           />
diff --git a/ui/components/__tests__/YamlView.test.tsx b/ui/components/__tests__/YamlView.test.tsx
index e49cba137a..c21c01cb3d 100644
--- a/ui/components/__tests__/YamlView.test.tsx
+++ b/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"
               />,
               "",
diff --git a/ui/lib/__tests__/utils.test.ts b/ui/lib/__tests__/utils.test.ts
index 111f5da617..4ef63ef32d 100644
--- a/ui/lib/__tests__/utils.test.ts
+++ b/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", () => {
diff --git a/ui/lib/utils.ts b/ui/lib/utils.ts
index e107f7839f..e9461f792e 100644
--- a/ui/lib/utils.ts
+++ b/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`;