From 768429c829fcd1c150b60516e05c71584828b0ff Mon Sep 17 00:00:00 2001
From: Pascal Breuninger <pascal.breuninger@loft.sh>
Date: Thu, 8 Feb 2024 12:30:15 +0100
Subject: [PATCH] feat(desktop): display authentication status for pro
 instances; if not authenticated, clicking on icon will trigger relogin

---
 desktop/src/client/constants.ts               |  1 +
 desktop/src/client/pro/client.ts              |  6 +-
 desktop/src/client/pro/proCommands.ts         |  9 ++-
 desktop/src/components/Layout/Pro.tsx         | 67 ++++++++++++++-----
 .../contexts/DevPodContext/DevPodProvider.tsx |  2 +-
 desktop/src/types.ts                          |  7 ++
 desktop/src/views/ProInstances/index.ts       |  2 +-
 .../views/ProInstances/useLoginProModal.tsx   | 66 +++++++++++++++++-
 8 files changed, 132 insertions(+), 28 deletions(-)

diff --git a/desktop/src/client/constants.ts b/desktop/src/client/constants.ts
index e8355a2a9..7807ed3ec 100644
--- a/desktop/src/client/constants.ts
+++ b/desktop/src/client/constants.ts
@@ -50,5 +50,6 @@ export const DEVPOD_FLAG_TIMEOUT = "--timeout"
 export const DEVPOD_FLAG_DEVCONTAINER_PATH = "--devcontainer-path"
 export const DEVPOD_FLAG_WORKSPACE_ID = "--workspace-id"
 export const DEVPOD_FLAG_WORKSPACE_UID = "--workspace-uid"
+export const DEVPOD_FLAG_LOGIN = "--login"
 
 export const DEVPOD_UI_ENV_VAR = "DEVPOD_UI"
diff --git a/desktop/src/client/pro/client.ts b/desktop/src/client/pro/client.ts
index 742048d0a..bb3a776f0 100644
--- a/desktop/src/client/pro/client.ts
+++ b/desktop/src/client/pro/client.ts
@@ -1,5 +1,5 @@
 import { Result, ResultError } from "../../lib"
-import { TImportWorkspaceConfig, TProID, TProInstance } from "../../types"
+import { TImportWorkspaceConfig, TListProInstancesConfig, TProID, TProInstance } from "../../types"
 import { TDebuggable, TStreamEventListenerFn } from "../types"
 import { ProCommands } from "./proCommands"
 
@@ -19,8 +19,8 @@ export class ProClient implements TDebuggable {
     return ProCommands.Login(host, providerName, accessKey, listener)
   }
 
