Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

6 files changed, 18 insertions, 33 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 90e14d8325f..930c5e50511 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -76,12 +76,12 @@ export default {
         this.openedBacktraces = [...this.openedBacktraces, toggledIndex];
       } else {
         this.openedBacktraces = this.openedBacktraces.filter(
-          openedIndex => openedIndex !== toggledIndex,
+          (openedIndex) => openedIndex !== toggledIndex,
         );
       }
     },
     itemHasOpenedBacktrace(toggledIndex) {
-      return this.openedBacktraces.find(openedIndex => openedIndex === toggledIndex) >= 0;
+      return this.openedBacktraces.find((openedIndex) => openedIndex === toggledIndex) >= 0;
     },
   },
 };
@@ -141,7 +141,7 @@ export default {
         </template>
       </table>
 
-      <template #footer>
+      <template #modal-footer>
         <div></div>
       </template>
     </gl-modal>
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 5a9d3a6d313..5666e038f02 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -25,7 +25,7 @@ export default {
   },
   computed: {
     requestsWithWarnings() {
-      return this.requests.filter(request => request.hasWarnings);
+      return this.requests.filter((request) => request.hasWarnings);
     },
     warningMessage() {
       return n__(
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index e0b7f2190ca..0d5c294ea56 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -10,7 +10,10 @@ import initPerformanceBarLog from './performance_bar_log';
 
 Vue.use(Translate);
 
-const initPerformanceBar = el => {
+const initPerformanceBar = (el) => {
+  if (!el) {
+    return undefined;
+  }
   const performanceBarData = el.dataset;
 
   return new Vue({
@@ -55,7 +58,7 @@ const initPerformanceBar = el => {
         this.store.addRequest(requestId, requestUrl);
 
         PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
-          .then(res => {
+          .then((res) => {
             this.store.addRequestDetails(requestId, res.data);
 
             if (this.requestId === requestId) this.collectFrontendPerformanceMetrics();
@@ -84,7 +87,7 @@ const initPerformanceBar = el => {
 
           if ('PerformanceObserver' in window) {
             // We start observing for more incoming timings
-            const observer = new PerformanceObserver(list => {
+            const observer = new PerformanceObserver((list) => {
               newEntries = newEntries.concat(list.getEntries().map(this.transformResourceEntry));
               this.updateFrontendPerformanceMetrics(durationString, newEntries);
             });
@@ -126,25 +129,7 @@ const initPerformanceBar = el => {
   });
 };
 
-let loadedPeekBar = false;
-function loadBar() {
-  const jsPeek = document.querySelector('#js-peek');
-  if (!loadedPeekBar && jsPeek) {
-    loadedPeekBar = true;
-    initPerformanceBar(jsPeek);
-  }
-}
-
-// If js-peek is not loaded when this script is executed, this call will do nothing
-// If this is the case, then it will loadBar on DOMContentLoaded. We would prefer it
-// to be initialized before the DOMContetLoaded event in order to pick up all the
-// requests sent from the page.
-loadBar();
-
-document.addEventListener('DOMContentLoaded', () => {
-  loadBar();
-});
-
+initPerformanceBar(document.querySelector('#js-peek'));
 initPerformanceBarLog();
 
 export default initPerformanceBar;
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
index 3ba7ff1c221..c61b0cb32e8 100644
--- a/app/assets/javascripts/performance_bar/performance_bar_log.js
+++ b/app/assets/javascripts/performance_bar/performance_bar_log.js
@@ -3,7 +3,7 @@ import { getCLS, getFID, getLCP } from 'web-vitals';
 import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance/constants';
 
 const initVitalsLog = () => {
-  const reportVital = data => {
+  const reportVital = (data) => {
     console.log(`${String.fromCodePoint(0x1f4c8)} ${data.name} : `, data);
   };
 
@@ -18,9 +18,9 @@ const initVitalsLog = () => {
 };
 
 const logUserTimingMetrics = () => {
-  const metricsProcessor = list => {
+  const metricsProcessor = (list) => {
     const entries = list.getEntries();
-    entries.forEach(entry => {
+    entries.forEach((entry) => {
       const { name, entryType, startTime, duration } = entry;
       const typeMapper = {
         [PERFORMANCE_TYPE_MARK]: String.fromCodePoint(0x1f3af),
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 3c8303d102e..38255b3a37d 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -9,7 +9,7 @@ export default class PerformanceBarService {
   }
 
   static registerInterceptor(peekUrl, callback) {
-    PerformanceBarService.interceptor = response => {
+    PerformanceBarService.interceptor = (response) => {
       const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
         response,
         peekUrl,
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 8c88851f039..9d12d228d35 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -20,7 +20,7 @@ export default class PerformanceBarStore {
   }
 
   findRequest(requestId) {
-    return this.requests.find(request => request.id === requestId);
+    return this.requests.find((request) => request.id === requestId);
   }
 
   addRequestDetails(requestId, requestDetails) {
@@ -43,13 +43,13 @@ export default class PerformanceBarStore {
   }
 
   requestsWithDetails() {
-    return this.requests.filter(request => request.details);
+    return this.requests.filter((request) => request.details);
   }
 
   canTrackRequest(requestUrl) {
     return (
       requestUrl.endsWith('/api/graphql') ||
-      this.requests.filter(request => request.url === requestUrl).length < 2
+      this.requests.filter((request) => request.url === requestUrl).length < 2
     );
   }