feat: Add adm install command to k8s target UI (#2417)

* Add adm install command to k8s target UI

* f

Author: screspod

web/src/components/wizard/completion/KubernetesCompletionStep.tsx

@@ -1,33 +1,63 @@
-import React from "react";
+import React, {useState} from "react";
 import Card from "../../common/Card";
 import Button from "../../common/Button";
 import { useKubernetesConfig } from "../../../contexts/KubernetesConfigContext";
 import { useBranding } from "../../../contexts/BrandingContext";
-import { CheckCircle, ExternalLink } from "lucide-react";
+import { useSettings } from "../../../contexts/SettingsContext";
+import { CheckCircle, ClipboardCheck, Copy, Terminal } from "lucide-react";
 
 const KubernetesCompletionStep: React.FC = () => {
+  const [copied, setCopied] = useState(false);
   const { config } = useKubernetesConfig();
   const { title } = useBranding();
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  const copyInstallCommand = () => {
+    if (config.installCommand) {
+      navigator.clipboard.writeText(config.installCommand).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      });
+    }
+  };
 
   return (
     <div className="space-y-6">
       <Card>
         <div className="flex flex-col items-center text-center py-6">
           <div className="flex flex-col items-center justify-center mb-6">
             <div className="w-16 h-16 rounded-full flex items-center justify-center mb-4">
-              <CheckCircle className="w-10 h-10" style={{ color: "blue" }} />
+              <CheckCircle className="w-10 h-10" style={{ color: themeColor }} />
             </div>
-            <p className="text-gray-600 mt-2" data-testid="completion-message">
+            <p className="text-gray-600 mt-2 mb-6" data-testid="completion-message">
               Visit the Admin Console to configure and install {title}
             </p>
-            <Button
-              className="mt-4"
-              dataTestId="admin-console-button"
-              onClick={() => window.open(`http://${window.location.hostname}:${config.adminConsolePort}`, "_blank")}
-              icon={<ExternalLink className="ml-2 mr-1 h-5 w-5" />}
-            >
-              Visit Admin Console
-            </Button>
+            <div className="w-full max-w-2xl space-y-6">
+              <div className="bg-gray-50 rounded-lg border border-gray-200 p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-medium text-gray-700">Installation Command</h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="py-1 px-2 text-xs"
+                    icon={copied ? <ClipboardCheck className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                    onClick={copyInstallCommand}
+                  >
+                    {copied ? 'Copied!' : 'Copy Command'}
+                  </Button>
+                </div>
+                <div className="flex items-start space-x-2 p-2 bg-white rounded border border-gray-300">
+                  <Terminal className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
+                  <code className="font-mono text-sm text-left">
+                    {config.installCommand}
+                  </code>
+                </div>
+              </div>
+              <p className="text-sm text-gray-500">
+                Run this command to access the Admin Console
+              </p>
+            </div>
           </div>
         </div>
       </Card>

web/src/components/wizard/completion/LinuxCompletionStep.tsx

@@ -3,19 +3,22 @@ import Card from "../../common/Card";
 import Button from "../../common/Button";
 import { useLinuxConfig } from "../../../contexts/LinuxConfigContext";
 import { useBranding } from "../../../contexts/BrandingContext";
+import { useSettings } from "../../../contexts/SettingsContext";
 import { CheckCircle, ExternalLink } from "lucide-react";
 
 const LinuxCompletionStep: React.FC = () => {
   const { config } = useLinuxConfig();
   const { title } = useBranding();
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
 
   return (
     <div className="space-y-6">
       <Card>
         <div className="flex flex-col items-center text-center py-6">
           <div className="flex flex-col items-center justify-center mb-6">
             <div className="w-16 h-16 rounded-full flex items-center justify-center mb-4">
-              <CheckCircle className="w-10 h-10" style={{ color: "blue" }} />
+              <CheckCircle className="w-10 h-10" style={{ color: themeColor }} />
             </div>
             <p className="text-gray-600 mt-2" data-testid="completion-message">
               Visit the Admin Console to configure and install {title}

web/src/components/wizard/tests/KubernetesCompletionStep.test.tsx

@@ -4,44 +4,43 @@ import { screen, fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "../../../test/setup.tsx";
 import KubernetesCompletionStep from "../completion/KubernetesCompletionStep.tsx";
 
-// Mock window.open
-const mockOpen = vi.fn();
-Object.defineProperty(window, 'open', {
-  value: mockOpen,
-  writable: true,
-});
-
 describe("KubernetesCompletionStep", () => {
   beforeEach(() => {
-    mockOpen.mockClear();
     // Mock window.location.hostname
     Object.defineProperty(window, 'location', {
       value: { hostname: 'localhost' },
       writable: true,
     });
   });
 
-  it("renders completion message and button", () => {
+  it("renders completion message and copy command button", () => {
     renderWithProviders(<KubernetesCompletionStep />, {
       wrapperProps: {
         authenticated: true,
       },
     });
 
     expect(screen.getByTestId("completion-message")).toBeInTheDocument();
-    expect(screen.getByTestId("admin-console-button")).toBeInTheDocument();
+    expect(screen.getByText("Copy Command")).toBeInTheDocument();
   });
 
-  it("opens admin console when button is clicked", () => {
+  it("copies install command when button is clicked", async () => {
+    // Mock navigator.clipboard.writeText
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText: mockWriteText },
+      writable: true,
+    });
+
     renderWithProviders(<KubernetesCompletionStep />, {
       wrapperProps: {
         authenticated: true,
       },
     });
 
-    const button = screen.getByTestId("admin-console-button");
+    const button = screen.getByText("Copy Command");
     fireEvent.click(button);
 
-    expect(mockOpen).toHaveBeenCalledWith("http://localhost:8080", "_blank");
+    expect(mockWriteText).toHaveBeenCalled();
   });
-}); 
+});

web/src/contexts/KubernetesConfigContext.tsx

@@ -6,6 +6,7 @@ export interface KubernetesConfig {
   httpProxy?: string;
   httpsProxy?: string;
   noProxy?: string;
+  installCommand?: string;
 }
 
 interface KubernetesConfigContextType {
@@ -16,6 +17,7 @@ interface KubernetesConfigContextType {
 
 const defaultKubernetesConfig: KubernetesConfig = {
   useProxy: false,
+  installCommand: 'kubectl -n kotsadm port-forward svc/kotsadm 8800:3000'
 };
 
 export const KubernetesConfigContext = createContext<KubernetesConfigContextType | undefined>(undefined);
@@ -44,4 +46,4 @@ export const useKubernetesConfig = (): KubernetesConfigContextType => {
     throw new Error('useKubernetesConfig must be used within a KubernetesConfigProvider');
   }
   return context;
-}; 
+};

web/src/test/setup.tsx

@@ -133,6 +133,7 @@ export const renderWithProviders = (
       config: {
         adminConsolePort: 8080,
         useProxy: false,
+        installCommand: 'kubectl -n kotsadm port-forward svc/kotsadm 8800:3000',
       },
       updateConfig: vi.fn(),
       resetConfig: vi.fn(),