Merge branch 'jnnkl-remove-obsolote-eventlisteners' into 'master'

Remove obsolete DOMContentLoadedEventListener

See merge request gitlab-org/gitlab!67437

app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js

 import UsersSelect from '~/users_select';
 
-document.addEventListener('DOMContentLoaded', () => new UsersSelect());
+new UsersSelect(); // eslint-disable-line no-new

app/assets/javascripts/pages/import/fogbugz/status/index.js

 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);

app/assets/javascripts/pages/profiles/accounts/show/index.js

 import { initClose2faSuccessMessage } from '~/authentication/two_factor_auth';
 import initProfileAccount from '~/profile/account';
 
-document.addEventListener('DOMContentLoaded', initProfileAccount);
+initProfileAccount();
 
 initClose2faSuccessMessage();

app/assets/javascripts/pages/profiles/keys/index.js

 import initConfirmModal from '~/confirm_modal';
 import AddSshKeyValidation from '~/profile/add_ssh_key_validation';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initConfirmModal();
+initConfirmModal();
 
+function initSshKeyValidation() {
   const input = document.querySelector('.js-add-ssh-key-validation-input');
   if (!input) return;
 
@@ -18,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {
     confirmSubmit,
   );
   addSshKeyValidation.register();
-});
+}
+
+initSshKeyValidation();

app/assets/javascripts/pages/profiles/two_factor_auths/index.js

@@ -2,17 +2,15 @@ import { mount2faRegistration } from '~/authentication/mount_2fa';
 import { initRecoveryCodes } from '~/authentication/two_factor_auth';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const twoFactorNode = document.querySelector('.js-two-factor-auth');
-  const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false;
+const twoFactorNode = document.querySelector('.js-two-factor-auth');
+const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false;
 
-  if (skippable) {
-    const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert');
-    if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
-  }
+if (skippable) {
+  const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+  const flashAlert = document.querySelector('.flash-alert');
+  if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
+}
 
-  mount2faRegistration();
-});
+mount2faRegistration();
 
 initRecoveryCodes();

app/assets/javascripts/pages/projects/graphs/charts/index.js

@@ -7,151 +7,149 @@ import SeriesDataMixin from './series_data_mixin';
 
 const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data }));
 
-document.addEventListener('DOMContentLoaded', () => {
-  waitForCSSLoaded(() => {
-    const languagesContainer = document.getElementById('js-languages-chart');
-    const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
-    const monthContainer = document.getElementById('js-month-chart');
-    const weekdayContainer = document.getElementById('js-weekday-chart');
-    const hourContainer = document.getElementById('js-hour-chart');
-    const LANGUAGE_CHART_HEIGHT = 300;
-    const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
-      if (firstDayOfWeek === 0) {
-        return weekDays;
-      }
+waitForCSSLoaded(() => {
+  const languagesContainer = document.getElementById('js-languages-chart');
+  const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
+  const monthContainer = document.getElementById('js-month-chart');
+  const weekdayContainer = document.getElementById('js-weekday-chart');
+  const hourContainer = document.getElementById('js-hour-chart');
+  const LANGUAGE_CHART_HEIGHT = 300;
+  const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
+    if (firstDayOfWeek === 0) {
+      return weekDays;
+    }
 
-      return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
-        const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
+    return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
+      const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
 
-        return {
-          ...acc,
-          [reorderedDayName]: weekDays[reorderedDayName],
-        };
-      }, {});
-    };
+      return {
+        ...acc,
+        [reorderedDayName]: weekDays[reorderedDayName],
+      };
+    }, {});
+  };
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: languagesContainer,
-      components: {
-        GlColumnChart,
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: languagesContainer,
+    components: {
+      GlColumnChart,
+    },
+    data() {
+      return {
+        chartData: JSON.parse(languagesContainer.dataset.chartData),
+      };
+    },
+    computed: {
+      seriesData() {
+        return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
       },
-      data() {
-        return {
-          chartData: JSON.parse(languagesContainer.dataset.chartData),
-        };
-      },
-      computed: {
-        seriesData() {
-          return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: this.seriesData,
+          xAxisTitle: __('Used programming language'),
+          yAxisTitle: __('Percentage'),
+          xAxisType: 'category',
         },
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: this.seriesData,
-            xAxisTitle: __('Used programming language'),
-            yAxisTitle: __('Percentage'),
-            xAxisType: 'category',
-          },
-          attrs: {
-            height: LANGUAGE_CHART_HEIGHT,
-          },
-        });
-      },
-    });
+        attrs: {
+          height: LANGUAGE_CHART_HEIGHT,
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: codeCoverageContainer,
-      render(h) {
-        return h(CodeCoverage, {
-          props: {
-            graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: codeCoverageContainer,
+    render(h) {
+      return h(CodeCoverage, {
+        props: {
+          graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: monthContainer,
-      components: {
-        GlColumnChart,
-      },
-      mixins: [SeriesDataMixin],
-      data() {
-        return {
-          chartData: JSON.parse(monthContainer.dataset.chartData),
-        };
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: seriesDataToBarData(this.seriesData),
-            xAxisTitle: __('Day of month'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: monthContainer,
+    components: {
+      GlColumnChart,
+    },
+    mixins: [SeriesDataMixin],
+    data() {
+      return {
+        chartData: JSON.parse(monthContainer.dataset.chartData),
+      };
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: seriesDataToBarData(this.seriesData),
+          xAxisTitle: __('Day of month'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: weekdayContainer,
-      components: {
-        GlColumnChart,
-      },
-      data() {
-        return {
-          chartData: JSON.parse(weekdayContainer.dataset.chartData),
-        };
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: weekdayContainer,
+    components: {
+      GlColumnChart,
+    },
+    data() {
+      return {
+        chartData: JSON.parse(weekdayContainer.dataset.chartData),
+      };
+    },
+    computed: {
+      seriesData() {
+        const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
+        const data = Object.keys(weekDays).reduce((acc, key) => {
+          acc.push([key, weekDays[key]]);
+          return acc;
+        }, []);
+        return [{ name: 'full', data }];
       },
-      computed: {
-        seriesData() {
-          const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
-          const data = Object.keys(weekDays).reduce((acc, key) => {
-            acc.push([key, weekDays[key]]);
-            return acc;
-          }, []);
-          return [{ name: 'full', data }];
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: this.seriesData,
+          xAxisTitle: __('Weekday'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
         },
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: this.seriesData,
-            xAxisTitle: __('Weekday'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: hourContainer,
-      components: {
-        GlColumnChart,
-      },
-      mixins: [SeriesDataMixin],
-      data() {
-        return {
-          chartData: JSON.parse(hourContainer.dataset.chartData),
-        };
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: seriesDataToBarData(this.seriesData),
-            xAxisTitle: __('Hour (UTC)'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: hourContainer,
+    components: {
+      GlColumnChart,
+    },
+    mixins: [SeriesDataMixin],
+    data() {
+      return {
+        chartData: JSON.parse(hourContainer.dataset.chartData),
+      };
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: seriesDataToBarData(this.seriesData),
+          xAxisTitle: __('Hour (UTC)'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
+        },
+      });
+    },
   });
 });