Merge branch 'leipert-safeguard-initalizations' into 'master'

Safeguard initalizations

See merge request gitlab-org/gitlab!42133

app/assets/javascripts/main.js

@@ -111,7 +111,9 @@ function deferredInitialisation() {
   initPersistentUserCallouts();
   initDefaultTrackers();
 
-  document.querySelector('#search').addEventListener(
+  const search = document.querySelector('#search');
+  if (search) {
+    search.addEventListener(
       'focus',
       () => {
         import(/* webpackChunkName: 'globalSearch' */ './search_autocomplete')
@@ -123,6 +125,7 @@ function deferredInitialisation() {
       },
       { once: true },
     );
+  }
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
 

app/assets/javascripts/performance_bar/index.js

@@ -5,14 +5,15 @@ import axios from '~/lib/utils/axios_utils';
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
-const initPerformanceBar = ({ container }) =>
-  new Vue({
-    el: container,
+const initPerformanceBar = el => {
+  const performanceBarData = el.dataset;
+
+  return new Vue({
+    el,
     components: {
       PerformanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
-      const performanceBarData = document.querySelector(this.$options.el).dataset;
       const store = new PerformanceBarStore();
 
       return {
@@ -118,9 +119,13 @@ const initPerformanceBar = ({ container }) =>
       });
     },
   });
+};
 
 document.addEventListener('DOMContentLoaded', () => {
-  initPerformanceBar({ container: '#js-peek' });
+  const jsPeek = document.querySelector('#js-peek');
+  if (jsPeek) {
+    initPerformanceBar(jsPeek);
+  }
 });
 
 export default initPerformanceBar;

spec/frontend/performance_bar/index_spec.js

@@ -44,7 +44,7 @@ describe('performance bar wrapper', () => {
       {},
     );
 
-    vm = performanceBar({ container: '#js-peek' });
+    vm = performanceBar(peekWrapper);
   });
 
   afterEach(() => {