Add archive quick action to projects list views

See Add archiving to quick actions in list views (#554023 - closed) for context

Add archive quick action on the Vue-based projects list views.

  • Your works / Projects
  • Explore / Projects
  • Admin area / Projects
  • User profile / Projects

Vue Component: app/assets/javascripts/vue_shared/components/projects_list/project_list.vue

Note: We'll do this for pages that have been migrated to Vue, for other pages we will do this as part of the migration.

Design

image

Implementation Guide

1. Update GraphQL Fragment

Add userPermissions.archiveProject to the Projects GraphQL fragment.

2. Define Archive Action Constant

In the constants file:

  • Define ACTION_ARCHIVE
  • Add it to BASE_OPTIONS

3. Update Project List Formatter

Modify the formatter to append ACTION_ARCHIVE when:

  • project.userPermissions.archiveProject is true
  • project.archived is false

4. Add onArchive Handler

Add an onArchive handler in ProjectListItemActions that does the following:

  • Trigger the archiveProject function from projects_api.js.
  • Emit a refetch event.
  • Render an alert/toast based on the result.
Edited by Shane Maglangit