Fix the column header on the artifacts page
Summary
Fix the column header on the Build > Artifacts page - Th class
Proposal
- Hide the column when user doesn't have permission to delete artifact
- 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
- In the Jobs Artifact component change the
fieldscomputed 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 |
|
Links/References
Edited by Veethika Mishra
