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

* fix: logging information about the login

* chore: improving the withBaseURL workflow

* chore: moving VITE_KC_API_BASE_URL to the helper function

* fix: env to helper function api base url

* chore: fixing another api base url

* chore: shortlinks with base api helper function

* chore: prompt edit with base helper function

* fix: auto fmt

* fix: withAPIBaseURL for all urls

* fix: AI caught my typo, RIP

* fix: expected

* chore: helper function and unit tests for a withSiteBaseURL

* chore: migrating many urls to the helper function withSiteBaseURL

* chore: updated all VITE_KC_SITE_BASE_URL locations, need to do raw urls next

* fix: updating the signin page hard coded urls

* chore: updated hard coded site urls in home.tsx

* chore: updated all site base urls

* chore: unit tests

* chore: using the websocket url instead of the hard coded environment variable

* chore: urls are using the global websocket url

* fix: ope, this should be deleted

* fix: huh?

* chore: skeleton to get some environments going

* chore: skeleton for ugly banner and chip, testing code

* chore: more skeleton code

* fix: auto fixes

* fix: unit tests to make sure these values do not acciendentally change

* fix: auto fmt

* fix: removing this for now, not ready

* fix: removing debugging comment

* chore: trying to figure out how to get the custom url and pool, most likely window.localStorage

* fix: auto fmt

* fix: some clean up

* chore: adding a status bar global

* fix: auto fmt

* fix: changing font color

* fix: auto fmt

* chore: trying to clean up the sign in page for multiple environments with a default environment as well

* fix: linter, TS clean up

* fix: fmt

* fix: auto fixes

* fix: auto fixes and testing each environment and scenario

* fix: default value fix with empty string

* fix: removing console logs

* chore: adding where the envs are coming from

* fix: adding comment gotcha

* fix: swap environment command

* fix: autofmt

* fix: adding unit tests

* fix: rename in unit test

* chore: writing unit tests for deskopt functions

* fix: writing some more unit tests

* fix: adding a migration step for token.txt to production

* fix: adding pool workflow

* chore: getting pools configured

* fix: trying to set default values for the new application commands

* fix: default pool value

* fix: sign out of all environments on desktop

* chore: updating the advanced sign in page, dev mode to start, look at TODOs

* chore: moving state up to have the sign in page know the new state for login

* chore: updating memory, disk and reading from disk for the pool configuration when selecing the environments

* chore: testing the prod binary logic with the correct NODE_ENV set

* chore: trying to design the widget popover

* fix: auto fmt

* chore: formatting text for .env

* fix: auto fmt

* chore: trying to fix some display issues

* fix: cleaning, the sign out all will be moved to the user menu

* fix: adding more commands to the user menu, need to filter them now

* chore: sign out of all envs instead of clearing cache

* fix: adding more logic for localhost, need to clean up some of the logic to reuse functions easier

* fix: moving specific logic to a helper function

* fix: fmt?

* chore: adding unit tetss for getEnvironmentNameDisplay

* chore: cleaning up shorthand for environments, adding unit tests for it as well

* fix: cleaning up PR

* fix: trying to fix some bugs on the home page

* fix: fmt

* fix: hiding content if you are in production or web

* fix: linter and fmt

* fix: trying to solve tsc issues

* fix: removing old function

* fix: auto fmt

* fix: fixing tsc errors by making another helper functiont to wrap my logic

* Update snapshots

* Update snapshots

* fix: floating '

* fix: I think this correct?

* chore: big brick, big refactor of base domain

* fix: trying a massive clean up

* fix: add builds from removal

* fix: making some progress

* fix: fixing some linter errors

* fix: linters for time being, i have a lot of commented code

* fix: more progress

* fix: closer?

* chore: looking good!

* fix: large cleanup

* fix: still need a few things

* fix: fmt

* fix: initializing the sign in page with desktop stuff since it isn't mapped to react easily

* fix: fixing loading logic on the home page and passing during sign in

* chore: adding comment for websocket ur override in .env.development

* fix: removing NODE_ENV check, only hide on web

* chore: remove debug copy, it is following the same flow for all ways of running the application

* fix: cleanup

* fix: should not be an env check, should be a desktop check

* fix: typo on environment variable configuration for production

* fix: display of the base domain was wrong, it needs to be based on the latest environment value

* chore: implementing sign out all environments

* fix: multiple sign out fix and showing and hiding it in the user menu

* fix: hiding clear if pool is auto

* chore: auto parse url, hide clear when needed, sign out of all

* fix: file is empty now.

* fix: fixing a bug! A unit test actually caught this

* fix: fixing env.test.ts

* fix: fixing src/lib/desktop.test.ts

* fix: by default .env.development will not have this thus process.env won't. Only in .env.development.local

* fix: vite will not have this either...

* chore: cache wasm result for the collect recursive function, it does not need to compute it at recursive level

* fix: can run isDesktop in electron now

* chore: adding unit test for generating urls

* fix: removing todo

* fix: localhost debugging

* fix: addressed duplicate id for status bar item

* fix: leaving a TODO Reminder for the future

* fix: updated confusing console log statements to say empty string instead of printing it.

* fix: updating the unit test strings to match the subdomain

* fix: updating old comment to provide a subdomain example

* fix: improve comment to make it more clear

* fix: cleaning up confusing variable names, removing everything related to token.txt

* fix: two if statements into an if else, logic is the same

* fix: if statement cruly braces for improved reading

* fix: removing unused variable from previous advancedsigninoptions gui

* fix: missing away on async function, ope

* fix: fixing pool on localhost, allows web socket url to be overwritten locally

* fix: fixing websocket .env.development.local override

* fix: python codespell typo check

* fix: improved substring logic since it could replace a valid string

* fix: updated a console log to be more helpful when debugging

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: nadr0

.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 { PATHS } from '@src/lib/paths'
 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 UserSidebarMenu = ({ user }: { user?: User }) => {
   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 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
           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>
+  )
+}