From 0fffff14168d1602a5654e60c0a459618814276f Mon Sep 17 00:00:00 2001
From: Deepesh Kumar <deepesh.kumar@harness.io>
Date: Mon, 8 Jul 2024 04:10:46 +0000
Subject: [PATCH] feat: Fixed aligment issue in CDE (#2175)

* feat: Fixed aligment issue in CDE
---
 .../SelectMachine/SelectMachine.tsx           | 116 +++++++++---------
 .../components/SelectRegion/SelectRegion.tsx  |  96 ++++++++-------
 .../SelectRepository/SelectRepository.tsx     |  96 ++++++++-------
 3 files changed, 157 insertions(+), 151 deletions(-)

diff --git a/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx b/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx
index e17613e364..934faeb6d7 100644
--- a/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx
+++ b/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react'
-import { Layout, Text } from '@harnessio/uicore'
+import { Container, Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Cpu } from 'iconoir-react'
 import { useFormikContext } from 'formik'
@@ -59,7 +59,7 @@ export const SelectMachine = ({ options, defaultValue }: SelectMachineInterface)
   })
 
   useEffect(() => {
-    if (defaultValue && gitspaceId) {
+    if (defaultValue && !gitspaceId) {
       onChange('infra_provider_resource_id', defaultValue.id)
     }
   }, [defaultValue?.id, gitspaceId])
@@ -67,60 +67,62 @@ export const SelectMachine = ({ options, defaultValue }: SelectMachineInterface)
   const data = (machineTypes?.find(item => item.id === machine) || {}) as (typeof machineTypes)[0]
 
   return (
-    <GitspaceSelect
-      overridePopOverWidth
-      text={
-        <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
-          <Cpu height={20} width={20} style={{ marginRight: '12px', alignItems: 'center' }} />
-          <Layout.Vertical>
-            <Text font={'normal'}>{getString('cde.machine')}</Text>
-            <Text font={'normal'}>{data.label || getString('cde.machine')}</Text>
-          </Layout.Vertical>
-        </Layout.Horizontal>
-      }
-      errorMessage={errors.infra_provider_resource_id}
-      formikName="infra_provider_resource_id"
-      renderMenu={
-        <Layout.Horizontal padding={{ top: 'small', bottom: 'small' }}>
-          <Menu>
-            {machineTypes.length ? (
-              <>
-                {machineTypes.map(item => {
-                  return (
-                    <MenuItem
-                      key={item.id}
-                      active={values.infra_provider_resource_id === item.id}
-                      text={
-                        <Layout.Vertical>
-                          <Text font={{ size: 'normal', weight: 'bold' }}>{item.label?.toUpperCase()}</Text>
-                          <Layout.Horizontal spacing={'small'}>
-                            <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
-                              {getString('cde.cpu')}: {item.cpu?.toUpperCase()}
-                            </Text>
-                            <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
-                              {getString('cde.memory')}: {item.memory?.toUpperCase()}
-                            </Text>
-                            <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
-                              {getString('cde.disk')}: {item.disk?.toUpperCase()}
-                            </Text>
-                          </Layout.Horizontal>
-                        </Layout.Vertical>
-                      }
-                      onClick={() => {
-                        onChange('infra_provider_resource_id', item.id || '')
-                      }}
-                    />
-                  )
-                })}
-              </>
-            ) : (
-              <>
-                <Text font={{ size: 'normal', weight: 'bold' }}>{getString('cde.regionSelectWarning')}</Text>
-              </>
-            )}
-          </Menu>
-        </Layout.Horizontal>
-      }
-    />
+    <Container width={'50%'}>
+      <GitspaceSelect
+        overridePopOverWidth
+        text={
+          <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
+            <Cpu height={20} width={20} style={{ marginRight: '12px', alignItems: 'center' }} />
+            <Layout.Vertical>
+              <Text font={'normal'}>{getString('cde.machine')}</Text>
+              <Text font={'normal'}>{data.label || getString('cde.machine')}</Text>
+            </Layout.Vertical>
+          </Layout.Horizontal>
+        }
+        errorMessage={errors.infra_provider_resource_id}
+        formikName="infra_provider_resource_id"
+        renderMenu={
+          <Layout.Horizontal padding={{ top: 'small', bottom: 'small' }}>
+            <Menu>
+              {machineTypes.length ? (
+                <>
+                  {machineTypes.map(item => {
+                    return (
+                      <MenuItem
+                        key={item.id}
+                        active={values.infra_provider_resource_id === item.id}
+                        text={
+                          <Layout.Vertical>
+                            <Text font={{ size: 'normal', weight: 'bold' }}>{item.label?.toUpperCase()}</Text>
+                            <Layout.Horizontal spacing={'small'}>
+                              <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
+                                {getString('cde.cpu')}: {item.cpu?.toUpperCase()}
+                              </Text>
+                              <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
+                                {getString('cde.memory')}: {item.memory?.toUpperCase()}
+                              </Text>
+                              <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
+                                {getString('cde.disk')}: {item.disk?.toUpperCase()}
+                              </Text>
+                            </Layout.Horizontal>
+                          </Layout.Vertical>
+                        }
+                        onClick={() => {
+                          onChange('infra_provider_resource_id', item.id || '')
+                        }}
+                      />
+                    )
+                  })}
+                </>
+              ) : (
+                <>
+                  <Text font={{ size: 'normal', weight: 'bold' }}>{getString('cde.regionSelectWarning')}</Text>
+                </>
+              )}
+            </Menu>
+          </Layout.Horizontal>
+        }
+      />
+    </Container>
   )
 }
