Add latest changes from gitlab-org/gitlab@master

5 files changed, 94 insertions, 14 deletions

diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index c66a1eecfc5..777a332333d 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -17,6 +17,7 @@ import allRunnersCountQuery from 'ee_else_ce/runner/graphql/list/all_runners_cou
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
 import RunnerBulkDelete from '../components/runner_bulk_delete.vue';
+import RunnerBulkDeleteCheckbox from '../components/runner_bulk_delete_checkbox.vue';
 import RunnerList from '../components/runner_list.vue';
 import RunnerListEmptyState from '../components/runner_list_empty_state.vue';
 import RunnerName from '../components/runner_name.vue';
@@ -38,6 +39,7 @@ export default {
     RegistrationDropdown,
     RunnerFilteredSearchBar,
     RunnerBulkDelete,
+    RunnerBulkDeleteCheckbox,
     RunnerList,
     RunnerListEmptyState,
     RunnerName,
@@ -203,13 +205,20 @@ export default {
       :filtered-svg-path="emptyStateFilteredSvgPath"
     />
     <template v-else>
-      <runner-bulk-delete v-if="isBulkDeleteEnabled" @deleted="onDeleted" />
+      <runner-bulk-delete
+        v-if="isBulkDeleteEnabled"
+        :runners="runners.items"
+        @deleted="onDeleted"
+      />
       <runner-list
         :runners="runners.items"
         :loading="runnersLoading"
         :checkable="isBulkDeleteEnabled"
         @checked="onChecked"
       >
+        <template v-if="isBulkDeleteEnabled" #head-checkbox>
+          <runner-bulk-delete-checkbox :runners="runners.items" />
+        </template>
         <template #runner-name="{ runner }">
           <gl-link :href="runner.adminUrl">
             <runner-name :runner="runner" />
diff --git a/app/assets/javascripts/runner/components/runner_bulk_delete.vue b/app/assets/javascripts/runner/components/runner_bulk_delete.vue
index fd55487c458..703da01d9c8 100644
--- a/app/assets/javascripts/runner/components/runner_bulk_delete.vue
+++ b/app/assets/javascripts/runner/components/runner_bulk_delete.vue
@@ -16,6 +16,13 @@ export default {
     GlModal: GlModalDirective,
   },
   inject: ['localMutations'],
+  props: {
+    runners: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
+  },
   data() {
     return {
       isDeleting: false,
@@ -28,8 +35,13 @@ export default {
     },
   },
   computed: {
+    currentCheckedRunnerIds() {
+      return this.runners
+        .map(({ id }) => id)
+        .filter((id) => this.checkedRunnerIds.indexOf(id) >= 0);
+    },
     checkedCount() {
-      return this.checkedRunnerIds.length || 0;
+      return this.currentCheckedRunnerIds.length || 0;
     },
     bannerMessage() {
       return sprintf(
@@ -98,7 +110,7 @@ export default {
           mutation: BulkRunnerDelete,
           variables: {
             input: {
-              ids: this.checkedRunnerIds,
+              ids: this.currentCheckedRunnerIds,
             },
           },
           update: (cache, { data }) => {
diff --git a/app/assets/javascripts/runner/components/runner_bulk_delete_checkbox.vue b/app/assets/javascripts/runner/components/runner_bulk_delete_checkbox.vue
new file mode 100644
index 00000000000..dde5a5a4a05
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_bulk_delete_checkbox.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlFormCheckbox } from '@gitlab/ui';
+import checkedRunnerIdsQuery from '../graphql/list/checked_runner_ids.query.graphql';
+
+export default {
+  components: {
+    GlFormCheckbox,
+  },
+  inject: ['localMutations'],
+  props: {
+    runners: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
+  },
+  data() {
+    return {
+      checkedRunnerIds: [],
+    };
+  },
+  apollo: {
+    checkedRunnerIds: {
+      query: checkedRunnerIdsQuery,
+    },
+  },
+  computed: {
+    disabled() {
+      return !this.runners.length;
+    },
+    checked() {
+      return Boolean(this.runners.length) && this.runners.every(this.isChecked);
+    },
+    indeterminate() {
+      return !this.checked && this.runners.some(this.isChecked);
+    },
+  },
+  methods: {
+    isChecked({ id }) {
+      return this.checkedRunnerIds.indexOf(id) >= 0;
+    },
+    onChange($event) {
+      this.localMutations.setRunnersChecked({
+        runners: this.runners,
+        isChecked: $event,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-checkbox
+    :indeterminate="indeterminate"
+    :checked="checked"
+    :disabled="disabled"
+    @change="onChange"
+  />
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index f1f99c728c5..2e406f71792 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTableLite, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
+import { GlFormCheckbox, GlTableLite, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
@@ -23,6 +23,7 @@ const defaultFields = [
 
 export default {
   components: {
+    GlFormCheckbox,
     GlTableLite,
     GlSkeletonLoader,
     TooltipOnTruncate,
@@ -123,19 +124,11 @@ export default {
       fixed
     >
       <template #head(checkbox)>
-        <!--
-          Checkbox to select all to be added here
-          See https://gitlab.com/gitlab-org/gitlab/-/issues/339525/
-        -->
-        <span></span>
+        <slot name="head-checkbox"></slot>
       </template>
 
       <template #cell(checkbox)="{ item }">
-        <input
-          type="checkbox"
-          :checked="isChecked(item)"
-          @change="onCheckboxChange(item, $event.target.checked)"
-        />
+        <gl-form-checkbox :checked="isChecked(item)" @change="onCheckboxChange(item, $event)" />
       </template>
 
       <template #head(status)="{ label }">
diff --git a/app/assets/javascripts/runner/graphql/list/local_state.js b/app/assets/javascripts/runner/graphql/list/local_state.js
index ce6d125311c..154af261bba 100644
--- a/app/assets/javascripts/runner/graphql/list/local_state.js
+++ b/app/assets/javascripts/runner/graphql/list/local_state.js
@@ -57,6 +57,13 @@ export const createLocalState = () => {
         [runner.id]: isChecked,
       });
     },
+    setRunnersChecked({ runners, isChecked }) {
+      const newVal = runners.reduce(
+        (acc, { id }) => ({ ...acc, [id]: isChecked }),
+        checkedRunnerIdsVar(),
+      );
+      checkedRunnerIdsVar(newVal);
+    },
     clearChecked() {
       checkedRunnerIdsVar({});
     },