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
  ...

8 files changed, 145 insertions, 84 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 6421547bbde..02129d39846 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -77,7 +77,8 @@ export default {
     class="group-row"
     >
     <div
-      class="group-row-contents">
+      class="group-row-contents"
+      :class="{ 'project-row-contents': !isGroup }">
       <item-actions
         v-if="isGroup"
         :group="group"
@@ -97,7 +98,7 @@ export default {
         />
       </div>
       <div
-        class="avatar-container s40 hidden-xs"
+        class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs"
         :class="{ 'content-loading': group.isChildrenLoading }"
       >
         <a
@@ -106,11 +107,12 @@ export default {
         >
           <img
             v-if="hasAvatar"
-            class="avatar s40"
+            class="avatar s24"
             :src="group.avatarUrl"
           />
           <identicon
             v-else
+            size-class="s24"
             :entity-id=group.id
             :entity-name="group.name"
           />
@@ -123,7 +125,7 @@ export default {
           :href="group.relativePath"
           :title="group.fullName"
           class="no-expand"
-          data-placement="top"
+          data-placement="bottom"
         >{{
           // ending bracket must be by closing tag to prevent
           // link hover text-decoration from over-extending
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 58ba5aff7cf..a685960d862 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,14 +1,14 @@
 <script>
-import { s__ } from '../../locale';
-import tooltip from '../../vue_shared/directives/tooltip';
-import modal from '../../vue_shared/components/modal.vue';
+import { s__ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import modal from '~/vue_shared/components/modal.vue';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
-import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    icon,
     modal,
   },
   directives: {
@@ -64,10 +64,9 @@ export default {
       :title="editBtnTitle"
       :aria-label="editBtnTitle"
       data-container="body"
+      data-placement="bottom"
       class="edit-group btn no-expand">
-      <icon
-        name="settings">
-      </icon>
+      <icon name="settings"/>
     </a>
     <a
       v-tooltip
@@ -77,10 +76,9 @@ export default {
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
       data-container="body"
+      data-placement="bottom"
       class="leave-group btn no-expand">
-      <i
-        class="fa fa-sign-out"
-        aria-hidden="true"/>
+      <icon name="leave"/>
     </a>
     <modal
       v-show="modalStatus"
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index 959b984816f..9e90fe2b701 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -1,4 +1,6 @@
 <script>
+import icon from '~/vue_shared/components/icon.vue';
+
 export default {
   props: {
     isGroupOpen: {
@@ -7,9 +9,12 @@ export default {
       default: false,
     },
   },
+  components: {
+    icon,
+  },
   computed: {
     iconClass() {
-      return this.isGroupOpen ? 'fa-caret-down' : 'fa-caret-right';
+      return this.isGroupOpen ? 'angle-down' : 'angle-right';
     },
   },
 };
@@ -17,9 +22,9 @@ export default {
 
 <template>
   <span class="folder-caret">
-    <i
-      :class="iconClass"
-      class="fa"
-      aria-hidden="true"/>
+    <icon
+      :size="12"
+      :name="iconClass"
+    />
   </span>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index d9bc0588908..bd9a434e255 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -1,15 +1,19 @@
 <script>
-import tooltip from '../../vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import {
   ITEM_TYPE,
   VISIBILITY_TYPE_ICON,
   GROUP_VISIBILITY_TYPE,
-  PROJECT_VISIBILITY_TYPE,
+  PROJECT_VISIBILITY_TYPE
 } from '../constants';
+import itemStatsValue from './item_stats_value.vue';
 
 export default {
-  directives: {
-    tooltip,
+  components: {
+    icon,
+    timeAgoTooltip,
+    itemStatsValue,
   },
   props: {
     item: {
@@ -39,65 +43,47 @@ export default {
 
 <template>
   <div class="stats">
-    <span
-      v-tooltip
+    <item-stats-value
       v-if="isGroup"
+      css-class="number-subgroups"
+      icon-name="folder"
       :title="s__('Subgroups')"
-      class="number-subgroups"
-      data-placement="top"
-      data-container="body">
-      <i
-        class="fa fa-folder"
-        aria-hidden="true"
-      />
-      {{item.subgroupCount}}
-    </span>
-    <span
-      v-tooltip
+      :value=item.subgroupCount
+    />
+    <item-stats-value
       v-if="isGroup"
+      css-class="number-projects"
+      icon-name="bookmark"
       :title="s__('Projects')"
-      class="number-projects"
-      data-placement="top"
-      data-container="body">
-      <i
-        class="fa fa-bookmark"
-        aria-hidden="true"
-      />
-      {{item.projectCount}}
-    </span>
-    <span
-      v-tooltip
+      :value=item.projectCount
+    />
+    <item-stats-value
       v-if="isGroup"
+      css-class="number-users"
+      icon-name="users"
       :title="s__('Members')"
-      class="number-users"
-      data-placement="top"
-      data-container="body">
-      <i
-        class="fa fa-users"
-        aria-hidden="true"
-      />
-      {{item.memberCount}}
-    </span>
-    <span
+      :value=item.memberCount
+    />
+    <item-stats-value
       v-if="isProject"
-      class="project-stars">
-      <i
-        class="fa fa-star"
-        aria-hidden="true"
-      />
-      {{item.starCount}}
-    </span>
-    <span
-      v-tooltip
+      css-class="project-stars"
+      icon-name="star"
+      :value=item.starCount
+    />
+    <item-stats-value
+      css-class="item-visibility"
+      tooltip-placement="left"
+      :icon-name="visibilityIcon"
       :title="visibilityTooltip"
-      data-placement="left"
-      data-container="body"
-      class="item-visibility">
-      <i
-        :class="visibilityIcon"
-        class="fa"
-        aria-hidden="true"
+    />
+    <div
+      class="last-updated"
+      v-if="isProject"
+    >
+      <time-ago-tooltip
+        tooltip-placement="bottom"
+        :time="item.updatedAt"
       />
-    </span>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
new file mode 100644
index 00000000000..f441cabf6d2
--- /dev/null
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -0,0 +1,68 @@
+<script>
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    cssClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    iconName: {
+      type: String,
+      required: true,
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom',
+    },
+    /**
+     * value could either be number or string
+     * as `memberCount` is always passed as string
+     * while `subgroupCount` & `projectCount`
+     * are always number
+     */
+    value: {
+      type: [Number, String],
+      required: false,
+      default: '',
+    },
+  },
+  directives: {
+    tooltip,
+  },
+  components: {
+    icon,
+  },
+  computed: {
+    isValuePresent() {
+      return this.value !== '';
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-tooltip
+    data-container="body"
+    :data-placement="tooltipPlacement"
+    :class="cssClass"
+    :title="title"
+  >
+    <icon :name="iconName"/>
+    <span
+      v-if="isValuePresent"
+      class="stat-value"
+    >
+      {{value}}
+    </span>
+  </span>
+</template>
diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue
index c02a8ad6d8c..118d94d4937 100644
--- a/app/assets/javascripts/groups/components/item_type_icon.vue
+++ b/app/assets/javascripts/groups/components/item_type_icon.vue
@@ -1,7 +1,11 @@
 <script>
+import icon from '~/vue_shared/components/icon.vue';
 import { ITEM_TYPE } from '../constants';
 
 export default {
+  components: {
+    icon,
+  },
   props: {
     itemType: {
       type: String,
@@ -16,9 +20,9 @@ export default {
   computed: {
     iconClass() {
       if (this.itemType === ITEM_TYPE.GROUP) {
-        return this.isGroupOpen ? 'fa-folder-open' : 'fa-folder';
+        return this.isGroupOpen ? 'folder-open' : 'folder';
       }
-      return 'fa-bookmark';
+      return 'bookmark';
     },
   },
 };
@@ -26,9 +30,6 @@ export default {
 
 <template>
   <span class="item-type-icon">
-    <i
-      :class="iconClass"
-      class="fa"
-      aria-hidden="true"/>
+    <icon :name="iconClass"/>
   </span>
 </template>
diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js
index 6fde41414b3..b8baed682f5 100644
--- a/app/assets/javascripts/groups/constants.js
+++ b/app/assets/javascripts/groups/constants.js
@@ -29,7 +29,7 @@ export const PROJECT_VISIBILITY_TYPE = {
 };
 
 export const VISIBILITY_TYPE_ICON = {
-  public: 'fa-globe',
-  internal: 'fa-shield',
-  private: 'fa-lock',
+  public: 'earth',
+  internal: 'shield',
+  private: 'lock',
 };
diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js
index a1689f4c5cc..ffc86175548 100644
--- a/app/assets/javascripts/groups/store/groups_store.js
+++ b/app/assets/javascripts/groups/store/groups_store.js
@@ -91,6 +91,7 @@ export default class GroupsStore {
       subgroupCount: rawGroupItem.subgroup_count,
       memberCount: rawGroupItem.number_users_with_delimiter,
       starCount: rawGroupItem.star_count,
+      updatedAt: rawGroupItem.updated_at,
     };
   }