refactor: extract helm installation snippet from agent installation instructions

Author: mainawycliffe

src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx

@@ -1,27 +1,13 @@
-import { useMemo, useState } from "react";
+import HelmInstallationSnippets, {
+  TemplateContextData
+} from "@flanksource-ui/ui/HelmSnippet/HelmInstallationSnippets";
+import { useMemo } from "react";
 import { GeneratedAgent } from "../../../api/services/agents";
 import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
-import { Tab, Tabs } from "../../../ui/Tabs/Tabs";
 import { AgentFormValues } from "../Add/AddAgentForm";
-import CLIInstallAgent from "./CLIInstallAgent";
-import FluxInstallAgent from "./FluxInstallAgent";
 import { useAgentsBaseURL } from "./useAgentsBaseURL";
 
-export function WarningBox() {
-  return (
-    <div
-      className="relative rounded border border-yellow-200 bg-yellow-100 px-4 py-3 text-yellow-700"
-      role="alert"
-    >
-      <span className="block sm:inline">
-        Access token will be shown only once. Please copy it and store it
-        securely.
-      </span>
-    </div>
-  );
-}
-
 export function MoreInfoBox() {
   return (
     <div className="flex flex-col gap-2 px-2">
@@ -84,14 +70,6 @@ export function MoreInfoBox() {
   );
 }
 
-export type TemplateContextData = {
-  namespace?: string;
-  chart?: string;
-  repoName?: string;
-  values?: string[];
-  kubeValues?: string[];
-};
-
 type Props = {
   isOpen: boolean;
   onClose: () => void;
@@ -105,7 +83,6 @@ export default function InstallAgentModal({
   generatedAgent,
   agentFormValues
 }: Props) {
-  const [activeTab, setActiveTab] = useState<"cli" | "flux">("cli");
   const baseUrl = useAgentsBaseURL();
 
   const data = useMemo(() => {
@@ -116,36 +93,60 @@ export default function InstallAgentModal({
       chart: "mission-control-agent",
       namespace: "mission-control-agent",
       repoName: "flanksource",
+      createNamespace: true,
       // You can add more values here to be passed to the template for the
       // values section of the HelmRelease
       values: [
-        `upstream.createSecret=true`,
-        `upstream.host=${baseUrl}`,
-        `upstream.username=token`,
-        `upstream.password=${generatedAgent?.access_token}`,
-        `upstream.agentName=${agentFormValues?.name}`,
+        {
+          key: "upstream.createSecret",
+          value: "true"
+        },
+        {
+          key: "upstream.host",
+          value: baseUrl
+        },
+        {
+          key: "upstream.username",
+          value: "token"
+        },
+        {
+          key: "upstream.password",
+          value: generatedAgent?.access_token
+        },
+        {
+          key: "upstream.agentName",
+          value: agentFormValues?.name
+        },
         ...(pushTelemetry?.enabled
           ? [
-              `pushTelemetry.enabled=true`,
-              `pushTelemetry.topologyName=${
-                pushTelemetry.topologyName
-              }-${agentFormValues?.name}`
+              {
+                key: "pushTelemetry.enabled",
+                value: "true"
+              },
+              {
+                key: "pushTelemetry.topologyName",
+                value: `${pushTelemetry.topologyName}`
+              }
             ]
           : [])
       ],
       // You can add more values here to be passed to the template for the
       // kubeValues section of the HelmRelease
       kubeValues: kubeOptions
         ? [
-            `clusterName: "${agentFormValues?.name}"`,
-            `scraper.schedule: "${kubeOptions.schedule}"`
+            {
+              key: "clusterName",
+              value: agentFormValues?.name
+            },
+            {
+              key: "scraper.schedule",
+              value: kubeOptions.schedule
+            }
           ]
         : []
     } satisfies TemplateContextData;
   }, [agentFormValues, baseUrl, generatedAgent]);
 
-  console.log(JSON.stringify(data, null, 2));
-
   return (
     <Modal
       title={"Installation Instructions"}
@@ -159,23 +160,7 @@ export default function InstallAgentModal({
           Install the Mission Control agent using instructions below
         </h3>
         <div className="flex flex-col">
-          <Tabs
-            activeTab={activeTab}
-            onSelectTab={(v) => setActiveTab(v as any)}
-          >
-            <Tab className="flex flex-col gap-4 p-4" label="Flux" value="flux">
-              <FluxInstallAgent data={data} />
-              <WarningBox />
-            </Tab>
-            <Tab
-              className="flex flex-col gap-4 p-4"
-              label="Helm CLI"
-              value="cli"
-            >
-              <CLIInstallAgent data={data} />
-              <WarningBox />
-            </Tab>
-          </Tabs>
+          <HelmInstallationSnippets templateData={data} isWarningDisplayed />
         </div>
         <MoreInfoBox />
       </div>

src/components/Agents/InstalAgentInstruction/__tests__/CLIInstallAgent.unit.test.tsx

@@ -1,24 +1,45 @@
 import CodeBlock from "@flanksource-ui/ui/Code/CodeBlock";
 import Handlebars from "handlebars";
 import { useMemo } from "react";
-import { TemplateContextData } from "./InstallAgentModal";
+import { TemplateContextData } from "./HelmInstallationSnippets";
 
 // This a  Handlebars template for the Helm command to install the agent and the
 // kubernetes agent if the user has enabled it.
-const helmCommand = `helm repo add {{ chart }} {{ repoName }}/{{ chart }}
+const helmCommand = `{{#if valueFile }}
+cat > values.yaml << EOF
+{{ valueFile }}
+EOF
 
+
+{{/if}}
+{{#if createRepo }}
+helm repo add {{ chart }} {{ repoName }}/{{ chart }}
+{{/if}}
 helm repo update
 
 helm install mc-agent flanksource/mission-control-agent -n "{{{ namespace }}}" \\
   {{#each values}}
-  --set {{{ this }}} \\
+  --set {{{ this.key }}}={{{ this.value }}} \\
   {{/each}}
-  --create-namespace
+{{#if createNamespace }}
+  --create-namespace \\
+{{/if}}
+{{#if valueFile }}
+  --set-file values.yaml \\
+{{/if }}
+{{#if args}}
+  {{#each args}}
+    {{ this }} \\
+  {{/each}}
+{{/if}}
+{{#if wait }}
+  --wait \\
+{{/if}}
 
 {{#if kubeValues }}
 helm install mc-agent-kubernetes flanksource/mission-control-kubernetes -n "{{{ namespace }}}"  \\
   {{#each kubeValues}}
-  --set {{{ this }}} \\
+  --set {{{ this.key }}}={{{ this.value }}} \\
   {{/each}}
 {{/if}}
 `;

src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx renamed to src/ui/HelmSnippet/CLIInstallAgent.tsx

@@ -1,15 +1,17 @@
 import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
 import Handlebars from "handlebars";
 import { useMemo } from "react";
-import { TemplateContextData } from "./InstallAgentModal";
+import { TemplateContextData } from "./HelmInstallationSnippets";
 
 // This a  Handlebars template for the HelmRelease to install the agent and the
 // kubernetes agent if the user has enabled it.
-const fluxTemplate = `apiVersion: v1
+const fluxTemplate = `{{#if createNamespace}}
+apiVersion: v1
 kind: Namespace
 metadata:
   name:  {{ namespace }}
 ---
+{{/if}}
 {{#if createRepository}}
 apiVersion: source.toolkit.fluxcd.io/v1beta1
 kind: HelmRepository
@@ -37,7 +39,7 @@ spec:
       interval: 5m0s
   values:
 {{#each values}}
-    {{{ this }}}
+    {{{ this.key }}}: {{{ this.value }}}
 {{/each}}
 
 {{#if kubeValues}}
@@ -56,8 +58,11 @@ spec:
         name: flanksource
         namespace: mission-control-agent
   values:
+  {{#if valueFile }}
+{{ valueFile }}
+  {{/if}}
   {{#each  kubeValues}} 
-    {{{ this }}}
+    {{{ this.key }}}: {{{ this.value }}}
   {{/each}}
 {{/if}}
   `;
@@ -70,7 +75,17 @@ type Props = {
 
 export default function FluxInstallAgent({ data }: Props) {
   const yaml = useMemo(() => {
-    return template(data, {});
+    console.log({ data });
+    return template(
+      {
+        ...data,
+        valueFile: data?.valueFile
+          ? // Indent the valueFile content
+            data?.valueFile?.replace(/^/gm, "    ")
+          : undefined
+      },
+      {}
+    );
   }, [data]);
 
   return (

src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx renamed to src/ui/HelmSnippet/FluxInstallAgent.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryFn } from "@storybook/react";
+import HelmInstallationSnippets from "./HelmInstallationSnippets";
+import {
+  mockInput,
+  mockInputWithKubOptions,
+  mockInputWithValueFile
+} from "./__tests__/mocks/mocks";
+
+export default {
+  title: "ui/HelmInstallationSnippets",
+  component: HelmInstallationSnippets
+} satisfies Meta<typeof HelmInstallationSnippets>;
+
+const Template: StoryFn<typeof HelmInstallationSnippets> = (args) => (
+  <HelmInstallationSnippets {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  templateData: mockInput
+};
+
+export const WithKubeOptions = Template.bind({});
+
+WithKubeOptions.args = {
+  templateData: mockInputWithKubOptions
+};
+
+export const WithKubeOptionsAndValueFile = Template.bind({});
+
+WithKubeOptionsAndValueFile.args = {
+  templateData: mockInputWithValueFile
+};