Render integration help in Vue

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,6 +88,9 @@ export default {
       this.fetchResetIntegration();
     },
   },
+  helpHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
@@ -92,6 +103,10 @@ export default {
       :learn-more-path="propsSource.learnMorePath"
       @change="setOverride"
     />
+
+    <!-- helpHtml is trusted input -->
+    <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
+
     <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