Merge branch 'master' into '44453-performance-bar-modalbox'44453-performance-bar-modalbox

# Conflicts:
#   app/assets/javascripts/performance_bar/components/detailed_metric.vue

13 files changed, 241 insertions, 188 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 03a40096bb0..297b9c2628f 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -43,6 +43,7 @@ export default {
         'file-open': this.isBlob && this.file.opened,
         'file-active': this.isBlob && this.file.active,
         folder: this.isTree,
+        'is-open': this.file.opened,
       };
     },
   },
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index 048d5316922..db89c1d44db 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -54,41 +54,61 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.params.namespace && to.params.project) {
-    store.dispatch('getProjectData', {
-      namespace: to.params.namespace,
-      projectId: to.params.project,
-    })
-    .then(() => {
-      const fullProjectId = `${to.params.namespace}/${to.params.project}`;
+    store
+      .dispatch('getProjectData', {
+        namespace: to.params.namespace,
+        projectId: to.params.project,
+      })
+      .then(() => {
+        const fullProjectId = `${to.params.namespace}/${to.params.project}`;
 
-      if (to.params.branch) {
-        store.dispatch('getBranchData', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        });
+        if (to.params.branch) {
+          store.dispatch('getBranchData', {
+            projectId: fullProjectId,
+            branchId: to.params.branch,
+          });
 
-        store.dispatch('getFiles', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        })
-        .then(() => {
-          if (to.params[0]) {
-            const treeEntry = store.state.entries[to.params[0]];
-            if (treeEntry) {
-              store.dispatch('handleTreeEntryAction', treeEntry);
-            }
-          }
-        })
-        .catch((e) => {
-          flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
-          throw e;
-        });
-      }
-    })
-    .catch((e) => {
-      flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true);
-      throw e;
-    });
+          store
+            .dispatch('getFiles', {
+              projectId: fullProjectId,
+              branchId: to.params.branch,
+            })
+            .then(() => {
+              if (to.params[0]) {
+                const path =
+                  to.params[0].slice(-1) === '/'
+                    ? to.params[0].slice(0, -1)
+                    : to.params[0];
+                const treeEntry = store.state.entries[path];
+                if (treeEntry) {
+                  store.dispatch('handleTreeEntryAction', treeEntry);
+                }
+              }
+            })
+            .catch(e => {
+              flash(
+                'Error while loading the branch files. Please try again.',
+                'alert',
+                document,
+                null,
+                false,
+                true,
+              );
+              throw e;
+            });
+        }
+      })
+      .catch(e => {
+        flash(
+          'Error while loading the project data. Please try again.',
+          'alert',
+          document,
+          null,
+          false,
+          true,
+        );
+        throw e;
+      });
   }
 
   next();
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index e959130300b..a4cd1ab099f 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -1,10 +1,14 @@
-import {
-  decorateData,
-  sortTree,
-} from '../utils';
+import { decorateData, sortTree } from '../utils';
 
