feat: [CDE-562]: IntelliJ Gateway UI changes (#3171)

* Fixed comments
* Swagger changes
* Lint issue fixed
* Updated the latest swagger and the types
* Resolved the comments
* Icon changes
* Swagger file updates
* Swagger file updates
* Swagger file updates
* Swagger file updates
* Merge branch 'main' of https://git0.harness.io/l7B_kbSEQD2wjrM7PShm5w/PROD/Harness_Commons/gitness into cde-562
* updated swagger file changes
* reverted back the service type change
* feat: changes for gitness
* IntelliJ UI changes

web/src/cde-gitness/assests/intellij.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".79" y1="40.089" x2="33.317" y2="40.089"><stop offset=".258" style="stop-color:#f97a12"/><stop offset=".459" style="stop-color:#b07b58"/><stop offset=".724" style="stop-color:#577bae"/><stop offset=".91" style="stop-color:#1e7ce5"/><stop offset="1" style="stop-color:#087cfa"/></linearGradient><path style="fill:url(#a)" d="M17.7 54.6.8 41.2l8.4-15.6L33.3 35z"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="25.767" y1="24.88" x2="79.424" y2="54.57"><stop offset="0" style="stop-color:#f97a12"/><stop offset=".072" style="stop-color:#cb7a3e"/><stop offset=".154" style="stop-color:#9e7b6a"/><stop offset=".242" style="stop-color:#757b91"/><stop offset=".334" style="stop-color:#537bb1"/><stop offset=".432" style="stop-color:#387ccc"/><stop offset=".538" style="stop-color:#237ce0"/><stop offset=".655" style="stop-color:#147cef"/><stop offset=".792" style="stop-color:#0b7cf7"/><stop offset="1" style="stop-color:#087cfa"/></linearGradient><path style="fill:url(#b)" d="m70 18.7-1.3 40.5L41.8 70 25.6 59.6 49.3 35 38.9 12.3l9.3-11.2z"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="63.228" y1="42.915" x2="48.29" y2="-1.719"><stop offset="0" style="stop-color:#fe315d"/><stop offset=".078" style="stop-color:#cb417e"/><stop offset=".16" style="stop-color:#9e4e9b"/><stop offset=".247" style="stop-color:#755bb4"/><stop offset=".339" style="stop-color:#5365ca"/><stop offset=".436" style="stop-color:#386ddb"/><stop offset=".541" style="stop-color:#2374e9"/><stop offset=".658" style="stop-color:#1478f3"/><stop offset=".794" style="stop-color:#0b7bf8"/><stop offset="1" style="stop-color:#087cfa"/></linearGradient><path style="fill:url(#c)" d="M70 18.7 48.7 43.9l-9.8-31.6 9.3-11.2z"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="10.72" y1="16.473" x2="55.524" y2="90.58"><stop offset="0" style="stop-color:#fe315d"/><stop offset=".04" style="stop-color:#f63462"/><stop offset=".104" style="stop-color:#df3a71"/><stop offset=".167" style="stop-color:#c24383"/><stop offset=".291" style="stop-color:#ad4a91"/><stop offset=".55" style="stop-color:#755bb4"/><stop offset=".917" style="stop-color:#1d76ed"/><stop offset="1" style="stop-color:#087cfa"/></linearGradient><path style="fill:url(#d)" d="M33.7 58.1 5.6 68.3l4.5-15.8L16 33.1 0 27.7 10.1 0l22 2.7 21.6 24.7z"/><path style="fill:#000" d="M13.7 13.5h43.2v43.2H13.7z"/><path style="fill:#fff" d="M17.7 48.6h16.2v2.7H17.7zM29.4 22.4v-3.3h-9v3.3H23v11.3h-2.6V37h9v-3.3h-2.5V22.4zM38 37.3c-1.4 0-2.6-.3-3.5-.8-.9-.5-1.7-1.2-2.3-1.9l2.5-2.8c.5.6 1 1 1.5 1.3.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.8-.7.4-.5.6-1.2.6-2.3V19.1h4v11.7c0 1.1-.1 2-.4 2.8-.3.8-.7 1.4-1.3 2-.5.5-1.2 1-2 1.2-.8.3-1.6.5-2.6.5"/></svg>

web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.module.scss

@@ -44,10 +44,6 @@
   }
 }
 
