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 { .triggerType {
margin-bottom: var(--spacing-xsmall) !important; margin-bottom: var(--spacing-xsmall) !important;
} }
.secretFormInput {
&.createForm > div {
width: auto !important;
}
}

View File

@ -16,4 +16,6 @@
/* eslint-disable */ /* eslint-disable */
// This is an auto-generated file // This is an auto-generated file
export declare const createForm: string
export declare const secretFormInput: string
export declare const triggerType: string export declare const triggerType: string

View File

@ -15,8 +15,9 @@
*/ */
import React from 'react' import React from 'react'
import classNames from 'classnames'
import type { FormikProps } from 'formik' 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 { useStrings } from '@ar/frameworks/strings'
import { useAppStore, useParentComponents } from '@ar/hooks' import { useAppStore, useParentComponents } from '@ar/hooks'
@ -26,6 +27,8 @@ import SelectTriggers from './SelectTriggers'
import type { WebhookRequestUI } from './types' import type { WebhookRequestUI } from './types'
import ExtraHeadersFormContent from './ExtraHeadersFormContent/ExtraHeadersFormContent' import ExtraHeadersFormContent from './ExtraHeadersFormContent/ExtraHeadersFormContent'
import css from './Forms.module.scss'
interface WebhookFormContentProps { interface WebhookFormContentProps {
formikProps: FormikProps<WebhookRequestUI> formikProps: FormikProps<WebhookRequestUI>
readonly?: boolean readonly?: boolean
@ -64,15 +67,20 @@ export default function WebhookFormContent(props: WebhookFormContentProps) {
placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.url') })} placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.url') })}
disabled={readonly} disabled={readonly}
/> />
<SecretFormInput <Container
name="secretIdentifier" className={classNames(css.secretFormInput, {
spaceIdFieldName="secretSpaceId" [css.createForm]: !isEdit
label={getString('webhookList.formFields.secret')} })}>
placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.secret') })} <SecretFormInput
scope={scope} name="secretIdentifier"
disabled={readonly} spaceIdFieldName="secretSpaceId"
formik={formikProps} label={getString('webhookList.formFields.secret')}
/> placeholder={getString('enterPlaceholder', { name: getString('webhookList.formFields.secret') })}
scope={scope}
disabled={readonly}
formik={formikProps}
/>
</Container>
</Layout.Vertical> </Layout.Vertical>
<Layout.Vertical spacing="large"> <Layout.Vertical spacing="large">
<SelectTriggers formikProps={formikProps} disabled={readonly} /> <SelectTriggers formikProps={formikProps} disabled={readonly} />