-self.addEventListener('message', (e) => {
-  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
+self.addEventListener('message', e => {
+  const {
+    data,
+    projectId,
+    branchId,
+    tempFile = false,
+    content = '',
+    base64 = false,
+  } = e.data;
 
   const treeList = [];
   let file;
@@ -15,7 +19,9 @@ self.addEventListener('message', (e) => {
     if (pathSplit.length > 0) {
       pathSplit.reduce((pathAcc, folderName) => {
         const parentFolder = acc[pathAcc[pathAcc.length - 1]];
-        const folderPath = `${(parentFolder ? `${parentFolder.path}/` : '')}${folderName}`;
+        const folderPath = `${
+          parentFolder ? `${parentFolder.path}/` : ''
+        }${folderName}`;
         const foundEntry = acc[folderPath];
 
         if (!foundEntry) {
@@ -25,9 +31,11 @@ self.addEventListener('message', (e) => {
             id: folderPath,
             name: folderName,
             path: folderPath,
-            url: `/${projectId}/tree/${branchId}/${folderPath}`,
+            url: `/${projectId}/tree/${branchId}/${folderPath}/`,
             type: 'tree',
-            parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
+            parentTreeUrl: parentFolder
+              ? parentFolder.url
+              : `/${projectId}/tree/${branchId}/`,
             tempFile,
             changed: tempFile,
             opened: tempFile,
@@ -62,7 +70,9 @@ self.addEventListener('message', (e) => {
         path,
         url: `/${projectId}/blob/${branchId}/${path}`,
         type: 'blob',
-        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        parentTreeUrl: fileFolder
+          ? fileFolder.url
+          : `/${projectId}/blob/${branchId}`,
         tempFile,
         changed: tempFile,
         content,
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 2afa4e4c1bf..09f0ea37103 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1727,6 +1727,7 @@ export default class Notes {
 
     // Get Form metadata
     const $submitBtn = $(e.target);
+    $submitBtn.prop('disabled', true);
     let $form = $submitBtn.parents('form');
     const $closeBtn = $form.find('.js-note-target-close');
     const isDiscussionNote =
@@ -1761,7 +1762,6 @@ export default class Notes {
     // If comment is to resolve discussion, disable submit buttons while
     // comment posting is finished.
     if (isDiscussionResolve) {
-      $submitBtn.disable();
       $form.find('.js-comment-submit-button').disable();
     }
 
@@ -1816,6 +1816,7 @@ export default class Notes {
       .then(res => {
         const note = res.data;
 
+        $submitBtn.prop('disabled', false);
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
@@ -1899,7 +1900,7 @@ export default class Notes {
       .catch(() => {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
-
+        $submitBtn.prop('disabled', false);
         const blurEvent = new CustomEvent('blur.imageDiff', {
           detail: e,
         });
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 68d539c57a4..882d6f7077a 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -27,12 +27,21 @@ export default {
       required: true,
     },
   },
+  computed: {
+    metricDetails() {
+      return this.currentRequest.details[this.metric];
+    },
+    detailsList() {
+      return this.metricDetails[this.details];
+    },
+  },
 };
 </script>
 <template>
   <div
     :id="`peek-view-${metric}`"
     class="view"
+    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
@@ -40,35 +49,40 @@ export default {
       type="button"
       data-toggle="modal"
     >
-      <span
-        v-if="currentRequest.details"
-        class="bold"
-      >
-        {{ currentRequest.details[metric].duration }}
-        /
-        {{ currentRequest.details[metric].calls }}
-      </span>
+      {{ metricDetails.duration }}
+      /
+      {{ metricDetails.calls }}
     </button>
     <gl-modal
-      v-if="currentRequest.details"
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
       class="performance-bar-modal"
     >
-      <table class="table">
-        <tr
-          v-for="(item, index) in currentRequest.details[metric][details]"
-          :key="index"
-        >
-          <td><strong>{{ item.duration }}ms</strong></td>
-          <td
-            v-for="key in keys"
-            :key="key"
-            class="break-all"
+      <table
+        class="table"
+      >
+        <template v-if="detailsList.length">
+          <tr
+            v-for="(item, index) in detailsList"
+            :key="index"
           >
-            {{ item[key] }}
-          </td>
-        </tr>
+            <td><strong>{{ item.duration }}ms</strong></td>
+            <td
+              v-for="key in keys"
+              :key="key"
+              class="break-all"
+            >
+              {{ item[key] }}
+            </td>
+          </tr>
+        </template>
+        <template v-else>
+          <tr>
+            <td>
+              No {{ header.toLowerCase() }} for this request.
+            </td>
+          </tr>
+        </template>
       </table>
 
       <div slot="footer">
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 88345cf2ad9..2fd1715ee79 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -113,27 +113,21 @@ export default {
     id="js-peek"
     :class="env"
   >
-    <request-selector
-      v-if="currentRequest"
-      :current-request="currentRequest"
-      :requests="requests"
-      @change-current-request="changeCurrentRequest"
-    />
-    <div
-      id="peek-view-host"
-      class="view prepend-left-5"
-    >
-      <span
-        v-if="currentRequest && currentRequest.details"
-        class="current-host"
-      >
-        {{ currentRequest.details.host.hostname }}
-      </span>
-    </div>
     <div
       v-if="currentRequest"
-      class="wrapper"
+      class="container-fluid container-limited"
     >
+      <div
+        id="peek-view-host"
+        class="view"
+      >
+        <span
+          v-if="currentRequest.details"
+          class="current-host"
+        >
+          {{ currentRequest.details.host.hostname }}
+        </span>
+      </div>
       <upstream-performance-bar
         v-if="initialRequest && currentRequest.details"
       />
@@ -186,6 +180,12 @@ export default {
           gc
         </span>
       </div>
+      <request-selector
+        v-if="currentRequest"
+        :current-request="currentRequest"
+        :requests="requests"
+        @change-current-request="changeCurrentRequest"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 2f360ea6f6c..3ed07a4a47d 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     id="peek-request-selector"
-    class="append-right-5 pull-right"
+    class="pull-right"
   >
     <select v-model="currentRequestId">
       <option
diff --git a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue b/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
index d438b1ec27b..2b5915f381f 100644
--- a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
+++ b/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
@@ -5,6 +5,8 @@ export default {
       .getElementById('peek-view-performance-bar')
       .cloneNode(true);
 
+    upstreamPerformanceBar.classList.remove('hidden');
+
     this.$refs.wrapper.appendChild(upstreamPerformanceBar);
   },
 };
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index fca488120f6..a0ddf36a672 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -4,9 +4,9 @@ import Vue from 'vue';
 import performanceBarApp from './components/performance_bar_app.vue';
 import PerformanceBarStore from './stores/performance_bar_store';
 
-export default () =>
+export default ({ container }) =>
   new Vue({
-    el: '#js-peek',
+    el: container,
     components: {
       performanceBarApp,
     },
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
deleted file mode 100644
index a9fbc7f1a2f..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import stopwatchSvg from 'icons/_icon_stopwatch.svg';
-import { abbreviateTime } from '../../../lib/utils/pretty_time';
-
-export default {
-  name: 'time-tracking-collapsed-state',
-  props: {
-    showComparisonState: {
-      type: Boolean,
-      required: true,
-    },
-    showSpentOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showEstimateOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showNoTimeTrackingState: {
-      type: Boolean,
-      required: true,
-    },
-    timeSpentHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    timeEstimateHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    timeSpent() {
-      return this.abbreviateTime(this.timeSpentHumanReadable);
-    },
-    timeEstimate() {
-      return this.abbreviateTime(this.timeEstimateHumanReadable);
-    },
-    divClass() {
-      if (this.showComparisonState) {
-        return 'compare';
-      } else if (this.showEstimateOnlyState) {
-        return 'estimate-only';
-      } else if (this.showSpentOnlyState) {
-        return 'spend-only';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-tracking';
-      }
-
-      return '';
-    },
-    spanClass() {
-      if (this.showComparisonState) {
-        return '';
-      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
-        return 'bold';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-value';
-      }
-
-      return '';
-    },
-    text() {
-      if (this.showComparisonState) {
-        return `${this.timeSpent} / ${this.timeEstimate}`;
-      } else if (this.showEstimateOnlyState) {
-        return `-- / ${this.timeEstimate}`;
-      } else if (this.showSpentOnlyState) {
-        return `${this.timeSpent} / --`;
-      } else if (this.showNoTimeTrackingState) {
-        return 'None';
-      }
-
-      return '';
-    },
-  },
-  methods: {
-    abbreviateTime(timeStr) {
-      return abbreviateTime(timeStr);
-    },
-  },
-  template: `
-    <div class="sidebar-collapsed-icon">
-      ${stopwatchSvg}
-      <div class="time-tracking-collapsed-summary">
-        <div :class="divClass">
-          <span :class="spanClass">
-            {{ text }}
-          </span>
-        </div>
-      </div>
-    </div>
-    `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
new file mode 100644
index 00000000000..3b86f1145d1
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -0,0 +1,102 @@
+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+  import { abbreviateTime } from '../../../lib/utils/pretty_time';
+
+  export default {
+    name: 'TimeTrackingCollapsedState',
+    components: {
+      icon,
+    },
+    props: {
+      showComparisonState: {
+        type: Boolean,
+        required: true,
+      },
+      showSpentOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showEstimateOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showNoTimeTrackingState: {
+        type: Boolean,
+        required: true,
+      },
+      timeSpentHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      timeEstimateHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      timeSpent() {
+        return this.abbreviateTime(this.timeSpentHumanReadable);
+      },
+      timeEstimate() {
+        return this.abbreviateTime(this.timeEstimateHumanReadable);
+      },
+      divClass() {
+        if (this.showComparisonState) {
+          return 'compare';
+        } else if (this.showEstimateOnlyState) {
+          return 'estimate-only';
+        } else if (this.showSpentOnlyState) {
+          return 'spend-only';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-tracking';
+        }
+
+        return '';
+      },
+      spanClass() {
+        if (this.showComparisonState) {
+          return '';
+        } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+          return 'bold';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-value';
+        }
+
+        return '';
+      },
+      text() {
+        if (this.showComparisonState) {
+          return `${this.timeSpent} / ${this.timeEstimate}`;
+        } else if (this.showEstimateOnlyState) {
+          return `-- / ${this.timeEstimate}`;
+        } else if (this.showSpentOnlyState) {
+          return `${this.timeSpent} / --`;
+        } else if (this.showNoTimeTrackingState) {
+          return 'None';
+        }
+
+        return '';
+      },
+    },
+    methods: {
+      abbreviateTime(timeStr) {
+        return abbreviateTime(timeStr);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="sidebar-collapsed-icon">
+    <icon name="timer" />
+    <div class="time-tracking-collapsed-summary">
+      <div :class="divClass">
+        <span :class="spanClass">
+          {{ text }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 230736a56b8..28240468d2c 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,6 +1,6 @@
 <script>
 import timeTrackingHelpState from './help_state';
-import timeTrackingCollapsedState from './collapsed_state';
+import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
 import timeTrackingEstimateOnlyPane from './estimate_only_pane';
@@ -11,7 +11,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'IssuableTimeTracker',
   components: {
-    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    TimeTrackingCollapsedState,
     'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index c9d7c0f4999..ee1c3498748 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -62,8 +62,7 @@
         return `${gon.sprite_file_icons}#${iconName}`;
       },
       folderIconName() {
-        // We don't have a open folder icon yet
-        return this.opened ? 'folder' : 'folder';
+        return this.opened ? 'folder-open' : 'folder';
       },
       iconSizeClass() {
         return this.size ? `s${this.size}` : '';