Add group README button to group settings

Frontend implementation for the "Group settings" section of #378737 (closed)

Design

  • Add a new section Group README
  • Add a button to trigger a modal with text describing the process
  • Clicking the Create and add README modal action button should create the sub-project gitlab-profile and take the user to the project and launch the add readme flow (similar to add README in projects)
  • If there is an existing README in the associated project, display a button that links to the file ie examplegroup/gitlab-profile/-/blob/master/README.md).
  • Deleting the associated README or project should remove the README from the group overview page.

image

Description Mockup
Add README modal image
Group README section when there is an existing README image

Implementation plan

  1. Create a mount element for a Vue app in app/views/groups/settings/_general.html.haml#L20
  2. Pass group.group_readme&.present.web_path to the Vue app
  3. Create a Vue app in app/assets/javascripts/groups/settings/components
  4. Create a mount function in app/assets/javascripts/groups/settings
  5. In the Vue app render a button that opens a modal. If the user confirms the modal use use POST /projects with initialize_with_readme parameter to create a project and then take the user to editing the README

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by 🤖 GitLab Bot 🤖