feat: [CDE-42]: Gitspace UI changes (#2078)

web/src/cde/components/CreateGitspace/CreateGitspace.tsx

@@ -16,12 +16,15 @@
 
 import React from 'react'
 import * as yup from 'yup'
-import { Button, ButtonVariation, Card, Formik, FormikForm, Layout, Text } from '@harnessio/uicore'
+import { Button, ButtonVariation, Card, Formik, FormikForm, Layout, Text, useToaster } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
-import { useCreateGitspace, type EnumCodeRepoType, type EnumIDEType } from 'services/cde'
+import { useHistory } from 'react-router-dom'
+import { useCreateGitspace, OpenapiCreateGitspaceRequest } from 'services/cde'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { useStrings } from 'framework/strings'
 import { IDEType } from 'cde/constants'
+import { useAppContext } from 'AppContext'
+import { getErrorMessage } from 'utils/Utils'
 import { SelectIDE } from './components/SelectIDE/SelectIDE'
 import { SelectRepository } from './components/SelectRepository/SelectRepository'
 import { BranchInput } from './components/BranchInput/BranchInput'
@@ -32,33 +35,53 @@ const initData = {
  ide: IDEType.VSCODE
 }
 
-export interface GitspaceFormInterface {
- ide?: EnumIDEType
- branch?: string
- codeRepoId?: string
- codeRepoUrl?: string
- codeRepoType?: EnumCodeRepoType
- region?: string
- infra_provider_resource_id?: string
-}
+const GitspaceForm = () => {
+ const { getString } = useStrings()
+ const { routes } = useAppContext()
+ const space = useGetSpaceParam()
+ const { showError } = useToaster()
+ const history = useHistory()
 
-interface GitspaceFormProps {
- onSubmit: (data: GitspaceFormInterface) => void
-}
+ const { mutate, loading, error } = useCreateGitspace({
+ accountIdentifier: space?.split('/')[0],
+ orgIdentifier: space?.split('/')[1],
+ projectIdentifier: space?.split('/')[2]
+ })
+
+ if (error) {
+ showError(getErrorMessage(error))
+ }
 
-const GitspaceForm = ({ onSubmit }: GitspaceFormProps) => {
- const { getString } = useStrings()
  return (
- <Formik<GitspaceFormInterface>
- onSubmit={async data => await onSubmit(data)}
+ <Formik<OpenapiCreateGitspaceRequest>
+ onSubmit={async data => {
+ try {
+ const createdGitspace = await mutate(data)
+ history.push(
+ `${routes.toCDEGitspaceDetail({
+ space,
+ gitspaceId: createdGitspace?.id || ''
+ })}?redirectFrom=login`
+ )
+ } catch (err) {
+ showError(getErrorMessage(err))
+ }
+ }}
  formName={'createGitSpace'}
  initialValues={initData}
+ validateOnMount={false}
  validationSchema={yup.object().shape({
- codeRepoId: yup.string().trim().required(),
  branch: yup.string().trim().required(),
+ code_repo_id: yup.string().trim().required(),
+ code_repo_type: yup.string().trim().required(),
+ code_repo_url: yup.string().trim().required(),
+ id: yup.string().trim().required(),
  ide: yup.string().trim().required(),
- region: yup.string().trim().required(),
- infra_provider_resource_id: yup.string().trim().required()
+ infra_provider_resource_id: yup.string().trim().required(),
+ name: yup.string().trim().required(),
+ metadata: yup.object().shape({
+ region: yup.string().trim().required()
+ })
  })}>
  {_ => {
  return (
@@ -70,7 +93,7 @@ const GitspaceForm = ({ onSubmit }: GitspaceFormProps) => {
  </Layout.Horizontal>
  <SelectIDE />
  <SelectInfraProvider />
- <Button variation={ButtonVariation.PRIMARY} height={50} type="submit">
+ <Button variation={ButtonVariation.PRIMARY} height={50} type="submit" loading={loading}>
  {getString('cde.createGitspace')}
  </Button>
  </Layout.Vertical>
@@ -82,20 +105,14 @@ const GitspaceForm = ({ onSubmit }: GitspaceFormProps) => {
 }
 
 export const CreateGitspace = () => {
- const space = useGetSpaceParam()
  const { getString } = useStrings()
- const { mutate } = useCreateGitspace({
- accountIdentifier: space?.split('/')[0],
- orgIdentifier: space?.split('/')[1],
- projectIdentifier: space?.split('/')[2]
- })
 
  return (
  <Card className={css.main}>
  <Text className={css.cardTitle} font={{ variation: FontVariation.CARD_TITLE }}>
  {getString('cde.createGitspace')}
  </Text>
- <GitspaceForm onSubmit={mutate} />
+ <GitspaceForm />
  </Card>
  )
 }

web/src/cde/components/CreateGitspace/components/SelectIDE/SelectIDE.tsx

@@ -21,16 +21,16 @@ import { useFormikContext } from 'formik'
 import { GitspaceSelect } from 'cde/components/GitspaceSelect/GitspaceSelect'
 import { useStrings, type UseStringsReturn } from 'framework/strings'
 import { IDEType } from 'cde/constants'
+import type { OpenapiCreateGitspaceRequest } from 'services/cde'
 import VSCode from '../../../../icons/VSCode.svg?url'
-import type { GitspaceFormInterface } from '../../CreateGitspace'
 
 export const getIDESelectItems = (getString: UseStringsReturn['getString']) => [
  { label: getString('cde.ide.desktop'), value: IDEType.VSCODE },
  { label: getString('cde.ide.browser'), value: IDEType.VSCODEWEB }
 ]
 
 export const SelectIDE = () => {
- const { values, errors, setFieldValue: onChange } = useFormikContext<GitspaceFormInterface>()
+ const { values, errors, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
  const { ide } = values
  const { getString } = useStrings()
  const IDESelectItems = getIDESelectItems(getString)

web/src/cde/components/CreateGitspace/components/SelectInfraProvider/SelectInfraProvider.tsx

@@ -19,13 +19,12 @@ import { defaultTo, isObject } from 'lodash-es'
 import { Layout } from '@harnessio/uicore'
 import { useFormikContext } from 'formik'
 import { CDEPathParams, useGetCDEAPIParams } from 'cde/hooks/useGetCDEAPIParams'
-import { useListInfraProviderResources } from 'services/cde'
-import type { GitspaceFormInterface } from 'cde/components/CreateGitspace/CreateGitspace'
+import { OpenapiCreateGitspaceRequest, useListInfraProviderResources } from 'services/cde'
 import { SelectRegion } from '../SelectRegion/SelectRegion'
 import { SelectMachine } from '../SelectMachine/SelectMachine'
 
 export const SelectInfraProvider = () => {
- const { values } = useFormikContext<GitspaceFormInterface>()
+ const { values } = useFormikContext<OpenapiCreateGitspaceRequest>()
  const { accountIdentifier, orgIdentifier, projectIdentifier } = useGetCDEAPIParams() as CDEPathParams
  const { data } = useListInfraProviderResources({
  accountIdentifier,
@@ -44,7 +43,7 @@ export const SelectInfraProvider = () => {
 
  const machineOptions =
  optionsList
- ?.filter(item => item?.region === values?.region)
+ ?.filter(item => item?.region === values?.metadata?.region)
  ?.map(item => {
  return { ...item }
  }) || []

web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.module.scss

@@ -0,0 +1,4 @@
+.tags {
+ background: var(--grey-100) !important;
+ border-radius: 10px;
+}

web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.module.scss.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http:https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const tags: string

web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx

@@ -19,16 +19,11 @@ import { Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Cpu } from 'iconoir-react'
 import { useFormikContext } from 'formik'
+import { FontVariation } from '@harnessio/design-system'
 import { GitspaceSelect } from 'cde/components/GitspaceSelect/GitspaceSelect'
-import type { TypesInfraProviderResourceResponse } from 'services/cde'
+import type { OpenapiCreateGitspaceRequest, TypesInfraProviderResourceResponse } from 'services/cde'
 import { useStrings } from 'framework/strings'
-import RAM8 from './assests/RAM8.svg?url'
-import RAM16 from './assests/RAM16.svg?url'
-import Storage32 from './assests/Storage32.svg?url'
-import Storage64 from './assests/Storage64.svg?url'
-import CPU4Cores from './assests/CPU4Cores.svg?url'
-import CPU8Cores from './assests/CPU8Cores.svg?url'
-import type { GitspaceFormInterface } from '../../CreateGitspace'
+import css from './SelectMachine.module.scss'
 
 export const machineIdToLabel = {
  '4core_8gb_32gb': 'Standard',
@@ -46,26 +41,30 @@ interface SelectMachineInterface {
 
 export const SelectMachine = ({ options }: SelectMachineInterface) => {
  const { getString } = useStrings()
- const { values, errors, setFieldValue: onChange } = useFormikContext<GitspaceFormInterface>()
+ const { values, errors, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
  const { infra_provider_resource_id: machine } = values
  const [machineState, setMachineState] = useState<string>(machine || '')
 
  const machineTypes = options.map(item => {
- const { cpu, disk, memory, infra_provider_config_id } = item
+ const { cpu, disk, memory, id, name } = item
  return {
- infra_provider_config_id,
- id: `${cpu}_${disk}_${memory}`,
- label: machineIdToLabel[`${cpu}_${disk}_${memory}` as keyof typeof machineIdToLabel]
+ id,
+ label: name,
+ cpu,
+ disk,
+ memory
  }
  })
 
+ const data = (machineTypes?.find(item => item.id === machine) || {}) as (typeof machineTypes)[0]
+
  return (
  <GitspaceSelect
  overridePopOverWidth
  text={
  <Layout.Horizontal spacing={'small'}>
  <Cpu />
- <Text font={'normal'}>{machine || getString('cde.machine')}</Text>
+ <Text font={'normal'}>{data.label || getString('cde.machine')}</Text>
  </Layout.Horizontal>
  }
  errorMessage={errors.infra_provider_resource_id}
@@ -76,15 +75,26 @@ export const SelectMachine = ({ options }: SelectMachineInterface) => {
  {machineTypes.map(item => {
  return (
  <MenuItem
- key={item.infra_provider_config_id}
+ key={item.id}
  active={machineState === item.id}
  text={
- <Text font={{ size: 'normal', weight: 'bold' }}>
- {machineIdToLabel[item.id as keyof typeof machineIdToLabel]}
- </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 }}>
+ Cpu: {item.cpu}
+ </Text>
+ <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
+ Disk: {item.disk}
+ </Text>
+ <Text padding={'small'} className={css.tags} font={{ variation: FontVariation.SMALL }}>
+ Memory: {item.memory}
+ </Text>
+ </Layout.Horizontal>
+ </Layout.Vertical>
  }
  onClick={() => {
- onChange('infra_provider_resource_id', item.infra_provider_config_id || '')
+ onChange('infra_provider_resource_id', item.id || '')
  }}
  onMouseOver={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
  const dd = e.currentTarget.innerText as keyof typeof labelToMachineId
@@ -94,26 +104,6 @@ export const SelectMachine = ({ options }: SelectMachineInterface) => {
  )
  })}
  </Menu>
- <Menu>
- {machineState === labelToMachineId.Standard && (
- <Layout.Vertical>
- <Layout.Horizontal>
- <img src={CPU4Cores} />
- <img src={RAM8} />
- </Layout.Horizontal>
- <img src={Storage32} />
- </Layout.Vertical>
- )}
- {machineState === labelToMachineId.Large && (
- <Layout.Vertical>
- <Layout.Horizontal>
- <img src={CPU8Cores} />
- <img src={RAM16} />
- </Layout.Horizontal>
- <img src={Storage64} />
- </Layout.Vertical>
- )}
- </Menu>
  </Layout.Horizontal>
  }
  />

web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx

@@ -22,33 +22,55 @@ import { useFormikContext } from 'formik'
 import { GitspaceSelect } from 'cde/components/GitspaceSelect/GitspaceSelect'
 import { useStrings } from 'framework/strings'
 import { GitspaceRegion } from 'cde/constants'
+import type { OpenapiCreateGitspaceRequest } from 'services/cde'
 import USWest from './assests/USWest.png'
 import USEast from './assests/USEast.png'
 import Australia from './assests/Aus.png'
 import Europe from './assests/Europe.png'
-import type { GitspaceFormInterface } from '../../CreateGitspace'
+import Empty from './assests/Empty.png'
 
 interface SelectRegionInterface {
  options: SelectOption[]
 }
 
+export const getMapFromRegion = (region: string) => {
+ switch (region) {
+ case GitspaceRegion.USEast:
+ return USEast
+ case GitspaceRegion.USWest:
+ return USWest
+ case GitspaceRegion.Europe:
+ return Europe
+ case GitspaceRegion.Australia:
+ return Australia
+ default:
+ return Empty
+ }
+}
+
 export const SelectRegion = ({ options }: SelectRegionInterface) => {
  const { getString } = useStrings()
- const { values, errors, setFieldValue: onChange } = useFormikContext<GitspaceFormInterface>()
- const { region = '' } = values
- const [regionState, setRegionState] = useState<string>(region)
+ const { values, errors, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
+ const { metadata } = values
+ const [regionState, setRegionState] = useState<string | undefined>(metadata?.region)
 
  return (
  <GitspaceSelect
  overridePopOverWidth
  text={
  <Layout.Horizontal spacing={'small'}>
  <Map />
- <Text font={'normal'}>{region || getString('cde.region')}</Text>
+ <Text font={'normal'}>{metadata?.region || getString('cde.region')}</Text>
  </Layout.Horizontal>
  }
- formikName="region"
- errorMessage={errors.region}
+ 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>
@@ -57,9 +79,9 @@ export const SelectRegion = ({ options }: SelectRegionInterface) => {
  <MenuItem
  key={label}
  active={label === regionState}
- text={<Text font={{ size: 'normal', weight: 'bold' }}>{label}</Text>}
+ text={<Text font={{ size: 'normal', weight: 'bold' }}>{label.toUpperCase()}</Text>}
  onClick={() => {
- onChange('region', label)
+ onChange('metadata.region', label.toLowerCase())
  }}
  onMouseOver={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
  setRegionState(e.currentTarget.innerText)
@@ -69,10 +91,7 @@ export const SelectRegion = ({ options }: SelectRegionInterface) => {
  })}
  </Menu>
  <Menu>
- {regionState === GitspaceRegion.USEast && <img src={USEast} />}
- {regionState === GitspaceRegion.USWest && <img src={USWest} />}
- {regionState === GitspaceRegion.Europe && <img src={Europe} />}
- {regionState === GitspaceRegion.Australia && <img src={Australia} />}
+ <img src={getMapFromRegion(regionState?.toLowerCase() || '')} />
  </Menu>
  </Layout.Horizontal>
  }