-.buttonIcon {
-  margin-right: var(--spacing-medium);
-}
-
 .popover {
   > div[class*='popover-arrow'] {
     display: none;

web/src/cde-gitness/components/CDEIDESelect/CDEIDESelect.module.scss.d.ts

@@ -17,7 +17,6 @@
 /* eslint-disable */
 // This is an auto-generated file
 export declare const button: string
-export declare const buttonIcon: string
 export declare const listContainer: string
 export declare const main: string
 export declare const popover: string

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

@@ -18,12 +18,9 @@ import React from 'react'
 import { Layout, Text } from '@harnessio/uicore'
 import { Menu, MenuItem } from '@blueprintjs/core'
 import { Code } from 'iconoir-react'
-import { IDEType } from 'cde-gitness/constants'
+import { getIDETypeOptions } from 'cde-gitness/constants'
-import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
-import vscodeIcon from 'cde-gitness/assests/VSCode.svg?url'
 import { useStrings } from 'framework/strings'
 import { CDECustomDropdown } from '../CDECustomDropdown/CDECustomDropdown'
-import css from './CDEIDESelect.module.scss'
 
 export const CDEIDESelect = ({
   onChange,
@@ -33,21 +30,9 @@ export const CDEIDESelect = ({
   selectedIde?: string
 }) => {
   const { getString } = useStrings()
+  const ideOptions = getIDETypeOptions(getString) ?? []
 
-  const ideOptions = [
+  const { label, icon }: any = ideOptions.find(item => item.value === selectedIde) || {}
-    {
-      label: getString('cde.ide.desktop'),
-      value: IDEType.VSCODE,
-      img: vscodeIcon
-    },
-    {
-      label: getString('cde.ide.browser'),
-      value: IDEType.VSCODEWEB,
-      img: vsCodeWebIcon
-    }
-  ]
-
-  const { label, img } = ideOptions.find(item => item.value === selectedIde) || {}
 
   return (
     <CDECustomDropdown
@@ -61,8 +46,8 @@ export const CDEIDESelect = ({
         </Layout.Horizontal>
       }
       label={
-        <Layout.Horizontal width="100%" flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
+        <Layout.Horizontal width="100%" spacing="medium" flex={{ alignItems: 'center', justifyContent: 'start' }}>
-          <img height={16} width={16} src={img} className={css.buttonIcon} />
+          <img height={16} width={16} src={icon} />
           <Text>{label}</Text>
         </Layout.Horizontal>
       }
@@ -73,8 +58,11 @@ export const CDEIDESelect = ({
               <MenuItem
                 key={item.value}
                 text={
-                  <Layout.Horizontal width="90%" flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
+                  <Layout.Horizontal
-                    <img height={16} width={16} src={item.img} />
+                    width="90%"
+                    spacing="medium"
+                    flex={{ alignItems: 'center', justifyContent: 'start' }}>
+                    <img height={16} width={16} src={item.icon} />
                     <Text>{item.label}</Text>
                   </Layout.Horizontal>
                 }

web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx

@@ -38,15 +38,13 @@ import { UseStringsReturn, useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
 import { useConfirmAct } from 'hooks/useConfirmAction'
-import VSCode from 'cde-gitness/assests/VSCode.svg?url'
+import { getIDEOption, GitspaceActionType, GitspaceStatus, IDEType } from 'cde-gitness/constants'
-import { GitspaceActionType, GitspaceStatus, IDEType } from 'cde-gitness/constants'
 import type { EnumGitspaceStateType, EnumIDEType, TypesGitspaceConfig, TypesInfraProviderResource } from 'services/cde'
 import gitspaceIcon from 'cde-gitness/assests/gitspace.svg?url'
 import { useModalHook } from 'hooks/useModalHook'
 import pause from 'cde-gitness/assests/pause.svg?url'
 import web from 'cde-gitness/assests/web.svg?url'
 import deleteIcon from 'cde-gitness/assests/delete.svg?url'
-import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import { useGitspaceActions } from 'cde-gitness/hooks/useGitspaceActions'
 import { useDeleteGitspaces } from 'cde-gitness/hooks/useDeleteGitspaces'
 import { useOpenVSCodeBrowserURL } from 'cde-gitness/hooks/useOpenVSCodeBrowserURL'
@@ -118,10 +116,10 @@ export const RenderGitspaceName: Renderer<
   const details = row.original
   const { name, ide, identifier } = details
   const { standalone } = useAppContext()
-
+  const ideItem = getIDEOption(ide, getString)
   return standalone ? (
     <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'start' }}>
-      <img src={ide === IDEType.VSCODE ? VSCode : vsCodeWebIcon} height={20} width={20} />
+      <img src={ideItem?.icon} height={20} width={20} />
       <Text
         lineClamp={1}
         color={Color.BLACK}
@@ -133,7 +131,7 @@ export const RenderGitspaceName: Renderer<
   ) : (
     <Layout.Vertical spacing={'medium'} className={css.gitspaceIdContainer}>
       <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'start' }}>
-        <img src={ide === IDEType.VSCODE ? VSCode : vsCodeWebIcon} height={20} width={20} />
+        <img src={ideItem?.icon} height={20} width={20} />
         <Text
           width="90%"
           lineClamp={1}

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

@@ -19,36 +19,23 @@ import { Menu, MenuItem } from '@blueprintjs/core'
 import { Layout, Text, Container } from '@harnessio/uicore'
 import { useFormikContext } from 'formik'
 import { GitspaceSelect } from 'cde-gitness/components/GitspaceSelect/GitspaceSelect'
-import { useStrings, type UseStringsReturn } from 'framework/strings'
+import { useStrings } from 'framework/strings'
 import type { OpenapiCreateGitspaceRequest } from 'services/cde'
-import { IDEType } from 'cde-gitness/constants'
+import { getIDEOption, getIDETypeOptions } from 'cde-gitness/constants'
-import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
-import VSCode from 'cde-gitness/assests/VSCode.svg?url'
-
-export const getIDESelectItems = (getString: UseStringsReturn['getString']) => {
-  return [
-    { 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<OpenapiCreateGitspaceRequest>()
   const { ide } = values
   const { getString } = useStrings()
-  const IDESelectItems = getIDESelectItems(getString)
+  const IDESelectItems = getIDETypeOptions(getString)
   const IDELabel = IDESelectItems.find(item => item.value === ide)?.label
+  const ideItem = getIDEOption(ide, getString)
 
   return (
     <GitspaceSelect
       text={
         <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
-          <img
+          <img src={ideItem?.icon} height={20} width={20} style={{ marginRight: '12px' }} />
-            src={ide === IDEType.VSCODE ? VSCode : vsCodeWebIcon}
-            height={20}
-            width={20}
-            style={{ marginRight: '12px' }}
-          />
           <Layout.Vertical>
             <Text font={ide ? 'small' : 'normal'}>
               {ide ? getString('cde.ide.title') : getString('cde.ide.selectIDE')}

web/src/cde-gitness/constants/index.ts

@@ -13,14 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
+import vsCodeIcon from 'cde-gitness/assests/VSCode.svg?url'
+import intellijIcon from 'cde-gitness/assests/intellij.svg?url'
+import type { StringsMap } from 'framework/strings/stringTypes'
 
 export const docLink = 'https://developer.harness.io/docs/cloud-development-environments'
 
 export enum IDEType {
   VSCODE = 'vs_code',
-  VSCODEWEB = 'vs_code_web'
+  VSCODEWEB = 'vs_code_web',
+  INTELLIJ = 'intellij'
 }
 
+export interface ideType {
+  label: keyof StringsMap
+  value: string
+  icon: any
+}
+
+export const getIDETypeOptions = (getString: any) => [
+  {
+    label: getString('cde.ide.desktop'),
+    value: IDEType.VSCODE,
+    icon: vsCodeIcon
+  },
+  {
+    label: getString('cde.ide.browser'),
+    value: IDEType.VSCODEWEB,
+    icon: vsCodeWebIcon
+  },
+  {
+    label: getString('cde.ide.intellij'),
+    value: IDEType.INTELLIJ,
+    icon: intellijIcon
+  }
+]
+
 export enum EnumGitspaceCodeRepoType {
   GITHUB = 'github',
   GITLAB = 'gitlab',
@@ -60,6 +89,14 @@ export const GitspaceStatusTypes = (getString: any) => [
   }
 ]
 
+export const getIDEOption: any = (type = '', getString = null) => {
+  let ideItem = null
+  if (type && getString) {
+    ideItem = getIDETypeOptions(getString).find((ide: ideType) => ide?.value === type)
+  }
+  return ideItem
+}
+
 export enum GitspaceOwnerType {
   SELF = 'self',
   ALL = 'all'

web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx

@@ -258,7 +258,11 @@ export const CDECreateGitspace = () => {
               </Container>
               <Container className={css.formOuterContainer}>
                 <CDEIDESelect onChange={formik.setFieldValue} selectedIde={formik.values.ide} />
-                {formik.values.ide === IDEType.VSCODE && <CDESSHSelect />}
+                {formik?.values?.ide === IDEType.VSCODE || formik?.values?.ide === IDEType.INTELLIJ ? (
+                  <CDESSHSelect />
+                ) : (
+                  <></>
+                )}
                 <SelectInfraProvider />
                 <Button width={'100%'} variation={ButtonVariation.PRIMARY} height={50} type="submit">
                   {getString('cde.createGitspace')}

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

@@ -27,7 +27,7 @@ export const validateGitnessForm = (getString: UseStringsReturn['getString'], is
     resource_identifier: yup.string().trim().required(getString('cde.machineValidationMessage')),
     name: yup.string().trim().required(),
     ssh_token_identifier: yup.string().when('ide', {
-      is: ide => ide === IDEType.VSCODE && isCDE,
+      is: ide => (ide === IDEType.VSCODE || ide === IDEType.INTELLIJ) && isCDE,
       then: yup.string().required(getString('cde.sshValidationMessage'))
     })
   })

web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx

@@ -39,14 +39,12 @@ import { useStrings } from 'framework/strings'
 import EventTimelineAccordion from 'cde-gitness/components/EventTimelineAccordion/EventTimelineAccordion'
 import { DetailsCard } from 'cde-gitness/components/DetailsCard/DetailsCard'
 import type { EnumGitspaceStateType, TypesGitspaceEventResponse } from 'cde-gitness/services'
-import { GitspaceActionType, GitspaceStatus } from 'cde-gitness/constants'
+import { getIDEOption, GitspaceActionType, GitspaceStatus } from 'cde-gitness/constants'
 import { useQueryParams } from 'hooks/useQueryParams'
 import { useUpdateQueryParams } from 'hooks/useUpdateQueryParams'
 import { getErrorMessage } from 'utils/Utils'
 import { usePolling } from 'cde-gitness/hooks/usePolling'
 import deleteIcon from 'cde-gitness/assests/delete.svg?url'
-import vscodeIcon from 'cde-gitness/assests/VSCode.svg?url'
-import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import pauseIcon from 'cde-gitness/assests/pause.svg?url'
 import { IDEType } from 'cde-gitness/constants'
 import homeIcon from 'cde-gitness/assests/home.svg?url'
@@ -203,6 +201,7 @@ const GitspaceDetails = () => {
 
   const accordionRef = useRef<AccordionHandle | null>(null)
   const myRef = useRef<any | null>(null)
+  const ideItem = getIDEOption(data?.ide, getString)
 
   useEffect(() => {
     if (standalone ? formattedlogsdata.data : responseData) {
@@ -248,12 +247,7 @@ const GitspaceDetails = () => {
           <Container>
             {data && (
               <Layout.Horizontal spacing="small">
-                <img
+                <img src={ideItem?.icon} className={css.gitspaceIcon} height={32} width={32} />
-                  src={data?.ide === IDEType.VSCODEWEB ? vsCodeWebIcon : vscodeIcon}
-                  className={css.gitspaceIcon}
-                  height={32}
-                  width={32}
-                />
                 <Layout.Vertical spacing="none" className={css.gitspaceIdContainer}>
                   <Text font={{ variation: FontVariation.H3 }}>{data?.name}</Text>
                   <Layout.Horizontal spacing={'xsmall'} flex={{ alignItems: 'center', justifyContent: 'start' }}>
@@ -399,6 +393,7 @@ const GitspaceDetails = () => {
                   }}>
                   {data?.ide === IDEType.VSCODE && getString('cde.details.openEditor')}
                   {data?.ide === IDEType.VSCODEWEB && getString('cde.details.openBrowser')}
+                  {data?.ide === IDEType.INTELLIJ && getString('cde.details.openIntellij')}
                 </Button>
               ) : (
                 <Button

web/src/cde-gitness/services/index.tsx

@@ -83,7 +83,7 @@ export type EnumGitspaceInstanceStateType =
 
 export type EnumGitspaceStateType = 'running' | 'stopped' | 'error' | 'uninitialized' | 'starting' | 'stopping'
 
-export type EnumIDEType = 'vs_code' | 'vs_code_web'
+export type EnumIDEType = 'vs_code' | 'vs_code_web' | 'intellij'
 
 export type EnumInfraProviderType = 'docker' | 'harness_gcp'
 

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

@@ -97,6 +97,7 @@ details:
   actions: More Actions
   openEditor: Open VS Code Editor
   openBrowser: Open VS Code Online
+  openIntellij: Open IntelliJ Gateway
   goToDashboard: Go To Dashboard
   startGitspace: Start Gitspace
   stopProvising: Stop Provising
@@ -126,6 +127,7 @@ repository:
 ide:
   browser: VS Code Browser
   desktop: VS Code Desktop
+  intellij: IntelliJ
   title: IDE
   selectIDE: Select IDE
   vsCode: VS Code

web/src/framework/strings/stringTypes.ts

@@ -1256,6 +1256,7 @@ export interface StringsMap {
   'cde.details.noLogsFound': string
   'cde.details.openBrowser': string
   'cde.details.openEditor': string
+  'cde.details.openIntellij': string
   'cde.details.provisioningGitspace': string
   'cde.details.startGitspace': string
   'cde.details.stopGitspace': string
@@ -1290,6 +1291,7 @@ export interface StringsMap {
   'cde.id': string
   'cde.ide.browser': string
   'cde.ide.desktop': string
+  'cde.ide.intellij': string
   'cde.ide.openBrowser': string
   'cde.ide.openVSCode': string
   'cde.ide.selectIDE': string

web/src/services/cde/index.tsx

@@ -67,9 +67,9 @@ export type EnumGitspaceSort = 'created' | 'last_activated' | 'last_used'
 
 export type EnumGitspaceStateType = 'running' | 'stopped' | 'error' | 'uninitialized' | 'starting' | 'stopping'
 
-export type EnumIDEType = 'vs_code' | 'vs_code_web'
+export type EnumIDEType = 'vs_code' | 'vs_code_web' | 'intellij'
 
-export type EnumInfraProviderType = 'docker' | 'harness_gcp' | 'harness_cloud'
+export type EnumInfraProviderType = 'docker' | 'harness_gcp' | 'harness_cloud' | 'hybrid_vm_gcp'
 
 export interface InfraproviderResourceInput {
   cpu?: string | null
@@ -364,11 +364,14 @@ export interface ListGitspacesQueryParams {
    * The maximum number of results to return.
    */
   limit?: number
+  /**
+   * The substring which is used to filter the gitspaces by their name or idenitifer.
+   */
+  query?: string
   gitspace_owner?: EnumGitspaceOwner
   gitspace_states?: EnumGitspaceFilterState[]
   sort?: EnumGitspaceSort
   order?: 'asc' | 'desc'
-  query?: string
 }
 
 export interface ListGitspacesPathParams {

web/src/services/cde/swagger.yaml

@@ -89,6 +89,13 @@ paths:
             maximum: 100
             minimum: 1
             type: integer
+        - description: The substring which is used to filter the gitspaces by their
+            name or idenitifer.
+          in: query
+          name: query
+          required: false
+          schema:
+            type: string
         - in: query
           name: gitspace_owner
           schema:
@@ -1030,12 +1037,14 @@ components:
       enum:
         - vs_code
         - vs_code_web
+        - intellij
       type: string
     EnumInfraProviderType:
       enum:
         - docker
         - harness_gcp
         - harness_cloud
+        - hybrid_vm_gcp
       type: string
     InfraproviderResourceInput:
       properties: