Skip to content

Reorganize remote development directory structure

Enrique Alcántara requested to merge 444837-display-mapped-agents-in-remote-development-settings into master

Issue: Reorganize remote development frontend director... (#458383 - closed)

What does this MR do and why?

Reorganize remote development directory structure

The Remote Development frontend is scaling into multiple frontend functionalities scattered across the GitLab application. From a high-level implementation perspective, each functionality is an independent Vue application. These applications share functionality via a shared library of components and GraphQL queries.

This commit reorganizes the ee/app/assets/javascripts/remote_development directory into multiple root directories that contain a single app. Functionality shared between applications is placed in a common directory that adopt the same inner structure as the application directories.

image.png

This is a detailed tree visualization of the new directory structure:

ee/app/assets/javascripts/workspaces/
├── agent
│   ├── components
│   │   └── agent_workspaces_list.vue
│   ├── constants.js
│   └── graphql
│       └── queries
│           └── agent_workspaces_list.query.graphql
├── common
│   ├── components
│   │   ├── get_project_details_query.vue
│   │   ├── update_workspace_mutation.vue
│   │   ├── workspace_actions.vue
│   │   ├── workspace_state_indicator.vue
│   │   └── workspaces_list
│   │       ├── empty_state.vue
│   │       ├── workspaces_list.vue
│   │       ├── workspaces_list_pagination.vue
│   │       └── workspaces_table.vue
│   ├── constants.js
│   ├── graphql
│   │   ├── fragments
│   │   │   └── workspace_item.fragment.graphql
│   │   ├── mutations
│   │   │   └── workspace_update.mutation.graphql
│   │   └── queries
│   │       ├── get_group_cluster_agents.query.graphql
│   │       ├── get_project_details.query.graphql
│   │       ├── get_projects_details.query.graphql
│   │       ├── get_remote_development_cluster_agents.query.graphql
│   │       └── user_workspaces_list.query.graphql
│   └── services
│       └── utils.js
├── dropdown_group
│   ├── components
│   │   ├── workspace_dropdown_item.vue
│   │   ├── workspaces_dropdown_group.stories.js
│   │   └── workspaces_dropdown_group.vue
│   └── constants.js
└── user
    ├── components
    │   ├── search_projects_listbox.vue
    │   └── workspaces_breadcrumbs.vue
    ├── constants.js
    ├── graphql
    │   ├── mutations
    │   │   └── workspace_create.mutation.graphql
    │   └── queries
    │       └── search_projects.query.graphql
    ├── init_user_workspaces_app.js
    ├── pages
    │   ├── app.vue
    │   ├── create.vue
    │   ├── list.stories.js
    │   └── list.vue
    ├── router
    │   └── index.js
    └── services
        └── apollo_cache_mutators.js

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

This merge request is a refactoring. It shouldn't modify the behavior or visual appearance of any feature. These features have extensive test coverage by the following feature specs https://gitlab.com/gitlab-org/gitlab/-/tree/master/ee/spec/features/remote_development

How to set up and validate locally

This merge request is a refactoring. It shouldn't modify the behavior or visual appearance of any feature.

Related to #444837 (closed)

Edited by Enrique Alcántara

Merge request reports