Add tooltip hint for archived labels in issue and MR lists

Nicholas Wittstruckrequested to merge
gitlab-community/gitlab-org/gitlab:4233-archive-labels-vue-archived-tooltip into master

What does this MR do and why?

Archived labels currently render identically to active ones, so there's no way to tell from the list view that an applied label has been archived. This MR uses the new GlLabel footer prop to add Archived tothe tooltip.

  • Limited to the issues dashboard and merge request list, since both already share the issuable_item.vue component.
  • Other labels (boards, sidebar picker, work items) share a broader GraphQL fragment and are left for a follow-up MR to keep things small

🛠️ with ❤️ at Siemens

References

Screenshots or screen recordings

archived-4

archived-3

archived-2

archived-1

How to set up and validate locally

  1. You can use the following ruby code to create the test data. It assumes there is the GDK default seed data present. Alternatively, create a couple of labels in the UI and assign them to an issue and an MR. Afterwards archive the labels.
user    = User.find_by(username: 'root')
project = Project.find_by_full_path('flightjs/Flight')
issue, mr = project.issues.first, project.merge_requests.first

label = project.labels.create!(title: 'archived-demo', color: '#6699cc', description: 'Demo')
issue.update!(label_ids: issue.label_ids | [label.id], assignee_ids: [user.id])
mr.update!(label_ids: mr.label_ids | [label.id])
label.update!(archived: true)

puts "Issues list: #{Gitlab.config.gitlab.url}/dashboard/issues?label_name[]=#{CGI.escape(label.title)}"
puts "MR list:     #{Gitlab::Routing.url_helpers.project_merge_requests_url(project)}"
  1. Validate that the footer is now set to archived in the issues dashboard and the merge request list of a project.

MR acceptance checklist

MR Checklist ( @nwittstruck)

Related to #4233

Edited by Nicholas Wittstruck

Merge request reports