Make hook for preferred proxy

coder · Emyrk · Apr 28, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 25, 2023
commit f78935fbdfaa0b95ff8bb0f0589928e08966b29b
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -10,6 +10,7 @@ import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
+import { usePreferredProxy } from "hooks/usePreferredProxy"
 
 const Language = {
   appTitle: (appName: string, identifier: string): string =>
@@ -29,6 +30,11 @@ export const AppLink: FC<AppLinkProps> = ({
   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 styles = useStyles()
   const username = workspace.owner_name
 
@@ -43,14 +49,14 @@ 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 = `/@${username}/${workspace.name}.${
-    agent.name
-  }/apps/${encodeURIComponent(appSlug)}/`
+  let href = `${preferredPathBase}/@${username}/${workspace.name}.${agent.name
+    }/apps/${encodeURIComponent(appSlug)}/`
   if (app.command) {
-    href = `/@${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.
   if (appsHost && app.subdomain) {
     const subdomain = `${appSlug}--${agent.name}--${workspace.name}--${username}`
     href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)
@@ -104,13 +110,13 @@ export const AppLink: FC<AppLinkProps> = ({
           onClick={
             canClick
               ? (event) => {
-                  event.preventDefault()
-                  window.open(
-                    href,
-                    Language.appTitle(appDisplayName, generateRandomString(12)),
-                    "width=900,height=600",
-                  )
-                }
+                event.preventDefault()
+                window.open(
+                  href,
+                  Language.appTitle(appDisplayName, generateRandomString(12)),
+                  "width=900,height=600",
+                )
+              }
               : undefined
           }
         >

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -35,7 +35,7 @@ export const NotHealthyBadge: FC = () => {
   const styles = useStyles()
   return (
     <span className={combineClasses([styles.badge, styles.errorBadge])}>
-      Error
+      Unhealthy
     </span>
   )
 }

diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -35,18 +35,20 @@ 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(
-    host,
+    portHost,
     parseInt(port),
     agentName,
     workspaceName,
@@ -104,7 +106,7 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
           {ports &&
             ports.map((p, i) => {
               const url = portForwardURL(
-                host,
+                portHost,
                 p.port,
                 agentName,
                 workspaceName,

diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -10,6 +10,7 @@ import { combineClasses } from "utils/combineClasses"
 import AccountIcon from "@material-ui/icons/Person"
 import SecurityIcon from "@material-ui/icons/LockOutlined"
 import PublicIcon from '@material-ui/icons/Public';
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 
 const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>
@@ -42,6 +43,7 @@ const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
 
 export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
   const styles = useStyles()
+  const dashboard = useDashboard()
 
   return (
     <nav className={styles.sidebar}>
@@ -77,13 +79,14 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
       >
         Tokens
       </SidebarNavItem>
-      {/* TODO: @emyrk this should only be shown if the 'moons' experiment is enabled */}
-      <SidebarNavItem
-        href="workspace-proxies"
-        icon={<SidebarNavItemIcon icon={PublicIcon} />}
-      >
-        Workspace Proxy
-      </SidebarNavItem>
+      {
+        dashboard.experiments.includes("moons") && <SidebarNavItem
+          href="workspace-proxies"
+          icon={<SidebarNavItemIcon icon={PublicIcon} />}
+        >
+          Workspace Proxy
+        </SidebarNavItem>
+      }
     </nav>
   )
 }

diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -3,6 +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"
 
 export const Language = {
   linkText: "Terminal",
@@ -27,9 +28,11 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   userName = "me",
   workspaceName,
 }) => {
-  const href = `/@${userName}/${workspaceName}${
-    agentName ? `.${agentName}` : ""
-  }/terminal`
+  const preferredProxy = usePreferredProxy()
+  const preferredPathBase = preferredProxy ? preferredProxy.path_app_url : ""
+
+  const href = `${preferredPathBase}/@${userName}/${workspaceName}${agentName ? `.${agentName}` : ""
+    }/terminal`
 
   return (
     <Link

diff --git a/site/src/hooks/usePreferredProxy.ts b/site/src/hooks/usePreferredProxy.ts
@@ -0,0 +1,20 @@
+import { Region } from "api/typesGenerated"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+
+export const usePreferredProxy = (): Region | undefined => {
+  const dashboard = useDashboard()
+  // Only use preferred proxy if the user has the moons experiment enabled
+  if(!dashboard?.experiments.includes("moons")) {
+    return undefined
+  }
+
+  const str = localStorage.getItem("preferred-proxy")
+  if (str === undefined || str === null) {
+    return undefined
+  }
+  const proxy = JSON.parse(str)
+  if (proxy.id === undefined || proxy.id === null) {
+    return undefined
+  }
+  return proxy
+}
diff --git a/site/src/i18n/en/proxyPage.json b/site/src/i18n/en/proxyPage.json
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState } from "react"
 import { Section } from "components/SettingsLayout/Section"
 import { WorkspaceProxyPageView } from "./WorkspaceProxyView"
 import makeStyles from "@material-ui/core/styles/makeStyles"
-import { useTranslation, Trans } from "react-i18next"
+import { Trans } from "react-i18next"
 import { useWorkspaceProxiesData } from "./hooks"
 import { Region } from "api/typesGenerated"
 import { displayError } from "components/GlobalSnackbar/utils"
@@ -15,10 +15,9 @@ import { displayError } from "components/GlobalSnackbar/utils"
 
 export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
-  const { t } = useTranslation("proxyPage")
 
   const description = (
-    <Trans t={t} i18nKey="description" values={{}}>
+    <Trans values={{}}>
       Workspace proxies are used to reduce the latency of connections to a workspace.
       To get the best experience, choose the workspace proxy that is closest located to
       you.
@@ -37,7 +36,7 @@ export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
   return (
     <>
       <Section
-        title={t("title")}
+        title="Workspace Proxies"
         className={styles.section}
         description={description}
         layout="fluid"
@@ -53,8 +52,15 @@ export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
               displayError("Please select a healthy workspace proxy.")
               return
             }
-            savePreferredProxy(proxy)
-            setPreffered(proxy)
+            // normProxy is a normalized proxy to 
+            const normProxy = {
+              ...proxy,
+              // Trim trailing slashes to be consistent
+              path_app_url: proxy.path_app_url.replace(/\/$/, ''),
+            }
+
+            savePreferredProxy(normProxy)
+            setPreffered(normProxy)
           }}
         />
       </Section>
@@ -72,9 +78,6 @@ const useStyles = makeStyles((theme) => ({
       borderRadius: 2,
     },
   },
-  tokenActions: {
-    marginBottom: theme.spacing(1),
-  },
 }))
 
 export default WorkspaceProxyPage

diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -67,7 +67,7 @@ const ProxyStatus: FC<{
 
 const useStyles = makeStyles((theme) => ({
   preferredrow: {
-    // TODO: What color should I put here?
+    // TODO: What is the best way to show what proxy is currently being used?
     backgroundColor: theme.palette.secondary.main,
     outline: `3px solid ${theme.palette.secondary.light}`,
     outlineOffset: -3,

diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
@@ -11,7 +10,6 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty"
 import { TableLoader } from "components/TableLoader/TableLoader"
 import { FC } from "react"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
-import { useTranslation } from "react-i18next"
 import { Region } from "api/typesGenerated"
 import { ProxyRow } from "./WorkspaceProxyRow"
 
@@ -38,8 +36,6 @@ export const WorkspaceProxyPageView: FC<
   selectProxyError,
   preferredProxy,
 }) => {
-    const { t } = useTranslation("proxyPage")
-
     return (
       <Stack>
         {Boolean(getWorkspaceProxiesError) && (
@@ -52,9 +48,9 @@ export const WorkspaceProxyPageView: FC<
           <Table>
             <TableHead>
               <TableRow>
-                <TableCell width="40%">{t("table.icon")}</TableCell>
-                <TableCell width="30%">{t("table.url")}</TableCell>
-                <TableCell width="10%">{t("table.status")}</TableCell>
+                <TableCell width="40%">Proxy</TableCell>
+                <TableCell width="30%">URL</TableCell>
+                <TableCell width="10%">Status</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -63,11 +59,11 @@ export const WorkspaceProxyPageView: FC<
                   <TableLoader />
                 </Cond>
                 <Cond condition={hasLoaded && proxies?.length === 0}>
-                  <TableEmpty message={t("emptyState")} />
+                  <TableEmpty message="No workspace proxies found" />
                 </Cond>
                 <Cond>
                   {proxies?.map((proxy) => (
-                    <ProxyRow
+                    < ProxyRow
                       key={proxy.id}
                       proxy={proxy}
                       onSelectRegion={onSelect}

diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx
@@ -0,0 +1,57 @@
+import { Story } from "@storybook/react"
+import { makeMockApiError, MockRegions } from "testHelpers/entities"
+import { WorkspaceProxyPageView, WorkspaceProxyPageViewProps } from "./WorkspaceProxyView"
+
+export default {
+  title: "components/WorkspaceProxyPageView",
+  component: WorkspaceProxyPageView,
+  args: {
+    onRegenerateClick: { action: "Submit" },
+  },
+}
+
+const Template: Story<WorkspaceProxyPageViewProps> = (args: WorkspaceProxyPageViewProps) => (
+  <WorkspaceProxyPageView {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  isLoading: false,
+  hasLoaded: true,
+  proxies: MockRegions,
+  preferredProxy: MockRegions[0],
+  onSelect: () => {
+    return Promise.resolve()
+  },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Example.args,
+  isLoading: true,
+  hasLoaded: false,
+}
+
+export const Empty = Template.bind({})
+Empty.args = {
+  ...Example.args,
+  proxies: [],
+}
+
+export const WithProxiesError = Template.bind({})
+WithProxiesError.args = {
+  ...Example.args,
+  hasLoaded: false,
+  getWorkspaceProxiesError: makeMockApiError({
+    message: "Failed to get proxies.",
+  }),
+}
+
+export const WithSelectProxyError = Template.bind({})
+WithSelectProxyError.args = {
+  ...Example.args,
+  hasLoaded: false,
+  selectProxyError: makeMockApiError({
+    message: "Failed to select proxy.",
+  }),
+}