Skip to content

Draft: Add a "GitLab Pages Onboarding" page

Janis Altherr requested to merge get-started-with-pages-site into master

Issue: #343557 (closed)

To improve the onboarding experience to Gitlab, I'm suggesting to create a yaml-file builder that will be visible when Pages is not deployed yet.

Idea

Inspired by other SSG-Hosting sites, developers can expect a simple, three-step process to configure their Static Site Deployment online. The configuration with a yaml-file complicates this somewhat, but also allows for more flexibility. By creating a visual Yaml-File builder, we're offering both the simplicity of a three-step onboarding process and a low-key introduction to working with yaml files.

This attempt is solving a similar issue to #335376 (closed), but it is focused solely on GitLab Pages. I hope that the smaller scope of this MR allows for faster iteration: Since Pages does not currently have any UI-based onboarding, we can trial this approach without breaking existing behaviour and obtain learnings for the general pipeline authoring.

Demo

Screen shots

Screenshot_2021-10-27_at_15.56.28Screenshot_2021-10-27_at_15.56.45Screenshot_2021-10-27_at_15.57.00Screenshot_2021-10-27_at_15.57.09

Issues

  • This relies on the @project.pages_deployed? attribute to decide whether this onboarding screen is shown or not. @project.pages_deployed however can be false if the yaml file is valid, but the pipeline is not complete/failed/... - Probably necessary to introduce a pages_onboarding_completed property.
  • Other SSG Sites usually offer to configure the name of the output folder. I've put that in as a placeholder, however, Pages does not currently accept any folder name other than public. This introduces friction, as it still requires editing the App's config files for most frameworks. I think removing this requirement from GitLab would massively improve the UX

To do

  • Flash / Highlight changed Lines in Editor
  • Pass unhandled routes from backend to frontend
  • This is currently using vue router for navigation, but a page reload will cause an unhandled state. Need to find an elegant solution to solve this
  • Additional input validation
  • Change the display condition to a project-level boolean onboarding_completed
  • Add Tests / Update Backend tests

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Janis Altherr

Merge request reports