From 2ad02f13213f7a929baf51ac347d30aeea27634e Mon Sep 17 00:00:00 2001 From: Deepesh Kumar Date: Fri, 16 Aug 2024 10:03:40 +0000 Subject: [PATCH] feat: [CDE-177]: Fixes for delete and open vscode (#2523) * feat: [CDE-177]: Fix lint issues * feat: [CDE-177]: Fixes for delete and open vscode * feat: [CDE-177]: Fixes for delete and open vscode --- web/restful-react.config.js | 6 +- .../GitnessRepoImportForm.module.scss | 6 ++ .../GitnessRepoImportForm.module.scss.d.ts | 1 + .../GitnessRepoImportForm.tsx | 19 ++++++- .../GitspaceListing/ListGitspaces.tsx | 57 ++++++++++++++----- .../cde-gitness/hooks/useDeleteGitspaces.tsx | 4 +- .../pages/GitspaceDetails/GitspaceDetails.tsx | 43 +++++++++++--- 7 files changed, 105 insertions(+), 31 deletions(-) diff --git a/web/restful-react.config.js b/web/restful-react.config.js index e3134f4aa..a650bc5b8 100644 --- a/web/restful-react.config.js +++ b/web/restful-react.config.js @@ -22,11 +22,11 @@ const customGenerator = require('./scripts/swagger-custom-generator.js') module.exports = { code: { - output: 'src/services/cde/index.tsx', - file: 'src/services/cde/swagger.yaml', + output: 'src/services/code/index.tsx', + file: 'src/services/code/swagger.yaml', customImport: `import { getConfig } from "../config";`, customProps: { - base: `{getConfig("cde/api/v1")}` + base: `{getConfig("code/api/v1")}` } } } diff --git a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss index 7e4395073..038be29f6 100644 --- a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss +++ b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss @@ -6,3 +6,9 @@ padding: var(--spacing-large) !important; background-color: var(--grey-50) !important; } + +.repoIcon { + path { + fill: none !important; + } +} diff --git a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss.d.ts b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss.d.ts index 9836ccf91..121bd5b02 100644 --- a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss.d.ts +++ b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.module.scss.d.ts @@ -18,3 +18,4 @@ // This is an auto-generated file export declare const noReposContainer: string export declare const repoAndBranch: string +export declare const repoIcon: string diff --git a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.tsx b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.tsx index 20b35ea5f..48efdccba 100644 --- a/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.tsx +++ b/web/src/cde-gitness/components/GitnessRepoImportForm/GitnessRepoImportForm.tsx @@ -4,6 +4,7 @@ import { Button, ButtonVariation, Container, ExpandingSearchInput, Layout, Text import { Menu, MenuItem } from '@blueprintjs/core' import { Color } from '@harnessio/design-system' import { Icon } from '@harnessio/icons' +import { Repository } from 'iconoir-react' import { useFormikContext } from 'formik' import type { TypesRepository } from 'services/code' import { useGetSpaceParam } from 'hooks/useGetSpaceParam' @@ -17,14 +18,26 @@ import { EnumGitspaceCodeRepoType } from 'cde-gitness/constants' import { GitspaceSelect } from '../GitspaceSelect/GitspaceSelect' import css from './GitnessRepoImportForm.module.scss' -const RepositoryText = ({ repoList, value }: { repoList: TypesRepository[] | null; value?: string }) => { +const RepositoryText = ({ + repoList, + value, + isCDE +}: { + repoList: TypesRepository[] | null + value?: string + isCDE?: boolean +}) => { const { getString } = useStrings() const repoMetadata = repoList?.find(repo => repo.git_url === value) const repoName = repoMetadata?.path return ( - + {isCDE ? ( + + ) : ( + + )} {repoName ? ( @@ -127,7 +140,7 @@ export const GitnessRepoImportForm = ({ isCDE }: { isCDE?: boolean }) => { loading={loading} formikName="code_repo_url" formInputClassName={css.repoAndBranch} - text={} + text={} tooltipProps={{ onClose: () => { setRepoSearch('') diff --git a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx index c00120027..63826a59e 100644 --- a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx +++ b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx @@ -120,6 +120,8 @@ export const getStatusText = (getString: UseStringsReturn['getString'], status?: return getString('cde.listing.starting') case GitspaceStatus.STOPPING: return getString('cde.listing.stopping') + case GitspaceStatus.UNINITIALIZED: + return GitspaceStatus.UNINITIALIZED.toLowerCase() default: return getString('cde.listing.offline') } @@ -356,12 +358,27 @@ const ActionMenu = ({ const { instance, ide, identifier = '', space_path = '', state } = data const { url = '' } = instance || {} const history = useHistory() - const { routes } = useAppContext() - const pathparamsList = space_path?.split('/') || [] - const projectIdentifier = pathparamsList[pathparamsList.length - 1] || '' + const { routes, standalone } = useAppContext() + const [accountIdentifier, orgIdentifier, projectIdentifier] = space_path?.split('/') || [] 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]) + return ( { export const RenderActions = ({ row, refreshList }: RenderActionsProps) => { const { getString } = useStrings() const history = useHistory() - const { routes } = useAppContext() + const { routes, standalone } = useAppContext() const { showError, showSuccess } = useToaster() const details = row.original const { identifier, name, space_path } = details @@ -583,7 +615,7 @@ export const RenderActions = ({ row, refreshList }: RenderActionsProps) => { try { e.preventDefault() e.stopPropagation() - await deleteGitspace(identifier || '') + await deleteGitspace(standalone ? {} : identifier || '') showSuccess(getString('cde.deleteSuccess')) await refreshList() } catch (exception) { @@ -729,17 +761,14 @@ export const ListGitspaces = ({ data, refreshList }: { data: TypesGitspaceConfig className={standalone ? css.table : css.cdeTable} onRowClick={row => { - // const pathparamsList = row?.space_path?.split('/') || [] - // const projectIdentifier = pathparamsList[pathparamsList.length - 1] || '' - const [accountIdentifier, orgIdentifier, projectIdentifier] = row?.space_path?.split('/') || [] if (row?.state === GitspaceStatus.RUNNING) { if (row?.ide === IDEType.VSCODE) { - window.open( - `vscode://harness-inc.oss-gitspaces/${projectIdentifier}/${row?.identifier}?gitness`, - '_blank' - ) + const params = standalone ? '?gitness' : '' + const vscodeExtensionCode = standalone ? 'harness-inc.oss-gitspaces' : 'harness-inc.gitspaces' + const vsCodeURL = `vscode://${vscodeExtensionCode}/${projectIdentifier}/${row?.identifier}${params}` + window.open(vsCodeURL, '_blank') } else { if (standalone) { window.open(row?.instance?.url || '', '_blank') diff --git a/web/src/cde-gitness/hooks/useDeleteGitspaces.tsx b/web/src/cde-gitness/hooks/useDeleteGitspaces.tsx index 057305c21..54400de98 100644 --- a/web/src/cde-gitness/hooks/useDeleteGitspaces.tsx +++ b/web/src/cde-gitness/hooks/useDeleteGitspaces.tsx @@ -1,14 +1,14 @@ import { useMutate } from 'restful-react' import { useGetCDEAPIParams } from 'cde-gitness/hooks/useGetCDEAPIParams' import { useAppContext } from 'AppContext' -import { DeleteGitspacePathParams, useDeleteGitspace, UsererrorError } from 'services/cde' +import { useDeleteGitspace } from 'services/cde' export const useDeleteGitspaces = ({ gitspaceId }: { gitspaceId: string }) => { const { standalone } = useAppContext() const { accountIdentifier = '', orgIdentifier = '', projectIdentifier = '', space } = useGetCDEAPIParams() - const gitness = useMutate({ + const gitness = useMutate({ verb: 'DELETE', path: `/api/v1/gitspaces/${space}/${gitspaceId}/+` }) diff --git a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx b/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx index 87cd5dc6f..2a9254dac 100644 --- a/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx +++ b/web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx @@ -39,6 +39,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 ContainerLogs from '../../components/ContainerLogs/ContainerLogs' import { useGetLogStream } from '../../hooks/useGetLogStream' import css from './GitspaceDetails.module.scss' @@ -46,7 +47,7 @@ import css from './GitspaceDetails.module.scss' const GitspaceDetails = () => { const space = useGetSpaceParam() const { getString } = useStrings() - const { routes } = useAppContext() + const { routes, standalone } = useAppContext() const { showError, showSuccess } = useToaster() const history = useHistory() const [startTriggred, setStartTriggred] = useState(false) @@ -148,7 +149,7 @@ const GitspaceDetails = () => { try { e.preventDefault() e.stopPropagation() - await deleteGitspace(gitspaceId) + await deleteGitspace(standalone ? {} : gitspaceId || '') showSuccess(getString('cde.deleteSuccess')) history.push(routes.toCDEGitspaces({ space })) } catch (exception) { @@ -158,6 +159,24 @@ 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]) + return ( <> { e.preventDefault() e.stopPropagation() if (data?.ide === StandaloneIDEType.VSCODE) { - const pathparamsList = data?.space_path?.split('/') || [] - const projectIdentifier = pathparamsList[pathparamsList.length - 1] || '' - window.open( - `vscode://harness-inc.oss-gitspaces/${projectIdentifier}/${data?.identifier}?gitness`, - '_blank' - ) + const params = standalone ? '?gitness' : '' + const vscodeExtensionCode = standalone ? 'harness-inc.oss-gitspaces' : 'harness-inc.gitspaces' + const vsCodeURL = `vscode://${vscodeExtensionCode}/${projectIdentifier}/${data?.identifier}${params}` + window.open(vsCodeURL, '_blank') } else { - window.open(data?.instance?.url || '', '_blank') + setSelectedRowUrl(data?.instance?.url || '') + refetchToken({ + pathParams: { + accountIdentifier, + projectIdentifier, + orgIdentifier, + gitspace_identifier: data?.identifier || '' + } + }) } }}> {data?.ide === StandaloneIDEType.VSCODE && getString('cde.details.openEditor')}