feat: [CDE-243]: Show username in listing page (#2552)

* feat: [CDE-243]: removed commented code
* feat: [CDE-243]: Show username in listing page

web/src/cde-gitness/components/CDEAnyGitImport/CDEAnyGitImport.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import cx from 'classnames'
 import { Container, FormikForm, FormInput, Layout } from '@harnessio/uicore'
 import { Color } from '@harnessio/design-system'
@@ -8,7 +8,6 @@ import { useFormikContext } from 'formik'
 import { Repository } from 'iconoir-react'
 import { useStrings } from 'framework/strings'
 import type { OpenapiCreateGitspaceRequest } from 'cde-gitness/services'
-import { EnumGitspaceCodeRepoType } from 'cde-gitness/constants'
 import { BranchInput } from 'cde-gitness/components/BranchInput/BranchInput'
 import { useRepoLookupForGitspace } from 'services/cde'
 import { useGetCDEAPIParams } from 'cde-gitness/hooks/useGetCDEAPIParams'
@@ -22,7 +21,7 @@ enum RepoCheckStatus {
 
 export const CDEAnyGitImport = () => {
   const { getString } = useStrings()
-  const { setValues, setFieldError } = useFormikContext<OpenapiCreateGitspaceRequest>()
+  const { setValues, setFieldError, values } = useFormikContext<OpenapiCreateGitspaceRequest>()
   const { accountIdentifier = '', orgIdentifier = '', projectIdentifier = '' } = useGetCDEAPIParams()
 
   const { mutate, loading } = useRepoLookupForGitspace({
@@ -33,12 +32,18 @@ export const CDEAnyGitImport = () => {
 
   const [repoCheckState, setRepoCheckState] = useState<RepoCheckStatus | undefined>()
 
+  useEffect(() => {
+    if (values?.code_repo_type) {
+      setRepoCheckState(undefined)
+    }
+  }, [values?.code_repo_type])
+
   const onChange = useCallback(
     debounce(async (url: string) => {
       let errorMessage = ''
       try {
         if (isValidUrl(url)) {
-          const response = (await mutate({ url, repo_type: EnumGitspaceCodeRepoType.UNKNOWN })) as {
+          const response = (await mutate({ url, repo_type: values?.code_repo_type })) as {
             is_private?: boolean
             branch: string
             url: string
@@ -54,7 +59,7 @@ export const CDEAnyGitImport = () => {
                 branch: response.branch,
                 identifier: getRepoIdFromURL(response.url),
                 name: getRepoNameFromURL(response.url),
-                code_repo_type: EnumGitspaceCodeRepoType.UNKNOWN
+                code_repo_type: values?.code_repo_type
               }
             })
             setRepoCheckState(RepoCheckStatus.Valid)
@@ -74,7 +79,7 @@ export const CDEAnyGitImport = () => {
       }
       setFieldError('code_repo_url', errorMessage)
     }, 1000),
-    [repoCheckState]
+    [repoCheckState, values?.code_repo_type]
   )
 
   return (

web/src/cde-gitness/components/GitspaceListing/ListGitspaces.module.scss

@@ -38,7 +38,7 @@
   div[class*='TableV2--cells'],
   div[class*='TableV2--header'] {
     display: grid !important;
-    grid-template-columns: 1fr 1fr 1fr 1fr 0.7fr 50px;
+    grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr 50px;
   }
 }
 

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

@@ -52,12 +52,7 @@ import { getErrorMessage } from 'utils/Utils'
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import VSCode from 'cde-gitness/assests/VSCode.svg?url'
 import { GitspaceActionType, GitspaceStatus } from 'cde-gitness/constants'
-import type {
+import type { EnumGitspaceStateType, EnumIDEType, TypesGitspaceConfig, EnumGitspaceCodeRepoType } from 'services/cde'
-  EnumGitspaceStateType,
-  EnumIDEType,
-  TypesGitspaceConfig,
-  EnumGitspaceCodeRepoType
-} from 'cde-gitness/services'
 import gitspaceIcon from 'cde-gitness/assests/gitspace.svg?url'
 import { useModalHook } from 'hooks/useModalHook'
 import pause from 'cde-gitness/assests/pause.svg?url'
@@ -194,16 +189,16 @@ export const RenderGitspaceName: Renderer<CellProps<TypesGitspaceConfig>> = ({ r
 }
 
 export const OwnerAndCreatedAt: Renderer<CellProps<TypesGitspaceConfig>> = ({ row }) => {
-  const { created } = row.original
+  const { user_email, user_display_name, created } = row.original
   return (
     <Layout.Vertical spacing="medium" flex={{ alignItems: 'start', justifyContent: 'center' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'center' }}>
-        <Avatar size="small" name="test" email="test@harness.io" />
+        <Avatar size="small" name={user_display_name} email={user_email} />
-        <Text font={{ size: 'small' }} color={Color.GREY_800}>
+        <Text lineClamp={1} font={{ size: 'small' }} color={Color.GREY_800}>
-          test@harness.io
+          {user_display_name}
         </Text>
       </Layout.Horizontal>
-      <Text font={{ size: 'small' }} color={Color.GREY_800}>
+      <Text margin={{ left: 'small' }} font={{ size: 'small' }} color={Color.GREY_800}>
         {moment(created).format('DD MMM, YYYY hh:mma')}
       </Text>
     </Layout.Vertical>

web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx

@@ -127,7 +127,16 @@ export const CDECreateGitspace = () => {
                               </Layout.Horizontal>
                             }
                             onClick={() => {
-                              formik.setFieldValue('code_repo_type', item.value)
+                              formik.setValues((prvValues: any) => {
+                                return {
+                                  ...prvValues,
+                                  code_repo_url: undefined,
+                                  branch: undefined,
+                                  identifier: undefined,
+                                  name: undefined,
+                                  code_repo_type: item.value
+                                }
+                              })
                             }}
                           />
                         ))}

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

@@ -333,6 +333,9 @@ const GitspaceDetails = () => {
                       const vscodeExtensionCode = standalone ? 'harness-inc.oss-gitspaces' : 'harness-inc.gitspaces'
                       const vsCodeURL = `vscode://${vscodeExtensionCode}/${projectIdentifier}/${data?.identifier}${params}`
                       window.open(vsCodeURL, '_blank')
+                    } else {
+                      if (standalone) {
+                        window.open(data?.instance?.url || '', '_blank')
                       } else {
                         setSelectedRowUrl(data?.instance?.url || '')
                         refetchToken({
@@ -344,6 +347,7 @@ const GitspaceDetails = () => {
                           }
                         })
                       }
+                    }
                   }}>
                   {data?.ide === StandaloneIDEType.VSCODE && getString('cde.details.openEditor')}
                   {data?.ide === StandaloneIDEType.VSCODEWEB && getString('cde.details.openBrowser')}

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

@@ -90,7 +90,7 @@ const GitspaceListing = () => {
               }}>
               {data?.length && (
                 <>
-                  <ListGitspaces data={data || []} refreshList={refetch} />
+                  <ListGitspaces data={(data as Unknown) || []} refreshList={refetch} />
                   <ResourceListingPagination response={response} page={page} setPage={setPage} />
                 </>
               )}