Reorganize remote development frontend directory into multiple applications
MR: Reorganize remote development directory structure (!151014 - merged)
Description
As a developer of the IDE group, I want to reorganize the directory structure of the ee/app/assets/javascripts/remote_development/
directory in a way that reflects the existence of four different applications:
- Agent admin workspaces list
- User workspaces
- Workspaces Dropdown
- Agent authorization settings
Why is this important?
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.
Currently, the organizational structure is very confusing. For example, the "Workspaces Dropdown" and the "Agent Admin UI" apps are deeply nested in a components
directory. It isn't easy to identify that these components are mounted as separate applications. The easiest interpretation is that they are parts of the "User Workspaces" functionality.
Moreover, we will start implementing the Agent Authorizations settings UI which is very complex and it will have its own set of GraphQL queries. It's important to completely decouple this application from the rest of the Remote Development apps.
Acceptance Criteria and technical requirements
-
Each application is enclosed in a root directory inside app/assets/javascripts/remote_development
-
Shared functionality is located in app/assets/javascripts/remote_development/common
-
Each application directory has their own components
,graphql
,router
, andpages
, andconstants
directories. Each directory is optional depending on the application requirements.