Add groups view to organization

Related to #409029 (closed)
Designs: https://gitlab.com/gitlab-org/gitlab/uploads/a0fc66cf6945ca50008563935c550762/Organization___Groups_and_projects___Groups.png

What does this MR do and why?

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 to build the Groups and projects page by adding the groups list.

What is currently implemented

• Groups list populated with mock data

What will be implemented in future MRs

• Use real data when GraphQL API is completed - GraphQL changes for organization level group da... (#409311 - closed)
• Add actions dropdown
• Empty state
• Pagination

Screenshots or screen recordings

Desktop

Mobile

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. Create an organization
   • FactoryBot.create(:organization, name: 'GitLab', path: 'gitlab')
4. Navigate to /-/organizations/gitlab/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.

• I have evaluated the MR acceptance checklist for this MR.

changed milestone to %16.3

added Category:Groups & Projects Category:Organization devopsdata stores frontend grouptenant scale milestonep1 sectioncore platform typefeature workflowin dev labels

assigned to @peterhegman

	2 Warnings
	This merge request is quite big (525 lines changed), please consider splitting it into multiple merge requests.
	Please add a merge request subtype to this merge request.

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	Laura Meckley (@lmeckley) (UTC-6, 1 hour ahead of @peterhegman)	Natalia Tepluhina (@ntepluhina) (UTC+2, 9 hours ahead of @peterhegman)
UX	Annabel Dunstone Gray (@annabeldunstone) (UTC+0, 7 hours ahead of @peterhegman)	Maintainer review is optional for UX

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits ec37e3d7 and 11df90c7

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.16 MB	4.16 MB	-	0.0 %
mainChunk	3.01 MB	3.01 MB	-	0.0 %

Significant Growth: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.organizations.organizations.groups_and_projects	447.33 KB	472.67 KB	+25.33 KB	5.7 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @ohoral or @pgascouvaillancourt) for review, if you are unsure about the size increase.

Note: We do not have exact data for ec37e3d7. So we have used data from: 744646f9.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

Allure report

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for 11df90c7

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Create           | 46     | 0      | 1       | 10    | 47    | ❗     |
| Manage           | 13     | 0      | 1       | 12    | 14    | ❗     |
| Data Stores      | 22     | 0      | 0       | 6     | 22    | ❗     |
| Plan             | 51     | 0      | 0       | 6     | 51    | ❗     |
| Package          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Verify           | 8      | 0      | 0       | 2     | 8     | ❗     |
| Govern           | 36     | 0      | 0       | 6     | 36    | ❗     |
| Monitor          | 4      | 0      | 0       | 0     | 4     | ✅     |
| Framework sanity | 0      | 0      | 1       | 0     | 1     | ➖     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 180    | 0      | 4       | 42    | 184   | ❗     |
+------------------+--------+--------+---------+-------+-------+--------+

e2e-review-qa: test report for 11df90c7

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Data Stores      | 2      | 0      | 0       | 0     | 2     | ✅     |
| Create           | 8      | 0      | 1       | 0     | 9     | ✅     |
| Package          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Plan             | 3      | 0      | 1       | 0     | 4     | ✅     |
| Monitor          | 4      | 0      | 0       | 0     | 4     | ✅     |
| Framework sanity | 0      | 0      | 1       | 0     | 1     | ➖     |
| Manage           | 1      | 0      | 0       | 0     | 1     | ✅     |
| Govern           | 2      | 0      | 0       | 0     | 2     | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 20     | 0      | 4       | 0     | 24    | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+

added 950 commits

• 0ba67401...1e04d6b7 - 949 commits from branch master
• 7e8fa071 - Add groups view to organization

Compare with previous version

added UX label

marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed

added 1 commit

• c2fcf7e9 - Add groups view to organization

Compare with previous version

added 1 commit

• 11df90c7 - Add groups view to organization

Compare with previous version

@annabeldunstone can you help review the UX when you have time?

Note: there is some discussion about a few minor styling changes going on in #420800 (closed)

requested review from @annabeldunstone

@lmeckley can you help review the frontend when you have time?

requested review from @lmeckley

changed the description

approved this merge request

@annabeldunstone, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline will be started shortly.

For more info, please refer to the following links:

• rspec predictive jobs
• jest predictive jobs
• merging a merge request.

added pipeline:mr-approved label

removed review request for @annabeldunstone

approved this merge request

requested review from @pslaughter

Looking at this now!

...

resolved all threads

Thanks for working on this @peterhegman! I left a non-blocking comment, but all-in-all changes LGTM

Approving and starting merge...

approved this merge request

enabled an automatic merge when the pipeline for c791a9ac succeeds

resolved all threads

merged

mentioned in commit 2d6cdb2d

mentioned in commit 94c638d4

added workflowstaging-canary label and removed workflowin dev label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

mentioned in commit abb384a0

added workflowpost-deploy-db-staging label and removed workflowproduction label

added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label

added releasedcandidate label

added releasedpublished label and removed releasedcandidate label

mentioned in merge request !129975 (merged)

added devopstenant scale grouporganizations sectioninfrastructure platforms labels and removed devopsdata stores grouptenant scale [DEPRECATED] sectioncore platform labels