Skip to content

Commit

Permalink
feat: Fixed aligment issue in CDE (harness#2175)
Browse files Browse the repository at this point in the history 
* feat: Fixed aligment issue in CDE
  • Loading branch information
@deepesh-ui
deepesh-ui authored and Harness committed Jul 8, 2024
1 parent 5427130 commit 0fffff1
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 151 deletions.
116 changes: 59 additions & 57 deletions web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -59,68 +59,70 @@ export const SelectMachine = ({ options, defaultValue }: SelectMachineInterface)
})

useEffect(() => {
if (defaultValue && gitspaceId) {
if (defaultValue && !gitspaceId) {
onChange('infra_provider_resource_id', defaultValue.id)
}
}, [defaultValue?.id, gitspaceId])

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>
)
}
96 changes: 49 additions & 47 deletions web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
)
}
96 changes: 49 additions & 47 deletions web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}

0 comments on commit 0fffff1

Please sign in to comment.