feat: [CDE-275]: Log width overflow fixed (#2614)

* feat: [CDE-275]: Log width overflow fixed

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

@@ -140,6 +140,9 @@ export const CDEAnyGitImport = () => {
                 code_repo_type: values?.code_repo_type
               }
             })
+            if (!skipBranchUpdate) {
+              setSearchBranch(response.branch)
+            }
             setRepoCheckState(RepoCheckStatus.Valid)
           }
         }
@@ -161,13 +164,14 @@ export const CDEAnyGitImport = () => {
       <Layout.Horizontal spacing="medium">
         <Container width="63%" className={css.formFields}>
           <GitspaceSelect
+            hideMenu={isValidUrl(searchTerm)}
             text={
               <Container flex={{ alignItems: 'center' }} className={css.customTextInput}>
                 <Repository height={32} width={32} />
                 <TextInput
                   inputRef={ref => (repoRef.current = ref)}
                   value={searchTerm}
-                  placeholder="enter url or type reop name"
+                  placeholder="enter url or type repo name"
                   onChange={async event => {
                     const target = event.target as HTMLInputElement
                     setSearchTerm(target?.value?.trim() || '')
@@ -180,7 +184,7 @@ export const CDEAnyGitImport = () => {
             rightIcon={
               loading || repoLoading
                 ? 'loading'
-                : repoCheckState
+                : repoCheckState && isValidUrl(searchTerm)
                 ? repoCheckState === RepoCheckStatus.Valid
                   ? 'tick-circle'
                   : 'warning-sign'

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

@@ -160,7 +160,9 @@ export const CDESSHSelect = () => {
                     <Button variation={ButtonVariation.PRIMARY} type="submit">
                       Add Key
                     </Button>
-                    <Button variation={ButtonVariation.TERTIARY}>Cancel</Button>
+                    <Button onClick={hideModal} variation={ButtonVariation.TERTIARY}>
+                      Cancel
+                    </Button>
                   </Layout.Horizontal>
                 </FormikForm>
               )

web/src/cde-gitness/components/ContainerLogs/ContainerLogs.module.scss

@@ -67,6 +67,8 @@
 .stepLogContainer {
   padding: var(--spacing-small) !important;
   flex-shrink: 0;
+  width: 60%;
+  max-width: 800px !important;
 
   .consoleLine {
     color: var(--white);

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

@@ -66,8 +66,11 @@
 }
 
 .repositoryCell {
-  width: fit-content !important;
-  margin-right: var(--spacing-xxlarge) !important;
+  max-width: 70%;
+}
+
+.branchCell {
+  max-width: 30%;
 }
 
 .stopModal {

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

@@ -16,6 +16,7 @@
 
 /* eslint-disable */
 // This is an auto-generated file
+export declare const branchCell: string
 export declare const cdeTable: string
 export declare const gitspaceUrl: string
 export declare const listContainer: string

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

@@ -29,22 +29,12 @@ import React, { useEffect, useState } from 'react'
 import { Color } from '@harnessio/design-system'
 import type { Renderer, CellProps } from 'react-table'
 import ReactTimeago from 'react-timeago'
-import {
-  Circle,
-  Cpu,
-  Clock,
-  Play,
-  Db,
-  ModernTv,
-  GithubCircle,
-  GitLabFull,
-  Code,
-  Bitbucket as BitbucketIcon
-} from 'iconoir-react'
+import { Circle, Cpu, Clock, Play, Db, ModernTv } from 'iconoir-react'
 import { Intent, Menu, MenuItem, PopoverInteractionKind, Position } from '@blueprintjs/core'
 import { useHistory } from 'react-router-dom'
 import type { IconName } from '@harnessio/icons'
 import moment from 'moment'
+import { defaultTo } from 'lodash-es'
 import RegionIcon from 'cde-gitness/assests/globe.svg?url'
 import { UseStringsReturn, useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
@@ -62,29 +52,12 @@ import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import { useGitspaceActions } from 'cde-gitness/hooks/useGitspaceActions'
 import { useDeleteGitspaces } from 'cde-gitness/hooks/useDeleteGitspaces'
 import { useOpenVSCodeBrowserURL } from 'cde-gitness/hooks/useOpenVSCodeBrowserURL'
+import { scmOptions } from 'cde-gitness/pages/GitspaceCreate/CDECreateGitspace'
 import css from './ListGitspaces.module.scss'
 
-enum CodeRepoType {
-  Github = 'github',
-  Gitlab = 'gitlab',
-  HarnessCode = 'harness_code',
-  Bitbucket = 'bitbucket',
-  Unknown = 'unknown'
-}
-
 const getIconByRepoType = ({ repoType }: { repoType?: EnumGitspaceCodeRepoType }): React.ReactNode => {
-  switch (repoType) {
-    case CodeRepoType.Github:
-      return <GithubCircle height={24} width={24} />
-    case CodeRepoType.Gitlab:
-      return <GitLabFull height={24} width={24} />
-    case CodeRepoType.Bitbucket:
-      return <BitbucketIcon height={24} width={24} />
-    default:
-    case CodeRepoType.Unknown:
-    case CodeRepoType.HarnessCode:
-      return <Code height={24} width={24} />
-  }
+  const scmOption = scmOptions.find(option => option.value === repoType)
+  return <img height={24} width={24} src={defaultTo(scmOption?.icon, '')} style={{ marginRight: '10px' }} />
 }
 
 export const getStatusColor = (status?: EnumGitspaceStateType) => {
@@ -213,33 +186,38 @@ export const RenderRepository: Renderer<CellProps<TypesGitspaceConfig>> = ({ row
   return (
     <Layout.Horizontal
       spacing={'small'}
-      className={css.repositoryCell}
       flex={{ alignItems: 'center', justifyContent: 'start' }}
       onClick={e => {
         e.preventDefault()
         e.stopPropagation()
         window.open(code_repo_url, '_blank')
       }}>
-      <Container height={24} width={24}>
-        {getIconByRepoType({ repoType: code_repo_type })}
-      </Container>
-      <Container width="100%">
+      <Layout.Horizontal
+        className={css.repositoryCell}
+        spacing={'small'}
+        flex={{ alignItems: 'center', justifyContent: 'start' }}>
+        <Container height={24} width={24}>
+          {getIconByRepoType({ repoType: code_repo_type })}
+        </Container>
         <Text lineClamp={1} color={Color.PRIMARY_7} title={name} font={{ align: 'left', size: 'normal' }}>
           {name}
         </Text>
-      </Container>
-      <Text color={Color.PRIMARY_7}>:</Text>
-      <Container width="30%">
+      </Layout.Horizontal>
+      <Layout.Horizontal
+        className={css.branchCell}
+        spacing={'small'}
+        flex={{ alignItems: 'center', justifyContent: 'start' }}>
+        <Text color={Color.PRIMARY_7}>:</Text>
         <Text
           lineClamp={1}
           icon="git-branch"
           iconProps={{ size: 12 }}
           color={Color.PRIMARY_7}
-          title={name}
+          title={branch}
           font={{ align: 'left', size: 'normal' }}>
           {branch}
         </Text>
-      </Container>
+      </Layout.Horizontal>
     </Layout.Horizontal>
   )
 }

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

@@ -416,7 +416,7 @@ const GitspaceDetails = () => {
                 }
                 id="logsCard"
                 details={
-                  <Container>
+                  <Container width="100%">
                     <ContainerLogs data={standalone ? formattedlogsdata.data : responseData} />
                   </Container>
                 }