chore: Allow multiple environment logins, new desktop authentication storage, pool configuration, swap environment support.

.env.development

@@ -3,12 +3,10 @@
 NODE_ENV=development
 
 # App
-VITE_KITTYCAD_API_BASE_URL=https://api.dev.zoo.dev
-VITE_KITTYCAD_API_WEBSOCKET_URL=wss://api.dev.zoo.dev/ws/modeling/commands
+VITE_KITTYCAD_BASE_DOMAIN=dev.zoo.dev
 #VITE_KITTYCAD_API_TOKEN="required for testing, optional to skip auth in the app"
-VITE_KITTYCAD_SITE_BASE_URL=https://dev.zoo.dev
-VITE_KITTYCAD_SITE_APP_URL=https://app.dev.zoo.dev
 #VITE_WASM_BASE_URL="optional override of Wasm URL if not on default port 3000"
+#VITE_KITTYCAD_API_WEBSOCKET_URL="optional override for engine websocket url"
 FAIL_ON_CONSOLE_ERRORS=true
 
 # KCL

.env.production

@@ -1,7 +1,4 @@
 NODE_ENV=production
 
 # App
-VITE_KITTYCAD_API_BASE_URL=https://api.zoo.dev
-VITE_KITTYCAD_API_WEBSOCKET_URL=wss://api.zoo.dev/ws/modeling/commands
-VITE_KITTYCAD_SITE_BASE_URL=https://zoo.dev
-VITE_KITTYCAD_SITE_APP_URL=https://app.zoo.dev
+VITE_KITTYCAD_BASE_DOMAIN=zoo.dev

interface.d.ts

