1 files changed, 111 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_bulk_delete.vue b/app/assets/javascripts/runner/components/runner_bulk_delete.vue
new file mode 100644
index 00000000000..50791de0bda
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_bulk_delete.vue
@@ -0,0 +1,111 @@
+<script>
+import { GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { n__, sprintf } from '~/locale';
+import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
+import checkedRunnerIdsQuery from '../graphql/list/checked_runner_ids.query.graphql';
+
+export default {
+  components: {
+    GlButton,
+    GlSprintf,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  inject: ['localMutations'],
+  data() {
+    return {
+      checkedRunnerIds: [],
+    };
+  },
+  apollo: {
+    checkedRunnerIds: {
+      query: checkedRunnerIdsQuery,
+    },
+  },
+  computed: {
+    checkedCount() {
+      return this.checkedRunnerIds.length || 0;
+    },
+    bannerMessage() {
+      return sprintf(
+        n__(
+          'Runners|%{strongStart}%{count}%{strongEnd} runner selected',
+          'Runners|%{strongStart}%{count}%{strongEnd} runners selected',
+          this.checkedCount,
+        ),
+        {
+          count: this.checkedCount,
+        },
+      );
+    },
+    modalTitle() {
+      return n__('Runners|Delete %d runner', 'Runners|Delete %d runners', this.checkedCount);
+    },
+    modalHtmlMessage() {
+      return sprintf(
+        n__(
+          'Runners|%{strongStart}%{count}%{strongEnd} runner will be permanently deleted and no longer available for projects or groups in the instance. Are you sure you want to continue?',
+          'Runners|%{strongStart}%{count}%{strongEnd} runners will be permanently deleted and no longer available for projects or groups in the instance. Are you sure you want to continue?',
+          this.checkedCount,
+        ),
+        {
+          strongStart: '<strong>',
+          strongEnd: '</strong>',
+          count: this.checkedCount,
+        },
+        false,
+      );
+    },
+    primaryBtnText() {
+      return n__(
+        'Runners|Permanently delete %d runner',
+        'Runners|Permanently delete %d runners',
+        this.checkedCount,
+      );
+    },
+  },
+  methods: {
+    onClearChecked() {
+      this.localMutations.clearChecked();
+    },
+    onClickDelete: ignoreWhilePending(async function onClickDelete() {
+      const confirmed = await confirmAction(null, {
+        title: this.modalTitle,
+        modalHtmlMessage: this.modalHtmlMessage,
+        primaryBtnVariant: 'danger',
+        primaryBtnText: this.primaryBtnText,
+      });
+
+      if (confirmed) {
+        // TODO Call $apollo.mutate with list of runner
+        // ids in `this.checkedRunnerIds`.
+        // See https://gitlab.com/gitlab-org/gitlab/-/issues/339525/
+      }
+    }),
+  },
+};
+</script>
+
+<template>
+  <div v-if="checkedCount" class="gl-my-4 gl-p-4 gl-border-1 gl-border-solid gl-border-gray-100">
+    <div class="gl-display-flex gl-align-items-center">
+      <div>
+        <gl-sprintf :message="bannerMessage">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </div>
+      <div class="gl-ml-auto">
+        <gl-button data-testid="clear-btn" variant="default" @click="onClearChecked">{{
+          s__('Runners|Clear selection')
+        }}</gl-button>
+        <gl-button data-testid="delete-btn" variant="danger" @click="onClickDelete">{{
+          s__('Runners|Delete selected')
+        }}</gl-button>
+      </div>
+    </div>
+  </div>
+</template>