refactor: extract helm installation snippet from agent installation instructions

Author: mainawycliffe

src/components/Agents/InstalAgentInstruction/CLIInstallAgent.tsx

@@ -1,27 +1,13 @@
-import { useMemo, useState } from "react";
+import HelmInstallationSnippets, {
+  ChartData
+} 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,47 +83,78 @@ export default function InstallAgentModal({
   generatedAgent,
   agentFormValues
 }: Props) {
-  const [activeTab, setActiveTab] = useState<"cli" | "flux">("cli");
   const baseUrl = useAgentsBaseURL();
 
   const data = useMemo(() => {
     const kubeOptions = agentFormValues?.kubernetes;
     const pushTelemetry = agentFormValues?.pushTelemetry ?? undefined;
 
-    return {
-      chart: "mission-control-agent",
-      namespace: "mission-control-agent",
-      repoName: "flanksource",
-      // 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}`,
-        ...(pushTelemetry?.enabled
-          ? [
-              `pushTelemetry.enabled=true`,
-              `pushTelemetry.topologyName=${
-                pushTelemetry.topologyName
-              }-${agentFormValues?.name}`
-            ]
-          : [])
-      ],
-      // You can add more values here to be passed to the template for the
-      // kubeValues section of the HelmRelease
-      kubeValues: kubeOptions
+    return [
+      {
+        chart: "mission-control-agent",
+        namespace: "mission-control-agent",
+        repoName: "flanksource",
+        createNamespace: true,
+        createRepo: true,
+        // You can add more values here to be passed to the template for the
+        // values section of the HelmRelease
+        values: [
+          {
+            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
+            ? [
+                {
+                  key: "pushTelemetry.enabled",
+                  value: "true"
+                },
+                {
+                  key: "pushTelemetry.topologyName",
+                  value: `${pushTelemetry.topologyName}`
+                }
+              ]
+            : [])
+        ]
+      },
+      ...(kubeOptions?.enabled
         ? [
-            `clusterName: "${agentFormValues?.name}"`,
-            `scraper.schedule: "${kubeOptions.schedule}"`
+            {
+              chart: "mc-agent-kubernetes",
+              namespace: "mission-control-agent",
+              repoName: "flanksource",
+              values: [
+                {
+                  key: "clusterName",
+                  value: agentFormValues?.name
+                },
+                {
+                  key: "scraper.schedule",
+                  value: kubeOptions.schedule
+                }
+              ]
+            }
           ]
-        : []
-    } satisfies TemplateContextData;
+        : [])
+    ] satisfies ChartData[];
   }, [agentFormValues, baseUrl, generatedAgent]);
 
-  console.log(JSON.stringify(data, null, 2));
-
   return (
     <Modal
       title={"Installation Instructions"}
@@ -159,23 +168,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 charts={data} isWarningDisplayed />
         </div>
         <MoreInfoBox />
       </div>