feat: [CDE-87]: fixed start gitspace getting disabled (harness#2133)

ramccor · Jun 27, 2024 · d202b67 · d202b67
1 parent 62e5ae3
commit d202b67
Show file tree

Hide file tree

Showing 21 changed files with 514 additions and 285 deletions.
diff --git a/web/src/cde/components/CreateGitspace/CreateGitspace.tsx b/web/src/cde/components/CreateGitspace/CreateGitspace.tsx
@@ -33,7 +33,7 @@ import { SelectInfraProvider } from './components/SelectInfraProvider/SelectInfr
 import css from './CreateGitspace.module.scss'
 
 const initData = {
-  ide: IDEType.VSCODE
+  ide: IDEType.VSCODEWEB
 }
 
 const GitspaceForm = () => {
@@ -78,7 +78,7 @@ const GitspaceForm = () => {
           ? `${getString('cde.editGitspace')}  ${gitspaceData?.config?.name}`
           : getString('cde.createGitspace')}
       </Text>
-      <Formik<OpenapiCreateGitspaceRequest>
+      <Formik<OpenapiCreateGitspaceRequest & { validated?: boolean }>
         onSubmit={async data => {
           try {
             if (gitspaceId) {
@@ -101,18 +101,18 @@ const GitspaceForm = () => {
         formLoading={loadingGitspace || updatingGitspace}
         enableReinitialize
         formName={'createGitSpace'}
-        initialValues={formInitialData}
+        initialValues={{ ...formInitialData, validated: false }}
         validateOnMount={false}
         validationSchema={yup.object().shape({
-          branch: yup.string().trim().required(),
-          code_repo_type: yup.string().trim().required(),
-          code_repo_url: yup.string().trim().required(),
+          branch: yup.string().trim().required(getString('cde.branchValidationMessage')),
+          code_repo_type: yup.string().trim().required(getString('cde.repoValidationMessage')),
+          code_repo_url: yup.string().trim().required(getString('cde.repoValidationMessage')),
           id: yup.string().trim().required(),
           ide: yup.string().trim().required(),
-          infra_provider_resource_id: yup.string().trim().required(),
+          infra_provider_resource_id: yup.string().trim().required(getString('cde.machineValidationMessage')),
           name: yup.string().trim().required(),
           metadata: yup.object().shape({
-            region: yup.string().trim().required()
+            region: yup.string().trim().required(getString('cde.regionValidationMessage'))
           })
         })}>
         {_ => {

diff --git a/web/src/cde/components/CreateGitspace/components/SelectIDE/SelectIDE.tsx b/web/src/cde/components/CreateGitspace/components/SelectIDE/SelectIDE.tsx
@@ -42,12 +42,10 @@ export const SelectIDE = () => {
           <img src={VSCode} height={20} width={20} style={{ marginRight: '12px' }} />
           <Layout.Vertical>
             <Text font={ide ? 'small' : 'normal'}>
-              {ide ? getString('cde.ide.ide') : getString('cde.ide.selectIDE')}
+              {ide ? getString('cde.ide.title') : getString('cde.ide.selectIDE')}
             </Text>
             {ide && (
-              <Text font={{ size: 'normal', weight: 'bold' }}>
-                {`${getString('cde.ide.vsCode')} ${IDELabel}` || getString('cde.ide.ide')}
-              </Text>
+              <Text font={{ size: 'normal', weight: 'bold' }}>{`${IDELabel}` || getString('cde.ide.title')}</Text>
             )}
           </Layout.Vertical>
         </Layout.Horizontal>

diff --git a/web/src/cde/components/CreateGitspace/components/SelectInfraProvider/SelectInfraProvider.tsx b/web/src/cde/components/CreateGitspace/components/SelectInfraProvider/SelectInfraProvider.tsx
@@ -20,17 +20,15 @@ import { Layout } from '@harnessio/uicore'
 import { useFormikContext } from 'formik'
 import { useParams } from 'react-router-dom'
 import { CDEPathParams, useGetCDEAPIParams } from 'cde/hooks/useGetCDEAPIParams'
-import { OpenapiCreateGitspaceRequest, useListInfraProviderResources } from 'services/cde'
+import { OpenapiCreateGitspaceRequest, useListInfraProviderResourcesForAccount } from 'services/cde'
 import { SelectRegion } from '../SelectRegion/SelectRegion'
 import { SelectMachine } from '../SelectMachine/SelectMachine'
 
 export const SelectInfraProvider = () => {
   const { values, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
-  const { accountIdentifier, orgIdentifier, projectIdentifier } = useGetCDEAPIParams() as CDEPathParams
-  const { data } = useListInfraProviderResources({
+  const { accountIdentifier } = useGetCDEAPIParams() as CDEPathParams
+  const { data } = useListInfraProviderResourcesForAccount({
     accountIdentifier,
-    orgIdentifier,
-    projectIdentifier,
     infraProviderConfigIdentifier: 'HARNESS_GCP'
   })
 
@@ -41,7 +39,7 @@ export const SelectInfraProvider = () => {
   useEffect(() => {
     if (gitspaceId && values.infra_provider_resource_id && optionsList.length) {
       const match = optionsList.find(item => item.id === values.infra_provider_resource_id)
-      if (values?.metadata?.region !== values.infra_provider_resource_id) {
+      if (values?.metadata?.region !== match?.region) {
         onChange('metadata.region', match?.region?.toLowerCase())
       }
     }
@@ -60,8 +58,8 @@ export const SelectInfraProvider = () => {
 
   return (
     <Layout.Horizontal spacing="medium">
-      <SelectRegion options={regionOptions} disabled={!!gitspaceId} />
-      <SelectMachine options={machineOptions} />
+      <SelectRegion defaultValue={regionOptions?.[0]} options={regionOptions} disabled={!!gitspaceId} />
+      <SelectMachine options={machineOptions} defaultValue={machineOptions?.[0]} />
     </Layout.Horizontal>
   )
 }
diff --git a/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx b/web/src/cde/components/CreateGitspace/components/SelectMachine/SelectMachine.tsx
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { useEffect } from 'react'
 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 { useParams } from 'react-router-dom'
 import { GitspaceSelect } from 'cde/components/GitspaceSelect/GitspaceSelect'
 import type { OpenapiCreateGitspaceRequest, TypesInfraProviderResourceResponse } from 'services/cde'
 import { useStrings } from 'framework/strings'
@@ -37,12 +38,14 @@ export const labelToMachineId = {
 
 interface SelectMachineInterface {
   options: TypesInfraProviderResourceResponse[]
+  defaultValue: TypesInfraProviderResourceResponse
 }
 
-export const SelectMachine = ({ options }: SelectMachineInterface) => {
+export const SelectMachine = ({ options, defaultValue }: SelectMachineInterface) => {
   const { getString } = useStrings()
   const { values, errors, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
   const { infra_provider_resource_id: machine } = values
+  const { gitspaceId = '' } = useParams<{ gitspaceId?: string }>()
 
   const machineTypes = options.map(item => {
     const { cpu, disk, memory, id, name } = item
@@ -55,15 +58,24 @@ export const SelectMachine = ({ options }: SelectMachineInterface) => {
     }
   })
 
+  useEffect(() => {
+    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'}>
-          <Cpu />
-          <Text font={'normal'}>{data.label || getString('cde.machine')}</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}

diff --git a/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx b/web/src/cde/components/CreateGitspace/components/SelectRegion/SelectRegion.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Map } from 'iconoir-react'
@@ -31,6 +31,7 @@ import Empty from './assests/Empty.png'
 
 interface SelectRegionInterface {
   disabled?: boolean
+  defaultValue: { label: string; value: TypesInfraProviderResourceResponse[] }
   options: { label: string; value: TypesInfraProviderResourceResponse[] }[]
 }
 
@@ -49,20 +50,33 @@ export const getMapFromRegion = (region: string) => {
   }
 }
 
-export const SelectRegion = ({ options, disabled }: SelectRegionInterface) => {
+export const SelectRegion = ({ options, disabled, defaultValue }: SelectRegionInterface) => {
   const { getString } = useStrings()
-  const { values, errors, setFieldValue: onChange } = useFormikContext<OpenapiCreateGitspaceRequest>()
-  const { metadata } = values
+  const {
+    values: { metadata },
+    errors,
+    setFieldValue: onChange
+  } = useFormikContext<OpenapiCreateGitspaceRequest>()
   const [regionState, setRegionState] = useState<string | undefined>(metadata?.region)
 
+  useEffect(() => {
+    if (!regionState && !disabled) {
+      setRegionState(defaultValue?.label?.toLowerCase())
+      onChange('metadata.region', defaultValue?.label?.toLowerCase())
+    }
+  }, [defaultValue?.label?.toLowerCase()])
+
   return (
     <GitspaceSelect
       disabled={disabled}
       overridePopOverWidth
       text={
-        <Layout.Horizontal spacing={'small'}>
-          <Map />
-          <Text font={'normal'}>{metadata?.region || getString('cde.region')}</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"
@@ -84,6 +98,7 @@ export const SelectRegion = ({ options, disabled }: SelectRegionInterface) => {
                   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)

diff --git a/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx b/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.tsx
@@ -27,7 +27,7 @@ import { OpenapiCreateGitspaceRequest, OpenapiGetCodeRepositoryResponse, useGetC
 import { GitspaceSelect } from 'cde/components/GitspaceSelect/GitspaceSelect'
 import { useStrings } from 'framework/strings'
 import { CodeRepoAccessType } from 'cde/constants'
-import { getIconByRepoType, getRepoNameFromURL, isValidUrl } from './SelectRepository.utils'
+import { getIconByRepoType, getRepoIdFromURL, getRepoNameFromURL, isValidUrl } from './SelectRepository.utils'
 import css from './SelectRepository.module.scss'
 
 const RepositoryText = ({ repoURL }: { repoURL?: string }) => {
@@ -75,13 +75,13 @@ const SelectRepositoryCard = ({
             className={css.metadataItem}
             onClick={() => {
               onChange((prv: any) => {
-                const repoId = getRepoNameFromURL(data?.url)
+                const repoId = getRepoIdFromURL(data?.url)
                 return {
                   ...prv,
                   values: {
                     ...prv.values,
                     id: `${repoId}`,
-                    name: `${repoId}`?.toLowerCase(),
+                    name: getRepoNameFromURL(data?.url),
                     code_repo_url: data?.url || '',
                     code_repo_type: data?.repo_type || '',
                     code_repo_id: repoId,
@@ -178,7 +178,7 @@ export const SelectRepository = ({ disabled }: { disabled?: boolean }) => {
                 rightElementProps={{ size: 16, className: css.loadingIcon }}
                 rightElement={loading ? 'loading' : undefined}
                 className={css.urlInput}
-                placeholder="e.g https://github.com/orkohunter/idp"
+                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)

diff --git a/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.utils.tsx b/web/src/cde/components/CreateGitspace/components/SelectRepository/SelectRepository.utils.tsx
@@ -15,7 +15,7 @@ export const isValidUrl = (url: string) => {
   return !!urlPattern.test(url)
 }
 
-export const getRepoNameFromURL = (repoURL?: string) => {
+export const getRepoIdFromURL = (repoURL?: string) => {
   const repoURLSplit = repoURL?.split('/')
   return repoURLSplit?.[repoURLSplit?.length - 1]
     ?.replace(/-/g, '')
@@ -24,6 +24,11 @@ export const getRepoNameFromURL = (repoURL?: string) => {
     ?.toLowerCase()
 }
 
+export const getRepoNameFromURL = (repoURL?: string) => {
+  const repoURLSplit = repoURL?.split('/')
+  return repoURLSplit?.[repoURLSplit?.length - 1]
+}
+
 export enum CodeRepoType {
   Github = 'github',
   Gitlab = 'gitlab',

diff --git a/web/src/cde/components/GitspaceDetails/GitspaceDetails.module.scss b/web/src/cde/components/GitspaceDetails/GitspaceDetails.module.scss
@@ -24,6 +24,10 @@
   border-radius: var(--spacing-small);
 }
 
+.repository {
+  cursor: pointer !important;
+}
+
 .popover {
   > div[class*='popover-arrow'] {
     display: none;

diff --git a/web/src/cde/components/GitspaceDetails/GitspaceDetails.module.scss.d.ts b/web/src/cde/components/GitspaceDetails/GitspaceDetails.module.scss.d.ts
@@ -18,4 +18,5 @@
 // This is an auto-generated file
 export declare const detailsBar: string
 export declare const popover: string
+export declare const repository: string
 export declare const subText: string