Merge branch '44846-improve-web-ide-left-panel-and-modes' into ide-sidebar-commit-box

35 files changed, 417 insertions, 155 deletions

diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index dbee81fa320..6bd7c6b49cb 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -43,6 +43,7 @@
   <div class="environments-container">
 
     <loading-icon
+      class="prepend-top-default"
       label="Loading environments"
       v-if="isLoading"
       size="3"
diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue
index fdbc14a4b8f..1cec84706fc 100644
--- a/app/assets/javascripts/ide/components/changed_file_icon.vue
+++ b/app/assets/javascripts/ide/components/changed_file_icon.vue
@@ -43,7 +43,7 @@ export default {
       return `${this.changedIcon}-solid`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon} prepend-left-5 pull-left`;
+      return `multi-${this.changedIcon} pull-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
@@ -79,13 +79,7 @@ export default {
     class="ide-file-changed-icon"
   >
     <icon
-      v-if="file.staged && showStagedIcon"
-      :name="stagedIcon"
-      :size="12"
-      :css-classes="changedIconClass"
-    />
-    <icon
-      v-if="file.changed || file.tempFile || (file.staged && !showStagedIcon)"
+      v-if="file.changed || file.tempFile || file.staged"
       :name="changedIcon"
       :size="12"
       :css-classes="changedIconClass"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 0031add101e..163b21221df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -23,7 +23,7 @@ export default {
   computed: {
     ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters(['hasChanges', 'someUncommitedChanges']),
+    ...mapGetters(['hasChanges']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
     overviewText() {
       return sprintf(
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ad4713c40d5..872302840e2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -36,7 +36,7 @@ export default {
       return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
     },
     iconClass() {
-      return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
+      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 4f102cfc026..14946f8c9fa 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,22 +1,29 @@
 <script>
-import { mapActions } from 'vuex';
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import fileIcon from '~/vue_shared/components/file_icon.vue';
+import { mapActions, mapGetters } from 'vuex';
+import { n__, __, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import router from '../ide_router';
-import newDropdown from './new_dropdown/index.vue';
-import fileStatusIcon from './repo_file_status_icon.vue';
-import changedFileIcon from './changed_file_icon.vue';
-import mrFileIcon from './mr_file_icon.vue';
+import NewDropdown from './new_dropdown/index.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
+import MrFileIcon from './mr_file_icon.vue';
 
 export default {
   name: 'RepoFile',
+  directives: {
+    tooltip,
+  },
   components: {
-    skeletonLoadingContainer,
-    newDropdown,
-    fileStatusIcon,
-    fileIcon,
-    changedFileIcon,
-    mrFileIcon,
+    SkeletonLoadingContainer,
+    NewDropdown,
+    FileStatusIcon,
+    FileIcon,
+    ChangedFileIcon,
+    MrFileIcon,
+    Icon,
   },
   props: {
     file: {
@@ -34,6 +41,34 @@ export default {
     },
   },
   computed: {
+    ...mapGetters([
+      'getChangesInFolder',
+      'getUnstagedFilesCountForPath',
+      'getStagedFilesCountForPath',
+    ]),
+    folderUnstagedCount() {
+      return this.getUnstagedFilesCountForPath(this.file.path);
+    },
+    folderStagedCount() {
+      return this.getStagedFilesCountForPath(this.file.path);
+    },
+    changesCount() {
+      return this.getChangesInFolder(this.file.path);
+    },
+    folderChangesTooltip() {
+      if (this.changesCount === 0) return undefined;
+
+      if (this.folderUnstagedCount > 0 && this.folderStagedCount === 0) {
+        return n__('%d unstaged change', '%d unstaged changes', this.folderUnstagedCount);
+      } else if (this.folderUnstagedCount === 0 && this.folderStagedCount > 0) {
+        return n__('%d staged change', '%d staged changes', this.folderStagedCount);
+      }
+
+      return sprintf(__('%{unstaged} unstaged and %{staged} staged changes'), {
+        unstaged: this.folderUnstagedCount,
+        staged: this.folderStagedCount,
+      });
+    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -53,10 +88,19 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    showTreeChangesCount() {
+      return this.isTree && this.changesCount > 0 && !this.file.opened;
+    },
+    showChangedFileIcon() {
+      return this.file.changed || this.file.tempFile || this.file.staged;
+    },
   },
   updated() {
     if (this.file.type === 'blob' && this.file.active) {
-      this.$el.scrollIntoView();
+      this.$el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
     }
   },
   methods: {
@@ -104,8 +148,23 @@ export default {
           <mr-file-icon
             v-if="file.mrChange"
           />
+          <span
+            v-if="showTreeChangesCount"
+            class="ide-tree-changes"
+          >
+            {{ changesCount }}
+            <icon
+              v-tooltip
+              :title="folderChangesTooltip"
+              data-container="body"
+              data-placement="right"
+              name="file-modified"
+              :size="12"
+              css-classes="prepend-left-5 multi-file-modified"
+            />
+          </span>
           <changed-file-icon
-            v-if="file.changed || file.tempFile || file.staged"
+            v-else-if="showChangedFileIcon"
             :file="file"
             :show-tooltip="true"
             :show-staged-icon="true"
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 8494f07ed84..28e08c2b679 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,4 +1,9 @@
+<<<<<<< HEAD
 import { activityBarViews } from '../constants';
+=======
+import { __ } from '~/locale';
+import { getChangesCountForFiles, filePathMatches } from './utils';
+>>>>>>> master
 
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
@@ -52,6 +57,7 @@ export const allBlobs = state =>
     }, [])
     .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
 
+export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
 export const lastOpenedFile = state =>
@@ -64,5 +70,20 @@ export const isReviewModeActive = state => state.currentActivityView === activit
 export const someUncommitedChanges = state =>
   !!(state.changedFiles.length || state.stagedFiles.length);
 
+export const getChangesInFolder = state => path => {
+  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f, path)).length;
+  const stagedFilesCount = state.stagedFiles.filter(
+    f => filePathMatches(f, path) && !getChangedFile(state)(f.path),
+  ).length;
+
+  return changedFilesCount + stagedFilesCount;
+};
+
+export const getUnstagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.changedFiles, path);
+
+export const getStagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.stagedFiles, path);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 59185f8f0ad..bc79ff4a542 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -33,7 +33,6 @@ export const dataStructure = () => ({
   raw: '',
   content: '',
   parentTreeUrl: '',
-  parentPath: '',
   renderError: false,
   base64: false,
   editorRow: 1,
@@ -43,6 +42,7 @@ export const dataStructure = () => ({
   viewMode: 'edit',
   previewMode: null,
   size: 0,
+  parentPath: null,
   lastOpenedAt: 0,
 });
 
@@ -83,7 +83,6 @@ export const decorateData = entity => {
     opened,
     active,
     parentTreeUrl,
-    parentPath,
     changed,
     renderError,
     content,
@@ -91,6 +90,7 @@ export const decorateData = entity => {
     previewMode,
     file_lock,
     html,
+    parentPath,
   };
 };
 
@@ -137,3 +137,9 @@ export const sortTree = sortedTree =>
       }),
     )
     .sort(sortTreesByTypeAndName);
+
+export const filePathMatches = (f, path) =>
+  f.path.replace(new RegExp(`${f.name}$`), '').indexOf(`${path}/`) === 0;
+
+export const getChangesCountForFiles = (files, path) =>
+  files.filter(f => filePathMatches(f, path)).length;
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 6d95153af28..8f9e6761d20 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -70,6 +70,9 @@
       toggleMoreParticipants() {
         this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
       },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
+      },
     },
   };
 </script>
@@ -82,6 +85,7 @@
       data-container="body"
       data-placement="left"
       :title="participantLabel"
+      @click="onClickCollapsedIcon"
     >
       <i
         class="fa fa-users"
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
index 3e8cc7a6630..385717e7c1e 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -1,6 +1,5 @@
 <script>
 import Store from '../../stores/sidebar_store';
-import eventHub from '../../event_hub';
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import subscriptions from './subscriptions.vue';
@@ -20,12 +19,6 @@ export default {
       store: new Store(),
     };
   },
-  created() {
-    eventHub.$on('toggleSubscription', this.onToggleSubscription);
-  },
-  beforeDestroy() {
-    eventHub.$off('toggleSubscription', this.onToggleSubscription);
-  },
   methods: {
     onToggleSubscription() {
       this.mediator.toggleSubscription()
@@ -42,6 +35,7 @@ export default {
     <subscriptions
       :loading="store.isFetching.subscriptions"
       :subscribed="store.subscribed"
+      @toggleSubscription="onToggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index d69d100a26c..f0df759ef7a 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -47,8 +47,25 @@
       },
     },
     methods: {
+      /**
+       * We need to emit this event on both component & eventHub
+       * for 2 dependencies;
+       *
+       * 1. eventHub: This component is used in Issue Boards sidebar
+       *              where component template is part of HAML
+       *              and event listeners are tied to app's eventHub.
+       * 2. Component: This compone is also used in Epics in EE
+       *               where listeners are tied to component event.
+       */
       toggleSubscription() {
+        // App's eventHub event emission.
         eventHub.$emit('toggleSubscription', this.id);
+
+        // Component event emission.
+        this.$emit('toggleSubscription', this.id);
+      },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
       },
     },
   };
@@ -56,7 +73,10 @@
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon">
+    <div
+      class="sidebar-collapsed-icon"
+      @click="onClickCollapsedIcon"
+    >
       <span
         v-tooltip
         :title="notificationTooltip"
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js
deleted file mode 100644
index bf987562647..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  name: 'time-tracking-spent-only-pane',
-  props: {
-    timeSpentHumanReadable: {
-      type: String,
-      required: true,
-    },
-  },
-  template: `
-    <div class="time-tracking-spend-only-pane">
-      <span class="bold">Spent:</span>
-      {{ timeSpentHumanReadable }}
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
new file mode 100644
index 00000000000..59cd99f8f14
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
@@ -0,0 +1,18 @@
+<script>
+export default {
+  name: 'TimeTrackingSpentOnlyPane',
+  props: {
+    timeSpentHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="time-tracking-spend-only-pane">
+    <span class="bold">Spent:</span>
+    {{ timeSpentHumanReadable }}
+  </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 9c003aa9f8a..8f5d0bee107 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,7 +1,7 @@
 <script>
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
-import timeTrackingSpentOnlyPane from './spent_only_pane';
+import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
 import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
 import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
@@ -13,7 +13,7 @@ export default {
   components: {
     TimeTrackingCollapsedState,
     TimeTrackingEstimateOnlyPane,
-    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
+    TimeTrackingSpentOnlyPane,
     TimeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 318d3ddaece..681242f8d85 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -317,6 +317,7 @@
   a {
     color: $gl-text-color;
     word-wrap: break-word;
+    word-break: break-word;
     margin-right: 2px;
   }
 }
@@ -462,6 +463,7 @@
 
   .issuable-header-text {
     padding-right: 35px;
+    word-break: break-word;
 
     > strong {
       font-weight: $gl-font-weight-bold;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index e03c38e2775..4170baebffe 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -539,14 +539,14 @@
   }
 }
 
-.multi-file-additions,
-.multi-file-additions-solid {
-  fill: $green-500;
+.multi-file-addition,
+.multi-file-addition-solid {
+  color: $green-500;
 }
 
 .multi-file-modified,
 .multi-file-modified-solid {
-  fill: $orange-500;
+  color: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {
@@ -1026,6 +1026,12 @@
   color: $gl-text-color-secondary;
 }
 
+.ide-tree-changes {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
 .ide-new-modal-label {
   line-height: 34px;
 }
diff --git a/app/controllers/projects/runners_controller.rb b/app/controllers/projects/runners_controller.rb
index c950d0f7001..b9bbe7115c4 100644
--- a/app/controllers/projects/runners_controller.rb
+++ b/app/controllers/projects/runners_controller.rb
@@ -52,6 +52,12 @@ class Projects::RunnersController < Projects::ApplicationController
     redirect_to project_settings_ci_cd_path(@project)
   end
 
+  def toggle_group_runners
+    project.toggle_ci_cd_settings!(:group_runners_enabled)
+
+    redirect_to project_settings_ci_cd_path(@project)
+  end
+
   protected
 
   def set_runner
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index d80ef8113aa..177c8a54099 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -67,10 +67,18 @@ module Projects
 
       def define_runners_variables
         @project_runners = @project.runners.ordered
-        @assignable_runners = current_user.ci_authorized_runners
-          .assignable_for(project).ordered.page(params[:page]).per(20)
+
+        @assignable_runners = current_user
+          .ci_authorized_runners
+          .assignable_for(project)
+          .ordered
+          .page(params[:page]).per(20)
+
         @shared_runners = ::Ci::Runner.shared.active
+
         @shared_runners_count = @shared_runners.count(:all)
+
+        @group_runners = ::Ci::Runner.belonging_to_parent_group_of_project(@project.id)
       end
 
       def define_secret_variables
diff --git a/app/models/ci/runner.rb b/app/models/ci/runner.rb
index 5a4c56ec0dc..23078f1c3ed 100644
--- a/app/models/ci/runner.rb
+++ b/app/models/ci/runner.rb
@@ -14,31 +14,49 @@ module Ci
     has_many :builds
     has_many :runner_projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
     has_many :projects, through: :runner_projects
+    has_many :runner_namespaces
+    has_many :groups, through: :runner_namespaces
 
     has_one :last_build, ->() { order('id DESC') }, class_name: 'Ci::Build'
 
     before_validation :set_default_values
 
-    scope :specific, ->() { where(is_shared: false) }
-    scope :shared, ->() { where(is_shared: true) }
-    scope :active, ->() { where(active: true) }
-    scope :paused, ->() { where(active: false) }
-    scope :online, ->() { where('contacted_at > ?', contact_time_deadline) }
-    scope :ordered, ->() { order(id: :desc) }
+    scope :specific, -> { where(is_shared: false) }
+    scope :shared, -> { where(is_shared: true) }
+    scope :active, -> { where(active: true) }
+    scope :paused, -> { where(active: false) }
+    scope :online, -> { where('contacted_at > ?', contact_time_deadline) }
+    scope :ordered, -> { order(id: :desc) }
 
-    scope :owned_or_shared, ->(project_id) do
-      joins('LEFT JOIN ci_runner_projects ON ci_runner_projects.runner_id = ci_runners.id')
-        .where("ci_runner_projects.project_id = :project_id OR ci_runners.is_shared = true", project_id: project_id)
+    scope :belonging_to_project, -> (project_id) {
+      joins(:runner_projects).where(ci_runner_projects: { project_id: project_id })
+    }
+
+    scope :belonging_to_parent_group_of_project, -> (project_id) {
+      project_groups = ::Group.joins(:projects).where(projects: { id: project_id })
+      hierarchy_groups = Gitlab::GroupHierarchy.new(project_groups).base_and_ancestors
+
+      joins(:groups).where(namespaces: { id: hierarchy_groups })
+    }
+
+    scope :owned_or_shared, -> (project_id) do
+      union = Gitlab::SQL::Union.new(
+        [belonging_to_project(project_id), belonging_to_parent_group_of_project(project_id), shared],
+        remove_duplicates: false
+      )
+      from("(#{union.to_sql}) ci_runners")
     end
 
     scope :assignable_for, ->(project) do
       # FIXME: That `to_sql` is needed to workaround a weird Rails bug.
       #        Without that, placeholders would miss one and couldn't match.
       where(locked: false)
-        .where.not("id IN (#{project.runners.select(:id).to_sql})").specific
+        .where.not("ci_runners.id IN (#{project.runners.select(:id).to_sql})")
+        .specific
     end
 
     validate :tag_constraints
+    validate :either_projects_or_group
     validates :access_level, presence: true
 
     acts_as_taggable
@@ -50,6 +68,12 @@ module Ci
       ref_protected: 1
     }
 
+    enum runner_type: {
+      instance_type: 1,
+      group_type: 2,
+      project_type: 3
+    }
+
     cached_attr_reader :version, :revision, :platform, :architecture, :contacted_at, :ip_address
 
     chronic_duration_attr :maximum_timeout_human_readable, :maximum_timeout
@@ -120,6 +144,14 @@ module Ci
       !shared?
     end
 
+    def assigned_to_group?
+      runner_namespaces.any?
+    end
+
+    def assigned_to_project?
+      runner_projects.any?
+    end
+
     def can_pick?(build)
       return false if self.ref_protected? && !build.protected?
 
@@ -174,6 +206,12 @@ module Ci
       end
     end
 
+    def pick_build!(build)
+      if can_pick?(build)
+        tick_runner_queue
+      end
+    end
+
     private
 
     def cleanup_runner_queue
@@ -205,7 +243,17 @@ module Ci
     end
 
     def assignable_for?(project_id)
-      is_shared? || projects.exists?(id: project_id)
+      self.class.owned_or_shared(project_id).where(id: self.id).any?
+    end
+
+    def either_projects_or_group
+      if groups.many?
+        errors.add(:runner, 'can only be assigned to one group')
+      end
+
+      if assigned_to_group? && assigned_to_project?
+        errors.add(:runner, 'can only be assigned either to projects or to a group')
+      end
     end
 
     def accepting_tags?(build)
diff --git a/app/models/ci/runner_namespace.rb b/app/models/ci/runner_namespace.rb
new file mode 100644
index 00000000000..3269f86e8ca
--- /dev/null
+++ b/app/models/ci/runner_namespace.rb
@@ -0,0 +1,9 @@
+module Ci
+  class RunnerNamespace < ActiveRecord::Base
+    extend Gitlab::Ci::Model
+
+    belongs_to :runner
+    belongs_to :namespace, class_name: '::Namespace'
+    belongs_to :group, class_name: '::Group', foreign_key: :namespace_id
+  end
+end
diff --git a/app/models/group.rb b/app/models/group.rb
index 9b42bbf99be..f493836a92e 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -9,6 +9,7 @@ class Group < Namespace
   include SelectForProjectAuthorization
   include LoadedInGroupList
   include GroupDescendant
+  include TokenAuthenticatable
 
   has_many :group_members, -> { where(requested_at: nil) }, dependent: :destroy, as: :source # rubocop:disable Cop/ActiveRecordDependent
   alias_method :members, :group_members
@@ -43,6 +44,8 @@ class Group < Namespace
 
   validates :two_factor_grace_period, presence: true, numericality: { greater_than_or_equal_to: 0 }
 
+  add_authentication_token_field :runners_token
+
   after_create :post_create_hook
   after_destroy :post_destroy_hook
   after_save :update_two_factor_requirement
@@ -294,6 +297,13 @@ class Group < Namespace
     refresh_members_authorized_projects(blocking: false)
   end
 
+  # each existing group needs to have a `runners_token`.
+  # we do this on read since migrating all existing groups is not a feasible
+  # solution.
+  def runners_token
+    ensure_runners_token!
+  end
+
   private
 
   def update_two_factor_requirement
diff --git a/app/models/namespace.rb b/app/models/namespace.rb
index c29a53e5ce7..5621eeba7c4 100644
--- a/app/models/namespace.rb
+++ b/app/models/namespace.rb
@@ -21,6 +21,9 @@ class Namespace < ActiveRecord::Base
   has_many :projects, dependent: :destroy # rubocop:disable Cop/ActiveRecordDependent
   has_many :project_statistics
 
+  has_many :runner_namespaces, class_name: 'Ci::RunnerNamespace'
+  has_many :runners, through: :runner_namespaces, source: :runner, class_name: 'Ci::Runner'
+
   # This should _not_ be `inverse_of: :namespace`, because that would also set
   # `user.namespace` when this user creates a group with themselves as `owner`.
   belongs_to :owner, class_name: "User"
diff --git a/app/models/project.rb b/app/models/project.rb
index d4e9e51c7be..50c404c300a 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -230,13 +230,11 @@ class Project < ActiveRecord::Base
   has_many :project_deploy_tokens
   has_many :deploy_tokens, through: :project_deploy_tokens
 
-  has_many :active_runners, -> { active }, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
-
   has_one :auto_devops, class_name: 'ProjectAutoDevops'
   has_many :custom_attributes, class_name: 'ProjectCustomAttribute'
 
   has_many :project_badges, class_name: 'ProjectBadge'
-  has_one :ci_cd_settings, class_name: 'ProjectCiCdSetting'
+  has_one :ci_cd_settings, class_name: 'ProjectCiCdSetting', inverse_of: :project, autosave: true
 
   accepts_nested_attributes_for :variables, allow_destroy: true
   accepts_nested_attributes_for :project_feature, update_only: true
@@ -247,6 +245,7 @@ class Project < ActiveRecord::Base
   delegate :members, to: :team, prefix: true
   delegate :add_user, :add_users, to: :team
   delegate :add_guest, :add_reporter, :add_developer, :add_master, :add_role, to: :team
+  delegate :group_runners_enabled, :group_runners_enabled=, :group_runners_enabled?, to: :ci_cd_settings
 
   # Validations
   validates :creator, presence: true, on: :create
@@ -332,6 +331,11 @@ class Project < ActiveRecord::Base
   scope :with_issues_available_for_user, ->(current_user) { with_feature_available_for_user(:issues, current_user) }
   scope :with_merge_requests_enabled, -> { with_feature_enabled(:merge_requests) }
 
+  scope :with_group_runners_enabled, -> do
+    joins(:ci_cd_settings)
+    .where(project_ci_cd_settings: { group_runners_enabled: true })
+  end
+
   enum auto_cancel_pending_pipelines: { disabled: 0, enabled: 1 }
 
   chronic_duration_attr :build_timeout_human_readable, :build_timeout, default: 3600
@@ -1301,12 +1305,17 @@ class Project < ActiveRecord::Base
     @shared_runners ||= shared_runners_available? ? Ci::Runner.shared : Ci::Runner.none
   end
 
-  def active_shared_runners
-    @active_shared_runners ||= shared_runners.active
+  def group_runners
+    @group_runners ||= group_runners_enabled? ? Ci::Runner.belonging_to_parent_group_of_project(self.id) : Ci::Runner.none
+  end
+
+  def all_runners
+    union = Gitlab::SQL::Union.new([runners, group_runners, shared_runners])
+    Ci::Runner.from("(#{union.to_sql}) ci_runners")
   end
 
   def any_runners?(&block)
-    active_runners.any?(&block) || active_shared_runners.any?(&block)
+    all_runners.active.any?(&block)
   end
 
   def valid_runners_token?(token)
@@ -1874,6 +1883,10 @@ class Project < ActiveRecord::Base
     []
   end
 
+  def toggle_ci_cd_settings!(settings_attribute)
+    ci_cd_settings.toggle!(settings_attribute)
+  end
+
   def gitlab_deploy_token
     @gitlab_deploy_token ||= deploy_tokens.gitlab_deploy_token
   end
diff --git a/app/models/project_ci_cd_setting.rb b/app/models/project_ci_cd_setting.rb
index 9f10a93148c..588cced5781 100644
--- a/app/models/project_ci_cd_setting.rb
+++ b/app/models/project_ci_cd_setting.rb
@@ -1,5 +1,5 @@
 class ProjectCiCdSetting < ActiveRecord::Base
-  belongs_to :project
+  belongs_to :project, inverse_of: :ci_cd_settings
 
   # The version of the schema that first introduced this model/table.
   MINIMUM_SCHEMA_VERSION = 20180403035759
diff --git a/app/services/ci/register_job_service.rb b/app/services/ci/register_job_service.rb
index 0b087ad73da..4291631913a 100644
--- a/app/services/ci/register_job_service.rb
+++ b/app/services/ci/register_job_service.rb
@@ -17,8 +17,10 @@ module Ci
       builds =
         if runner.shared?
           builds_for_shared_runner
+        elsif runner.group_type?
+          builds_for_group_runner
         else
-          builds_for_specific_runner
+          builds_for_project_runner
         end
 
       valid = true
@@ -75,15 +77,24 @@ module Ci
         .joins('LEFT JOIN project_features ON ci_builds.project_id = project_features.project_id')
         .where('project_features.builds_access_level IS NULL or project_features.builds_access_level > 0').
 
-        # Implement fair scheduling
-        # this returns builds that are ordered by number of running builds
-        # we prefer projects that don't use shared runners at all
-        joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.project_id=project_builds.project_id")
+      # Implement fair scheduling
+      # this returns builds that are ordered by number of running builds
+      # we prefer projects that don't use shared runners at all
+      joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.project_id=project_builds.project_id")
         .order('COALESCE(project_builds.running_builds, 0) ASC', 'ci_builds.id ASC')
     end
 
-    def builds_for_specific_runner
-      new_builds.where(project: runner.projects.without_deleted.with_builds_enabled).order('created_at ASC')
+    def builds_for_project_runner
+      new_builds.where(project: runner.projects.without_deleted.with_builds_enabled).order('id ASC')
+    end
+
+    def builds_for_group_runner
+      hierarchy_groups = Gitlab::GroupHierarchy.new(runner.groups).base_and_descendants
+      projects = Project.where(namespace_id: hierarchy_groups)
+        .with_group_runners_enabled
+        .with_builds_enabled
+        .without_deleted
+      new_builds.where(project: projects).order('id ASC')
     end
 
     def running_builds_for_shared_runners
@@ -97,10 +108,6 @@ module Ci
       builds
     end
 
-    def shared_runner_build_limits_feature_enabled?
-      ENV['DISABLE_SHARED_RUNNER_BUILD_MINUTES_LIMIT'].to_s != 'true'
-    end
-
     def register_failure
       failed_attempt_counter.increment
       attempt_counter.increment
diff --git a/app/services/ci/update_build_queue_service.rb b/app/services/ci/update_build_queue_service.rb
index 152c8ae5006..41b1c144c3e 100644
--- a/app/services/ci/update_build_queue_service.rb
+++ b/app/services/ci/update_build_queue_service.rb
@@ -1,18 +1,14 @@
 module Ci
   class UpdateBuildQueueService
     def execute(build)
-      build.project.runners.each do |runner|
-        if runner.can_pick?(build)
-          runner.tick_runner_queue
-        end
-      end
+      tick_for(build, build.project.all_runners)
+    end
 
-      return unless build.project.shared_runners_enabled?
+    private
 
-      Ci::Runner.shared.each do |runner|
-        if runner.can_pick?(build)
-          runner.tick_runner_queue
-        end
+    def tick_for(build, runners)
+      runners.each do |runner|
+        runner.pick_build!(build)
       end
     end
   end
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index f90b8b8c0a4..99fbbaec487 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -2,6 +2,8 @@
   %td
     - if runner.shared?
       %span.label.label-success shared
+    - elsif runner.group_type?
+      %span.label.label-success group
     - else
       %span.label.label-info specific
     - if runner.locked?
@@ -19,7 +21,7 @@
   %td
     = runner.ip_address
   %td
-    - if runner.shared?
+    - if runner.shared? || runner.group_type?
       n/a
     - else
       = runner.projects.count(:all)
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 9f13dbbbd82..1a3b5e58ed5 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -17,6 +17,9 @@
           %span.label.label-success shared
           \- Runner runs jobs from all unassigned projects
         %li
+          %span.label.label-success group
+          \- Runner runs jobs from all unassigned projects in its group
+        %li
           %span.label.label-info specific
           \- Runner runs jobs from assigned projects
         %li
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index d04cf48b05c..d022016f70d 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -19,6 +19,9 @@
     %p
       If you want Runners to build only specific projects, enable them in the table below.
       Keep in mind that this is a one way transition.
+- elsif @runner.group_type?
+  .bs-callout.bs-callout-success
+    %h4 This runner will process jobs from all projects in its group and subgroups
 - else
   .bs-callout.bs-callout-info
     %h4 This Runner will process jobs only from ASSIGNED projects
diff --git a/app/views/admin/users/index.html.haml b/app/views/admin/users/index.html.haml
index 0ef4b71f4fe..10b8bf5d565 100644
--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
@@ -42,31 +42,31 @@
         = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
           = link_to admin_users_path do
             Active
-            %small.badge= number_with_delimiter(User.active.count)
+            %small.badge= limited_counter_with_delimiter(User.active)
         = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
           = link_to admin_users_path(filter: "admins") do
             Admins
-            %small.badge= number_with_delimiter(User.admins.count)
+            %small.badge= limited_counter_with_delimiter(User.admins)
         = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
           = link_to admin_users_path(filter: 'two_factor_enabled') do
             2FA Enabled
-            %small.badge= number_with_delimiter(User.with_two_factor.count)
+            %small.badge= limited_counter_with_delimiter(User.with_two_factor)
         = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
           = link_to admin_users_path(filter: 'two_factor_disabled') do
             2FA Disabled
-            %small.badge= number_with_delimiter(User.without_two_factor.count)
+            %small.badge= limited_counter_with_delimiter(User.without_two_factor)
         = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
           = link_to admin_users_path(filter: 'external') do
             External
-            %small.badge= number_with_delimiter(User.external.count)
+            %small.badge= limited_counter_with_delimiter(User.external)
         = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
           = link_to admin_users_path(filter: "blocked") do
             Blocked
-            %small.badge= number_with_delimiter(User.blocked.count)
+            %small.badge= limited_counter_with_delimiter(User.blocked)
         = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
           = link_to admin_users_path(filter: "wop") do
             Without projects
-            %small.badge= number_with_delimiter(User.without_projects.count)
+            %small.badge= limited_counter_with_delimiter(User.without_projects)
 
   %ul.flex-list.content-list
     - if @users.empty?
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
new file mode 100644
index 00000000000..4bee6cb97eb
--- /dev/null
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -0,0 +1,51 @@
+- active_tab = local_assigns.fetch(:active_tab, 'blank')
+- f = local_assigns.fetch(:f)
+
+.project-import.row
+  .col-lg-12
+    .form-group.import-btn-container.clearfix
+      = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
+        Import project from
+      .import-buttons
+        - if gitlab_project_import_enabled?
+          .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
+            = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
+              = icon('gitlab', text: 'GitLab export')
+        %div
+          - if github_import_enabled?
+            = link_to new_import_github_path, class: 'btn js-import-github' do
+              = icon('github', text: 'GitHub')
+        %div
+          - if bitbucket_import_enabled?
+            = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
+              = icon('bitbucket', text: 'Bitbucket')
+            - unless bitbucket_import_configured?
+              = render 'bitbucket_import_modal'
+        %div
+          - if gitlab_import_enabled?
+            = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
+              = icon('gitlab', text: 'GitLab.com')
+            - unless gitlab_import_configured?
+              = render 'gitlab_import_modal'
+        %div
+          - if google_code_import_enabled?
+            = link_to new_import_google_code_path, class: 'btn import_google_code' do
+              = icon('google', text: 'Google Code')
+        %div
+          - if fogbugz_import_enabled?
+            = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
+              = icon('bug', text: 'Fogbugz')
+        %div
+          - if gitea_import_enabled?
+            = link_to new_import_gitea_path, class: 'btn import_gitea' do
+              = custom_icon('go_logo')
+              Gitea
+        %div
+          - if git_import_enabled?
+            %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
+              = icon('git', text: 'Repo by URL')
+  .col-lg-12
+    .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
+      %hr
+        = render "shared/import_form", f: f
+        = render 'new_project_fields', f: f, project_name_id: "import-url-name"
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index b66e0559603..5beaa3c6d23 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -57,54 +57,11 @@
         .tab-pane.import-project-pane.js-toggle-container{ id: 'import-project-pane', class: active_when(active_tab == 'import'), role: 'tabpanel' }
           = form_for @project, html: { class: 'new_project' } do |f|
             - if import_sources_enabled?
-              .project-import.row
-                .col-lg-12
-                  .form-group.import-btn-container.clearfix
-                    = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
-                      Import project from
-                    .import-buttons
-                      - if gitlab_project_import_enabled?
-                        .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
-                          = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
-                            = icon('gitlab', text: 'GitLab export')
-                      %div
-                        - if github_import_enabled?
-                          = link_to new_import_github_path, class: 'btn js-import-github' do
-                            = icon('github', text: 'GitHub')
-                      %div
-                        - if bitbucket_import_enabled?
-                          = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
-                            = icon('bitbucket', text: 'Bitbucket')
-                          - unless bitbucket_import_configured?
-                            = render 'bitbucket_import_modal'
-                      %div
-                        - if gitlab_import_enabled?
-                          = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
-                            = icon('gitlab', text: 'GitLab.com')
-                          - unless gitlab_import_configured?
-                            = render 'gitlab_import_modal'
-                      %div
-                        - if google_code_import_enabled?
-                          = link_to new_import_google_code_path, class: 'btn import_google_code' do
-                            = icon('google', text: 'Google Code')
-                      %div
-                        - if fogbugz_import_enabled?
-                          = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
-                            = icon('bug', text: 'Fogbugz')
-                      %div
-                        - if gitea_import_enabled?
-                          = link_to new_import_gitea_path, class: 'btn import_gitea' do
-                            = custom_icon('go_logo')
-                            Gitea
-                      %div
-                        - if git_import_enabled?
-                          %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
-                            = icon('git', text: 'Repo by URL')
-                .col-lg-12
-                  .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-                    %hr
-                      = render "shared/import_form", f: f
-                      = render 'new_project_fields', f: f, project_name_id: "import-url-name"
+              = render 'import_project_pane', f: f, active_tab: active_tab
+            - else
+              .nothing-here-block
+                %h4 No import options available
+                %p Contact an administrator to enable options for importing your project.
 
 .save-project-loader.hide
   .center
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
new file mode 100644
index 00000000000..a9dfd9cc786
--- /dev/null
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -0,0 +1,32 @@
+%h3 Group Runners
+
+.bs-callout.bs-callout-warning
+  GitLab Group Runners can execute code for all the projects in this group.
+  They can be managed using the #{link_to 'Runners API', help_page_path('api/runners.md')}.
+
+  - if @project.group
+    %hr
+    - if @project.group_runners_enabled?
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-warning', method: :post do
+        Disable group Runners
+    - else
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn btn-success', method: :post do
+        Enable group Runners
+    &nbsp; for this project
+
+- if !@project.group
+  This project does not belong to a group and can therefore not make use of group Runners.
+
+- elsif @group_runners.empty?
+  This group does not provide any group Runners yet.
+
+  - if can?(current_user, :admin_pipeline, @project.group)
+    = render partial: 'ci/runner/how_to_setup_runner',
+             locals: { registration_token: @project.group.runners_token, type: 'group' }
+  - else
+    Ask your group master to setup a group Runner.
+
+- else
+  %h4.underlined-title Available group Runners : #{@group_runners.count}
+  %ul.bordered-list
+    = render partial: 'projects/runners/runner', collection: @group_runners, as: :runner
diff --git a/app/views/projects/runners/_index.html.haml b/app/views/projects/runners/_index.html.haml
index f9808f7c990..3f5119d408b 100644
--- a/app/views/projects/runners/_index.html.haml
+++ b/app/views/projects/runners/_index.html.haml
@@ -23,3 +23,7 @@
     = render 'projects/runners/specific_runners'
   .col-sm-6
     = render 'projects/runners/shared_runners'
+.row
+  .col-sm-6
+  .col-sm-6
+    = render 'projects/runners/group_runners'
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 6376496ee1a..0d2c0536eb5 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -26,7 +26,7 @@
         - else
           - runner_project = @project.runner_projects.find_by(runner_id: runner)
           = link_to 'Disable for this project', project_runner_project_path(@project, runner_project), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger btn-sm'
-      - elsif runner.specific?
+      - elsif !(runner.is_shared? || runner.group_type?) # We can simplify this to `runner.project_type?` when migrating #runner_type is complete
         = form_for [@project.namespace.becomes(Namespace), @project, @project.runner_projects.new] do |f|
           = f.hidden_field :runner_id, value: runner.id
           = f.submit 'Enable for this project', class: 'btn btn-sm'
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 4bf01ecb48c..d35ddf3eb39 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -35,7 +35,7 @@
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 90), class: "avatar s90", alt: ''
 
-      .user-info
+      .user-info.prepend-left-default.append-right-default
         .cover-title
           = @user.name