feat: [CDE-125]: Pass token to the browser call. (#2162)

* feat: [CDE-125]: Fix linting error
* feat: [CDE-125]: Open vscode in same window
* feat: [CDE-125]: Add routing in case of invalid token
* feat: [CDE-125]: Pass token to the browser call.

web/src/cde/components/GitspaceDetails/GitspaceDetails.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Text, Layout, Container, Button, ButtonVariation, PageError, useToaster } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
 import type { PopoverProps } from '@harnessio/uicore/dist/components/Popover/Popover'
@@ -29,7 +29,8 @@ import {
   type GitspaceActionPathParams,
   type OpenapiGetGitspaceResponse,
   type OpenapiGitspaceActionRequest,
-  useDeleteGitspace
+  useDeleteGitspace,
+  useGetToken
 } from 'services/cde'
 import { useStrings } from 'framework/strings'
 import { GitspaceActionType, GitspaceStatus, IDEType } from 'cde/constants'
@@ -38,6 +39,7 @@ import { useAppContext } from 'AppContext'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { CDEPathParams, useGetCDEAPIParams } from 'cde/hooks/useGetCDEAPIParams'
 import { useConfirmAct } from 'hooks/useConfirmAction'
+import { useQueryParams } from 'hooks/useQueryParams'
 import Gitspace from '../../icons/Gitspace.svg?url'
 import { StartStopButton, getStatusColor } from '../ListGitspaces/ListGitspaces'
 import { usePolling } from './usePolling'
