fixing height for v0 and v1 versions

web/src/components/PluginsPanel/PluginsPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { Formik } from 'formik'
-import { capitalize, get, set } from 'lodash-es'
+import { capitalize, get, omit, set } from 'lodash-es'
 import { Classes, PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Icon, type IconName } from '@harnessio/icons'
@@ -81,8 +81,8 @@ interface PluginInsertionTemplateInterface {
   name?: string
   type: 'plugin'
   spec: {
-    uses: string
+    name: string
-    with: { [key: string]: string }
+    inputs: { [key: string]: string }
   }
 }
 
@@ -90,14 +90,17 @@ const PluginInsertionTemplate: PluginInsertionTemplateInterface = {
   name: '<step-name>',
   type: 'plugin',
   spec: {
-    uses: '<plugin-uid-from-database>',
+    name: '<plugin-uid-from-database>',
-    with: {
+    inputs: {
       '<param1>': '<value1>',
       '<param2>': '<value2>'
     }
   }
 }
 
+const PluginNameFieldPath = 'spec.name'
+const PluginInputsFieldPath = 'spec.inputs'
+
 export interface PluginsPanelInterface {
   onPluginAddUpdate: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
 }
@@ -267,8 +270,8 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
       case PluginCategory.Drone:
         const payload = { ...PluginInsertionTemplate }
         set(payload, 'name', name)
-        set(payload, 'spec.uses', pluginMetadata?.name)
+        set(payload, PluginNameFieldPath, pluginMetadata?.name)
-        set(payload, 'spec.with', pluginFormData)
+        set(payload, PluginInputsFieldPath, omit(pluginFormData, 'name'))
         return payload as PluginInsertionTemplateInterface
       case PluginCategory.Harness:
         return name && image && script

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss

@@ -3,6 +3,7 @@
   --heading-height: 58px;
   min-height: var(--page-height);
   background-color: var(--white) !important;
+  --generate-pipeline-header: 55px;
 
   .layout {
     align-items: center;
@@ -14,16 +15,20 @@
   overflow: hidden;
 }
 
+.extendedHeight {
+  height: calc(100vh - var(--header-height)) !important;
+}
+
 .editorContainer {
   width: calc(100% - 30vw);
-  height: calc(100vh - var(--header-height)) !important;
+  height: calc(100vh - var(--header-height) - var(--generate-pipeline-header));
   border-right: 1px solid var(--grey-100);
   padding: var(--spacing-small) !important;
 }
 
 .pluginsContainer {
   width: 30vw;
-  height: calc(100vh - var(--header-height)) !important;
+  height: calc(100vh - var(--header-height) - var(--generate-pipeline-header)) !important;
   background-color: var(--grey-50) !important;
 }
 

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts

@@ -3,6 +3,7 @@
 export declare const breadcrumb: string
 export declare const drawer: string
 export declare const editorContainer: string
+export declare const extendedHeight: string
 export declare const generate: string
 export declare const generateHeader: string
 export declare const header: string

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx

@@ -3,6 +3,7 @@ import { useGet, useMutate } from 'restful-react'
 import { useParams } from 'react-router-dom'
 import { get, isEmpty, isUndefined, set } from 'lodash-es'
 import { parse, stringify } from 'yaml'
+import cx from 'classnames'
 import { Menu, PopoverPosition } from '@blueprintjs/core'
 import { Container, PageBody, Layout, ButtonVariation, Text, useToaster, SplitButton, Button } from '@harnessio/uicore'
 import { Color, FontVariation } from '@harnessio/design-system'
@@ -384,7 +385,7 @@ const AddUpdatePipeline = (): JSX.Element => {
         </Layout.Vertical>
         <PageBody>
           <Layout.Horizontal className={css.layout}>
-            <Container className={css.editorContainer}>
+            <Container className={cx(css.editorContainer, { [css.extendedHeight]: yamlVersion === YamlVersion.V0 })}>
               <MonacoSourceCodeEditor
                 language={'yaml'}
                 schema={yamlVersion === YamlVersion.V1 ? pipelineSchemaV1 : pipelineSchemaV0}