Remove integration_settings_form.js file

This functionality has entirely moved to
integration_form.vue.

In this commit, we update each instantiation of
the old IntegrationSettingsForm class to use
the component mount function directly.

There should be no user-facing changes.

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

@@ -85,28 +85,31 @@ function parseDatasetToProps(data) {
   };
 }
 
-export default (el, defaultEl, formSelector) => {
-  if (!el) {
+export default function initIntegrationSettingsForm(formSelector) {
+  const customSettingsEl = document.querySelector('.js-vue-integration-settings');
+  const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings');
+
+  if (!customSettingsEl) {
     return null;
   }
 
-  const props = parseDatasetToProps(el.dataset);
+  const customSettingsProps = parseDatasetToProps(customSettingsEl.dataset);
   const initialState = {
     defaultState: null,
-    customState: props,
+    customState: customSettingsProps,
   };
-  if (defaultEl) {
-    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultEl.dataset));
+  if (defaultSettingsEl) {
+    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultSettingsEl.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;
+  const helpHtml = customSettingsEl.querySelector('.js-integration-help-html')?.innerHTML;
 
   return new Vue({
-    el,
+    el: customSettingsEl,
     store: createStore(initialState),
     render(createElement) {
       return createElement(IntegrationForm, {
@@ -117,4 +120,4 @@ export default (el, defaultEl, formSelector) => {
       });
     },
   });
-};
+}

app/assets/javascripts/integrations/integration_settings_form.js

-import initForm from './edit';
-
-export default class IntegrationSettingsForm {
-  constructor(formSelector) {
-    this.formSelector = formSelector;
-    this.$form = document.querySelector(formSelector);
-
-    this.vue = null;
-
-    // Form Metadata
-    this.testEndPoint = this.$form.dataset.testUrl;
-  }
-
-  init() {
-    // Init Vue component
-    this.vue = initForm(
-      document.querySelector('.js-vue-integration-settings'),
-      document.querySelector('.js-vue-default-integration-settings'),
-      this.formSelector,
-    );
-  }
-}

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

-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 
-function initIntegrations() {
-  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
-  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-  integrationSettingsForm.init();
+initIntegrationSettingsForm('.js-integration-settings-form');
 
-  if (prometheusSettingsWrapper) {
-    const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
-    prometheusMetrics.loadActiveMetrics();
-  }
+const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
+const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
+if (prometheusSettingsWrapper) {
+  const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector);
+  prometheusMetrics.loadActiveMetrics();
 }
-
-initIntegrations();

app/assets/javascripts/pages/groups/settings/integrations/edit/index.js

-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 
-const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
-const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-integrationSettingsForm.init();
+initIntegrationSettingsForm('.js-integration-settings-form');
 
+const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
+const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
 if (prometheusSettingsWrapper) {
-  const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+  const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector);
   prometheusMetrics.loadActiveMetrics();
 }

app/assets/javascripts/pages/projects/services/edit/index.js

-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusAlerts from '~/prometheus_alerts';
 import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 
-const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-integrationSettingsForm.init();
+initIntegrationSettingsForm('.js-integration-settings-form');
 
 const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
 const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);

spec/frontend/integrations/edit/store/actions_spec.js

@@ -4,7 +4,6 @@ import testAction from 'helpers/vuex_action_helper';
 import { I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE } from '~/integrations/constants';
 import {
   setOverride,
-  setIsSaving,
   setIsResetting,
   requestResetIntegration,
   receiveResetIntegrationSuccess,

spec/frontend/integrations/edit/store/getters_spec.js

-import {
-  currentKey,
-  isInheriting,
-  isDisabled,
-  propsSource,
-} from '~/integrations/edit/store/getters';
-import * as types from '~/integrations/edit/store/mutation_types';
-import mutations from '~/integrations/edit/store/mutations';
+import { currentKey, isInheriting, propsSource } from '~/integrations/edit/store/getters';
 import createState from '~/integrations/edit/store/state';
 import { mockIntegrationProps } from '../mock_data';
 

spec/frontend/integrations/integration_settings_form_spec.js

-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import eventHub from '~/integrations/edit/event_hub';
-
-jest.mock('~/vue_shared/plugins/global_toast');
-jest.mock('lodash/delay', () => (callback) => callback());
-
-const FIXTURE = 'services/edit_service.html';
-const mockFormSelector = '.js-integration-settings-form';
-
-describe('IntegrationSettingsForm', () => {
-  let integrationSettingsForm;
-
-  beforeEach(() => {
-    loadFixtures(FIXTURE);
-
-    integrationSettingsForm = new IntegrationSettingsForm(mockFormSelector);
-    integrationSettingsForm.init();
-  });
-
-  afterEach(() => {
-    eventHub.dispose(); // clear event hub handlers
-  });
-
-  describe('constructor', () => {
-    it('should initialize form element refs on class object', () => {
-      expect(integrationSettingsForm.$form).toBeDefined();
-      expect(integrationSettingsForm.$form.nodeName).toBe('FORM');
-      expect(integrationSettingsForm.formSelector).toBe(mockFormSelector);
-    });
-
-    it('should initialize form metadata on class object', () => {
-      expect(integrationSettingsForm.testEndPoint).toBeDefined();
-    });
-  });
-});