@@ -75,6 +77,7 @@ export const GitspaceDetails = ({
   const { routes } = useAppContext()
   const space = useGetSpaceParam()
   const { showError, showSuccess } = useToaster()
+  const { openvscodeweb = '' } = useQueryParams<{ openvscodeweb?: string }>()
   const history = useHistory()
   const { projectIdentifier, orgIdentifier, accountIdentifier } = useGetCDEAPIParams() as CDEPathParams
 
@@ -87,6 +90,33 @@ export const GitspaceDetails = ({
 
   const color = getStatusColor(state as EnumGitspaceStateType)
 
+  const { data: tokenData, refetch: refetchToken } = useGetToken({
+    accountIdentifier,
+    projectIdentifier,
+    orgIdentifier,
+    gitspaceIdentifier: '',
+    lazy: true
+  })
+
+  useEffect(() => {
+    if (tokenData) {
+      window.open(`${url}&token=${tokenData?.gitspace_token}`, openvscodeweb ? '_self' : '_blank')
+    }
+  }, [tokenData])
+
+  useEffect(() => {
+    if (openvscodeweb === 'true' && url) {
+      refetchToken({
+        pathParams: {
+          accountIdentifier,
+          projectIdentifier,
+          orgIdentifier,
+          gitspaceIdentifier: gitspaceId
+        }
+      })
+    }
+  }, [url])
+
   const {
     data: eventData,
     refetch: refetchEventData,
@@ -229,7 +259,14 @@ export const GitspaceDetails = ({
                 if (config?.ide === IDEType.VSCODE) {
                   window.open(`vscode://harness-inc.gitspaces/${projectIdentifier}/${gitspaceId}`, '_blank')
                 } else {
-                  window.open(url, '_blank')
+                  refetchToken({
+                    pathParams: {
+                      accountIdentifier,
+                      projectIdentifier,
+                      orgIdentifier,
+                      gitspaceIdentifier: gitspaceId
+                    }
+                  })
                 }
               }}
               variation={ButtonVariation.PRIMARY}>

web/src/cde/components/ListGitspaces/ListGitspaces.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Container, Layout, TableV2, Text, useToaster } from '@harnessio/uicore'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Color } from '@harnessio/design-system'
 import type { Renderer, CellProps } from 'react-table'
 import ReactTimeago from 'react-timeago'
@@ -40,7 +40,8 @@ import {
   type EnumGitspaceStateType,
   type OpenapiGetGitspaceResponse,
   EnumIDEType,
-  useDeleteGitspace
+  useDeleteGitspace,
+  useGetToken
 } from 'services/cde'
 import { CDEPathParams, useGetCDEAPIParams } from 'cde/hooks/useGetCDEAPIParams'
 import { GitspaceActionType, GitspaceStatus, IDEType } from 'cde/constants'
@@ -402,20 +403,43 @@ export const ListGitspaces = ({
   const { getString } = useStrings()
   const { routes } = useAppContext()
 
+  const { projectIdentifier, orgIdentifier, accountIdentifier } = useGetCDEAPIParams() as CDEPathParams
+
+  const [selectedRowUrl, setSelectedRowUrl] = useState<string | undefined>('')
+
+  const { data: tokenData, refetch } = useGetToken({
+    accountIdentifier,
+    projectIdentifier,
+    orgIdentifier,
+    gitspaceIdentifier: '',
+    lazy: true
+  })
+
+  useEffect(() => {
+    if (tokenData) {
+      window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank')
+    }
+  }, [tokenData])
+
   return (
     <Container>
       {data && (
         <TableV2<OpenapiGetGitspaceResponse>
           className={css.table}
           onRowClick={row => {
-            const pathparamsList = row?.config?.space_path?.split('/') || []
-            const projectIdentifier = pathparamsList[pathparamsList.length - 1] || ''
-
             if (row?.state === GitspaceStatus.RUNNING) {
               if (row?.config?.ide === IDEType.VSCODE) {
                 window.open(`vscode://harness-inc.gitspaces/${projectIdentifier}/${row?.config?.id}`, '_blank')
               } else {
-                window.open(row?.url, '_blank')
+                setSelectedRowUrl(row.url)
+                refetch({
+                  pathParams: {
+                    accountIdentifier,
+                    projectIdentifier,
+                    orgIdentifier,
+                    gitspaceIdentifier: row.config?.id
+                  }
+                })
               }
             } else {
               history.push(

web/src/services/cde/index.tsx

@@ -154,6 +154,10 @@ export interface OpenapiGetGitspaceResponse {
   url?: string
 }
 
+export interface OpenapiGetTokenResponse {
+  gitspace_token?: string
+}
+
 export interface OpenapiGitspaceActionRequest {
   action?: EnumGitspaceActionType
 }
@@ -934,6 +938,68 @@ export const useGetGitspaceInstanceLogs = ({
     }
   )
 
+export interface GetTokenPathParams {
+  /**
+   * account identifier.
+   */
+  accountIdentifier: string
+  /**
+   * org identifier.
+   */
+  orgIdentifier: string
+  /**
+   * project identifier.
+   */
+  projectIdentifier: string
+  /**
+   * gitspace identifier.
+   */
+  gitspaceIdentifier: string
+}
+
+export type GetTokenProps = Omit<GetProps<OpenapiGetTokenResponse, unknown, void, GetTokenPathParams>, 'path'> &
+  GetTokenPathParams
+
+/**
+ * Get gitspace token
+ */
+export const GetToken = ({
+  accountIdentifier,
+  orgIdentifier,
+  projectIdentifier,
+  gitspaceIdentifier,
+  ...props
+}: GetTokenProps) => (
+  <Get<OpenapiGetTokenResponse, unknown, void, GetTokenPathParams>
+    path={`/accounts/${accountIdentifier}/orgs/${orgIdentifier}/projects/${projectIdentifier}/gitspaces/${gitspaceIdentifier}/token`}
+    base={getConfig('cde/api/v1')}
+    {...props}
+  />
+)
+
+export type UseGetTokenProps = Omit<UseGetProps<OpenapiGetTokenResponse, unknown, void, GetTokenPathParams>, 'path'> &
+  GetTokenPathParams
+
+/**
+ * Get gitspace token
+ */
+export const useGetToken = ({
+  accountIdentifier,
+  orgIdentifier,
+  projectIdentifier,
+  gitspaceIdentifier,
+  ...props
+}: UseGetTokenProps) =>
+  useGet<OpenapiGetTokenResponse, unknown, void, GetTokenPathParams>(
+    (paramsInPath: GetTokenPathParams) =>
+      `/accounts/${paramsInPath.accountIdentifier}/orgs/${paramsInPath.orgIdentifier}/projects/${paramsInPath.projectIdentifier}/gitspaces/${paramsInPath.gitspaceIdentifier}/token`,
+    {
+      base: getConfig('cde/api/v1'),
+      pathParams: { accountIdentifier, orgIdentifier, projectIdentifier, gitspaceIdentifier },
+      ...props
+    }
+  )
+
 export interface ListInfraProvidersPathParams {
   /**
    * account identifier.

web/src/services/cde/swagger.yaml

@@ -406,6 +406,44 @@ paths:
       summary: Get gitspace instance logs
       tags:
         - gitspaces
+  /accounts/{accountIdentifier}/orgs/{orgIdentifier}/projects/{projectIdentifier}/gitspaces/{gitspaceIdentifier}/token:
+    get:
+      operationId: getToken
+      parameters:
+        - description: account identifier.
+          in: path
+          name: accountIdentifier
+          required: true
+          schema:
+            type: string
+        - description: org identifier.
+          in: path
+          name: orgIdentifier
+          required: true
+          schema:
+            type: string
+        - description: project identifier.
+          in: path
+          name: projectIdentifier
+          required: true
+          schema:
+            type: string
+        - description: gitspace identifier.
+          in: path
+          name: gitspaceIdentifier
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OpenapiGetTokenResponse'
+          description: OK
+      summary: Get gitspace token
+      tags:
+        - gitspaces
   /accounts/{accountIdentifier}/orgs/{orgIdentifier}/projects/{projectIdentifier}/infraproviders:
     get:
       operationId: listInfraProviders
@@ -894,6 +932,11 @@ components:
         url:
           type: string
       type: object
+    OpenapiGetTokenResponse:
+      properties:
+        gitspace_token:
+          type: string
+      type: object
     OpenapiGitspaceActionRequest:
       properties:
         action: