WorkspaceProxy context syncs with coderd on region responses

coder · Emyrk · Apr 28, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 25, 2023
commit 9879476f04c61fb21b263dfd99381776e2a0aef7
@@ -10,30 +10,27 @@ import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
-import { usePreferredProxy } from "hooks/usePreferredProxy"
+import { useProxy } from "contexts/ProxyContext"
 
 const Language = {
   appTitle: (appName: string, identifier: string): string =>
     `${appName} - ${identifier}`,
 }
 
 export interface AppLinkProps {
-  appsHost?: string
   workspace: TypesGen.Workspace
   app: TypesGen.WorkspaceApp
   agent: TypesGen.WorkspaceAgent
 }
 
 export const AppLink: FC<AppLinkProps> = ({
-  appsHost,
   app,
   workspace,
   agent,
 }) => {
-  const preferredProxy = usePreferredProxy()
-  const preferredPathBase = preferredProxy ? preferredProxy.path_app_url : ""
-  // Use the proxy host subdomain if it's configured.
-  appsHost = preferredProxy ? preferredProxy.wildcard_hostname : appsHost
+  const { proxy } = useProxy()
+  const preferredPathBase = proxy.preferredPathAppURL
+  const appsHost = proxy.preferredWildcardHostname
 
   const styles = useStyles()
   const username = workspace.owner_name
@@ -49,13 +46,11 @@ export const AppLink: FC<AppLinkProps> = ({
 
   // The backend redirects if the trailing slash isn't included, so we add it
   // here to avoid extra roundtrips.
-  let href = `${preferredPathBase}/@${username}/${workspace.name}.${
-    agent.name
-  }/apps/${encodeURIComponent(appSlug)}/`
+  let href = `${preferredPathBase}/@${username}/${workspace.name}.${agent.name
+    }/apps/${encodeURIComponent(appSlug)}/`
   if (app.command) {
-    href = `${preferredPathBase}/@${username}/${workspace.name}.${
-      agent.name
-    }/terminal?command=${encodeURIComponent(app.command)}`
+    href = `${preferredPathBase}/@${username}/${workspace.name}.${agent.name
+      }/terminal?command=${encodeURIComponent(app.command)}`
   }
 
   // TODO: @emyrk handle proxy subdomains.

@@ -35,21 +35,18 @@ export const portForwardURL = (
 ): string => {
   const { location } = window
 
-  const subdomain = `${
-    isNaN(port) ? 3000 : port
-  }--${agentName}--${workspaceName}--${username}`
+  const subdomain = `${isNaN(port) ? 3000 : port
+    }--${agentName}--${workspaceName}--${username}`
   return `${location.protocol}//${host}`.replace("*", subdomain)
 }
 
 const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
   const { host, workspaceName, agentName, agentId, username } = props
-  const preferredProxy = usePreferredProxy()
-  const portHost = preferredProxy ? preferredProxy.wildcard_hostname : host
 
   const styles = useStyles()
   const [port, setPort] = useState("3000")
   const urlExample = portForwardURL(
-    portHost,
+    host,
     parseInt(port),
     agentName,
     workspaceName,
@@ -107,7 +104,7 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
           {ports &&
             ports.map((p, i) => {
               const url = portForwardURL(
-                portHost,
+                host,
                 p.port,
                 agentName,
                 workspaceName,

@@ -109,7 +109,6 @@ Example.args = {
       'set -eux -o pipefail\n\n# install and start code-server\ncurl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3\n/tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n\n\nif [ ! -d ~/coder ]; then\n  mkdir -p ~/coder\n\n  git clone https://github.com/coder/coder ~/coder\nfi\n\nsudo service docker start\nDOTFILES_URI=" "\nrm -f ~/.personalize.log\nif [ -n "${DOTFILES_URI// }" ]; then\n  coder dotfiles "$DOTFILES_URI" -y 2>&1 | tee -a ~/.personalize.log\nfi\nif [ -x ~/personalize ]; then\n  ~/personalize 2>&1 | tee -a ~/.personalize.log\nelif [ -f ~/personalize ]; then\n  echo "~/personalize is not executable, skipping..." | tee -a ~/.personalize.log\nfi\n',
   },
   workspace: MockWorkspace,
-  applicationsHost: "",
   showApps: true,
   storybookAgentMetadata: defaultAgentMetadata,
 }
@@ -149,7 +148,6 @@ BunchOfApps.args = {
     ],
   },
   workspace: MockWorkspace,
-  applicationsHost: "",
   showApps: true,
 }
 
@@ -226,7 +224,7 @@ Off.args = {
 export const ShowingPortForward = Template.bind({})
 ShowingPortForward.args = {
   ...Example.args,
-  applicationsHost: "https://coder.com",
+  // TODO: @emyrk fix this from the proxy context
 }
 
 export const Outdated = Template.bind({})

@@ -43,11 +43,11 @@ import { AgentMetadata } from "./AgentMetadata"
 import { AgentVersion } from "./AgentVersion"
 import { AgentStatus } from "./AgentStatus"
 import Collapse from "@material-ui/core/Collapse"
+import { useProxy } from "contexts/ProxyContext"
 
 export interface AgentRowProps {
   agent: WorkspaceAgent
   workspace: Workspace
-  applicationsHost: string | undefined
   showApps: boolean
   hideSSHButton?: boolean
   sshPrefix?: string
@@ -61,7 +61,6 @@ export interface AgentRowProps {
 export const AgentRow: FC<AgentRowProps> = ({
   agent,
   workspace,
-  applicationsHost,
   showApps,
   hideSSHButton,
   hideVSCodeDesktopButton,
@@ -96,6 +95,7 @@ export const AgentRow: FC<AgentRowProps> = ({
   const hasStartupFeatures =
     Boolean(agent.startup_logs_length) ||
     Boolean(logsMachine.context.startupLogs?.length)
+  const { proxy } = useProxy()
 
   const [showStartupLogs, setShowStartupLogs] = useState(
     agent.lifecycle_state !== "ready" && hasStartupFeatures,
@@ -228,7 +228,6 @@ export const AgentRow: FC<AgentRowProps> = ({
                 {agent.apps.map((app) => (
                   <AppLink
                     key={app.slug}
-                    appsHost={applicationsHost}
                     app={app}
                     agent={agent}
                     workspace={workspace}
@@ -249,9 +248,9 @@ export const AgentRow: FC<AgentRowProps> = ({
                 sshPrefix={sshPrefix}
               />
             )}
-            {applicationsHost !== undefined && applicationsHost !== "" && (
+            {proxy.preferredWildcardHostname !== undefined && proxy.preferredWildcardHostname !== "" && (
               <PortForwardButton
-                host={applicationsHost}
+                host={proxy.preferredWildcardHostname}
                 workspaceName={workspace.name}
                 agentId={agent.id}
                 agentName={agent.name}

@@ -3,7 +3,7 @@ import { SecondaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
-import { usePreferredProxy } from "hooks/usePreferredProxy"
+import { useProxy } from "contexts/ProxyContext"
 
 export const Language = {
   linkText: "Terminal",
@@ -28,12 +28,10 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   userName = "me",
   workspaceName,
 }) => {
-  const preferredProxy = usePreferredProxy()
-  const preferredPathBase = preferredProxy ? preferredProxy.path_app_url : ""
+  const { proxy } = useProxy()
 
-  const href = `${preferredPathBase}/@${userName}/${workspaceName}${
-    agentName ? `.${agentName}` : ""
-  }/terminal`
+  const href = `${proxy.preferredPathAppURL}/@${userName}/${workspaceName}${agentName ? `.${agentName}` : ""
+    }/terminal`
 
   return (
     <Link

@@ -57,7 +57,6 @@ export interface WorkspaceProps {
   hideVSCodeDesktopButton?: boolean
   workspaceErrors: Partial<Record<WorkspaceErrors, Error | unknown>>
   buildInfo?: TypesGen.BuildInfoResponse
-  applicationsHost?: string
   sshPrefix?: string
   template?: TypesGen.Template
   quota_budget?: number
@@ -88,7 +87,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   hideSSHButton,
   hideVSCodeDesktopButton,
   buildInfo,
-  applicationsHost,
   sshPrefix,
   template,
   quota_budget,
@@ -240,7 +238,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
                 key={agent.id}
                 agent={agent}
                 workspace={workspace}
-                applicationsHost={applicationsHost}
                 sshPrefix={sshPrefix}
                 showApps={canUpdateWorkspace}
                 hideSSHButton={hideSSHButton}

@@ -1,25 +1,26 @@
+import { useQuery } from "@tanstack/react-query"
+import { getApplicationsHost, getWorkspaceProxies } from "api/api"
 import { Region } from "api/typesGenerated"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { createContext, FC, PropsWithChildren, useContext, useState } from "react"
 
 interface ProxyContextValue {
-  value: PreferredProxy
-  setValue: (regions: Region[], selectedRegion: Region | undefined) => void
+  proxy: PreferredProxy
+  isLoading: boolean
+  error?: Error | unknown
+  setProxy: (regions: Region[], selectedRegion: Region | undefined) => void
 }
 
 interface PreferredProxy {
-  // Regions is a list of all the regions returned by coderd.
-  regions: Region[]
   // SelectedRegion is the region the user has selected.
+  // Do not use the fields 'path_app_url' or 'wildcard_hostname' from this
+  // object. Use the preferred fields.
   selectedRegion: Region | undefined
   // PreferredPathAppURL is the URL of the proxy or it is the empty string
   // to indicte using relative paths. To add a path to this:
   //  PreferredPathAppURL + "/path/to/app"
   preferredPathAppURL: string
   // PreferredWildcardHostname is a hostname that includes a wildcard.
-  // TODO: If the preferred proxy does not have this set, should we default to'
-  //    the primary's?
-  //  Example: "*.example.com"
   preferredWildcardHostname: string
 }
 
@@ -32,24 +33,56 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
   // Try to load the preferred proxy from local storage.
   let savedProxy = loadPreferredProxy()
   if (!savedProxy) {
-    savedProxy = getURLs([], undefined)
+    savedProxy = getURLs([])
   }
 
   // The initial state is no regions and no selected region.
-  const [state, setState] = useState<PreferredProxy>(savedProxy)
+  const [proxy, setProxy] = useState<PreferredProxy>(savedProxy)
+  const setAndSaveProxy = (regions: Region[], selectedRegion: Region | undefined) => {
+    const preferred = getURLs(regions, selectedRegion)
+    // Save to local storage to persist the user's preference across reloads
+    // and other tabs.
+    savePreferredProxy(preferred)
+    // Set the state for the current context.
+    setProxy(preferred)
+  }
+
+  const queryKey = ["get-regions"]
+  const { error: regionsError, isLoading: regionsLoading } = useQuery({
+    queryKey,
+    queryFn: getWorkspaceProxies,
+    // This onSucccess ensures the local storage is synchronized with the 
+    // regions returned by coderd. If the selected region is not in the list,
+    // then the user selection is removed.
+    onSuccess: (data) => {
+      setAndSaveProxy(data.regions, proxy.selectedRegion)
+    },
+  })
 
   // ******************************* //
   // ** This code can be removed  **
   // ** when the experimental is  ** 
   // **       dropped             ** //
   const dashboard = useDashboard()
+  const appHostQueryKey = ["get-application-host"]
+  const { data: applicationHostResult, error: appHostError, isLoading: appHostLoading } = useQuery({
+    queryKey: appHostQueryKey,
+    queryFn: getApplicationsHost,
+  })
   // If the experiment is disabled, then make the setState do a noop.
   // This preserves an empty state, which is the default behavior.
   if (!dashboard?.experiments.includes("moons")) {
+    const value = getURLs([])
+
     return (
       <ProxyContext.Provider value={{
-        value: getURLs([], undefined),
-        setValue: () => {
+        proxy: {
+          ...value,
+          preferredWildcardHostname: applicationHostResult?.host || value.preferredWildcardHostname,
+        },
+        isLoading: appHostLoading,
+        error: appHostError,
+        setProxy: () => {
           // Does a noop
         },
       }}>
@@ -64,17 +97,12 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <ProxyContext.Provider value={{
-      value: state,
+      proxy: proxy,
+      isLoading: regionsLoading,
+      error: regionsError,
       // A function that takes the new regions and selected region and updates
       // the state with the appropriate urls.
-      setValue: (regions, selectedRegion) => {
-        const preferred = getURLs(regions, selectedRegion)
-        // Save to local storage to persist the user's preference across reloads
-        // and other tabs.
-        savePreferredProxy(preferred)
-        // Set the state for the current context.
-        setState(preferred)
-      },
+      setProxy: setAndSaveProxy,
     }}>
       {children}
     </ProxyContext.Provider >
@@ -99,19 +127,19 @@ export const useProxy = (): ProxyContextValue => {
  * @param regions Is the list of regions returned by coderd. If this is empty, default behavior is used.
  * @param selectedRegion Is the region the user has selected. If this is undefined, default behavior is used.
  */
-const getURLs = (regions: Region[], selectedRegion: Region | undefined): PreferredProxy => {
+const getURLs = (regions: Region[], selectedRegion?: Region): PreferredProxy => {
   // By default we set the path app to relative and disable wilcard hostnames.
   // We will set these values if we find a proxy we can use that supports them.
   let pathAppURL = ""
   let wildcardHostname = ""
 
-  if (selectedRegion === undefined) {
+  // If a region is selected, make sure it is in the list of regions. If it is not
+  // we should default to the primary.
+  selectedRegion = regions.find((region) => selectedRegion && region.id === selectedRegion.id)
+
+  if (!selectedRegion) {
     // If no region is selected, default to the primary region.
     selectedRegion = regions.find((region) => region.name === "primary")
-  } else {
-    // If a region is selected, make sure it is in the list of regions. If it is not
-    // we should default to the primary.
-    selectedRegion = regions.find((region) => region.id === selectedRegion?.id)
   }
 
   // Only use healthy regions.
@@ -126,10 +154,8 @@ const getURLs = (regions: Region[], selectedRegion: Region | undefined): Preferr
 
   // TODO: @emyrk Should we notify the user if they had an unhealthy region selected?
 
-
   return {
-    regions: regions,
-    selectedRegion: selectedRegion,
+    selectedRegion,
     // Trim trailing slashes to be consistent
     preferredPathAppURL: pathAppURL.replace(/\/$/, ""),
     preferredWildcardHostname: wildcardHostname,