Merge branch 'master' into 34312-eslint-vue-plugin

* master: (33 commits)
  Include integration tests in CE/EE testing documentation
  41054-Disallow creation of new Kubernetes integrations
  Resolve "Resizable file list and commit panel"
  Make tooltip placement bottom by default as per design guidelines
  Fix groups list icon, timestamp alignment and row height
  Avoid leaving a push event empty if payload cannot be created
  Use heredoc for long strings so it's easier to read
  Simplify metrics fetching for closed/merged MRs
  Better English
  Fix method lookup
  Use a background migration for issues.closed_at
  Handle Gitaly aborted merge due to branch update
  Fix API endpoints to edit wiki pages where project belongs to a group
  Fixes spec failures due to not returning metrics for MRs other than closed/merged
  Cache merged and closed events data in merge_request_metrics table
  Update test to remove carent icon check
  Update styles to fix SVG caret alignment
  Update selector to test SVG icon name
  Use SVG sprite icons
  Add support for max_count option to Git::Repository#count_commits
  ...

7 files changed, 83 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
index 5a08718e386..78c01272af6 100644
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -2,11 +2,18 @@
 import { mapGetters, mapState, mapActions } from 'vuex';
 import repoCommitSection from './repo_commit_section.vue';
 import icon from '../../vue_shared/components/icon.vue';
+import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
 export default {
+  data() {
+    return {
+      width: 290,
+    };
+  },
   components: {
     repoCommitSection,
     icon,
+    panelResizer,
   },
   computed: {
     ...mapState([
@@ -18,10 +25,20 @@ export default {
     currentIcon() {
       return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
     },
+    maxSize() {
+      return window.innerWidth / 2;
+    },
+    panelStyle() {
+      if (!this.rightPanelCollapsed) {
+        return { width: `${this.width}px` };
+      }
+      return {};
+    },
   },
   methods: {
     ...mapActions([
       'setPanelCollapsedStatus',
+      'setResizingStatus',
     ]),
     toggleCollapsed() {
       this.setPanelCollapsedStatus({
@@ -29,6 +46,12 @@ export default {
         collapsed: !this.rightPanelCollapsed,
       });
     },
+    resizingStarted() {
+      this.setResizingStatus(true);
+    },
+    resizingEnded() {
+      this.setResizingStatus(false);
+    },
   },
 };
 </script>
@@ -39,6 +62,7 @@ export default {
     :class="{
       'is-collapsed': rightPanelCollapsed,
     }"
+    :style="panelStyle"
   >
     <div 
       class="multi-file-commit-panel-section">
@@ -71,5 +95,14 @@ export default {
       <repo-commit-section 
         class=""/>
     </div>
+    <panel-resizer
+      :size.sync="width"
+      :enabled="!rightPanelCollapsed"
+      :start-size="290"
+      :min-size="200"
+      :max-size="maxSize"
+      @resize-start="resizingStarted"
+      @resize-end="resizingEnded"
+      side="left"/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 535398d98c2..269f300a04d 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -2,11 +2,18 @@
 import { mapState, mapActions } from 'vuex';
 import projectTree from './ide_project_tree.vue';
 import icon from '../../vue_shared/components/icon.vue';
+import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
 export default {
+  data() {
+    return {
+      width: 290,
+    };
+  },
   components: {
     projectTree,
     icon,
+    panelResizer,
   },
   computed: {
     ...mapState([
@@ -16,10 +23,20 @@ export default {
     currentIcon() {
       return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
     },
+    maxSize() {
+      return window.innerWidth / 2;
+    },
+    panelStyle() {
+      if (!this.leftPanelCollapsed) {
+        return { width: `${this.width}px` };
+      }
+      return {};
+    },
   },
   methods: {
     ...mapActions([
       'setPanelCollapsedStatus',
+      'setResizingStatus',
     ]),
     toggleCollapsed() {
       this.setPanelCollapsedStatus({
@@ -27,6 +44,12 @@ export default {
         collapsed: !this.leftPanelCollapsed,
       });
     },
+    resizingStarted() {
+      this.setResizingStatus(true);
+    },
+    resizingEnded() {
+      this.setResizingStatus(false);
+    },
   },
 };
 </script>
@@ -37,6 +60,7 @@ export default {
       :class="{
         'is-collapsed': leftPanelCollapsed,
       }"
+      :style="panelStyle"
     >
     <div class="multi-file-commit-panel-inner">
       <project-tree
@@ -58,5 +82,14 @@ export default {
         class="collapse-text"
       >Collapse sidebar</span>
     </button>
+    <panel-resizer
+      :size.sync="width"
+      :enabled="!leftPanelCollapsed"
+      :start-size="290"
+      :min-size="200"
+      :max-size="maxSize"
+      @resize-start="resizingStarted"
+      @resize-end="resizingEnded"
+      side="right"/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 221be4b9074..343fd0a5300 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -90,6 +90,11 @@ export default {
     rightPanelCollapsed() {
       this.editor.updateDimensions();
     },
+    panelResizing(isResizing) {
+      if (isResizing === false) {
+        this.editor.updateDimensions();
+      }
+    },
   },
   computed: {
     ...mapGetters([
@@ -99,6 +104,7 @@ export default {
     ...mapState([
       'leftPanelCollapsed',
       'rightPanelCollapsed',
+      'panelResizing',
     ]),
     shouldHideEditor() {
       return this.activeFile.binary && !this.activeFile.raw;
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index c01046c8c76..335882bb6d7 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -63,6 +63,10 @@ export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
   }
 };
 
+export const setResizingStatus = ({ commit }, resizing) => {
+  commit(types.SET_RESIZING_STATUS, resizing);
+};
+
 export const checkCommitStatus = ({ state }) =>
   service
     .getBranchData(state.currentProjectId, state.currentBranchId)
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index 4e3c10972ba..69b218a5e7d 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -5,6 +5,7 @@ export const SET_ROOT = 'SET_ROOT';
 export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
 export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
 export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
+export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
 
 // Project Mutation Types
 export const SET_PROJECT = 'SET_PROJECT';
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 2fed9019cb6..03d81be10a1 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -49,6 +49,11 @@ export default {
       rightPanelCollapsed: collapsed,
     });
   },
+  [types.SET_RESIZING_STATUS](state, resizing) {
+    Object.assign(state, {
+      panelResizing: resizing,
+    });
+  },
   [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
     Object.assign(entry.lastCommit, {
       id: lastCommit.commit.id,
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 539e382830f..61d12096946 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -19,4 +19,5 @@ export default () => ({
   projects: {},
   leftPanelCollapsed: false,
   rightPanelCollapsed: true,
+  panelResizing: false,
 });