Merge branch '347459-align-checkbox-styling-in-integration-forms-with-pajamas' into 'master'

Fix help text for checkboxes on integrations form

See merge request gitlab-org/gitlab!77885

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

@@ -153,7 +153,7 @@ export default {
     :invalid-feedback="__('This field is required.')"
     :state="valid"
   >
-    <template #description>
+    <template v-if="!isCheckbox" #description>
       <span v-safe-html:[$options.helpHtmlConfig]="help"></span>
     </template>
 
@@ -161,6 +161,9 @@ export default {
       <input :name="fieldName" type="hidden" :value="model || false" />
       <gl-form-checkbox :id="fieldId" v-model="model" :disabled="isInheriting">
         {{ checkboxLabel || humanizedTitle }}
+        <template #help>
+          <span v-safe-html:[$options.helpHtmlConfig]="help"></span>
+        </template>
       </gl-form-checkbox>
     </template>
     <template v-else-if="isSelect">

spec/frontend/integrations/edit/components/dynamic_field_spec.js

@@ -61,7 +61,7 @@ describe('DynamicField', () => {
           });
 
           it(`renders GlFormCheckbox with correct text content when checkboxLabel is ${checkboxLabel}`, () => {
-            expect(findGlFormCheckbox().text()).toBe(checkboxLabel ?? defaultProps.title);
+            expect(findGlFormCheckbox().text()).toContain(checkboxLabel ?? defaultProps.title);
           });
 
           it('does not render other types of input', () => {
@@ -182,6 +182,17 @@ describe('DynamicField', () => {
         expect(findGlFormGroup().find('small').text()).toBe(defaultProps.help);
       });
 
+      describe('when type is checkbox', () => {
+        it('renders description with help text', () => {
+          createComponent({
+            type: 'checkbox',
+          });
+
+          expect(findGlFormGroup().find('small').exists()).toBe(false);
+          expect(findGlFormCheckbox().text()).toContain(defaultProps.help);
+        });
+      });
+
       it('renders description with help text as HTML', () => {
         const helpHTML = 'The <strong>URL</strong> of the project';