@@ -73,11 +73,9 @@ export interface IElectronAPI {
   process: {
     env: {
       NODE_ENV: string
-      VITE_KITTYCAD_API_BASE_URL: string
+      VITE_KITTYCAD_BASE_DOMAIN: string
       VITE_KITTYCAD_API_WEBSOCKET_URL: string
       VITE_KITTYCAD_API_TOKEN: string
-      VITE_KITTYCAD_SITE_BASE_URL: string
-      VITE_KITTYCAD_SITE_APP_URL: string
     }
   }
   kittycad: (access: string, args: any) => any

src/App.tsx

@@ -67,6 +67,7 @@ import type { StatusBarItemType } from '@src/components/StatusBar/statusBarTypes
 import { UndoRedoButtons } from '@src/components/UndoRedoButtons'
 import { Toolbar } from '@src/Toolbar'
 import { withSiteBaseURL } from '@src/lib/withBaseURL'
+import env from '@src/env'
 
 // CYCLIC REF
 sceneInfra.camControls.engineStreamActor = engineStreamActor
@@ -92,7 +93,7 @@ export function App() {
 
   // Stream related refs and data
   const [searchParams] = useSearchParams()
-  const pool = searchParams.get('pool')
+  const pool = searchParams.get('pool') || env().POOL || null
 
   const projectName = project?.name || null
   const projectPath = project?.path || null

src/components/StatusBar/defaultStatusBarItems.tsx

@@ -15,6 +15,10 @@ import { isDesktop } from '@src/lib/isDesktop'
 import { APP_DOWNLOAD_PATH } from '@src/lib/constants'
 import { desktopAppPitchMessage } from '@src/components/DownloadAppToast'
 import { withSiteBaseURL } from '@src/lib/withBaseURL'
+import {
+  EnvironmentChip,
+  EnvironmentDescription,
+} from '@src/components/environment/Environment'
 
 export const defaultGlobalStatusBarItems = ({
   location,
@@ -43,6 +47,10 @@ export const defaultGlobalStatusBarItems = ({
           children: desktopAppPitchMessage,
         },
       },
+  {
+    id: 'environment',
+    component: EnvironmentStatusBarItem,
+  },
   {
     id: 'telemetry',
     element: 'link',
@@ -101,6 +109,24 @@ function BillingStatusBarItem() {
   )
 }
 
+function EnvironmentStatusBarItem() {
+  return isDesktop() ? (
+    <Popover className="relative flex items-stretch">
+      <Popover.Button
+        className="m-0 p-0 border-0 flex items-stretch"
+        data-testid="environment-subdomain-bar"
+      >
+        <EnvironmentChip />
+      </Popover.Button>
+      <Popover.Panel className="absolute left-0 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch rounded-lg shadow-lg text-sm">
+        <EnvironmentDescription />
+      </Popover.Panel>
+    </Popover>
+  ) : (
+    <></>
+  )
+}
+
 export const defaultLocalStatusBarItems: StatusBarItemType[] = [
   {
     id: 'help',

src/components/UserSidebarMenu.tsx

@@ -1,6 +1,6 @@
 import { Popover, Transition } from '@headlessui/react'
 import type { Models } from '@kittycad/lib'
-import { Fragment, useMemo, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import type { ActionButtonProps } from '@src/components/ActionButton'
@@ -14,9 +14,14 @@
 import { authActor } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
 import { withSiteBaseURL } from '@src/lib/withBaseURL'
+import env from '@src/env'
+import { commandBarActor } from '@src/lib/singletons'
+import { listAllEnvironmentsWithTokens } from '@src/lib/desktop'
 
 type User = Models['User_type']
 
+let didListEnvironments = false
+
 const UserSidebarMenu = ({ user }: { user?: User }) => {
   const platform = usePlatform()
   const location = useLocation()
@@ -25,6 +30,22 @@
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
   const send = authActor.send
+  const fullEnvironmentName = env().VITE_KITTYCAD_BASE_DOMAIN
+  const [hasMultipleEnvironments, setHasMultipleEnvironments] = useState(false)
+
+  useEffect(() => {
+    if (!didListEnvironments) {
+      didListEnvironments = true
+      listAllEnvironmentsWithTokens()
+        .then((environmentsWithTokens) => {
+          setHasMultipleEnvironments(environmentsWithTokens.length > 1)
+        })
+        .catch(reportRejection)
+    }
+  }, [])
+
+  // Do not show the environment items on web
+  const hideEnvironmentItems = !isDesktop()
 
   // We filter this memoized list so that no orphan "break" elements are rendered.
   const userMenuItems = useMemo<(ActionButtonProps | 'break')[]>(
@@ -141,20 +162,54 @@
           children: <span className="flex-1">Check for updates</span>,
         },
         'break',
+        {
+          id: 'change-environment',
+          Element: 'button',
+          children: <span>Change environment</span>,
+          onClick: () => {
+            const environment = env().VITE_KITTYCAD_BASE_DOMAIN
+            if (environment) {
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: {
+                  groupId: 'application',
+                  name: 'switch-environments',
+                  argDefaultValues: {
+                    environment,
+                  },
+                },
+              })
+            }
+          },
+          className: hideEnvironmentItems ? 'hidden' : '',
+        },
         {
           id: 'sign-out',
           Element: 'button',
           'data-testid': 'user-sidebar-sign-out',
-          children: 'Sign out',
+          children: (
+            <span>
+              Sign out{hideEnvironmentItems ? '' : ` of ${fullEnvironmentName}`}
+            </span>
+          ),
           onClick: () => send({ type: 'Log out' }),
           className: '', // Just making TS's filter type coercion happy 😠
         },
+        {
+          id: 'sign-out-all',
+          Element: 'button',
+          'data-testid': 'user-sidebar-sign-out',
+          children: <span>Sign out of all environments</span>,
+          onClick: () => send({ type: 'Log out all' }),
+          className:
+            hideEnvironmentItems || !hasMultipleEnvironments ? 'hidden' : '',
+        },
       ].filter(
         (props) =>
           props === 'break' ||
           (typeof props !== 'string' && !props.className?.includes('hidden'))
       ) as (ActionButtonProps | 'break')[],
-    [platform, location, filePath, navigate, send]
+    [platform, location, filePath, navigate, send, hasMultipleEnvironments]
   )
 
   // This image host goes down sometimes. We will instead rewrite the

src/components/environment/Environment.tsx

@@ -0,0 +1,121 @@
+import { ActionButton } from '@src/components/ActionButton'
+import { commandBarActor } from '@src/lib/singletons'
+import env from '@src/env'
+import { writeEnvironmentConfigurationPool } from '@src/lib/desktop'
+import { reportRejection } from '@src/lib/trap'
+
+export function EnvironmentChip() {
+  const shorthand = env().VITE_KITTYCAD_BASE_DOMAIN
+  const pool = env().POOL
+  return (
+    <div className="flex items-center px-2 py-1 text-xs text-chalkboard-80 dark:text-chalkboard-30 rounded-none border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-80 focus:bg-chalkboard-30 dark:focus:bg-chalkboard-80 hover:text-chalkboard-100 dark:hover:text-chalkboard-10 focus:text-chalkboard-100 dark:focus:text-chalkboard-10  focus:outline-none focus-visible:ring-2 focus:ring-primary focus:ring-opacity-50">
+      <span className="">
+        {shorthand} {pool ? `+ Pool` : ''}
+      </span>
+    </div>
+  )
+}
+
+export function EnvironmentDescription() {
+  const fullEnvironmentName = env().VITE_KITTYCAD_BASE_DOMAIN
+  return (
+    <div className="absolute left-2 bottom-full mb-1 flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm">
+      <div
+        className={`flex flex-col p-2 mb-2 rounded-t-sm bg-chalkboard-20 text-chalkboard-100`}
+      >
+        <p className="flex flex-row justify-between">
+          <h2 className="text-sm font-sans font-normal">Environment</h2>
+          <p
+            data-testid="environment"
+            className="text-xs rounded-sm flex flex-row items-center"
+          >
+            <ActionButton
+              Element="button"
+              onClick={() => {
+                const environment = env().VITE_KITTYCAD_BASE_DOMAIN
+                if (environment) {
+                  commandBarActor.send({
+                    type: 'Find and select command',
+                    data: {
+                      groupId: 'application',
+                      name: 'switch-environments',
+                      argDefaultValues: {
+                        environment,
+                      },
+                    },
+                  })
+                }
+              }}
+              iconEnd={{ icon: 'sketch', bgClassName: '!bg-transparent' }}
+              className="ml-1 pr-0"
+            >
+              {fullEnvironmentName}
+            </ActionButton>
+          </p>
+        </p>
+      </div>
+      <ul>
+        <li className="flex flex-col px-2 py-2 gap-1 last:mb-0 ">
+          <p className="text-chalkboard-100">API</p>{' '}
+          <p className="text-chalkboard-60">
+            {env().VITE_KITTYCAD_API_BASE_URL}
+          </p>
+        </li>
+        <li className="flex flex-col px-2 py-2 gap-1 last:mb-0 ">
+          <p className="text-chalkboard-100">Site</p>{' '}
+          <p className="text-chalkboard-60">
+            {env().VITE_KITTYCAD_SITE_BASE_URL}
+          </p>
+        </li>
+        <li className="flex flex-col px-2 py-2 gap-1 last:mb-0 ">
+          <p className="text-chalkboard-100">WebSocket (real-time-data)</p>{' '}
+          <p className="text-chalkboard-60">
+            {env().VITE_KITTYCAD_API_WEBSOCKET_URL}
+          </p>
+        </li>
+        <li className="flex flex-col px-2 py-2 gap-1 last:mb-0 ">
+          <p className="text-chalkboard-100">Connection Pool</p>{' '}
+          <p className="text-chalkboard-60 flex flex-row justify-between">
+            <span>{env().POOL || 'Auto'}</span>
+            <div className="flex flex-row gap-1">
+              <ActionButton
+                Element="button"
+                onClick={() => {
+                  commandBarActor.send({
+                    type: 'Find and select command',
+                    data: {
+                      groupId: 'application',
+                      name: 'choose-pool',
+                      argDefaultValues: {
+                        pool: env().POOL,
+                      },
+                    },
+                  })
+                }}
+              >
+                <span className="py-2 lg:py-0">Edit</span>
+              </ActionButton>
+              {env().POOL !== '' && (
+                <ActionButton
+                  onClick={() => {
+                    const environment = env().VITE_KITTYCAD_BASE_DOMAIN
+                    if (environment) {
+                      writeEnvironmentConfigurationPool(environment, '')
+                        .then(() => {
+                          window.location.reload()
+                        })
+                        .catch(reportRejection)
+                    }
+                  }}
+                  Element="button"
+                >
+                  <span className="py-2 lg:py-0">Clear</span>
+                </ActionButton>
+              )}
+            </div>
+          </p>
+        </li>
+      </ul>
+    </div>
+  )
+}