Merge remote-tracking branch 'upstream/master' into no-ivar-in-modules

* upstream/master: (1723 commits)
  Resolve "Editor icons"
  Refactor issuable destroy action
  Ignore routes matching legacy_*_redirect in route specs
  Gitlab::Git::RevList and LfsChanges use lazy popen
  Gitlab::Git::Popen can lazily hand output to a block
  Merge branch 'master-i18n' into 'master'
  Remove unique validation from external_url in Environment
  Expose `duration` in Job API entity
  Add TimeCop freeze for DST and Regular time
  Harcode project visibility
  update a changelog
  Put a condition to old migration that adds fast_forward column to MRs
  Expose project visibility as CI variable
  fix flaky tests by removing unneeded clicks and focus actions
  fix flaky test in gfm_autocomplete_spec.rb
  Use Gitlab::Git operations for repository mirroring
  Encapsulate git operations for mirroring in Gitlab::Git
  Create a Wiki Repository's raw_repository properly
  Add `Gitlab::Git::Repository#fetch` command
  Fix Gitlab::Metrics::System#real_time and #monotonic_time doc
  ...

2 files changed, 151 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
new file mode 100644
index 00000000000..b8510a6ce3a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -0,0 +1,125 @@
+<script>
+import { __, n__, sprintf } from '../../../locale';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    participants: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 7,
+    },
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  components: {
+    loadingIcon,
+    userAvatarImage,
+  },
+  computed: {
+    lessParticipants() {
+      return this.participants.slice(0, this.numberOfLessParticipants);
+    },
+    visibleParticipants() {
+      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+    },
+    hasMoreParticipants() {
+      return this.participants.length > this.numberOfLessParticipants;
+    },
+    toggleLabel() {
+      let label = '';
+      if (this.isShowingMoreParticipants) {
+        label = __('- show less');
+      } else {
+        label = sprintf(__('+ %{moreCount} more'), {
+          moreCount: this.participants.length - this.numberOfLessParticipants,
+        });
+      }
+
+      return label;
+    },
+    participantLabel() {
+      return sprintf(
+        n__('%{count} participant', '%{count} participants', this.participants.length),
+        { count: this.loading ? '' : this.participantCount },
+      );
+    },
+    participantCount() {
+      return this.participants.length;
+    },
+  },
+  methods: {
+    toggleMoreParticipants() {
+      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa fa-users"
+        aria-hidden="true">
+      </i>
+      <loading-icon
+        v-if="loading"
+        class="js-participants-collapsed-loading-icon" />
+      <span
+        v-else
+        class="js-participants-collapsed-count">
+        {{ participantCount }}
+      </span>
+    </div>
+    <div class="title hide-collapsed">
+      <loading-icon
+        v-if="loading"
+        :inline="true"
+        class="js-participants-expanded-loading-icon" />
+      {{ participantLabel }}
+    </div>
+    <div class="participants-list hide-collapsed">
+      <div
+        v-for="participant in visibleParticipants"
+        :key="participant.id"
+        class="participants-author js-participants-author">
+        <a
+          class="author_link"
+          :href="participant.web_url">
+          <user-avatar-image
+            :lazy="true"
+            :img-src="participant.avatar_url"
+            css-classes="avatar-inline"
+            :size="24"
+            :tooltip-text="participant.name"
+            tooltip-placement="bottom" />
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="hasMoreParticipants"
+      class="participants-more hide-collapsed">
+      <button
+        type="button"
+        class="btn-transparent btn-blank js-toggle-participants-button"
+        @click="toggleMoreParticipants">
+        {{ toggleLabel }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
new file mode 100644
index 00000000000..c1296b28db7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
@@ -0,0 +1,26 @@
+<script>
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import participants from './participants.vue';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+  components: {
+    participants,
+  },
+};
+</script>
+
+<template>
+  <div class="block participants">
+    <participants
+      :loading="store.isFetching.participants"
+      :participants="store.participants"
+      :number-of-less-participants="7" />
+  </div>
+</template>