feat: [CDE-267]: Add custom hook useOpenVSCodeBrowserURL (#2595)

* feat: [CDE-267]: Add custom hook useOpenVSCodeBrowserURL

web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx

@@ -61,7 +61,7 @@ import deleteIcon from 'cde-gitness/assests/delete.svg?url'
 import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import { useGitspaceActions } from 'cde-gitness/hooks/useGitspaceActions'
 import { useDeleteGitspaces } from 'cde-gitness/hooks/useDeleteGitspaces'
-import { useGetToken } from 'services/cde'
+import { useOpenVSCodeBrowserURL } from 'cde-gitness/hooks/useOpenVSCodeBrowserURL'
 import css from './ListGitspaces.module.scss'
 
 enum CodeRepoType {
@@ -358,21 +358,7 @@ const ActionMenu = ({
   const topBorder = state === GitspaceStatus.RUNNING && !actionLoading ? { top: true } : {}
   const disabledActionButtons = [GitspaceStatus.STARTING, GitspaceStatus.STOPPING].includes(state as GitspaceStatus)
 
-  const { data: tokenData, refetch } = useGetToken({
+  const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL()
-    accountIdentifier: '',
-    projectIdentifier: '',
-    orgIdentifier: '',
-    gitspace_identifier: '',
-    lazy: true
-  })
-
-  const [selectedRowUrl, setSelectedRowUrl] = useState<string | undefined>('')
-
-  useEffect(() => {
-    if (tokenData) {
-      window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank')
-    }
-  }, [tokenData])
 
   return (
     <Container
@@ -398,7 +384,7 @@ const ActionMenu = ({
                   window.open(url || '', '_blank')
                 } else {
                   setSelectedRowUrl(url || '')
-                  refetch({
+                  refetchToken({
                     pathParams: {
                       accountIdentifier,
                       projectIdentifier,
@@ -735,21 +721,7 @@ export const ListGitspaces = ({ data, refreshList }: { data: TypesGitspaceConfig
         }
       ]
 
-  const { data: tokenData, refetch } = useGetToken({
+  const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL()
-    accountIdentifier: '',
-    projectIdentifier: '',
-    orgIdentifier: '',
-    gitspace_identifier: '',
-    lazy: true
-  })
-
-  const [selectedRowUrl, setSelectedRowUrl] = useState<string | undefined>('')
-
-  useEffect(() => {
-    if (tokenData) {
-      window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank')
-    }
-  }, [tokenData])
 
   return (
     <Container>
@@ -771,7 +743,7 @@ export const ListGitspaces = ({ data, refreshList }: { data: TypesGitspaceConfig
                   window.open(row?.instance?.url || '', '_blank')
                 } else {
                   setSelectedRowUrl(row.instance?.url || '')
-                  refetch({
+                  refetchToken({
                     pathParams: {
                       accountIdentifier,
                       projectIdentifier,

web/src/cde-gitness/hooks/useOpenVSCodeBrowserURL.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from 'react'
+import { OpenapiGetTokenResponse, useGetToken } from 'services/cde'
+
+export const useOpenVSCodeBrowserURL = () => {
+  const { data: tokenData, refetch: refetchToken } = useGetToken({
+    accountIdentifier: '',
+    projectIdentifier: '',
+    orgIdentifier: '',
+    gitspace_identifier: '',
+    lazy: true
+  })
+
+  const [temporaryToken, setTemporaryToken] = useState<OpenapiGetTokenResponse | undefined>({
+    gitspace_token: undefined
+  })
+  const [selectedRowUrl, setSelectedRowUrl] = useState<string | undefined>('')
+
+  useEffect(() => {
+    if (temporaryToken?.gitspace_token) {
+      window.open(`${selectedRowUrl}&token=${temporaryToken?.gitspace_token}`, '_blank')
+    }
+  }, [temporaryToken, selectedRowUrl])
+
+  useEffect(() => {
+    if (tokenData?.gitspace_token !== temporaryToken?.gitspace_token && tokenData) {
+      setTemporaryToken(tokenData)
+    }
+  }, [temporaryToken, tokenData])
+
+  return { refetchToken, setSelectedRowUrl }
+}

web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx

@@ -55,7 +55,7 @@ import { useGitspaceEvents } from 'cde-gitness/hooks/useGitspaceEvents'
 import { useGitspaceActions } from 'cde-gitness/hooks/useGitspaceActions'
 import { useDeleteGitspaces } from 'cde-gitness/hooks/useDeleteGitspaces'
 import { useGitspacesLogs } from 'cde-gitness/hooks/useGitspaceLogs'
-import { useGetToken } from 'services/cde'
+import { useOpenVSCodeBrowserURL } from 'cde-gitness/hooks/useOpenVSCodeBrowserURL'
 import ContainerLogs from '../../components/ContainerLogs/ContainerLogs'
 import { useGetLogStream } from '../../hooks/useGetLogStream'
 import css from './GitspaceDetails.module.scss'
@@ -195,21 +195,7 @@ const GitspaceDetails = () => {
 
   const [accountIdentifier, orgIdentifier, projectIdentifier] = data?.space_path?.split('/') || []
 
-  const { data: tokenData, refetch: refetchToken } = useGetToken({
+  const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL()
-    accountIdentifier: '',
-    projectIdentifier: '',
-    orgIdentifier: '',
-    gitspace_identifier: '',
-    lazy: true
-  })
-
-  const [selectedRowUrl, setSelectedRowUrl] = useState<string | undefined>('')
-
-  useEffect(() => {
-    if (tokenData) {
-      window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank')
-    }
-  }, [tokenData])
 
   return (
     <>