feat: update destination add to use api endpoint

internal/cmd/server.go

@@ -91,7 +91,7 @@ func defaultServerOptions(infraDir string) server.Options {
 		SessionDuration:          24 * time.Hour * 30, // 30 days
 		SessionExtensionDeadline: 24 * time.Hour * 3,  // 3 days
 		EnableSignup:             false,
-		BaseDomain:               "example.com",
+		BaseDomain:               "",
 
 		Addr: server.ListenerOptions{
 			HTTP:    ":80",

internal/cmd/server_test.go

@@ -301,6 +301,7 @@ users:
 				expected.SessionDuration = 3 * time.Minute
 				expected.SessionExtensionDeadline = 1 * time.Minute
 				expected.EnableSignup = false
+				expected.BaseDomain = ""
 				return expected
 			},
 		},

internal/server/middleware_test.go

@@ -554,6 +554,7 @@ func TestAuthenticateRequest(t *testing.T) {
 func TestValidateRequestOrganization(t *testing.T) {
 	srv := setupServer(t, withAdminUser)
 	srv.options.EnableSignup = true // multi-tenant environment
+	srv.options.BaseDomain = "example.com"
 	routes := srv.GenerateRoutes()
 
 	org := &models.Organization{

internal/server/server.go

@@ -124,6 +124,10 @@ func newServer(options Options) *Server {
 
 // New creates a Server, and initializes it. The returned Server is ready to run.
 func New(options Options) (*Server, error) {
+	if options.EnableSignup && options.BaseDomain == "" {
+		return nil, errors.New("cannot enable signup without setting base domain")
+	}
+
 	server := newServer(options)
 
 	if err := importSecrets(options.Secrets, server.secrets); err != nil {

internal/server/server_test.go

@@ -206,6 +206,7 @@ func TestServer_Run_UIProxy(t *testing.T) {
 		DBEncryptionKey:         filepath.Join(dir, "sqlite3.db.key"),
 		TLSCache:                filepath.Join(dir, "tlscache"),
 		EnableSignup:            true,
+		BaseDomain:              "example.com",
 		TLS: TLSOptions{
 			CA:           types.StringOrFile(golden.Get(t, "pki/ca.crt")),
 			CAPrivateKey: string(golden.Get(t, "pki/ca.key")),
@@ -321,6 +322,7 @@ func TestServer_GenerateRoutes_NoRoute(t *testing.T) {
 func TestServer_PersistSignupUser(t *testing.T) {
 	s := setupServer(t, func(_ *testing.T, opts *Options) {
 		opts.EnableSignup = true
+		opts.BaseDomain = "example.com"
 		opts.SessionDuration = time.Minute
 		opts.SessionExtensionDeadline = time.Minute
 	})

ui/package.json

@@ -16,6 +16,7 @@
     "@heroicons/react": "^1.0.6",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.5",
+    "js-yaml": "^4.1.0",
     "next": "^12.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

ui/pages/destinations/add.js

@@ -2,16 +2,34 @@ import Head from 'next/head'
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import copy from 'copy-to-clipboard'
+import yaml from 'js-yaml'
 
 import Fullscreen from '../../components/layouts/fullscreen'
+import { useServerConfig } from '../../lib/serverconfig'
+
+function download(values) {
+  const blob = new Blob([values], { type: 'application/yaml' })
+  const href = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+
+  link.href = href
+  link.setAttribute('download', 'values.yaml')
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(href)
+}
 
 export default function DestinationsAdd() {
   const [name, setName] = useState('')
   const [error, setError] = useState('')
   const [submitted, setSubmitted] = useState(false)
   const [accessKey, setAccessKey] = useState('')
   const [connected, setConnected] = useState(false)
-  const [copied, setCopied] = useState(false)
+  const [valuesDownloaded, setValuesDownloaded] = useState(false)
+  const [valuesCopied, setValuesCopied] = useState(false)
+  const [commandCopied, setCommandCopied] = useState(false)
+  const { baseDomain } = useServerConfig()
 
   useEffect(() => {
     const interval = setInterval(async () => {
@@ -66,17 +84,23 @@ export default function DestinationsAdd() {
     setSubmitted(true)
   }
 
-  const server = window.location.host
-  let command = `helm install infra-connector infrahq/infra \\
-    --set connector.config.accessKey=${accessKey} \\
-    --set connector.config.server=${server} \\
-    --set connector.config.name=${name}`
+  const server = baseDomain ? `api.${baseDomain}` : window.location.host
+  const values = {
+    connector: {
+      config: {
+        server: server,
+        name: name,
+      },
+    },
+  }
 
   if (window.location.protocol !== 'https:') {
-    command += ` \\
-    --set connector.config.skipTLSVerify=true`
+    values.connector.config.skipTLSVerify = true
   }
 
+  const valuesYaml = yaml.dump(values)
+  const command = `helm upgrade --install infra-connector infrahq/infra --values values.yaml --set connector.config.accessKey=${accessKey}`
+
   return (
     <div>
       <Head>
@@ -90,7 +114,7 @@ export default function DestinationsAdd() {
         />
         <h1 className='text-2xs capitalize'>Connect infrastructure</h1>
       </header>
-      <form onSubmit={onSubmit} className='mb-10 flex space-x-2 px-4'>
+      <form onSubmit={onSubmit} className='mb-6 flex space-x-2 px-4'>
         <div className='flex-1'>
           <label className='text-3xs uppercase text-gray-400'>
             Cluster Name
@@ -124,25 +148,60 @@ export default function DestinationsAdd() {
         }`}
       >
         <h2 className='mb-2 px-4 text-2xs text-gray-100'>
-          Run this command on your Kubernetes cluster:
+          Copy or download this starter Helm values file. For more information
+          and configuration values, see the{' '}
+          <Link href='https://github.com/infrahq/infra/tree/main/helm/charts/infra'>
+            Helm chart
+          </Link>
+          .
         </h2>
         <pre
-          className={`min-h-[120px] bg-gray-900 p-4 text-2xs text-gray-300 ${
+          className={`bg-gray-900 p-4 text-2xs text-gray-300 ${
             submitted ? 'overflow-auto' : 'overflow-hidden'
           }`}
         >
+          {submitted ? valuesYaml : ''}
+        </pre>
+        <span className='self-end'>
+          <button
+            className='mt-2 mb-3 py-2 px-3 text-3xs font-medium uppercase text-violet-200 disabled:text-gray-500'
+            disabled={valuesDownloaded}
+            onClick={() => {
+              download(valuesYaml)
+              setValuesDownloaded(true)
+              setTimeout(() => setValuesDownloaded(false), 3000)
+            }}
+          >
+            {valuesDownloaded ? '✓ Downloaded' : 'Download'}
+          </button>
+          <button
+            className='mt-2 mb-3 mr-2 py-2 px-3 text-3xs font-medium uppercase text-violet-200 disabled:text-gray-500'
+            disabled={valuesCopied}
+            onClick={() => {
+              copy(valuesYaml)
+              setValuesCopied(true)
+              setTimeout(() => setValuesCopied(false), 3000)
+            }}
+          >
+            {valuesCopied ? '✓ Copied' : 'Copy'}
+          </button>
+        </span>
+        <h2 className='mb-2 px-4 text-2xs text-gray-100'>
+          Run this command on your Kubernetes cluster:
+        </h2>
+        <pre className={`overflow-auto bg-gray-900 p-4 text-2xs text-gray-300`}>
           {submitted ? command : ''}
         </pre>
         <button
           className='mt-2 mb-3 mr-2 self-end py-2 px-3 text-3xs font-medium uppercase text-violet-200 disabled:text-gray-500'
-          disabled={copied}
+          disabled={commandCopied}
           onClick={() => {
             copy(command)
-            setCopied(true)
-            setTimeout(() => setCopied(false), 2000)
+            setCommandCopied(true)
+            setTimeout(() => setCommandCopied(false), 3000)
           }}
         >
-          {copied ? '✓ Copied' : 'Copy command'}
+          {commandCopied ? '✓ Copied' : 'Copy'}
         </button>
         <p className='px-4 text-2xs text-gray-500'>
           Your cluster will be detected automatically.