feat: [CDE-402]: SSH Key validation for create new gitspace flow (#2892)

* Added the formInput for custom render
* Used yup inbuilt conditional validator instead of manual validation
* Fixed code formatting issue
* Fixed lint issues
* SSH Key validation for create new gitspace flow

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

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useRef, useState } from 'react'
 import { PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
-import { Container, Layout, Button, ButtonVariation } from '@harnessio/uicore'
+import { Container, Layout, Button, ButtonVariation, FormInput } from '@harnessio/uicore'
 import css from './CDECustomDropdown.module.scss'
 
 interface CDECustomDropdownProps {
@@ -24,9 +24,16 @@ interface CDECustomDropdownProps {
   label: React.ReactNode
   menu: React.ReactNode
   overridePopOverWidth?: boolean
+  formikName?: string
 }
 
-export const CDECustomDropdown = ({ label, menu, leftElement, overridePopOverWidth }: CDECustomDropdownProps) => {
+export const CDECustomDropdown = ({
+  label,
+  menu,
+  leftElement,
+  overridePopOverWidth,
+  formikName = ''
+}: CDECustomDropdownProps) => {
   const buttonRef = useRef<HTMLDivElement | null>(null)
   const [popoverWidth, setPopoverWidth] = useState(0)
 
@@ -43,25 +50,32 @@ export const CDECustomDropdown = ({ label, menu, leftElement, overridePopOverWid
     <Layout.Horizontal className={css.main}>
       <Container width="70%">{leftElement}</Container>
       <Container width="30%" ref={buttonRef}>
-        <Button
-          height="45px"
-          width="100%"
-          className={css.button}
-          text={label}
-          rightIcon={'chevron-down'}
-          variation={ButtonVariation.TERTIARY}
-          iconProps={{ size: 14 }}
-          tooltipProps={{
-            fill: true,
-            interactionKind: PopoverInteractionKind.CLICK,
-            position: PopoverPosition.BOTTOM_RIGHT,
-            popoverClassName: css.popover
+        <FormInput.CustomRender
+          name={formikName || ''}
+          render={() => {
+            return (
+              <Button
+                height="45px"
+                width="100%"
+                className={css.button}
+                text={label}
+                rightIcon={'chevron-down'}
+                variation={ButtonVariation.TERTIARY}
+                iconProps={{ size: 14 }}
+                tooltipProps={{
+                  fill: true,
+                  interactionKind: PopoverInteractionKind.CLICK,
+                  position: PopoverPosition.BOTTOM_RIGHT,
+                  popoverClassName: css.popover
+                }}
+                tooltip={
+                  <Container className={css.listContainer} width={overridePopOverWidth ? '100%' : popoverWidth}>
+                    {menu}
+                  </Container>
+                }
+              />
+            )
           }}
-          tooltip={
-            <Container className={css.listContainer} width={overridePopOverWidth ? '100%' : popoverWidth}>
-              {menu}
-            </Container>
-          }
         />
       </Container>
     </Layout.Horizontal>

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

@@ -219,6 +219,7 @@ export const CDESSHSelect = () => {
       label={
         <Text icon={loading ? 'loading' : undefined}>{values?.ssh_token_identifier || '-- Select SSH Key --'}</Text>
       }
+      formikName="ssh_token_identifier"
       menu={
         <Menu>
           <Container border={{ bottom: true }}>

web/src/cde-gitness/pages/GitspaceCreate/GitspaceCreate.utils.ts

@@ -16,6 +16,7 @@
 
 import * as yup from 'yup'
 import type { UseStringsReturn } from 'framework/strings'
+import { IDEType } from 'cde-gitness/constants'
 
 export const validateGitnessForm = (getString: UseStringsReturn['getString']) =>
   yup.object().shape({
@@ -24,5 +25,9 @@ export const validateGitnessForm = (getString: UseStringsReturn['getString']) =>
     identifier: yup.string().trim().required(),
     ide: yup.string().trim().required(),
     resource_identifier: yup.string().trim().required(getString('cde.machineValidationMessage')),
-    name: yup.string().trim().required()
+    name: yup.string().trim().required(),
+    ssh_token_identifier: yup.string().when('ide', {
+      is: IDEType.VSCODE,
+      then: yup.string().required(getString('cde.sshValidationMessage'))
+    })
   })

web/src/cde-gitness/strings/strings.en.yaml

@@ -37,6 +37,7 @@ regionValidationMessage: Region is required
 repoValidationMessage: Repository is required
 branchValidationMessage: Branch is required
 machineValidationMessage: Machine Type is required
+sshValidationMessage: SSH Key is required
 startingGitspace: Starting Gitspace
 stopingGitspace: Stopping Gitspace
 sessionDuration: Last Started

web/src/framework/strings/stringTypes.ts

@@ -1325,6 +1325,7 @@ export interface StringsMap {
   'cde.sshSelect.90days': string
   'cde.sshSelect.deleteToken': string
   'cde.sshSelect.noexpiration': string
+  'cde.sshValidationMessage': string
   'cde.startingGitspace': string
   'cde.status': string
   'cde.stopingGitspace': string