From be4291baef7b507476c604d4bf9355c41f363cae Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Wed, 19 Feb 2025 11:45:26 +0000
Subject: [PATCH] feat: [AH-885]: fix breaking UI because of secret input in
 create webhook form (#3456)

* feat: [AH-885]: fix breaking UI because of secret input in create webhook form
---
 .../components/Forms/Forms.module.scss        |  6 ++++
 .../components/Forms/Forms.module.scss.d.ts   |  2 ++
 .../components/Forms/WebhookFormContent.tsx   | 28 ++++++++++++-------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss b/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss
index 3e8a5aace..bafe00bbb 100644
--- a/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss
+++ b/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss
@@ -17,3 +17,9 @@
 .triggerType {
   margin-bottom: var(--spacing-xsmall) !important;
 }
+
+.secretFormInput {
+  &.createForm > div {
+    width: auto !important;
+  }
+}
diff --git a/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss.d.ts b/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss.d.ts
index f7ef4986b..f1ae29382 100644
--- a/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss.d.ts
+++ b/web/src/ar/pages/webhook-list/components/Forms/Forms.module.scss.d.ts
@@ -16,4 +16,6 @@
 
 /* eslint-disable */
 // This is an auto-generated file
+export declare const createForm: string
+export declare const secretFormInput: string
 export declare const triggerType: string
diff --git a/web/src/ar/pages/webhook-list/components/Forms/WebhookFormContent.tsx b/web/src/ar/pages/webhook-list/components/Forms/WebhookFormContent.tsx
index 5c92a077b..81b85fbcf 100644
--- a/web/src/ar/pages/webhook-list/components/Forms/WebhookFormContent.tsx
+++ b/web/src/ar/pages/webhook-list/components/Forms/WebhookFormContent.tsx
@@ -15,8 +15,9 @@
  */
 
 import React from 'react'
+import classNames from 'classnames'
 import type { FormikProps } from 'formik'
-import { Checkbox, FormikForm, FormInput, Layout } from '@harnessio/uicore'
+import { Checkbox, Container, FormikForm, FormInput, Layout } from '@harnessio/uicore'
 
 import { useStrings } from '@ar/frameworks/strings'
 import { useAppStore, useParentComponents } from '@ar/hooks'
@@ -26,6 +27,8 @@ import SelectTriggers from './SelectTriggers'
 import type { WebhookRequestUI } from './types'
 import ExtraHeadersFormContent from './ExtraHeadersFormContent/ExtraHeadersFormContent'
 
+import css from './Forms.module.scss'
+
 interface WebhookFormContentProps {
   formikProps: FormikProps<WebhookRequestUI>
   readonly?: boolean
@@ -64,15 +67,20 @@ export default function WebhookFormContent(props: WebhookFormContentProps) {
           placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.url') })}
           disabled={readonly}
         />
-        <SecretFormInput
-          name="secretIdentifier"
-          spaceIdFieldName="secretSpaceId"
-          label={getString('webhookList.formFields.secret')}
-          placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.secret') })}
-          scope={scope}
-          disabled={readonly}
-          formik={formikProps}
-        />
+        <Container
+          className={classNames(css.secretFormInput, {
+            [css.createForm]: !isEdit
+          })}>
+          <SecretFormInput
+            name="secretIdentifier"
+            spaceIdFieldName="secretSpaceId"
+            label={getString('webhookList.formFields.secret')}
+            placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.secret') })}
+            scope={scope}
+            disabled={readonly}
+            formik={formikProps}
+          />
+        </Container>
       </Layout.Vertical>
       <Layout.Vertical spacing="large">
         <SelectTriggers formikProps={formikProps} disabled={readonly} />