From 61e02d7f6c073a52b66283a39dc27487b4b883dc Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Thu, 20 Apr 2023 15:52:11 -0400
Subject: [PATCH 1/6] Workspace create follow-up

- Make sure we are sending all parameters to workspace create
mutation
- Fetch cluster agents from root group
- Projects should have a devfile
- Redirect to workspaces list after a workspace is created
---
 .../create/get_project_details_query.vue      | 73 +++++++++++++---
 .../remote_development/constants.js           |  3 +-
 .../fragments/workspace.fragment.graphql      | 14 ----
 .../workspace_create.mutation.graphql         |  5 --
 .../get_group_cluster_agents.query.graphql    | 11 +++
 .../queries/get_project_details.query.graphql |  7 +-
 .../remote_development/init_workspaces_app.js | 36 +-------
 .../remote_development/pages/create.vue       | 26 +++---
 .../create/get_project_details_query_spec.js  | 83 +++++++++++++++----
 .../remote_development/mock_data/index.js     | 13 ++-
 .../remote_development/pages/create_spec.js   | 70 +++++++++-------
 locale/gitlab.pot                             |  5 +-
 12 files changed, 209 insertions(+), 137 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/remote_development/graphql/fragments/workspace.fragment.graphql
 create mode 100644 ee/app/assets/javascripts/remote_development/graphql/queries/get_group_cluster_agents.query.graphql

diff --git a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
index 49f029ed4deff1..95f05178e90a69 100644
--- a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
+++ b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
@@ -1,6 +1,7 @@
 <script>
 import { logError } from '~/lib/logger';
 import getProjectDetails from '../../graphql/queries/get_project_details.query.graphql';
+import getGroupClusterAgents from '../../graphql/queries/get_group_cluster_agents.query.graphql';
 import { DEFAULT_DEVFILE_PATH } from '../../constants';
 
 export default {
@@ -37,23 +38,69 @@ export default {
 
         const { repository, group, id } = result.data.project;
 
-        const hasDevFile =
+        this.groupPath = null;
+        this.projectId = id;
+        this.hasDevFile =
           repository.blobs.nodes.some(({ path }) => path === DEFAULT_DEVFILE_PATH) || false;
-        const clusterAgents =
-          group?.clusterAgents.nodes.map((agent) => ({
-            value: agent.id,
-            text: agent.name,
-          })) || [];
-        const groupPath = group?.fullPath;
+        this.rootRef = repository.rootRef;
 
-        this.$emit('result', {
-          hasDevFile,
-          clusterAgents,
-          groupPath,
-          id,
-        });
+        if (group) {
+          this.groupPath = group.fullPath.split('/').shift();
+        } else {
+          this.emitResults();
+        }
       },
     },
