2 files changed, 42 insertions, 11 deletions
diff --git a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
index 3f6ea56382f..035e26d09e6 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -9,6 +9,7 @@ import {
   GlIcon,
   GlPagination,
   GlFormCheckbox,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
@@ -43,6 +44,7 @@ import {
   I18N_BULK_DELETE_PARTIAL_ERROR,
   I18N_BULK_DELETE_CONFIRMATION_TOAST,
   SELECTED_ARTIFACTS_MAX_COUNT,
+  I18N_BULK_DELETE_MAX_SELECTED,
 } from '../constants';
 import JobCheckbox from './job_checkbox.vue';
 import ArtifactsBulkDelete from './artifacts_bulk_delete.vue';
@@ -78,6 +80,9 @@ export default {
     ArtifactsTableRowDetails,
     FeedbackBanner,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [glFeatureFlagsMixin()],
   inject: ['projectId', 'projectPath', 'canDestroyArtifacts'],
   apollo: {
@@ -164,6 +169,25 @@ export default {
     artifactsToDelete() {
       return this.isDeletingArtifactsForJob ? this.jobArtifactsToDelete : this.selectedArtifacts;
     },
+    isAnyVisibleArtifactSelected() {
+      return this.jobArtifacts.some((job) =>
+        job.artifacts.nodes.some((artifactNode) =>
+          this.selectedArtifacts.includes(artifactNode.id),
+        ),
+      );
+    },
+    areAllVisibleArtifactsSelected() {
+      return this.jobArtifacts.every((job) =>
+        job.artifacts.nodes.every((artifactNode) =>
+          this.selectedArtifacts.includes(artifactNode.id),
+        ),
+      );
+    },
+    selectAllTooltipText() {
+      return this.isSelectedArtifactsLimitReached && !this.isAnyVisibleArtifactSelected
+        ? I18N_BULK_DELETE_MAX_SELECTED
+        : '';
+    },
   },
   methods: {
     refetchArtifacts() {
@@ -205,11 +229,11 @@ export default {
       }
     },
     selectArtifact(artifactNode, checked) {
-      if (checked) {
-        if (!this.isSelectedArtifactsLimitReached) {
-          this.selectedArtifacts.push(artifactNode.id);
-        }
-      } else {
+      const isSelected = this.selectedArtifacts.includes(artifactNode.id);
+
+      if (checked && !isSelected && !this.isSelectedArtifactsLimitReached) {
+        this.selectedArtifacts.push(artifactNode.id);
+      } else if (isSelected) {
         this.selectedArtifacts.splice(this.selectedArtifacts.indexOf(artifactNode.id), 1);
       }
     },
@@ -274,6 +298,11 @@ export default {
       this.isBulkDeleteModalVisible = false;
       this.jobArtifactsToDelete = [];
     },
+    handleSelectAllChecked(checked) {
+      this.jobArtifacts.map((job) =>
+        job.artifacts.nodes.map((artifactNode) => this.selectArtifact(artifactNode, checked)),
+      );
+    },
     clearSelectedArtifacts() {
       this.selectedArtifacts = [];
     },
@@ -369,10 +398,12 @@ export default {
       </template>
       <template v-if="canBulkDestroyArtifacts" #head(checkbox)>
         <gl-form-checkbox
-          :disabled="!anyArtifactsSelected"
-          :checked="anyArtifactsSelected"
-          :indeterminate="anyArtifactsSelected"
-          @change="clearSelectedArtifacts"
+          v-gl-tooltip.right
+          :title="selectAllTooltipText"
+          :checked="isAnyVisibleArtifactSelected"
+          :indeterminate="isAnyVisibleArtifactSelected && !areAllVisibleArtifactsSelected"
+          :disabled="isSelectedArtifactsLimitReached && !isAnyVisibleArtifactSelected"
+          @change="handleSelectAllChecked"
         />
       </template>
       <template
diff --git a/app/assets/javascripts/ci/artifacts/components/job_checkbox.vue b/app/assets/javascripts/ci/artifacts/components/job_checkbox.vue
index 91296bd507e..861278147e9 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_checkbox.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_checkbox.vue
@@ -48,7 +48,7 @@ export default {
     },
   },
   methods: {
-    handleInput(checked) {
+    handleChange(checked) {
       if (checked) {
         this.unselectedArtifacts.forEach((node) => this.$emit('selectArtifact', node, true));
       } else {
@@ -65,6 +65,6 @@ export default {
     :disabled="disabled"
     :checked="checked"
     :indeterminate="indeterminate"
-    @input="handleInput"
+    @change="handleChange"
   />
 </template>