Skip to content

Add empty state to Organization groups and projects views

Peter Hegman requested to merge 421449-organization-front-page-empty-state into master

What does this MR do and why?

Related to #421449 (closed), #421475 (closed), #421472 (closed)
Designs - &11187 (closed)

The grouptenant scale team is starting to build out an Organization MVC. For more information about what an "Organization" will be see https://docs.gitlab.com/ee/user/organization/

This MR continues building the frontend of the organization by adding empty states to the groups and projects lists. The lists are currently using mock data. When the APIs are complete we will switch to using real data The mock data is hardcoded to use default GDK url so the links may not work depending on your GDK setup.

UX notes

  • It appears our empty state component is not Pajamas compliant. I have gitlab-ui!3564 (merged) open to fix this upstream.
  • The New group and New project buttons on the Groups and projects page will be added in #421633 (closed)
  • There is a bug in the sidebar due to a recent global sidebar change. Asked in #396719 (comment 1548062233) about how we should fix and I will open up a MR later.
  • There will be some minor adjustments to the group and project list in #420800 (closed)
  • Stats will be added in #421447 (closed)
  • The Organizations::Organization model does not yet support a description so we will be adding that in #422078 (closed)
  • Subscriptions will not be part of the MVC so I have left it out of the avatar. Confirmed with PM &11187 (comment 1514168095)

Screenshots or screen recordings

Front page - projects

Desktop Mobile
Screenshot_2023-09-07_at_9.17.56_AM Screenshot_2023-09-07_at_9.23.03_AM

Front page - groups

Desktop Mobile
Screenshot_2023-09-07_at_9.18.11_AM Screenshot_2023-09-07_at_9.23.21_AM

Groups and projects page - projects

Desktop Mobile
Screenshot_2023-09-07_at_9.18.56_AM Screenshot_2023-09-07_at_9.22.27_AM

Groups and projects page - groups

Desktop Mobile
Screenshot_2023-09-07_at_9.18.40_AM Screenshot_2023-09-07_at_9.22.41_AM

How to set up and validate locally

  1. Open Rails console
    • bin/rails console
  2. Enable the feature flag
    • Feature.enable(:ui_for_organizations)
  3. Change app/assets/javascripts/organizations/shared/graphql/resolvers.js#L13-14 to:
projects: { nodes: [] },
groups: { nodes: [] },
  1. Navigate to /-/organizations/default
  2. Navigate to /-/organizations/default/groups_and_projects

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 Peter Hegman

Merge request reports