+    getGroupClusterAgents: {
+      query: getGroupClusterAgents,
+      variables() {
+        return {
+          groupPath: this.groupPath,
+        };
+      },
+      skip() {
+        return !this.groupPath;
+      },
+      update() {
+        return [];
+      },
+      error(error) {
+        logError(error);
+      },
+      result(result) {
+        if (result.error) {
+          this.$emit('error');
+          return;
+        }
+
+        this.clusterAgents = result.data.group.clusterAgents.nodes.map((agent) => ({
+          value: agent.id,
+          text: agent.name,
+        }));
+
+        this.emitResults();
+      },
+    },
+  },
+  data() {
+    return {
+      groupPath: null,
+      hasDevFile: null,
+      projectId: null,
+      rootRef: null,
+      clusterAgents: [],
+    };
+  },
+  methods: {
+    emitResults() {
+      this.$emit('result', {
+        hasDevFile: this.hasDevFile,
+        id: this.projectId,
+        clusterAgents: this.clusterAgents,
+        groupPath: this.groupPath,
+        rootRef: this.rootRef,
+      });
+    },
   },
   render() {
     return this.$scopedSlots.default?.();
diff --git a/ee/app/assets/javascripts/remote_development/constants.js b/ee/app/assets/javascripts/remote_development/constants.js
index ef80b96b831ead..b40560df185828 100644
--- a/ee/app/assets/javascripts/remote_development/constants.js
+++ b/ee/app/assets/javascripts/remote_development/constants.js
@@ -1,4 +1,4 @@
-export const DEFAULT_DEVFILE_PATH = '.devfile';
+export const DEFAULT_DEVFILE_PATH = '.devfile.yaml';
 export const DEFAULT_EDITOR = 'webide';
 export const WORKSPACE_STATES = {
   // eslint-disable-next-line @gitlab/require-i18n-strings
@@ -12,3 +12,4 @@ export const WORKSPACE_STATES = {
   // eslint-disable-next-line @gitlab/require-i18n-strings
   terminated: 'Terminated',
 };
+export const DEFAULT_DESIRED_STATE = WORKSPACE_STATES.running;
diff --git a/ee/app/assets/javascripts/remote_development/graphql/fragments/workspace.fragment.graphql b/ee/app/assets/javascripts/remote_development/graphql/fragments/workspace.fragment.graphql
deleted file mode 100644
index e582f359a13290..00000000000000
--- a/ee/app/assets/javascripts/remote_development/graphql/fragments/workspace.fragment.graphql
+++ /dev/null
@@ -1,14 +0,0 @@
-fragment Workspace on Workspace {
-  id
-  name
-  namespace
-  desiredState
-  actualState
-  displayedState
-  url
-  editor
-  devfileRef
-  devfilePath
-  devfile
-  deploymentResourceVersion
-}
diff --git a/ee/app/assets/javascripts/remote_development/graphql/mutations/workspace_create.mutation.graphql b/ee/app/assets/javascripts/remote_development/graphql/mutations/workspace_create.mutation.graphql
index 43109bf4d06755..a5f2395ab7c427 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/mutations/workspace_create.mutation.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/mutations/workspace_create.mutation.graphql
@@ -1,10 +1,5 @@
-#import "../fragments/workspace.fragment.graphql"
-
 mutation workspaceCreate($input: WorkspaceCreateInput!) {
   workspaceCreate(input: $input) @client {
-    workspace {
-      ...Workspace
-    }
     errors
   }
 }
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/get_group_cluster_agents.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/get_group_cluster_agents.query.graphql
new file mode 100644
index 00000000000000..5d4bf35f944b50
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/get_group_cluster_agents.query.graphql
@@ -0,0 +1,11 @@
+query getGroupClusterAgents($groupPath: ID!) {
+  group(fullPath: $groupPath) {
+    id
+    clusterAgents {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/get_project_details.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/get_project_details.query.graphql
index 300ecc3169935c..28305474687646 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/get_project_details.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/get_project_details.query.graphql
@@ -4,14 +4,9 @@ query getProjectDetails($projectFullPath: ID!, $devFilePath: String!) {
     group {
       id
       fullPath
-      clusterAgents {
-        nodes {
-          id
-          name
-        }
-      }
     }
     repository {
+      rootRef
       blobs(paths: [$devFilePath]) {
         nodes {
           id
diff --git a/ee/app/assets/javascripts/remote_development/init_workspaces_app.js b/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
index 797526a1526fc8..990675c86b390c 100644
--- a/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
+++ b/ee/app/assets/javascripts/remote_development/init_workspaces_app.js
@@ -8,41 +8,7 @@ import userWorkspacesListQuery from './graphql/queries/user_workspaces_list.quer
 Vue.use(VueApollo);
 
 const createApolloProvider = () => {
-  /*
-   * This is dummy data used to support frontend development
-   * while the backend APIs are in development.
-   */
-  const resolvers = {
-    Mutation: {
-      workspaceCreate: () => {
-        return {
-          workspace: {
-            id: 1,
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            name: 'Workspace 1',
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            namespace: 'Namespace',
-            projectFullPath: 'GitLab.org / GitLab',
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            desiredState: 'Running',
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            actualState: 'Started',
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            displayedState: 'Started',
-            url: 'https://gdk.test:3443',
-            // eslint-disable-next-line @gitlab/require-i18n-strings
-            editor: 'VSCode',
-            devfile: 'devfile',
-            branch: 'master',
-            lastUsed: '2020-01-01T00:00:00.000Z',
-          },
-          errors: [],
-        };
-      },
-    },
-  };
-
-  const defaultClient = createDefaultClient(resolvers);
+  const defaultClient = createDefaultClient();
   // what: Dummy data to support development
   defaultClient.cache.writeQuery({
     query: userWorkspacesListQuery,
diff --git a/ee/app/assets/javascripts/remote_development/pages/create.vue b/ee/app/assets/javascripts/remote_development/pages/create.vue
index 22e0c48ee3c3ac..2ae93da11c032f 100644
--- a/ee/app/assets/javascripts/remote_development/pages/create.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/create.vue
@@ -2,13 +2,12 @@
 import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormSelect } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
-import { visitUrl } from '~/lib/utils/url_utility';
 import { logError } from '~/lib/logger';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import SearchProjectsListbox from '../components/create/search_projects_listbox.vue';
 import GetProjectDetailsQuery from '../components/create/get_project_details_query.vue';
 import workspaceCreateMutation from '../graphql/mutations/workspace_create.mutation.graphql';
-import { DEFAULT_EDITOR } from '../constants';
+import { DEFAULT_DESIRED_STATE, DEFAULT_DEVFILE_PATH, DEFAULT_EDITOR } from '../constants';
 
 export const i18n = {
   title: s__('Workspaces|New workspace'),
@@ -31,9 +30,9 @@ export const i18n = {
       ),
     },
     noDevFile: {
-      title: s__("Workspaces|This project doesn't have a devfile"),
+      title: s__("Workspaces|You can't create a workspace for this project"),
       content: s__(
-        'Workspaces|A devfile is a configuration file for your workspace. Without a devfile, a default workspace is created for this project. You can change that workspace at any time.',
+        "Workspaces|This project doesn't have a devfile. A devfile is a configuration file for your workspace. Without a devfile, you can't create a workspace.",
       ),
     },
   },
@@ -63,9 +62,10 @@ export default {
       selectedAgent: null,
       isCreatingWorkspace: false,
       clusterAgents: [],
-      hasDevFile: true,
+      hasDevFile: null,
       groupPath: null,
       projectId: null,
+      rootRef: null,
       projectDetailsLoaded: false,
     };
   },
@@ -80,7 +80,7 @@ export default {
       return this.projectDetailsLoaded && !this.displayClusterAgentsAlert && !this.hasDevFile;
     },
     saveWorkspaceEnabled() {
-      return this.selectedProject && this.selectedAgent;
+      return this.selectedProject && this.selectedAgent && this.hasDevFile;
     },
     workspacesHelpPath() {
       return helpPagePath('user/project/remote_development/index', { anchor: 'workspace' });
@@ -97,12 +97,13 @@ export default {
     },
   },
   methods: {
-    onProjectDetailsResult({ hasDevFile, clusterAgents, groupPath, id }) {
+    onProjectDetailsResult({ hasDevFile, clusterAgents, groupPath, id, rootRef }) {
       this.projectDetailsLoaded = true;
       this.hasDevFile = hasDevFile;
       this.clusterAgents = clusterAgents;
       this.groupPath = groupPath;
       this.projectId = id;
+      this.rootRef = rootRef;
     },
     onProjectDetailsError() {
       createAlert({ message: i18n.fetchProjectDetailsFailedMessage });
@@ -111,7 +112,7 @@ export default {
       try {
         this.isCreatingWorkspace = true;
 
-        const { data } = await this.$apollo.mutate({
+        const result = await this.$apollo.mutate({
           mutation: workspaceCreateMutation,
           variables: {
             input: {
@@ -119,18 +120,21 @@ export default {
               groupPath: this.groupPath,
               clusterAgentId: this.selectedAgent,
               editor: DEFAULT_EDITOR,
+              desiredState: DEFAULT_DESIRED_STATE,
+              devfilePath: DEFAULT_DEVFILE_PATH,
+              devfileRef: this.rootRef,
             },
           },
         });
 
-        const { errors, workspace } = data.workspaceCreate;
+        const { errors } = result.data.workspaceCreate;
 
         if (errors.length > 0) {
           createAlert({ message: errors[0] });
           return;
         }
 
-        visitUrl(workspace.url);
+        this.$router.push('index');
       } catch (error) {
         logError(error);
         createAlert({ message: i18n.createWorkspaceFailedMessage });
@@ -179,7 +183,7 @@ export default {
           data-testid="no-dev-file-alert"
           class="gl-mt-3"
           :title="$options.i18n.alerts.noDevFile.title"
-          variant="info"
+          variant="danger"
           :dismissible="false"
         >
           {{ $options.i18n.alerts.noDevFile.content }}
diff --git a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
index 13debad64f5d16..30aeea3ef09214 100644
--- a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
+++ b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
@@ -3,12 +3,16 @@ import Vue from 'vue';
 import { cloneDeep } from 'lodash';
 import { logError } from '~/lib/logger';
 import getProjectDetailsQuery from 'ee/remote_development/graphql/queries/get_project_details.query.graphql';
+import getGroupClusterAgentsQuery from 'ee/remote_development/graphql/queries/get_group_cluster_agents.query.graphql';
 import GetProjectDetailsQuery from 'ee/remote_development/components/create/get_project_details_query.vue';
 import { DEFAULT_DEVFILE_PATH } from 'ee/remote_development/constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { GET_PROJECT_DETAILS_QUERY_RESULT } from '../../mock_data';
+import {
+  GET_PROJECT_DETAILS_QUERY_RESULT,
+  GET_GROUP_CLUSTER_AGENTS_QUERY_RESULT,
+} from '../../mock_data';
 
 Vue.use(VueApollo);
 
@@ -16,17 +20,19 @@ jest.mock('~/lib/logger');
 
 describe('remote_development/components/create/get_project_details_query', () => {
   let mockApollo;
-  let getProjectAgentsAndRootFilesQueryHandler;
+  let getProjectDetailsQueryHandler;
+  let getGroupClusterAgentsQueryHandler;
   let wrapper;
   const projectFullPathFixture = 'gitlab-org/gitlab';
 
   const buildMockApollo = () => {
-    getProjectAgentsAndRootFilesQueryHandler = jest.fn();
-    getProjectAgentsAndRootFilesQueryHandler.mockResolvedValueOnce(
-      GET_PROJECT_DETAILS_QUERY_RESULT,
-    );
+    getProjectDetailsQueryHandler = jest.fn();
+    getProjectDetailsQueryHandler.mockResolvedValueOnce(GET_PROJECT_DETAILS_QUERY_RESULT);
+    getGroupClusterAgentsQueryHandler = jest.fn();
+    getGroupClusterAgentsQueryHandler.mockResolvedValueOnce(GET_GROUP_CLUSTER_AGENTS_QUERY_RESULT);
     mockApollo = createMockApollo([
-      [getProjectDetailsQuery, getProjectAgentsAndRootFilesQueryHandler],
+      [getProjectDetailsQuery, getProjectDetailsQueryHandler],
+      [getGroupClusterAgentsQuery, getGroupClusterAgentsQueryHandler],
     ]);
   };
   const buildWrapper = async ({ projectFullPath = projectFullPathFixture } = {}) => {
@@ -48,12 +54,20 @@ describe('remote_development/components/create/get_project_details_query', () =>
     it('executes get_project_details query', async () => {
       await buildWrapper();
 
-      expect(getProjectAgentsAndRootFilesQueryHandler).toHaveBeenCalledWith({
+      expect(getProjectDetailsQueryHandler).toHaveBeenCalledWith({
         projectFullPath: projectFullPathFixture,
         devFilePath: DEFAULT_DEVFILE_PATH,
       });
     });
 
+    it('executes get_group_cluster_agents query', async () => {
+      await buildWrapper();
+
+      expect(getGroupClusterAgentsQueryHandler).toHaveBeenCalledWith({
+        groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
+      });
+    });
+
     it('emits result event with fetched cluster agents, project id, project group, and root files', async () => {
       await buildWrapper();
 
@@ -66,6 +80,8 @@ describe('remote_development/components/create/get_project_details_query', () =>
         ],
         id: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
         groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
+        rootRef: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.repository.rootRef,
+        hasDevFile: false,
       });
     });
 
@@ -78,8 +94,8 @@ describe('remote_development/components/create/get_project_details_query', () =>
           path: DEFAULT_DEVFILE_PATH,
         });
 
-        getProjectAgentsAndRootFilesQueryHandler.mockReset();
-        getProjectAgentsAndRootFilesQueryHandler.mockResolvedValueOnce(customMockData);
+        getProjectDetailsQueryHandler.mockReset();
+        getProjectDetailsQueryHandler.mockResolvedValueOnce(customMockData);
       });
 
       it('emits result event with hasDevFile property that equals true', async () => {
@@ -99,8 +115,8 @@ describe('remote_development/components/create/get_project_details_query', () =>
           (blob) => blob.path !== DEFAULT_DEVFILE_PATH,
         );
 
-        getProjectAgentsAndRootFilesQueryHandler.mockReset();
-        getProjectAgentsAndRootFilesQueryHandler.mockResolvedValueOnce(customMockData);
+        getProjectDetailsQueryHandler.mockReset();
+        getProjectDetailsQueryHandler.mockResolvedValueOnce(customMockData);
       });
 
       it('emits result event with hasDevFile property that equals false', async () => {
@@ -117,17 +133,52 @@ describe('remote_development/components/create/get_project_details_query', () =>
     it('does not execute get_project_details query', async () => {
       await buildWrapper({ projectFullPath: null });
 
-      expect(getProjectAgentsAndRootFilesQueryHandler).not.toHaveBeenCalled();
+      expect(getProjectDetailsQueryHandler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when a project does not belong to a group', () => {
+    beforeEach(async () => {
+      const customMockData = cloneDeep(GET_PROJECT_DETAILS_QUERY_RESULT);
+
+      customMockData.data.project.group = null;
+
+      getProjectDetailsQueryHandler.mockReset();
+      getProjectDetailsQueryHandler.mockResolvedValueOnce(customMockData);
+
+      await buildWrapper();
+    });
+
+    it('does not execute the getGroupClusterAgents query', () => {
+      expect(getProjectDetailsQueryHandler).toHaveBeenCalled();
+      expect(getGroupClusterAgentsQueryHandler).not.toHaveBeenCalled();
+    });
+
+    it('emits result event with the project data', () => {
+      expect(wrapper.emitted('result')[0][0]).toMatchObject({
+        clusterAgents: [],
+        id: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
+        groupPath: null,
+        hasDevFile: false,
+        rootRef: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.repository.rootRef,
+      });
     });
   });
 
-  describe('when a graphql query error occurs', () => {
+  describe.each`
+    queryName                       | queryHandlerFactory
+    ${'getProjectDetailsQuery'}     | ${() => getProjectDetailsQueryHandler}
+    ${'getGroupClusterAgentsQuery'} | ${() => getGroupClusterAgentsQueryHandler}
+  `('when the $queryName query fails', ({ queryHandlerFactory }) => {
     const error = new Error();
 
     beforeEach(() => {
-      getProjectAgentsAndRootFilesQueryHandler.mockReset();
-      getProjectAgentsAndRootFilesQueryHandler.mockRejectedValueOnce(error);
+      const queryHandler = queryHandlerFactory();
+
+      queryHandler.mockReset();
+      queryHandler.mockRejectedValueOnce(error);
     });
+
     it('logs the error', async () => {
       expect(logError).not.toHaveBeenCalled();
 
diff --git a/ee/spec/frontend/remote_development/mock_data/index.js b/ee/spec/frontend/remote_development/mock_data/index.js
index 7e482489c0a490..e02e79830617a5 100644
--- a/ee/spec/frontend/remote_development/mock_data/index.js
+++ b/ee/spec/frontend/remote_development/mock_data/index.js
@@ -99,6 +99,7 @@ export const GET_PROJECT_DETAILS_QUERY_RESULT = {
     project: {
       id: 'gid://gitlab/Project/79',
       repository: {
+        rootRef: 'main',
         blobs: {
           nodes: [
             { id: '.editorconfig', path: '.editorconfig' },
@@ -109,16 +110,24 @@ export const GET_PROJECT_DETAILS_QUERY_RESULT = {
       group: {
         id: 'gid://gitlab/Group/80',
         fullPath: 'gitlab-org',
-        clusterAgents: { nodes: [{ name: 'default-agent', id: 'agents/1' }] },
       },
     },
   },
 };
 
+export const GET_GROUP_CLUSTER_AGENTS_QUERY_RESULT = {
+  data: {
+    group: {
+      id: 'gid://gitlab/Group/80',
+      fullPath: 'gitlab-org',
+      clusterAgents: { nodes: [{ name: 'default-agent', id: 'agents/1' }] },
+    },
+  },
+};
+
 export const WORKSPACE_CREATE_MUTATION_RESULT = {
   data: {
     workspaceCreate: {
-      workspace: cloneDeep(WORKSPACE),
       errors: [],
     },
   },
diff --git a/ee/spec/frontend/remote_development/pages/create_spec.js b/ee/spec/frontend/remote_development/pages/create_spec.js
index e9e8a01d99b7d0..d725598bc2f47d 100644
--- a/ee/spec/frontend/remote_development/pages/create_spec.js
+++ b/ee/spec/frontend/remote_development/pages/create_spec.js
@@ -7,16 +7,19 @@ import GetProjectDetailsQuery from 'ee/remote_development/components/create/get_
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { DEFAULT_EDITOR } from 'ee/remote_development/constants';
-import { visitUrl } from '~/lib/utils/url_utility';
+import {
+  DEFAULT_EDITOR,
+  DEFAULT_DESIRED_STATE,
+  DEFAULT_DEVFILE_PATH,
+} from 'ee/remote_development/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import { logError } from '~/lib/logger';
 import { createAlert } from '~/alert';
+import workspaceCreateMutation from 'ee/remote_development/graphql/mutations/workspace_create.mutation.graphql';
 import { GET_PROJECT_DETAILS_QUERY_RESULT, WORKSPACE_CREATE_MUTATION_RESULT } from '../mock_data';
 
 Vue.use(VueApollo);
 
-jest.mock('~/lib/utils/url_utility');
 jest.mock('~/lib/logger');
 jest.mock('~/alert');
 
@@ -27,22 +30,21 @@ describe('remote_development/pages/create.vue', () => {
   };
   const selectedClusterAgentIDFixture = 'agents/1';
   const clusterAgentsFixture = [{ text: 'Agent', value: 'agents/1' }];
+  const rootRefFixture = 'main';
   const GlFormSelectStub = stubComponent(GlFormSelect, {
     props: ['options'],
   });
+  const mockRouter = {
+    push: jest.fn(),
+  };
   let wrapper;
   let workspaceCreateMutationHandler;
   let mockApollo;
 
   const buildMockApollo = () => {
-    workspaceCreateMutationHandler = jest
-      .fn()
-      .mockResolvedValueOnce(WORKSPACE_CREATE_MUTATION_RESULT.data.workspaceCreate);
-    mockApollo = createMockApollo([], {
-      Mutation: {
-        workspaceCreate: workspaceCreateMutationHandler,
-      },
-    });
+    workspaceCreateMutationHandler = jest.fn();
+    workspaceCreateMutationHandler.mockResolvedValueOnce(WORKSPACE_CREATE_MUTATION_RESULT);
+    mockApollo = createMockApollo([[workspaceCreateMutation, workspaceCreateMutationHandler]]);
   };
 
   const createWrapper = () => {
@@ -51,6 +53,9 @@ describe('remote_development/pages/create.vue', () => {
       stubs: {
         GlFormSelect: GlFormSelectStub,
       },
+      mocks: {
+        $router: mockRouter,
+      },
     });
   };
 
@@ -67,11 +72,13 @@ describe('remote_development/pages/create.vue', () => {
     hasDevFile = false,
     groupPath = GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
     id = GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
+    rootRef = rootRefFixture,
   }) =>
     findGetProjectDetailsQuery().vm.$emit('result', {
       clusterAgents,
       hasDevFile,
       groupPath,
+      rootRef,
       id,
     });
   const selectProject = (project = selectedProjectFixture) =>
@@ -178,19 +185,26 @@ describe('remote_development/pages/create.vue', () => {
 
         expect(findNoDevFileGlAlert().props()).toMatchObject({
           title: i18n.alerts.noDevFile.title,
-          variant: 'info',
+          variant: 'danger',
           dismissible: false,
         });
       });
+
+      it('disables the "Create Workspace" button', () => {
+        expect(findCreateWorkspaceButton().props().disabled).toBe(true);
+      });
     });
   });
 
-  describe('when a project and a cluster agent are selected', () => {
+  describe('when a project and a cluster agent are selected and the project has a devfile', () => {
     beforeEach(async () => {
       createWrapper();
 
       await selectProject();
-      await emitGetProjectDetailsQueryResult({ clusterAgents: clusterAgentsFixture });
+      await emitGetProjectDetailsQueryResult({
+        clusterAgents: clusterAgentsFixture,
+        hasDevFile: true,
+      });
       await selectClusterAgent();
     });
 
@@ -212,19 +226,17 @@ describe('remote_development/pages/create.vue', () => {
       it('submits workspaceCreate mutation', async () => {
         await submitCreateWorkspaceForm();
 
-        expect(workspaceCreateMutationHandler).toHaveBeenCalledWith(
-          expect.any(Object),
-          {
-            input: {
-              clusterAgentId: selectedClusterAgentIDFixture,
-              projectId: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
-              groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
-              editor: DEFAULT_EDITOR,
-            },
+        expect(workspaceCreateMutationHandler).toHaveBeenCalledWith({
+          input: {
+            clusterAgentId: selectedClusterAgentIDFixture,
+            projectId: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
+            groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
+            editor: DEFAULT_EDITOR,
+            desiredState: DEFAULT_DESIRED_STATE,
+            devfilePath: DEFAULT_DEVFILE_PATH,
+            devfileRef: rootRefFixture,
           },
-          expect.any(Object),
-          expect.any(Object),
-        );
+        });
       });
 
       it('sets Create Workspace button as loading', async () => {
@@ -234,13 +246,11 @@ describe('remote_development/pages/create.vue', () => {
       });
 
       describe('when the workspaceCreate mutation succeeds', () => {
-        it('redirects the user to the workspace editor', async () => {
+        it('redirects the user to the workspaces list', async () => {
           await submitCreateWorkspaceForm();
           await waitForPromises();
 
-          expect(visitUrl).toHaveBeenCalledWith(
-            WORKSPACE_CREATE_MUTATION_RESULT.data.workspaceCreate.workspace.url,
-          );
+          expect(mockRouter.push).toHaveBeenCalledWith('index');
         });
       });
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a2affaeb776aab..cadd191eb790dc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -50383,9 +50383,6 @@ msgstr ""
 msgid "Workspaces"
 msgstr ""
 
-msgid "Workspaces|A devfile is a configuration file for your workspace. Without a devfile, a default workspace is created for this project. You can change that workspace at any time."
-msgstr ""
-
 msgid "Workspaces|A workspace is a virtual sandbox environment for your code in GitLab. You can create a workspace on its own or as part of a project."
 msgstr ""
 
@@ -50419,7 +50416,7 @@ msgstr ""
 msgid "Workspaces|Select project"
 msgstr ""
 
-msgid "Workspaces|This project doesn't have a devfile"
+msgid "Workspaces|This project doesn't have a devfile. A devfile is a configuration file for your workspace. Without a devfile, you can't create a workspace."
 msgstr ""
 
 msgid "Workspaces|To create a workspace for this project, an administrator must configure an agent for the project's group."
-- 
GitLab


From f0f3a9cc59d53ee4117833ba05b10295eb9de54f Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Fri, 21 Apr 2023 09:42:31 -0400
Subject: [PATCH 2/6] Technical writing feedback

Improve noDevFile messaging
---
 .../remote_development/pages/create.vue       | 29 ++++++--------
 .../remote_development/pages/create_spec.js   | 40 ++++++++++++-------
 locale/gitlab.pot                             |  4 +-
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/pages/create.vue b/ee/app/assets/javascripts/remote_development/pages/create.vue
index 2ae93da11c032f..c68fd0592763e4 100644
--- a/ee/app/assets/javascripts/remote_development/pages/create.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/create.vue
@@ -22,19 +22,14 @@ export const i18n = {
       devfileProjectHelp: s__('Workspaces|You can create a workspace for Premium projects only.'),
     },
   },
-  alerts: {
-    noAgents: {
-      title: s__("Workspaces|You can't create a workspace for this project"),
-      content: s__(
-        "Workspaces|To create a workspace for this project, an administrator must configure an agent for the project's group.",
-      ),
-    },
-    noDevFile: {
-      title: s__("Workspaces|You can't create a workspace for this project"),
-      content: s__(
-        "Workspaces|This project doesn't have a devfile. A devfile is a configuration file for your workspace. Without a devfile, you can't create a workspace.",
-      ),
-    },
+  invalidProjectAlert: {
+    title: s__("Workspaces|You can't create a workspace for this project"),
+    noAgentsContent: s__(
+      "Workspaces|To create a workspace for this project, an administrator must configure an agent for the project's group.",
+    ),
+    noDevFileContent: s__(
+      'Workspaces|To create a workspace, add a devfile to this project. A devfile is a configuration file for your workspace.',
+    ),
   },
   submitButton: {
     create: s__('Workspaces|Create workspace'),
@@ -172,21 +167,21 @@ export default {
           v-if="displayClusterAgentsAlert"
           data-testid="no-agents-alert"
           class="gl-mt-3"
-          :title="$options.i18n.alerts.noAgents.title"
+          :title="$options.i18n.invalidProjectAlert.title"
           variant="danger"
           :dismissible="false"
         >
-          {{ $options.i18n.alerts.noAgents.content }}
+          {{ $options.i18n.invalidProjectAlert.noAgentsContent }}
         </gl-alert>
         <gl-alert
           v-if="displayNoDevFileAlert"
           data-testid="no-dev-file-alert"
           class="gl-mt-3"
-          :title="$options.i18n.alerts.noDevFile.title"
+          :title="$options.i18n.invalidProjectAlert.title"
           variant="danger"
           :dismissible="false"
         >
-          {{ $options.i18n.alerts.noDevFile.content }}
+          {{ $options.i18n.invalidProjectAlert.noDevFileContent }}
         </gl-alert>
       </gl-form-group>
       <gl-form-group
diff --git a/ee/spec/frontend/remote_development/pages/create_spec.js b/ee/spec/frontend/remote_development/pages/create_spec.js
index d725598bc2f47d..0f5604b99d716e 100644
--- a/ee/spec/frontend/remote_development/pages/create_spec.js
+++ b/ee/spec/frontend/remote_development/pages/create_spec.js
@@ -15,7 +15,6 @@ import {
 import waitForPromises from 'helpers/wait_for_promises';
 import { logError } from '~/lib/logger';
 import { createAlert } from '~/alert';
-import workspaceCreateMutation from 'ee/remote_development/graphql/mutations/workspace_create.mutation.graphql';
 import { GET_PROJECT_DETAILS_QUERY_RESULT, WORKSPACE_CREATE_MUTATION_RESULT } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -43,8 +42,14 @@ describe('remote_development/pages/create.vue', () => {
 
   const buildMockApollo = () => {
     workspaceCreateMutationHandler = jest.fn();
-    workspaceCreateMutationHandler.mockResolvedValueOnce(WORKSPACE_CREATE_MUTATION_RESULT);
-    mockApollo = createMockApollo([[workspaceCreateMutation, workspaceCreateMutationHandler]]);
+    workspaceCreateMutationHandler.mockResolvedValueOnce(
+      WORKSPACE_CREATE_MUTATION_RESULT.data.workspaceCreate,
+    );
+    mockApollo = createMockApollo([], {
+      Mutation: {
+        workspaceCreate: workspaceCreateMutationHandler,
+      },
+    });
   };
 
   const createWrapper = () => {
@@ -115,7 +120,7 @@ describe('remote_development/pages/create.vue', () => {
     });
     it('displays danger alert indicating it', () => {
       expect(findNoAgentsGlAlert().props()).toMatchObject({
-        title: i18n.alerts.noAgents.title,
+        title: i18n.invalidProjectAlert.title,
         variant: 'danger',
         dismissible: false,
       });
@@ -184,7 +189,7 @@ describe('remote_development/pages/create.vue', () => {
         });
 
         expect(findNoDevFileGlAlert().props()).toMatchObject({
-          title: i18n.alerts.noDevFile.title,
+          title: i18n.invalidProjectAlert.title,
           variant: 'danger',
           dismissible: false,
         });
@@ -226,17 +231,22 @@ describe('remote_development/pages/create.vue', () => {
       it('submits workspaceCreate mutation', async () => {
         await submitCreateWorkspaceForm();
 
-        expect(workspaceCreateMutationHandler).toHaveBeenCalledWith({
-          input: {
-            clusterAgentId: selectedClusterAgentIDFixture,
-            projectId: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
-            groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
-            editor: DEFAULT_EDITOR,
-            desiredState: DEFAULT_DESIRED_STATE,
-            devfilePath: DEFAULT_DEVFILE_PATH,
-            devfileRef: rootRefFixture,
+        expect(workspaceCreateMutationHandler).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            input: {
+              clusterAgentId: selectedClusterAgentIDFixture,
+              projectId: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
+              groupPath: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.group.fullPath,
+              editor: DEFAULT_EDITOR,
+              desiredState: DEFAULT_DESIRED_STATE,
+              devfilePath: DEFAULT_DEVFILE_PATH,
+              devfileRef: rootRefFixture,
+            },
           },
-        });
+          expect.any(Object),
+          expect.any(Object),
+        );
       });
 
       it('sets Create Workspace button as loading', async () => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index cadd191eb790dc..5aeba7df5fc29d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -50416,10 +50416,10 @@ msgstr ""
 msgid "Workspaces|Select project"
 msgstr ""
 
-msgid "Workspaces|This project doesn't have a devfile. A devfile is a configuration file for your workspace. Without a devfile, you can't create a workspace."
+msgid "Workspaces|To create a workspace for this project, an administrator must configure an agent for the project's group."
 msgstr ""
 
-msgid "Workspaces|To create a workspace for this project, an administrator must configure an agent for the project's group."
+msgid "Workspaces|To create a workspace, add a devfile to this project. A devfile is a configuration file for your workspace."
 msgstr ""
 
 msgid "Workspaces|Workspaces"
-- 
GitLab


From 92856b8d15aef6c9f0755b3fd6332aca0568de6f Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Fri, 21 Apr 2023 13:47:13 +0000
Subject: [PATCH 3/6] Code review feedback

Follow convention of appending query
---
 .../components/create/get_project_details_query.vue       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
index 95f05178e90a69..f701b9bc2fd4b9 100644
--- a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
+++ b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
@@ -1,7 +1,7 @@
 <script>
 import { logError } from '~/lib/logger';
-import getProjectDetails from '../../graphql/queries/get_project_details.query.graphql';
-import getGroupClusterAgents from '../../graphql/queries/get_group_cluster_agents.query.graphql';
+import getProjectDetailsQuery from '../../graphql/queries/get_project_details.query.graphql';
+import getGroupClusterAgentsQuery from '../../graphql/queries/get_group_cluster_agents.query.graphql';
 import { DEFAULT_DEVFILE_PATH } from '../../constants';
 
 export default {
@@ -14,7 +14,7 @@ export default {
   },
   apollo: {
     projectDetails: {
-      query: getProjectDetails,
+      query: getProjectDetailsQuery,
       variables() {
         return {
           projectFullPath: this.projectFullPath,
@@ -52,7 +52,7 @@ export default {
       },
     },
     getGroupClusterAgents: {
-      query: getGroupClusterAgents,
+      query: getGroupClusterAgentsQuery,
       variables() {
         return {
           groupPath: this.groupPath,
-- 
GitLab


From 3046ce24a05388bd040c92ddd0d83a50c1d91531 Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Fri, 21 Apr 2023 09:58:50 -0400
Subject: [PATCH 4/6] Put all route names in a constant

To avoid repeating route name strings
across the application
---
 .../remote_development/components/list/empty_state.vue     | 4 +++-
 ee/app/assets/javascripts/remote_development/constants.js  | 5 +++++
 .../assets/javascripts/remote_development/pages/create.vue | 7 ++++---
 .../assets/javascripts/remote_development/pages/list.vue   | 7 +++++--
 .../assets/javascripts/remote_development/router/index.js  | 5 +++--
 .../remote_development/components/list/empty_state_spec.js | 3 ++-
 ee/spec/frontend/remote_development/pages/create_spec.js   | 5 +++--
 ee/spec/frontend/remote_development/pages/list_spec.js     | 4 ++--
 8 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue b/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
index ff3b7795fe4518..eaee5612250cbb 100644
--- a/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
+++ b/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { ROUTES } from '../../constants';
 
 export const i18n = {
   title: s__('Workspaces|Develop anywhere'),
@@ -17,6 +18,7 @@ export default {
   },
   inject: ['emptyStateSvgPath'],
   i18n,
+  ROUTES,
 };
 </script>
 
@@ -28,7 +30,7 @@ export default {
       :svg-path="emptyStateSvgPath"
     >
       <template #actions>
-        <gl-button variant="confirm" class="gl-mb-3 gl-mx-2" to="create">{{
+        <gl-button variant="confirm" class="gl-mb-3 gl-mx-2" :to="$options.ROUTES.create">{{
           $options.i18n.primaryButtonText
         }}</gl-button>
       </template>
diff --git a/ee/app/assets/javascripts/remote_development/constants.js b/ee/app/assets/javascripts/remote_development/constants.js
index b40560df185828..63444320203b81 100644
--- a/ee/app/assets/javascripts/remote_development/constants.js
+++ b/ee/app/assets/javascripts/remote_development/constants.js
@@ -13,3 +13,8 @@ export const WORKSPACE_STATES = {
   terminated: 'Terminated',
 };
 export const DEFAULT_DESIRED_STATE = WORKSPACE_STATES.running;
+
+export const ROUTES = {
+  index: 'index',
+  create: 'create',
+};
diff --git a/ee/app/assets/javascripts/remote_development/pages/create.vue b/ee/app/assets/javascripts/remote_development/pages/create.vue
index c68fd0592763e4..f445386e9c0080 100644
--- a/ee/app/assets/javascripts/remote_development/pages/create.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/create.vue
@@ -7,7 +7,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import SearchProjectsListbox from '../components/create/search_projects_listbox.vue';
 import GetProjectDetailsQuery from '../components/create/get_project_details_query.vue';
 import workspaceCreateMutation from '../graphql/mutations/workspace_create.mutation.graphql';
-import { DEFAULT_DESIRED_STATE, DEFAULT_DEVFILE_PATH, DEFAULT_EDITOR } from '../constants';
+import { DEFAULT_DESIRED_STATE, DEFAULT_DEVFILE_PATH, DEFAULT_EDITOR, ROUTES } from '../constants';
 
 export const i18n = {
   title: s__('Workspaces|New workspace'),
@@ -129,7 +129,7 @@ export default {
           return;
         }
 
-        this.$router.push('index');
+        this.$router.push(ROUTES.index);
       } catch (error) {
         logError(error);
         createAlert({ message: i18n.createWorkspaceFailedMessage });
@@ -139,6 +139,7 @@ export default {
     },
   },
   i18n,
+  ROUTES,
 };
 </script>
 <template>
@@ -211,7 +212,7 @@ export default {
         >
           {{ $options.i18n.submitButton.create }}
         </gl-button>
-        <gl-button class="gl-ml-3" data-testid="cancel-workspace" to="root">
+        <gl-button class="gl-ml-3" data-testid="cancel-workspace" :to="$options.ROUTES.index">
           {{ $options.i18n.cancelButton }}
         </gl-button>
       </div>
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index 553a5de58c0e70..113fb811990588 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/list.vue
@@ -3,7 +3,7 @@ import { GlAlert, GlButton, GlLink, GlIcon, GlSkeletonLoader, GlTableLite } from
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { logError } from '~/lib/logger';
 import { s__, __ } from '~/locale';
-import { WORKSPACE_STATES } from '../constants';
+import { WORKSPACE_STATES, ROUTES } from '../constants';
 import userWorkspacesListQuery from '../graphql/queries/user_workspaces_list.query.graphql';
 import WorkspaceEmptyState from '../components/list/empty_state.vue';
 
@@ -84,6 +84,7 @@ export default {
     newWorkspaceButton: s__('Workspaces|New workspace'),
   },
   WORKSPACE_STATES,
+  ROUTES,
 };
 </script>
 <template>
@@ -94,7 +95,9 @@ export default {
 
     <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
       <h2>{{ $options.i18n.heading }}</h2>
-      <gl-button variant="confirm" to="create">{{ $options.i18n.newWorkspaceButton }}</gl-button>
+      <gl-button variant="confirm" :to="$options.ROUTES.create">{{
+        $options.i18n.newWorkspaceButton
+      }}</gl-button>
     </div>
 
     <workspace-empty-state v-if="isEmpty" />
diff --git a/ee/app/assets/javascripts/remote_development/router/index.js b/ee/app/assets/javascripts/remote_development/router/index.js
index 6989fdafb5d319..6553d29294b5ec 100644
--- a/ee/app/assets/javascripts/remote_development/router/index.js
+++ b/ee/app/assets/javascripts/remote_development/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import WorkspacesList from '../pages/list.vue';
 import CreateWorkspace from '../pages/create.vue';
+import { ROUTES } from '../constants';
 
 Vue.use(VueRouter);
 
@@ -9,12 +10,12 @@ export default function createRouter({ base }) {
   const routes = [
     {
       path: '/',
-      name: 'index',
+      name: ROUTES.index,
       component: WorkspacesList,
     },
     {
       path: '/create',
-      name: 'create',
+      name: ROUTES.create,
       component: CreateWorkspace,
     },
     {
diff --git a/ee/spec/frontend/remote_development/components/list/empty_state_spec.js b/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
index 1a8bc0fce7805c..7623df60791f6e 100644
--- a/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
+++ b/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
@@ -1,6 +1,7 @@
 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EmptyState, { i18n } from 'ee/remote_development/components/list/empty_state.vue';
+import { ROUTES } from 'ee/remote_development/constants';
 
 const SVG_PATH = '/assets/illustrations/empty_states/empty_workspaces.svg';
 
@@ -40,7 +41,7 @@ describe('remote_development/components/list/empty_state.vue', () => {
         variant: 'confirm',
       });
       expect(button.attributes()).toMatchObject({
-        to: 'create',
+        to: ROUTES.create,
       });
     });
   });
diff --git a/ee/spec/frontend/remote_development/pages/create_spec.js b/ee/spec/frontend/remote_development/pages/create_spec.js
index 0f5604b99d716e..5f63f77466efc9 100644
--- a/ee/spec/frontend/remote_development/pages/create_spec.js
+++ b/ee/spec/frontend/remote_development/pages/create_spec.js
@@ -11,6 +11,7 @@ import {
   DEFAULT_EDITOR,
   DEFAULT_DESIRED_STATE,
   DEFAULT_DEVFILE_PATH,
+  ROUTES,
 } from 'ee/remote_development/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import { logError } from '~/lib/logger';
@@ -103,7 +104,7 @@ describe('remote_development/pages/create.vue', () => {
     });
 
     it('displays a cancel button that allows navigating to the workspaces list', () => {
-      expect(wrapper.findByTestId('cancel-workspace').attributes().to).toBe('root');
+      expect(wrapper.findByTestId('cancel-workspace').attributes().to).toBe(ROUTES.index);
     });
 
     it('disables create workspace button', () => {
@@ -260,7 +261,7 @@ describe('remote_development/pages/create.vue', () => {
           await submitCreateWorkspaceForm();
           await waitForPromises();
 
-          expect(mockRouter.push).toHaveBeenCalledWith('index');
+          expect(mockRouter.push).toHaveBeenCalledWith(ROUTES.index);
         });
       });
 
diff --git a/ee/spec/frontend/remote_development/pages/list_spec.js b/ee/spec/frontend/remote_development/pages/list_spec.js
index 2809be0a77632a..a7a8f258f19b8d 100644
--- a/ee/spec/frontend/remote_development/pages/list_spec.js
+++ b/ee/spec/frontend/remote_development/pages/list_spec.js
@@ -8,7 +8,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import WorkspaceList from 'ee/remote_development/pages/list.vue';
 import WorkspaceEmptyState from 'ee/remote_development/components/list/empty_state.vue';
 import userWorkspacesListQuery from 'ee/remote_development/graphql/queries/user_workspaces_list.query.graphql';
-import { WORKSPACE_STATES } from 'ee/remote_development/constants';
+import { WORKSPACE_STATES, ROUTES } from 'ee/remote_development/constants';
 import {
   CURRENT_USERNAME,
   USER_WORKSPACES_QUERY_RESULT,
@@ -145,7 +145,7 @@ describe('remote_development/pages/list.vue', () => {
 
     await waitForPromises();
 
-    expect(findNewWorkspaceButton(wrapper).attributes().to).toBe('create');
+    expect(findNewWorkspaceButton(wrapper).attributes().to).toBe(ROUTES.create);
     expect(findNewWorkspaceButton(wrapper).text()).toMatch(/New workspace/);
   });
 });
-- 
GitLab


From 50d3882db0c7589a5ca6f7eb557863281a123f4e Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Fri, 21 Apr 2023 10:45:05 -0400
Subject: [PATCH 5/6] Code review feedback

Ensure that a group is refetched after
a project changes
---
 .../create/get_project_details_query.vue      |  6 +++++-
 .../create/get_project_details_query_spec.js  | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
index f701b9bc2fd4b9..8db4994ac0c4a3 100644
--- a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
+++ b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
@@ -38,7 +38,6 @@ export default {
 
         const { repository, group, id } = result.data.project;
 
-        this.groupPath = null;
         this.projectId = id;
         this.hasDevFile =
           repository.blobs.nodes.some(({ path }) => path === DEFAULT_DEVFILE_PATH) || false;
@@ -91,6 +90,11 @@ export default {
       clusterAgents: [],
     };
   },
+  watch: {
+    projectFullPath() {
+      this.groupPath = null;
+    },
+  },
   methods: {
     emitResults() {
       this.$emit('result', {
diff --git a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
index 30aeea3ef09214..368f614ad24156 100644
--- a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
+++ b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
@@ -165,6 +165,26 @@ describe('remote_development/components/create/get_project_details_query', () =>
     });
   });
 
+  describe('when the project full path changes', () => {
+    it('fetches the project root group', async () => {
+      const customMockData = cloneDeep(GET_PROJECT_DETAILS_QUERY_RESULT);
+
+      await buildWrapper();
+
+      expect(getGroupClusterAgentsQueryHandler).toHaveBeenCalledTimes(1);
+
+      customMockData.data.project.group.fullPath = 'new';
+
+      getProjectDetailsQueryHandler.mockResolvedValueOnce(customMockData);
+
+      await wrapper.setProps({ projectFullPath: 'new/path' });
+
+      await waitForPromises();
+
+      expect(getGroupClusterAgentsQueryHandler).toHaveBeenCalledTimes(2);
+    });
+  });
+
   describe.each`
     queryName                       | queryHandlerFactory
     ${'getProjectDetailsQuery'}     | ${() => getProjectDetailsQueryHandler}
-- 
GitLab


From 1b833c30df1db3c0820960ab9ca277fe9f907276 Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Mon, 24 Apr 2023 09:18:16 -0400
Subject: [PATCH 6/6] Code review feedback

Refactor fetch cluster agents query
Handle case of projects without a repository
---
 .../create/get_project_details_query.vue      | 101 ++++++++----------
 .../create/get_project_details_query_spec.js  |  56 ++++++++++
 2 files changed, 99 insertions(+), 58 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
index 8db4994ac0c4a3..5c6725273cd6f3 100644
--- a/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
+++ b/ee/app/assets/javascripts/remote_development/components/create/get_project_details_query.vue
@@ -30,7 +30,7 @@ export default {
       error(error) {
         logError(error);
       },
-      result(result) {
+      async result(result) {
         if (result.error) {
           this.$emit('error');
           return;
@@ -38,72 +38,57 @@ export default {
 
         const { repository, group, id } = result.data.project;
 
-        this.projectId = id;
-        this.hasDevFile =
-          repository.blobs.nodes.some(({ path }) => path === DEFAULT_DEVFILE_PATH) || false;
-        this.rootRef = repository.rootRef;
+        const hasDevFile = repository
+          ? repository.blobs.nodes.some(({ path }) => path === DEFAULT_DEVFILE_PATH)
+          : false;
+        const rootRef = repository ? repository.rootRef : null;
+        const groupPath = group?.fullPath.split('/').shift() || null;
+        const clusterAgentsResponse = await this.fetchClusterAgents(groupPath);
 
-        if (group) {
-          this.groupPath = group.fullPath.split('/').shift();
-        } else {
-          this.emitResults();
-        }
-      },
-    },
-    getGroupClusterAgents: {
-      query: getGroupClusterAgentsQuery,
-      variables() {
-        return {
-          groupPath: this.groupPath,
-        };
-      },
-      skip() {
-        return !this.groupPath;
-      },
-      update() {
-        return [];
-      },
-      error(error) {
-        logError(error);
-      },
-      result(result) {
-        if (result.error) {
+        if (clusterAgentsResponse.error) {
+          logError(clusterAgentsResponse.error);
           this.$emit('error');
           return;
         }
 
-        this.clusterAgents = result.data.group.clusterAgents.nodes.map((agent) => ({
-          value: agent.id,
-          text: agent.name,
-        }));
-
-        this.emitResults();
+        this.$emit('result', {
+          id,
+          clusterAgents: clusterAgentsResponse.result,
+          groupPath,
+          hasDevFile,
+          rootRef,
+        });
       },
     },
   },
-  data() {
-    return {
-      groupPath: null,
-      hasDevFile: null,
-      projectId: null,
-      rootRef: null,
-      clusterAgents: [],
-    };
-  },
-  watch: {
-    projectFullPath() {
-      this.groupPath = null;
-    },
-  },
   methods: {
-    emitResults() {
-      this.$emit('result', {
-        hasDevFile: this.hasDevFile,
-        id: this.projectId,
-        clusterAgents: this.clusterAgents,
-        groupPath: this.groupPath,
-        rootRef: this.rootRef,
-      });
+    async fetchClusterAgents(groupPath) {
+      if (!groupPath) {
+        return {
+          error: null,
+          result: [],
+        };
+      }
+
+      try {
+        const { data, error } = await this.$apollo.query({
+          query: getGroupClusterAgentsQuery,
+          variables: { groupPath },
+        });
+
+        if (error) {
+          return { error };
+        }
+
+        return {
+          result: data.group.clusterAgents.nodes.map((agent) => ({
+            value: agent.id,
+            text: agent.name,
+          })),
+        };
+      } catch (error) {
+        return { error };
+      }
     },
   },
   render() {
diff --git a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
index 368f614ad24156..2e55f6798e29d1 100644
--- a/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
+++ b/ee/spec/frontend/remote_development/components/create/get_project_details_query_spec.js
@@ -129,6 +129,26 @@ describe('remote_development/components/create/get_project_details_query', () =>
     });
   });
 
+  describe('when the project does not have a repository', () => {
+    beforeEach(() => {
+      const customMockData = cloneDeep(GET_PROJECT_DETAILS_QUERY_RESULT);
+
+      customMockData.data.project.repository = null;
+
+      getProjectDetailsQueryHandler.mockReset();
+      getProjectDetailsQueryHandler.mockResolvedValueOnce(customMockData);
+    });
+
+    it('emits result event with hasDevFile property that equals false and rootRef null', async () => {
+      await buildWrapper();
+
+      expect(wrapper.emitted('result')[0][0]).toMatchObject({
+        hasDevFile: false,
+        rootRef: null,
+      });
+    });
+  });
+
   describe('when project full path is not provided', () => {
     it('does not execute get_project_details query', async () => {
       await buildWrapper({ projectFullPath: null });
@@ -185,6 +205,36 @@ describe('remote_development/components/create/get_project_details_query', () =>
     });
   });
 
+  describe('when the project full path changes from group to not group', () => {
+    it('emits empty clusters', async () => {
+      await buildWrapper();
+
+      expect(getGroupClusterAgentsQueryHandler).toHaveBeenCalledTimes(1);
+
+      const projectWithoutGroup = cloneDeep(GET_PROJECT_DETAILS_QUERY_RESULT);
+      projectWithoutGroup.data.project.group = null;
+      getProjectDetailsQueryHandler.mockResolvedValueOnce(projectWithoutGroup);
+
+      // assert that we've only emitted once
+      expect(wrapper.emitted('result')).toHaveLength(1);
+      await wrapper.setProps({ projectFullPath: 'new/path' });
+
+      await waitForPromises();
+
+      // assert against the last emitted result
+      expect(wrapper.emitted('result')).toHaveLength(2);
+      expect(wrapper.emitted('result')[1]).toEqual([
+        {
+          clusterAgents: [],
+          groupPath: null,
+          hasDevFile: false,
+          id: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.id,
+          rootRef: GET_PROJECT_DETAILS_QUERY_RESULT.data.project.repository.rootRef,
+        },
+      ]);
+    });
+  });
+
   describe.each`
     queryName                       | queryHandlerFactory
     ${'getProjectDetailsQuery'}     | ${() => getProjectDetailsQueryHandler}
@@ -207,6 +257,12 @@ describe('remote_development/components/create/get_project_details_query', () =>
       expect(logError).toHaveBeenCalledWith(error);
     });
 
+    it('does not emit result event', async () => {
+      await buildWrapper();
+
+      expect(wrapper.emitted('result')).toBe(undefined);
+    });
+
     it('emits error event', async () => {
       await buildWrapper();
 
-- 
GitLab