-  public async listAll(): Promise<Result<readonly TProInstance[]>> {
-    return ProCommands.ListProInstances()
+  public async listAll(config: TListProInstancesConfig): Promise<Result<readonly TProInstance[]>> {
+    return ProCommands.ListProInstances(config)
   }
 
   public async remove(id: TProID) {
diff --git a/desktop/src/client/pro/proCommands.ts b/desktop/src/client/pro/proCommands.ts
index 67db496bf..c0906b2d2 100644
--- a/desktop/src/client/pro/proCommands.ts
+++ b/desktop/src/client/pro/proCommands.ts
@@ -1,5 +1,5 @@
 import { Result, ResultError, Return, getErrorFromChildProcess } from "@/lib"
-import { TImportWorkspaceConfig, TProID, TProInstance } from "@/types"
+import { TImportWorkspaceConfig, TListProInstancesConfig, TProID, TProInstance } from "@/types"
 import { Command, isOk, serializeRawOptions, toFlagArg } from "../command"
 import {
   DEVPOD_COMMAND_DELETE,
@@ -11,6 +11,7 @@ import {
   DEVPOD_FLAG_DEBUG,
   DEVPOD_FLAG_JSON_LOG_OUTPUT,
   DEVPOD_FLAG_JSON_OUTPUT,
+  DEVPOD_FLAG_LOGIN,
   DEVPOD_FLAG_PROVIDER,
   DEVPOD_FLAG_USE,
   DEVPOD_FLAG_WORKSPACE_ID,
@@ -62,11 +63,15 @@ export class ProCommands {
     }
   }
 
-  static async ListProInstances(): Promise<Result<readonly TProInstance[]>> {
+  static async ListProInstances(
+    config: TListProInstancesConfig
+  ): Promise<Result<readonly TProInstance[]>> {
+    const maybeLoginFlag = config?.authenticate ? [DEVPOD_FLAG_LOGIN] : []
     const result = await ProCommands.newCommand([
       DEVPOD_COMMAND_PRO,
       DEVPOD_COMMAND_LIST,
       DEVPOD_FLAG_JSON_OUTPUT,
+      ...maybeLoginFlag,
     ]).run()
     if (result.err) {
       return result
diff --git a/desktop/src/components/Layout/Pro.tsx b/desktop/src/components/Layout/Pro.tsx
index 37dc9ad1f..db9d90f49 100644
--- a/desktop/src/components/Layout/Pro.tsx
+++ b/desktop/src/components/Layout/Pro.tsx
@@ -1,9 +1,9 @@
 import { client } from "@/client"
 import { useProInstances, useSettings, useWorkspaces } from "@/contexts"
-import { Briefcase, DevPodProBadge, Plus } from "@/icons"
+import { Briefcase, CheckCircle, DevPodProBadge, ExclamationTriangle, Plus } from "@/icons"
 import { exists } from "@/lib"
 import { TProID, TProInstance } from "@/types"
-import { useLoginProModal } from "@/views/ProInstances/useLoginProModal"
+import { useLoginProModal, useReLoginProModal } from "@/views/ProInstances/useLoginProModal"
 import { useDeleteProviderModal } from "@/views/Providers/useDeleteProviderModal"
 import { ChevronDownIcon, CloseIcon } from "@chakra-ui/icons"
 import {
@@ -35,6 +35,7 @@ import { IconTag } from "../Tag"
 export function Pro() {
   const [[proInstances]] = useProInstances()
   const { modal: loginProModal, handleOpenLogin: handleConnectClicked } = useLoginProModal()
+  const { modal: reLoginProModal, handleOpenLogin: handleReLoginClicked } = useReLoginProModal()
   const [isDeleting, setIsDeleting] = useState(false)
 
   const backgroundColor = useColorModeValue("white", "gray.900")
@@ -101,17 +102,22 @@ export function Pro() {
                     </ButtonGroup>
                   </VStack>
                 ) : (
-                  proInstances.map(
-                    (proInstance) =>
-                      proInstance.host && (
-                        <ProInstaceRow
-                          key={proInstance.host}
-                          {...proInstance}
-                          host={proInstance.host}
-                          onIsDeletingChanged={setIsDeleting}
-                        />
-                      )
-                  )
+                  proInstances.map((proInstance) => {
+                    const host = proInstance.host
+                    if (!host) {
+                      return null
+                    }
+
+                    return (
+                      <ProInstanceRow
+                        key={host}
+                        {...proInstance}
+                        host={host}
+                        onIsDeletingChanged={setIsDeleting}
+                        onLoginClicked={() => handleReLoginClicked({ host })}
+                      />
+                    )
+                  })
                 )}
               </Box>
             </PopoverBody>
@@ -119,6 +125,7 @@ export function Pro() {
         </Portal>
       </Popover>
       {loginProModal}
+      {reLoginProModal}
     </>
   ) : (
     <Button
@@ -131,12 +138,18 @@ export function Pro() {
 }
 
 type TProInstaceRowProps = Omit<TProInstance, "host"> &
-  Readonly<{ host: TProID; onIsDeletingChanged: (isDeleting: boolean) => void }>
-function ProInstaceRow({
+  Readonly<{
+    host: TProID
+    onIsDeletingChanged: (isDeleting: boolean) => void
+    onLoginClicked?: VoidFunction
+  }>
+function ProInstanceRow({
   host,
   creationTimestamp,
   onIsDeletingChanged,
   provider,
+  authenticated,
+  onLoginClicked,
 }: TProInstaceRowProps) {
   const [, { disconnect }] = useProInstances()
   const workspaces = useWorkspaces()
@@ -157,7 +170,7 @@ function ProInstaceRow({
   )
   useEffect(() => {
     onIsDeletingChanged(isOpen)
-    // `onIsDeletingChanged` is expectd to be a stable reference
+    // `onIsDeletingChanged` is expected to be a stable reference
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen])
 
@@ -165,7 +178,25 @@ function ProInstaceRow({
     <>
       <HStack width="full" padding="2" justifyContent="space-between">
         <VStack align="start" spacing="0" fontSize="sm">
-          <Text fontWeight="bold">{host}</Text>
+          <HStack>
+            <Text fontWeight="bold">{host}</Text>
+            {exists(authenticated) && (
+              <IconTag
+                variant="ghost"
+                icon={
+                  authenticated ? (
+                    <CheckCircle color={"green.300"} />
+                  ) : (
+                    <ExclamationTriangle color="orange.300" />
+                  )
+                }
+                label=""
+                paddingInlineStart="0"
+                infoText={authenticated ? "Authenticated" : "Not Authenticated"}
+                {...(authenticated ? {} : { onClick: onLoginClicked, cursor: "pointer" })}
+              />
+            )}
+          </HStack>
           <HStack>
             <IconTag
               variant="ghost"
@@ -178,7 +209,7 @@ function ProInstaceRow({
               <IconTag
                 variant="ghost"
                 icon={<Icon as={HiClock} />}
-                label={dayjs(new Date(creationTimestamp)).fromNow()}
+                label={dayjs(new Date(creationTimestamp)).format("MMM D, YY")}
                 infoText={`Created ${dayjs(new Date(creationTimestamp)).fromNow()}`}
               />
             )}
diff --git a/desktop/src/contexts/DevPodContext/DevPodProvider.tsx b/desktop/src/contexts/DevPodContext/DevPodProvider.tsx
index 4fe5cdc07..4ac0898e8 100644
--- a/desktop/src/contexts/DevPodContext/DevPodProvider.tsx
+++ b/desktop/src/contexts/DevPodContext/DevPodProvider.tsx
@@ -23,7 +23,7 @@ export function DevPodProvider({ children }: Readonly<{ children?: ReactNode }>)
 
   const proInstancesQuery = useQuery({
     queryKey: QueryKeys.PRO_INSTANCES,
-    queryFn: async () => (await client.pro.listAll()).unwrap(),
+    queryFn: async () => (await client.pro.listAll({ authenticate: true })).unwrap(),
     refetchInterval: REFETCH_INTERVAL_MS,
   })
 
diff --git a/desktop/src/types.ts b/desktop/src/types.ts
index 7618076ff..602bce4ea 100644
--- a/desktop/src/types.ts
+++ b/desktop/src/types.ts
@@ -195,6 +195,7 @@ export type TProInstance = Readonly<{
   host: TMaybe<string>
   provider: TMaybe<string>
   creationTimestamp: TMaybe<string>
+  authenticated: TMaybe<boolean>
 }>
 export type TProInstances = readonly TProInstance[]
 export type TProInstanceManager = Readonly<{
@@ -211,6 +212,12 @@ export type TProInstanceLoginConfig = Readonly<{
   accessKey?: string
   streamListener?: TStreamEventListenerFn
 }>
+export type TListProInstancesConfig = Readonly<
+  | {
+      authenticate?: boolean
+    }
+  | undefined
+>
 //#endregion
 
 export type TDevcontainerSetup = Readonly<{
diff --git a/desktop/src/views/ProInstances/index.ts b/desktop/src/views/ProInstances/index.ts
index 78a517516..5ac177491 100644
--- a/desktop/src/views/ProInstances/index.ts
+++ b/desktop/src/views/ProInstances/index.ts
@@ -1 +1 @@
-export { useLoginProModal } from "./useLoginProModal"
+export { useLoginProModal, useReLoginProModal } from "./useLoginProModal"
diff --git a/desktop/src/views/ProInstances/useLoginProModal.tsx b/desktop/src/views/ProInstances/useLoginProModal.tsx
index bc566b49a..53469ad29 100644
--- a/desktop/src/views/ProInstances/useLoginProModal.tsx
+++ b/desktop/src/views/ProInstances/useLoginProModal.tsx
@@ -1,5 +1,5 @@
 import { BottomActionBar, BottomActionBarError, Form, useStreamingTerminal } from "@/components"
-import { useProInstances, useProviders } from "@/contexts"
+import { useProInstanceManager, useProInstances, useProviders } from "@/contexts"
 import { exists, useFormErrors } from "@/lib"
 import { Routes } from "@/routes"
 import {
@@ -19,6 +19,7 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Tooltip,
@@ -153,7 +154,7 @@ export function useLoginProModal() {
         <ModalOverlay />
         <ModalContent overflow="hidden">
           {login.status !== "loading" && <ModalCloseButton />}
-          <ModalHeader>Connect to Loft DevPod Pro</ModalHeader>
+          <ModalHeader>Connect to DevPod Pro</ModalHeader>
           <ModalBody overflowX="hidden" overflowY="auto" paddingBottom="0" ref={containerRef}>
             <VStack align="start" spacing="8" paddingX="4" paddingTop="4">
               <Form onSubmit={handleSubmit(onSubmit)} justifyContent="center">
@@ -204,7 +205,7 @@ export function useLoginProModal() {
                       <FormErrorMessage>{proURLError.message}</FormErrorMessage>
                     ) : (
                       <FormHelperText>
-                        Enter a URL to the Loft DevPod Pro instance you intend to connect to. If
+                        Enter a URL to the DevPod Pro instance you intend to connect to. If
                         you&apos;re unsure about it, ask your company administrator or create a new
                         Pro instance on your local machine.
                       </FormHelperText>
@@ -320,3 +321,62 @@ export function useLoginProModal() {
 
   return { modal, handleOpenLogin }
 }
+
+export function useReLoginProModal() {
+  const { terminal, connectStream, clear: clearTerminal } = useStreamingTerminal({ fontSize: "sm" })
+  const { login } = useProInstanceManager()
+  const { isOpen, onClose, onOpen } = useDisclosure()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleOpenLogin = useCallback(
+    (data: NonNullable<Pick<TSetupProInitialData, "host">>) => {
+      onOpen()
+      login.run({ host: data.host, streamListener: connectStream })
+    },
+    [connectStream, login, onOpen]
+  )
+
+  const resetModal = useCallback(() => {
+    clearTerminal()
+    onClose()
+  }, [clearTerminal, onClose])
+
+  const modal = useMemo(() => {
+    return (
+      <Modal
+        onClose={resetModal}
+        isOpen={isOpen}
+        closeOnEsc={login.status !== "loading"}
+        closeOnOverlayClick={login.status !== "loading"}
+        isCentered
+        size="4xl"
+        scrollBehavior="inside">
+        <ModalOverlay />
+        <ModalContent overflow="hidden">
+          {login.status !== "loading" && <ModalCloseButton />}
+          <ModalHeader>Login to DevPod Pro</ModalHeader>
+          <ModalBody overflowX="hidden" overflowY="auto" paddingBottom="0" ref={containerRef}>
+            <VStack align="start" spacing="8" paddingX="4" paddingTop="4" paddingBottom="6">
+              {login.status !== "idle" && (
+                <Box width="full" height="10rem">
+                  {terminal}
+                </Box>
+              )}
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              isDisabled={login.status !== "success"}
+              isLoading={login.status === "loading"}
+              variant="solid"
+              onClick={resetModal}>
+              Done
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    )
+  }, [resetModal, isOpen, login.status, terminal])
+
+  return { modal, handleOpenLogin }
+}