Fix the column header on the artifacts page

Summary

Fix the column header on the Build > Artifacts page - Th class

Screenshot_2024-10-02_at_09.24.15

Proposal

  1. Hide the column when user doesn't have permission to delete artifact
  2. Show a checkbox in the header for the column even if users do have permission to delete. This will allow for bulk-selction.

Technical proposal

  1. In the Jobs Artifact component change the fields computed prop using the following patch
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 61fdd8037f13..be76e74040f0 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -145,14 +145,18 @@ export default {
       return Number(this.pageInfo.hasNextPage);
     },
     fields() {
-      return [
-        this.canBulkDestroyArtifacts && {
-          key: 'checkbox',
-          label: '',
-          thClass: 'gl-w-1/20',
-        },
-        ...this.$options.fields,
-      ];
+      if (this.canBulkDestroyArtifacts) {
+        return [
+          {
+            key: 'checkbox',
+            label: '',
+            thClass: 'gl-w-1/20',
+          },
+          ...this.$options.fields,
+        ];
+      }
+
+      return this.$options.fields;
     },
     anyArtifactsSelected() {
       return Boolean(this.selectedArtifacts.length);
2. Add a new test case in the [correspondent test file](https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js) that checks that the column is not present when setting the `canDestroyArtifacts` prop to false

Additional details

Some relevant technical details, if applicable, such as:

  • Does this need a feature flag?
  • Does there need to be an associated instrumentation issue created related to this work?
  • Is there an example response showing the data structure that should be returned (new endpoints only)?
  • What permissions should be used?
  • Is this EE or CE?
    • EE
    • CE
  • Additional comments:

Implementation Table

Group Issue Link
frontend 👈 You are here

Links/References

Edited by Veethika Mishra