[FE Offline Transfer] 2. Build 5-tab page for export and import

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Both Import and Export flows use a four-tab or five-tab UI as the user selects groups and initiates an export or import.

Investigate / build wrapper component/page for this flow.

No need for actual functionality. Focus on:

  • controllers and routes
  • customizable tab headings
  • an extra tab for Import flows
  • customizable summary / heading
  • being able to switch tabs.
  • has buttons taking the user backwards or forwards
  • confirming components not accessible without feature flag

Note: Check whether design intends for wrapped centered content or to be fully left-aligned. See !223795 (comment 3144135791)

No state management yet. But do keep in mind that the entire four-tab UI will eventually share single state.

Create follow up ticket (or update existing ones) regarding state management research. https://docs.gitlab.com/development/fe_guide/state_management/#combining-pinia-and-apollo

https://www.figma.com/design/1uiBnqdUpMXV22OlpL7PAz/--581545--Offline-Transfer?node-id=4014-123&t=Rpg2hpyoLBZoEYbv-0

Next steps

Consider proposing Stepper for pajamas later. Discuss with Mark. More info on steppers https://component.gallery/components/progress-indicator/

Edited by Oiza Baiye