Support group archiving and unarchiving in settings
## Problem To deliver a functional group archiving flow, we need the ability for users to archive and unarchive a group. ## Proposal In groups/projects settings \> general\> advanced add/modify the archive setting as follows: - [ ] Add setting to archive group - [ ] Add setting to unarchive group - [ ] Modify setting to unarchive groups that are children of archived groups See https://gitlab.com/gitlab-org/gitlab/-/issues/481741/designs/Archive_and_Unarchive.png for the designs and copy. | | Before | After | |--|--------|-------| | Archive project | ![Screenshot_2025-07-02_at_17.48.03](/uploads/195a6624e453fe17baea5e77f727feaa/Screenshot_2025-07-02_at_17.48.03.png) | ![Group_102](/uploads/0e5cf8cfa6c482e471eb96f0aa099761/Group_102.png) | | Unarchive project | ![Screenshot_2025-07-02_at_17.52.11](/uploads/042ce2d5e7874d94d35d97634d6d0c74/Screenshot_2025-07-02_at_17.52.11.png) | ![Group_103](/uploads/3c0b77087873980b835df55c8c3bbed3/Group_103.png) | | Unarchive project disabled | ![Screenshot_2025-07-02_at_16.44.22_1](/uploads/363569a6fc00cbc37dc71facfb810011/Screenshot_2025-07-02_at_16.44.22_1.png) | ![Group_111](/uploads/6f834193f588ba120f1cb5d6d76b7b20/Group_111.png) | [Design file](https://www.figma.com/design/o8QLhKlCqUC4xdot8kmiCY/Archive-Groups--Projects?node-id=132-1100&t=XOpcBGSH6b5YJSIZ-1) ## Design rationale: - **Progressive disclosure**: * Show essential information first, with detailed specifications available through contextual help links * Reduce cognitive load by presenting only the most relevant information upfront - **Contextual help best practices:** * GitLab's contextual help guidelines recommend phrasing help links as specific questions rather than using generic "Learn more" text * This approach provides clearer expectations about what users will find when they click - **Consistent call-to-action patterns:** * Use concise button labels like "Archive" instead of "Archive project" to match how actions appear in dropdown menus throughout GitLab (such as the three-dot menu in group/project list views) * Maintain consistency across the interface for better user experience - **Button hierarchy considerations:** * When multiple call-to-action buttons exist on a page, only one should use the primary blue styling * Since we don't know users' specific intentions when visiting settings pages, secondary button styling is recommended for these actions - Card disabled state is defined separately in this [issue](https://gitlab.com/gitlab-org/gitlab/-/issues/481750#note_2509791755). ## Implementation guide 1. Create a new HAML partial in `app/views/groups/settings` called `_archive.html.haml` 2. Create new Vue application and mount into this HAML partial 3. Pass if group is archived or not via data attributes 4. Use `GlCard` to render UI based on if group is archived or not 5. When `Archive`/`Unarchive` button is clicked open confirmation modal using `GlModal` 7. When confirmed make a request to our REST API - `POST /groups/:id/archive` - `POST /groups/:id/unarchive` 8. The confirmation modal and API call should be generic enough that it can also be used in https://gitlab.com/groups/gitlab-org/-/epics/18490 7. Redirect with alert to group front page using [`visitUrlWithAlerts`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/lib/utils/url_utility.js#L762)
epic