fix: Ensure that the pro provider process is terminated before discon… (

loft-sh#1426) * fix: Ensure that the pro provider process is terminated before disconnecting it * fix: Remove unnecessary effect dependencies
janekbaraniewski · Nov 27, 2024 · 3392134 · 3392134
1 parent 449d511
commit 3392134
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 59 deletions.
diff --git a/desktop/src/client/pro/client.ts b/desktop/src/client/pro/client.ts
@@ -87,7 +87,8 @@ export class ProClient implements TDebuggable {
 
     // Don't await here, we want to return the unsubscribe function
     return () => {
-      cmd.cancel()
+      // Still, return the promise so someone can choose to await if necessary.
+      return cmd.cancel()
     }
   }
 

diff --git a/desktop/src/contexts/DevPodContext/Pro/ContextSwitcher.tsx b/desktop/src/contexts/DevPodContext/Pro/ContextSwitcher.tsx
@@ -1,5 +1,5 @@
 import { Close, Connect, DevpodWordmark, Ellipsis, Folder } from "@/icons"
-import { getDisplayName, useLoginProModal } from "@/lib"
+import { getDisplayName, Result, useLoginProModal } from "@/lib"
 import { TProInstance } from "@/types"
 import { useDeleteProviderModal } from "@/views/Providers"
 import { ArrowUpDownIcon, CheckIcon } from "@chakra-ui/icons"
@@ -24,6 +24,7 @@ import {
   Text,
   VStack,
   Tooltip,
+  Spinner,
 } from "@chakra-ui/react"
 import { ManagementV1Project } from "@loft-enterprise/client/gen/models/managementV1Project"
 import { ReactNode, useMemo } from "react"
@@ -37,13 +38,17 @@ type THostPickerProps = Readonly<{
   currentProject: ManagementV1Project
   projects: readonly ManagementV1Project[]
   onProjectChange: (newProject: ManagementV1Project) => void
+  onCancelWatch?: () => Promise<Result<undefined>>
+  waitingForCancel: boolean
 }>
 export function ContextSwitcher({
   currentHost,
   projects,
   currentProject,
   onProjectChange,
   onHostChange,
+  onCancelWatch,
+  waitingForCancel,
 }: THostPickerProps) {
   const [[rawProInstances]] = useProInstances()
   const proInstances = useMemo(() => {
@@ -89,59 +94,66 @@ export function ContextSwitcher({
         <Portal>
           <PopoverContent minWidth={"25rem"}>
             <PopoverBody p="0">
-              <List>
-                {proInstances.map(({ host, authenticated, image }) => (
-                  <ListItem key={host}>
-                    <PlatformDetails
-                      currentHost={currentHost}
-                      host={host!}
-                      image={image}
-                      authenticated={authenticated}
-                      onConnect={handleConnectPlatform}
-                      onClick={() => onHostChange(host!)}
-                    />
-                    {host === currentHost && (
-                      <VStack
-                        w="full"
-                        align="start"
-                        pb="4"
-                        pt="2"
-                        pl="2"
-                        borderBottomWidth="thin"
-                        borderBottomStyle="solid">
-                        <Heading pl="4" size="xs" color="gray.500" textTransform="uppercase">
-                          Projects
-                        </Heading>
-                        <List w="full">
-                          {projects.map((project) => (
-                            <ListItem key={project.metadata!.name}>
-                              <Button
-                                _hover={{ bgColor: "gray.100" }}
-                                variant="unstyled"
-                                w="full"
-                                display="flex"
-                                justifyContent="start"
-                                alignItems="center"
-                                leftIcon={<Folder boxSize={5} />}
-                                pl="4"
-                                color="gray.600"
-                                fontWeight="normal"
-                                rightIcon={
-                                  project.metadata?.name === currentProject.metadata?.name ? (
-                                    <CheckIcon />
-                                  ) : undefined
-                                }
-                                onClick={() => onProjectChange(project)}>
-                                {getDisplayName(project)}
-                              </Button>
-                            </ListItem>
-                          ))}
-                        </List>
-                      </VStack>
-                    )}
-                  </ListItem>
-                ))}
-              </List>
+              {waitingForCancel ? (
+                <HStack alignItems={"center"} justifyContent={"center"} paddingY={"4"}>
+                  <Spinner />
+                </HStack>
+              ) : (
+                <List>
+                  {proInstances.map(({ host, authenticated, image }) => (
+                    <ListItem key={host}>
+                      <PlatformDetails
+                        currentHost={currentHost}
+                        host={host!}
+                        image={image}
+                        onCancelWatch={onCancelWatch}
+                        authenticated={authenticated}
+                        onConnect={handleConnectPlatform}
+                        onClick={() => onHostChange(host!)}
+                      />
+                      {host === currentHost && (
+                        <VStack
+                          w="full"
+                          align="start"
+                          pb="4"
+                          pt="2"
+                          pl="2"
+                          borderBottomWidth="thin"
+                          borderBottomStyle="solid">
+                          <Heading pl="4" size="xs" color="gray.500" textTransform="uppercase">
+                            Projects
+                          </Heading>
+                          <List w="full">
+                            {projects.map((project) => (
+                              <ListItem key={project.metadata!.name}>
+                                <Button
+                                  _hover={{ bgColor: "gray.100" }}
+                                  variant="unstyled"
+                                  w="full"
+                                  display="flex"
+                                  justifyContent="start"
+                                  alignItems="center"
+                                  leftIcon={<Folder boxSize={5} />}
+                                  pl="4"
+                                  color="gray.600"
+                                  fontWeight="normal"
+                                  rightIcon={
+                                    project.metadata?.name === currentProject.metadata?.name ? (
+                                      <CheckIcon />
+                                    ) : undefined
+                                  }
+                                  onClick={() => onProjectChange(project)}>
+                                  {getDisplayName(project)}
+                                </Button>
+                              </ListItem>
+                            ))}
+                          </List>
+                        </VStack>
+                      )}
+                    </ListItem>
+                  ))}
+                </List>
+              )}
             </PopoverBody>
           </PopoverContent>
         </Portal>
@@ -158,6 +170,7 @@ type TPlatformDetailsProps = Readonly<{
   authenticated?: boolean | null
   onClick: VoidFunction
   onConnect: VoidFunction
+  onCancelWatch?: () => Promise<Result<undefined>>
 }>
 function PlatformDetails({
   host,
@@ -166,13 +179,17 @@ function PlatformDetails({
   authenticated,
   onClick,
   onConnect,
+  onCancelWatch,
 }: TPlatformDetailsProps) {
   const [, { disconnect }] = useProInstances()
   const { modal: deleteProviderModal, open: openDeleteProviderModal } = useDeleteProviderModal(
     host,
     "Pro instance",
     "disconnect",
-    () => disconnect.run({ id: host })
+    async () => {
+      await onCancelWatch?.()
+      disconnect.run({ id: host })
+    }
   )
 
   return (

diff --git a/desktop/src/contexts/DevPodContext/Pro/ProProvider.tsx b/desktop/src/contexts/DevPodContext/Pro/ProProvider.tsx
@@ -1,6 +1,6 @@
 import { ProClient, client as globalClient } from "@/client"
 import { ToolbarActions, ToolbarTitle } from "@/components"
-import { Annotations } from "@/lib"
+import { Annotations, Result } from "@/lib"
 import { Routes } from "@/routes"
 import { Text } from "@chakra-ui/react"
 import { ManagementV1Project } from "@loft-enterprise/client/gen/models/managementV1Project"
@@ -47,6 +47,12 @@ export function ProProvider({ host, children }: { host: string; children: ReactN
     return projectsQuery.data?.[0]
   }, [projectsQuery, selectedProject])
 
+  const [cancelWatch, setCancelWatch] = useState<
+    { fn: () => Promise<Result<undefined>> } | undefined
+  >(undefined)
+
+  const [waitingForCancel, setWaitingForCancel] = useState<boolean>(false)
+
   useEffect(() => {
     if (!currentProject?.metadata?.name) {
       return
@@ -77,9 +83,18 @@ export function ProProvider({ host, children }: { host: string; children: ReactN
       }, 1_000)
     })
 
-    return () => {
+    const canceler = () => {
       canceled = true
-      toCancel()
+      setCancelWatch(undefined)
+      setWaitingForCancel(true)
+
+      return toCancel().finally(() => setWaitingForCancel(false))
+    }
+
+    setCancelWatch({ fn: canceler })
+
+    return () => {
+      canceler()
     }
   }, [client, store, currentProject])
 
@@ -123,6 +138,8 @@ export function ProProvider({ host, children }: { host: string; children: ReactN
           projects={projectsQuery.data ?? []}
           currentProject={currentProject!}
           onProjectChange={handleProjectChanged}
+          onCancelWatch={cancelWatch?.fn}
+          waitingForCancel={waitingForCancel}
         />
       </ToolbarActions>
       {children}