diff --git a/ui/src/components/ControlWrapper/ControlWrapper.tsx b/ui/src/components/ControlWrapper/ControlWrapper.tsx index 6719b6625..6014b3b8f 100644 --- a/ui/src/components/ControlWrapper/ControlWrapper.tsx +++ b/ui/src/components/ControlWrapper/ControlWrapper.tsx @@ -26,7 +26,7 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: strin } `; -interface ControlWrapperProps { +export interface ControlWrapperProps { mode: Mode; utilityFuncts: UtilControlWrapper; value: AcceptableFormValueOrNullish; @@ -128,12 +128,17 @@ class ControlWrapper extends React.PureComponent { ); - const isFieldRequired = // modifiedEntitiesData takes precedence over entity - this.props?.modifiedEntitiesData?.required || this.props.entity?.required === undefined - ? 'oauth_field' in (this.props.entity || {}) // if required is undefined use true for oauth fields and false for others - : this.props.entity?.required; // if required present use required - const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || ''; + const isRequiredModified = + typeof this.props?.modifiedEntitiesData?.required === 'boolean' + ? this.props?.modifiedEntitiesData?.required + : this.props.entity?.required; + + const isFieldRequired = + isRequiredModified === undefined // // if oauth_field exists field required by default + ? 'oauth_field' in (this.props.entity || {}) // if oauth_field does not exists not required by default + : isRequiredModified; + const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || ''; return ( this.props.display && ( ) => { + render( + {}, + setErrorFieldMsg: () => {}, + clearAllErrorMsg: () => {}, + setErrorMsg: () => {}, + }, + handleChange: () => {}, + addCustomValidator: () => {}, + }} + value="" + display + error={false} + disabled={false} + serviceName="testServiceName" + dependencyValues={undefined} + entity={{ + field: 'url', + label: 'URL', + type: 'text', + help: 'Enter the URL, for example', + required: true, + validators: [ + { + errorMsg: + "Invalid URL provided. URL should start with 'https' as only secure URLs are supported. Provide URL in this format", + type: 'regex', + pattern: '^(https://)[^/]+/?$', + }, + ], + encrypted: false, + }} + {...props} + /> + ); +}; + +it('check if required star displayed correctly', () => { + renderControlWrapper({}); + const requiredStar = screen.queryByText('*'); + expect(requiredStar).toBeInTheDocument(); +}); + +it('check if required star not displayed', () => { + renderControlWrapper({ + entity: { + field: 'url', + label: 'URL', + type: 'text', + required: false, + }, + }); + const requiredStar = screen.queryByText('*'); + expect(requiredStar).not.toBeInTheDocument(); +}); + +it('check if required star displayed correctly from modifiedEntitiesData', () => { + renderControlWrapper({ + entity: { + field: 'url', + label: 'URL', + type: 'text', + required: false, + }, + modifiedEntitiesData: { required: true }, + }); + const requiredStar = screen.queryByText('*'); + expect(requiredStar).toBeInTheDocument(); +}); + +it('check if required star not displayed due to modifiedEntitiesData', () => { + renderControlWrapper({ + entity: { + field: 'url', + label: 'URL', + type: 'text', + required: true, + }, + modifiedEntitiesData: { required: false }, + }); + + const requiredStar = screen.queryByText('*'); + expect(requiredStar).not.toBeInTheDocument(); +}); + +it('check if label and help updated due to modifiedEntitiesData', () => { + const modifications = { required: false, label: 'Modified URL', help: 'Modified help' }; + renderControlWrapper({ + entity: { + field: 'url', + label: 'URL', + help: 'Enter the URL, for example', + type: 'text', + required: true, + }, + modifiedEntitiesData: modifications, + }); + + const label = screen.getByTestId('label'); // label replaced + expect(label).toHaveTextContent(modifications.label); + + const help = screen.getByTestId('help'); // help replaced + expect(help).toHaveTextContent(modifications.help); +}); + +it('check if help added due to modifiedEntitiesData', () => { + const modifications = { help: 'Modified help' }; + + renderControlWrapper({ + entity: { + field: 'url', + label: 'URL', + type: 'text', + required: true, + }, + modifiedEntitiesData: modifications, + }); + + const help = screen.getByTestId('help'); + expect(help).toHaveTextContent(modifications.help); +});