diff --git a/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx b/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx
index e4ffa4a2bf..34ed5e624f 100644
--- a/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx
+++ b/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { Layout, Text } from '@harnessio/uicore'
+import { Container, Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Map } from 'iconoir-react'
 import { useFormikContext } from 'formik'
@@ -67,51 +67,53 @@ export const SelectRegion = ({ options, disabled, defaultValue }: SelectRegionIn
   }, [defaultValue?.label?.toLowerCase()])
 
   return (
-    <GitspaceSelect
-      disabled={disabled}
-      overridePopOverWidth
-      text={
-        <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
-          <Map height={20} width={20} style={{ marginRight: '12px', alignItems: 'center' }} />
-          <Layout.Vertical>
-            <Text font={'normal'}>{getString('cde.region')}</Text>
-            <Text font={'normal'}>{metadata?.region || getString('cde.region')}</Text>
-          </Layout.Vertical>
-        </Layout.Horizontal>
-      }
-      formikName="metadata.region"
-      errorMessage={
-        (
-          errors['metadata'] as unknown as {
-            [key: string]: string
-          }
-        )?.region as unknown as string
-      }
-      renderMenu={
-        <Layout.Horizontal padding={{ top: 'small', bottom: 'small' }}>
-          <Menu>
-            {options.map(({ label }) => {
-              return (
-                <MenuItem
-                  key={label}
-                  active={label === regionState?.toLowerCase()}
-                  text={<Text font={{ size: 'normal', weight: 'bold' }}>{label.toUpperCase()}</Text>}
-                  onClick={() => {
-                    onChange('metadata.region', label.toLowerCase())
-                    onChange('infra_provider_resource_id', undefined)
-                  }}
-                  onMouseOver={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-                    setRegionState(e.currentTarget.innerText)
-                  }}
-                />
-              )
-            })}
-          </Menu>
-          <Menu>
-            <img src={getMapFromRegion(regionState?.toLowerCase() || '')} />
-          </Menu>
-        </Layout.Horizontal>
-      }
-    />
+    <Container width={'50%'}>
+      <GitspaceSelect
+        disabled={disabled}
+        overridePopOverWidth
+        text={
+          <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
+            <Map height={20} width={20} style={{ marginRight: '12px', alignItems: 'center' }} />
+            <Layout.Vertical>
+              <Text font={'normal'}>{getString('cde.region')}</Text>
+              <Text font={'normal'}>{metadata?.region || getString('cde.region')}</Text>
+            </Layout.Vertical>
+          </Layout.Horizontal>
+        }
+        formikName="metadata.region"
+        errorMessage={
+          (
+            errors['metadata'] as unknown as {
+              [key: string]: string
+            }
+          )?.region as unknown as string
+        }
+        renderMenu={
+          <Layout.Horizontal padding={{ top: 'small', bottom: 'small' }}>
+            <Menu>
+              {options.map(({ label }) => {
+                return (
+                  <MenuItem
+                    key={label}
+                    active={label === regionState?.toLowerCase()}
+                    text={<Text font={{ size: 'normal', weight: 'bold' }}>{label.toUpperCase()}</Text>}
+                    onClick={() => {
+                      onChange('metadata.region', label.toLowerCase())
+                      onChange('infra_provider_resource_id', undefined)
+                    }}
+                    onMouseOver={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+                      setRegionState(e.currentTarget.innerText)
+                    }}
+                  />
+                )
+              })}
+            </Menu>
+            <Menu>
+              <img src={getMapFromRegion(regionState?.toLowerCase() || '')} />
+            </Menu>
+          </Layout.Horizontal>
+        }
+      />
+    </Container>
   )
 }
