Merge branch '273269-settings-selector-bar-placement-should-span-entire-width-2' into 'master'

Render "Integration Help" HTML in HAML, but reposition it in Vue

See merge request gitlab-org/gitlab!49323

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
 import { integrationLevels } from '../constants';
@@ -28,9 +28,17 @@ export default {
     GlButton,
   },
   directives: {
-    'gl-modal': GlModalDirective,
+    GlModal: GlModalDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
+  props: {
+    helpHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
   computed: {
     ...mapGetters(['currentKey', 'propsSource', 'isDisabled']),
     ...mapState([
@@ -80,11 +88,17 @@ export default {
       this.fetchResetIntegration();
     },
   },
+  helpHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
 <template>
   <div>
+    <!-- helpHtml is trusted input -->
+    <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
+
     <override-dropdown
       v-if="defaultState !== null"
       :inherit-from-id="defaultState.id"
@@ -92,6 +106,7 @@ export default {
       :learn-more-path="propsSource.learnMorePath"
       @change="setOverride"
     />
+
     <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
     <jira-trigger-fields
       v-if="isJira"

app/assets/javascripts/integrations/edit/index.js

@@ -80,21 +80,29 @@ export default (el, defaultEl) => {
   }
 
   const props = parseDatasetToProps(el.dataset);
-
   const initialState = {
     defaultState: null,
     customState: props,
   };
-
   if (defaultEl) {
     initialState.defaultState = Object.freeze(parseDatasetToProps(defaultEl.dataset));
   }
 
+  // Here, we capture the "helpHtml", so we can pass it to the Vue component
+  // to position it where ever it wants.
+  // Because this node is a _child_ of `el`, it will be removed when the Vue component is mounted,
+  // so we don't need to manually remove it.
+  const helpHtml = el.querySelector('.js-integration-help-html')?.innerHTML;
+
   return new Vue({
     el,
     store: createStore(initialState),
     render(createElement) {
-      return createElement(IntegrationForm);
+      return createElement(IntegrationForm, {
+        props: {
+          helpHtml,
+        },
+      });
     },
   });
 };

app/views/shared/_service_settings.html.haml

 = form_errors(integration)
 
-- if lookup_context.template_exists?('help', "projects/services/#{integration.to_param}", true)
-  = render "projects/services/#{integration.to_param}/help", subject: integration
-- elsif integration.help.present?
-  .info-well
-    .well-segment
-      = markdown integration.help
-
 .service-settings
   - if @default_integration
     .js-vue-default-integration-settings{ data: integration_form_data(@default_integration, group: @group) }
   .js-vue-integration-settings{ data: integration_form_data(integration, group: @group) }
+    .js-integration-help-html
+      -# All content below will be repositioned in Vue
+      - if lookup_context.template_exists?('help', "projects/services/#{integration.to_param}", true)
+        = render "projects/services/#{integration.to_param}/help", subject: integration
+      - elsif integration.help.present?
+        .info-well
+          .well-segment
+            = markdown integration.help

spec/features/projects/services/user_activates_slack_slash_command_spec.rb

@@ -40,4 +40,8 @@ RSpec.describe 'Slack slash commands', :js do
     value = find_field('url').value
     expect(value).to match("api/v4/projects/#{project.id}/services/slack_slash_commands/trigger")
   end
+
+  it 'shows help content' do
+    expect(page).to have_content('This service allows users to perform common operations on this project by entering slash commands in Slack.')
+  end
 end

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

 import { shallowMount } from '@vue/test-utils';
 import { mockIntegrationProps } from 'jest/integrations/edit/mock_data';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { setHTMLFixture } from 'helpers/fixtures';
 import { createStore } from '~/integrations/edit/store';
 import IntegrationForm from '~/integrations/edit/components/integration_form.vue';
 import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue';
@@ -15,24 +17,31 @@ import { integrationLevels } from '~/integrations/edit/constants';
 describe('IntegrationForm', () => {
   let wrapper;
 
-  const createComponent = (customStateProps = {}, featureFlags = {}, initialState = {}) => {
-    wrapper = shallowMount(IntegrationForm, {
-      propsData: {},
-      store: createStore({
-        customState: { ...mockIntegrationProps, ...customStateProps },
-        ...initialState,
+  const createComponent = ({
+    customStateProps = {},
+    featureFlags = {},
+    initialState = {},
+    props = {},
+  } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(IntegrationForm, {
+        propsData: { ...props },
+        store: createStore({
+          customState: { ...mockIntegrationProps, ...customStateProps },
+          ...initialState,
+        }),
+        stubs: {
+          OverrideDropdown,
+          ActiveCheckbox,
+          ConfirmationModal,
+          JiraTriggerFields,
+          TriggerFields,
+        },
+        provide: {
+          glFeatures: featureFlags,
+        },
       }),
-      stubs: {
-        OverrideDropdown,
-        ActiveCheckbox,
-        ConfirmationModal,
-        JiraTriggerFields,
-        TriggerFields,
-      },
-      provide: {
-        glFeatures: featureFlags,
-      },
-    });
+    );
   };
 
   afterEach(() => {
@@ -63,7 +72,9 @@ describe('IntegrationForm', () => {
     describe('showActive is false', () => {
       it('does not render ActiveCheckbox', () => {
         createComponent({
-          showActive: false,
+          customStateProps: {
+            showActive: false,
+          },
         });
 
         expect(findActiveCheckbox().exists()).toBe(false);
@@ -73,7 +84,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is instance', () => {
       it('renders ConfirmationModal', () => {
         createComponent({
-          integrationLevel: integrationLevels.INSTANCE,
+          customStateProps: {
+            integrationLevel: integrationLevels.INSTANCE,
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(true);
@@ -82,7 +95,9 @@ describe('IntegrationForm', () => {
       describe('resetPath is empty', () => {
         it('does not render ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.INSTANCE,
+            customStateProps: {
+              integrationLevel: integrationLevels.INSTANCE,
+            },
           });
 
           expect(findResetButton().exists()).toBe(false);
@@ -93,8 +108,10 @@ describe('IntegrationForm', () => {
       describe('resetPath is present', () => {
         it('renders ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.INSTANCE,
-            resetPath: 'resetPath',
+            customStateProps: {
+              integrationLevel: integrationLevels.INSTANCE,
+              resetPath: 'resetPath',
+            },
           });
 
           expect(findResetButton().exists()).toBe(true);
@@ -106,7 +123,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is group', () => {
       it('renders ConfirmationModal', () => {
         createComponent({
-          integrationLevel: integrationLevels.GROUP,
+          customStateProps: {
+            integrationLevel: integrationLevels.GROUP,
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(true);
@@ -115,7 +134,9 @@ describe('IntegrationForm', () => {
       describe('resetPath is empty', () => {
         it('does not render ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.GROUP,
+            customStateProps: {
+              integrationLevel: integrationLevels.GROUP,
+            },
           });
 
           expect(findResetButton().exists()).toBe(false);
@@ -126,8 +147,10 @@ describe('IntegrationForm', () => {
       describe('resetPath is present', () => {
         it('renders ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.GROUP,
-            resetPath: 'resetPath',
+            customStateProps: {
+              integrationLevel: integrationLevels.GROUP,
+              resetPath: 'resetPath',
+            },
           });
 
           expect(findResetButton().exists()).toBe(true);
@@ -139,7 +162,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is project', () => {
       it('does not render ConfirmationModal', () => {
         createComponent({
-          integrationLevel: 'project',
+          customStateProps: {
+            integrationLevel: 'project',
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(false);
@@ -147,8 +172,10 @@ describe('IntegrationForm', () => {
 
       it('does not render ResetConfirmationModal and button', () => {
         createComponent({
-          integrationLevel: 'project',
-          resetPath: 'resetPath',
+          customStateProps: {
+            integrationLevel: 'project',
+            resetPath: 'resetPath',
+          },
         });
 
         expect(findResetButton().exists()).toBe(false);
@@ -158,7 +185,9 @@ describe('IntegrationForm', () => {
 
     describe('type is "slack"', () => {
       beforeEach(() => {
-        createComponent({ type: 'slack' });
+        createComponent({
+          customStateProps: { type: 'slack' },
+        });
       });
 
       it('does not render JiraTriggerFields', () => {
@@ -172,14 +201,19 @@ describe('IntegrationForm', () => {
 
     describe('type is "jira"', () => {
       it('renders JiraTriggerFields', () => {
-        createComponent({ type: 'jira' });
+        createComponent({
+          customStateProps: { type: 'jira' },
+        });
 
         expect(findJiraTriggerFields().exists()).toBe(true);
       });
 
       describe('featureFlag jiraIssuesIntegration is false', () => {
         it('does not render JiraIssuesFields', () => {
-          createComponent({ type: 'jira' }, { jiraIssuesIntegration: false });
+          createComponent({
+            customStateProps: { type: 'jira' },
+            featureFlags: { jiraIssuesIntegration: false },
+          });
 
           expect(findJiraIssuesFields().exists()).toBe(false);
         });
@@ -187,8 +221,10 @@ describe('IntegrationForm', () => {
 
       describe('featureFlag jiraIssuesIntegration is true', () => {
         it('renders JiraIssuesFields', () => {
-          createComponent({ type: 'jira' }, { jiraIssuesIntegration: true });
-
+          createComponent({
+            customStateProps: { type: 'jira' },
+            featureFlags: { jiraIssuesIntegration: true },
+          });
           expect(findJiraIssuesFields().exists()).toBe(true);
         });
       });
@@ -200,8 +236,10 @@ describe('IntegrationForm', () => {
         const type = 'slack';
 
         createComponent({
-          triggerEvents: events,
-          type,
+          customStateProps: {
+            triggerEvents: events,
+            type,
+          },
         });
 
         expect(findTriggerFields().exists()).toBe(true);
@@ -218,7 +256,9 @@ describe('IntegrationForm', () => {
         ];
 
         createComponent({
-          fields,
+          customStateProps: {
+            fields,
+          },
         });
 
         const dynamicFields = wrapper.findAll(DynamicField);
@@ -232,13 +272,11 @@ describe('IntegrationForm', () => {
 
     describe('defaultState state is null', () => {
       it('does not render OverrideDropdown', () => {
-        createComponent(
-          {},
-          {},
-          {
+        createComponent({
+          initialState: {
             defaultState: null,
           },
-        );
+        });
 
         expect(findOverrideDropdown().exists()).toBe(false);
       });
@@ -246,18 +284,43 @@ describe('IntegrationForm', () => {
 
     describe('defaultState state is an object', () => {
       it('renders OverrideDropdown', () => {
-        createComponent(
-          {},
-          {},
-          {
+        createComponent({
+          initialState: {
             defaultState: {
               ...mockIntegrationProps,
             },
           },
-        );
+        });
 
         expect(findOverrideDropdown().exists()).toBe(true);
       });
     });
+
+    describe('with `helpHtml` prop', () => {
+      const mockTestId = 'jest-help-html-test';
+
+      setHTMLFixture(`
+        <div data-testid="${mockTestId}">
+          <svg class="gl-icon">
+            <use></use>
+          </svg>
+        </div>
+      `);
+
+      it('renders `helpHtml`', async () => {
+        const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`);
+
+        createComponent({
+          props: {
+            helpHtml: mockHelpHtml.outerHTML,
+          },
+        });
+
+        const helpHtml = wrapper.findByTestId(mockTestId);
+
+        expect(helpHtml.isVisible()).toBe(true);
+        expect(helpHtml.find('svg').isVisible()).toBe(true);
+      });
+    });
   });
 });