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
This commit is contained in:
Shivanand Sonnad 2025-02-19 11:45:26 +00:00 committed by Harness
parent 6f7382d9e6
commit be4291baef
3 changed files with 26 additions and 10 deletions

View File

@ -17,3 +17,9 @@
.triggerType {
margin-bottom: var(--spacing-xsmall) !important;
}
.secretFormInput {
&.createForm > div {
width: auto !important;
}
}

View File

@ -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

View File

@ -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} />