Setup Vue Router for Organization groups and projects

What does this MR do and why?

Related to #409030 (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/

The Groups and projects page will use one URL (/groups_and_projects) and then use a dropdown to switch views. For more discussion about the routing decision see !126778 (comment 1473712127)

This MR sets up Vue router for this Vue app. The URLs will be as follows:

• /-/organizations/gitlab/groups_and_projects
  • Currently this defaults to displaying Groups . In the future when we have a nested groups and projects view it will display that.
• /-/organizations/gitlab/groups_and_projects?display=groups
  • Displays Groups
• /-/organizations/gitlab/groups_and_projects?display=projects
  • Displays Projects

Reviewer note: This is currently using mock data while we wait for the API to be built in #409312 (closed)

Screenshots or screen recordings

Groups

Projects

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
   • /-/organizations/gitlab/groups_and_projects?display=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.