Use provide instead of props for form

- Add Vue app name for Vue dev tools.
- Add optional chaining in computed prop to avoid
console errors on refresh.

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

@@ -3,6 +3,7 @@ import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml, GlForm } f
 import axios from 'axios';
 import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
+
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
@@ -41,10 +42,8 @@ export default {
     SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
-  props: {
+  inject: {
     helpHtml: {
-      type: String,
-      required: false,
       default: '',
     },
   },
@@ -82,7 +81,7 @@ export default {
       return Boolean(this.isSaving || this.isResetting || this.isTesting);
     },
     form() {
-      return this.$refs.integrationForm.$el;
+      return this.$refs.integrationForm?.$el;
     },
   },
   methods: {

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

@@ -116,13 +116,13 @@ export default function initIntegrationSettingsForm() {
 
   return new Vue({
     el: customSettingsEl,
+    name: 'IntegrationEditRoot',
     store: createStore(initialState),
-    render(createElement) {
-      return createElement(IntegrationForm, {
-        props: {
+    provide: {
       helpHtml,
     },
-      });
+    render(createElement) {
+      return createElement(IntegrationForm);
     },
   });
 }

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

@@ -37,7 +37,7 @@ describe('IntegrationForm', () => {
   const createComponent = ({
     customStateProps = {},
     initialState = {},
-    props = {},
+    provide = {},
     mountFn = shallowMountExtended,
   } = {}) => {
     const store = createStore({
@@ -47,7 +47,7 @@ describe('IntegrationForm', () => {
     dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
 
     wrapper = mountFn(IntegrationForm, {
-      propsData: { ...props },
+      provide,
       store,
       stubs: {
         OverrideDropdown,
@@ -300,7 +300,7 @@ describe('IntegrationForm', () => {
       });
     });
 
-    describe('with `helpHtml` prop', () => {
+    describe('with `helpHtml` provided', () => {
       const mockTestId = 'jest-help-html-test';
 
       setHTMLFixture(`
@@ -316,7 +316,7 @@ describe('IntegrationForm', () => {
         const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`);
 
         createComponent({
-          props: {
+          provide: {
             helpHtml: mockHelpHtml.outerHTML,
           },
         });