diff --git a/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx b/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx
index 6c586437d4..aa49303985 100644
--- a/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx
+++ b/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx
@@ -149,53 +149,55 @@ export const SelectRepository = ({ disabled }: { disabled?: boolean }) => {
   )
 
   return (
-    <GitspaceSelect
-      text={<RepositoryText repoURL={code_repo_url} />}
-      icon={'code'}
-      errorMessage={errors.code_repo_url}
-      formikName="code_repo_url"
-      tooltipProps={{
-        onClose: () => {
-          setError(undefined)
-          setRepoMetadata(undefined)
+    <Container width={'63%'}>
+      <GitspaceSelect
+        text={<RepositoryText repoURL={code_repo_url} />}
+        icon={'code'}
+        errorMessage={errors.code_repo_url}
+        formikName="code_repo_url"
+        tooltipProps={{
+          onClose: () => {
+            setError(undefined)
+            setRepoMetadata(undefined)
+          }
+        }}
+        disabled={disabled}
+        renderMenu={
+          <Menu>
+            <Layout.Vertical
+              className={css.formContainer}
+              flex={{ justifyContent: 'center', alignItems: 'center' }}
+              spacing="small"
+              padding={'large'}>
+              <Text font={{ variation: FontVariation.CARD_TITLE }}>{getString('cde.repository.pasteRepo')}</Text>
+              <Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_450}>
+                {getString('cde.repository.pasterRepoSubtext')}
+              </Text>
+              <Container width={'100%'}>
+                <TextInput
+                  disabled={loading}
+                  rightElementProps={{ size: 16, className: css.loadingIcon }}
+                  rightElement={loading ? 'loading' : undefined}
+                  className={css.urlInput}
+                  placeholder="e.g https://github.com/microsoft/vscode-remote-try-python.git"
+                  onChange={async event => {
+                    const target = event.target as HTMLInputElement
+                    await onChange(target.value)
+                  }}
+                />
+                {error && <Text font={{ variation: FontVariation.FORM_MESSAGE_DANGER }}>{error}</Text>}
+                {Boolean(repoMetadata) && (
+                  <SelectRepositoryCard data={repoMetadata!} onChange={setFormikState} resetData={setRepoMetadata} />
+                )}
+              </Container>
+              <Text font={{ variation: FontVariation.FORM_LABEL }}>{getString('cde.or')}</Text>
+              <Text>
+                {getString('cde.noRepo')} <Link to={'#'}> {getString('cde.createRepo')} </Link>
+              </Text>
+            </Layout.Vertical>
+          </Menu>
         }
-      }}
-      disabled={disabled}
-      renderMenu={
-        <Menu>
-          <Layout.Vertical
-            className={css.formContainer}
-            flex={{ justifyContent: 'center', alignItems: 'center' }}
-            spacing="small"
-            padding={'large'}>
-            <Text font={{ variation: FontVariation.CARD_TITLE }}>{getString('cde.repository.pasteRepo')}</Text>
-            <Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_450}>
-              {getString('cde.repository.pasterRepoSubtext')}
-            </Text>
-            <Container width={'100%'}>
-              <TextInput
-                disabled={loading}
-                rightElementProps={{ size: 16, className: css.loadingIcon }}
-                rightElement={loading ? 'loading' : undefined}
-                className={css.urlInput}
-                placeholder="e.g https://github.com/microsoft/vscode-remote-try-python.git"
-                onChange={async event => {
-                  const target = event.target as HTMLInputElement
-                  await onChange(target.value)
-                }}
-              />
-              {error && <Text font={{ variation: FontVariation.FORM_MESSAGE_DANGER }}>{error}</Text>}
-              {Boolean(repoMetadata) && (
-                <SelectRepositoryCard data={repoMetadata!} onChange={setFormikState} resetData={setRepoMetadata} />
-              )}
-            </Container>
-            <Text font={{ variation: FontVariation.FORM_LABEL }}>{getString('cde.or')}</Text>
-            <Text>
-              {getString('cde.noRepo')} <Link to={'#'}> {getString('cde.createRepo')} </Link>
-            </Text>
-          </Layout.Vertical>
-        </Menu>
-      }
-    />
+      />
+    </Container>
   )
 }