From d370295e7c38ae64fedad7fca6e25baec20b5fa5 Mon Sep 17 00:00:00 2001 From: Deepesh Kumar Date: Tue, 27 Aug 2024 10:53:05 +0000 Subject: [PATCH] feat: [CDE-267]: Add custom hook useOpenVSCodeBrowserURL (#2595) * feat: [CDE-267]: Add custom hook useOpenVSCodeBrowserURL --- .../GitspaceListing/ListGitspaces.tsx | 38 ++------------- .../hooks/useOpenVSCodeBrowserURL.tsx | 47 +++++++++++++++++++ .../pages/GitspaceDetails/GitspaceDetails.tsx | 18 +------ 3 files changed, 54 insertions(+), 49 deletions(-) create mode 100644 web/src/cde-gitness/hooks/useOpenVSCodeBrowserURL.tsx diff --git a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx index 802eb907e..54c06b9e6 100644 --- a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx +++ b/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({ - accountIdentifier: '', - projectIdentifier: '', - orgIdentifier: '', - gitspace_identifier: '', - lazy: true - }) - - const [selectedRowUrl, setSelectedRowUrl] = useState('') - - useEffect(() => { - if (tokenData) { - window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank') - } - }, [tokenData]) + const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL() return ( ('') - - useEffect(() => { - if (tokenData) { - window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank') - } - }, [tokenData]) + const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL() return ( @@ -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, diff --git a/web/src/cde-gitness/hooks/useOpenVSCodeBrowserURL.tsx b/web/src/cde-gitness/hooks/useOpenVSCodeBrowserURL.tsx new file mode 100644 index 000000000..acd3f9ec4 --- /dev/null +++ b/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({ + gitspace_token: undefined + }) + const [selectedRowUrl, setSelectedRowUrl] = useState('') + + 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 } +} diff --git a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx b/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx index 41aff1122..7dcd1746e 100644 --- a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx +++ b/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({ - accountIdentifier: '', - projectIdentifier: '', - orgIdentifier: '', - gitspace_identifier: '', - lazy: true - }) - - const [selectedRowUrl, setSelectedRowUrl] = useState('') - - useEffect(() => { - if (tokenData) { - window.open(`${selectedRowUrl}&token=${tokenData?.gitspace_token}`, '_blank') - } - }, [tokenData]) + const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL() return ( <>