From 39b8dcbf8e3f7d7af93cf0002a307a71bb0acc08 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Fri, 17 Nov 2023 22:47:03 -0800
Subject: [PATCH 01/16] UI for Remote Dev Workspaces Agent Admin

- Minimal first iteration to allow agent cluster admins
  to view and administer workspaces
---
 .../clusters/agents/components/show.vue       |   7 +
 .../clusters/agents/components/show.vue       |   8 +
 .../agent_admin_ui/agent_workspaces_tab.vue   |  23 +++
 .../agent_admin_ui/workspaces_list.vue        | 169 ++++++++++++++++++
 .../agent_workspaces_list.query.graphql       |  41 +++++
 .../ee/projects/cluster_agents_controller.rb  |   1 +
 locale/gitlab.pot                             |   3 +
 7 files changed, 252 insertions(+)
 create mode 100644 ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
 create mode 100644 ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue
 create mode 100644 ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql

diff --git a/app/assets/javascripts/clusters/agents/components/show.vue b/app/assets/javascripts/clusters/agents/components/show.vue
index 9d7d68ee31c428..6c35948c8e20c4 100644
--- a/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/app/assets/javascripts/clusters/agents/components/show.vue
@@ -161,6 +161,13 @@ export default {
             </div>
           </div>
         </gl-tab>
+
+        <slot
+          name="ee-workspaces-tab"
+          :agent-name="agentName"
+          :project-path="projectPath"
+          :cluster-agent-id="clusterAgent.id"
+        ></slot>
       </gl-tabs>
     </template>
 
diff --git a/ee/app/assets/javascripts/clusters/agents/components/show.vue b/ee/app/assets/javascripts/clusters/agents/components/show.vue
index fe31d0f5025168..d25ae7d35c5761 100644
--- a/ee/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/ee/app/assets/javascripts/clusters/agents/components/show.vue
@@ -5,6 +5,7 @@ import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AgentShowPage from '~/clusters/agents/components/show.vue';
 import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/agent_vulnerability_report.vue';
+import AgentWorkspacesTab from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue';
 
 export default {
   i18n: {
@@ -14,12 +15,16 @@ export default {
     AgentShowPage,
     GlTab,
     AgentVulnerabilityReport,
+    AgentWorkspacesTab,
   },
   mixins: [glFeatureFlagMixin()],
   computed: {
     showSecurityTab() {
       return this.glFeatures.kubernetesClusterVulnerabilities;
     },
+    showAgentWorkspacesTab() {
+      return this.glFeatures.remoteDevelopment;
+    },
   },
 };
 </script>
@@ -31,5 +36,8 @@ export default {
         <agent-vulnerability-report :cluster-agent-id="clusterAgentId" />
       </gl-tab>
     </template>
+    <template v-if="showAgentWorkspacesTab" #ee-workspaces-tab="{ clusterAgentId }">
+      <agent-workspaces-tab :cluster-agent-id="clusterAgentId" />
+    </template>
   </agent-show-page>
 </template>
diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
new file mode 100644
index 00000000000000..799f13478de7ef
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
@@ -0,0 +1,23 @@
+<script>
+import { GlTab } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import WorkspacesList from './workspaces_list.vue';
+
+export default {
+  i18n: {
+    workspacesTabTitle: s__('RemoteDevelopment|Workspaces'),
+  },
+  components: {
+    GlTab,
+    WorkspacesList,
+  },
+  inject: ['agentName', 'projectPath'],
+};
+</script>
+
+<template>
+  <gl-tab :title="$options.i18n.workspacesTabTitle" query-param-value="workspaces">
+    <workspaces-list />
+  </gl-tab>
+</template>
diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue
new file mode 100644
index 00000000000000..e7e47cc79aa7a6
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue
@@ -0,0 +1,169 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { GlAlert, GlBadge, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { logError } from '~/lib/logger';
+import { s__, __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { WORKSPACES_LIST_PAGE_SIZE, WORKSPACES_LIST_POLL_INTERVAL } from '../../constants';
+import agentWorkspacesListQuery from '../../graphql/queries/agent_workspaces_list.query.graphql';
+import userWorkspacesProjectsNamesQuery from '../../graphql/queries/user_workspaces_projects_names.query.graphql';
+import WorkspaceEmptyState from '../list/empty_state.vue';
+import WorkspacesTable from '../list/workspaces_table.vue';
+import WorkspacesListPagination from '../list/workspaces_list_pagination.vue';
+import { populateWorkspacesWithProjectNames } from '../../services/utils';
+
+export const i18n = {
+  updateWorkspaceFailedMessage: s__('Workspaces|Failed to update workspace'),
+  betaBadge: __('Beta'),
+  learnMoreHelpLink: __('Learn more'),
+  heading: s__('Workspaces|Workspaces'),
+  loadingWorkspacesFailed: s__(
+    'Workspaces|Unable to load current Workspaces. Please try again or contact an administrator.',
+  ),
+};
+
+const workspacesHelpPath = helpPagePath('user/workspace/index.md');
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlBadge,
+    GlSkeletonLoader,
+    WorkspaceEmptyState,
+    WorkspacesListPagination,
+    WorkspacesTable,
+  },
+  apollo: {
+    workspaces: {
+      query: agentWorkspacesListQuery,
+      pollInterval: WORKSPACES_LIST_POLL_INTERVAL,
+      variables() {
+        return {
+          agentName: this.agentName,
+          projectPath: this.projectPath,
+          ...this.paginationVariables,
+        };
+      },
+      update(data) {
+        return data.project.clusterAgent.workspaces?.nodes || [];
+      },
+      error(err) {
+        logError(err);
+      },
+      async result({ data, error }) {
+        if (error) {
+          this.error = i18n.loadingWorkspacesFailed;
+          return;
+        }
+        const workspaces = data.project.clusterAgent.workspaces.nodes;
+        const result = await this.fetchProjectNames(workspaces);
+
+        if (result.error) {
+          this.error = i18n.loadingWorkspacesFailed;
+          this.workspaces = [];
+          logError(result.error);
+          return;
+        }
+
+        this.workspaces = populateWorkspacesWithProjectNames(workspaces, result.projects);
+        this.pageInfo = data.project.clusterAgent.workspaces.pageInfo;
+      },
+    },
+  },
+  inject: ['agentName', 'projectPath'],
+  data() {
+    return {
+      workspaces: [],
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+        startCursor: null,
+        endCursor: null,
+      },
+      paginationVariables: {
+        first: WORKSPACES_LIST_PAGE_SIZE,
+        after: null,
+        before: null,
+      },
+      error: '',
+    };
+  },
+  computed: {
+    isEmpty() {
+      return !this.workspaces.length && !this.isLoading;
+    },
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+  methods: {
+    clearError() {
+      this.error = '';
+    },
+    async fetchProjectNames(workspaces) {
+      const projectIds = workspaces.map(({ projectId }) => projectId);
+
+      try {
+        const {
+          data: { projects },
+        } = await this.$apollo.query({
+          query: userWorkspacesProjectsNamesQuery,
+          variables: { ids: projectIds },
+        });
+
+        return {
+          projects: projects.nodes,
+        };
+      } catch (error) {
+        return { error };
+      }
+    },
+    onUpdateFailed({ error }) {
+      this.error = error;
+    },
+    onPaginationInput(paginationVariables) {
+      this.paginationVariables = paginationVariables;
+    },
+  },
+  i18n,
+  workspacesHelpPath,
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
+      {{ error }}
+    </gl-alert>
+    <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+      <div class="gl-display-flex gl-align-items-center">
+        <h2>{{ $options.i18n.heading }}</h2>
+        <gl-badge class="gl-mt-4 gl-ml-3" variant="info">{{ $options.i18n.betaBadge }}</gl-badge>
+      </div>
+      <div
+        class="gl-display-flex gl-align-items-center gl-flex-direction-column gl-md-flex-direction-row"
+      >
+        <gl-link
+          class="gl-mr-5 workspace-preview-link gl-sm-display-none"
+          :href="$options.workspacesHelpPath"
+          >{{ $options.i18n.learnMoreHelpLink }}</gl-link
+        >
+      </div>
+    </div>
+    <workspace-empty-state v-if="isEmpty" />
+    <template v-else>
+      <div v-if="isLoading" class="gl-p-5 gl-display-flex gl-justify-content-left">
+        <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
+      </div>
+      <div v-else>
+        <workspaces-table
+          :workspaces="workspaces"
+          data-testid="workspace-list-item"
+          @updateFailed="onUpdateFailed"
+          @updateSucceed="clearError"
+        />
+        <workspaces-list-pagination :page-info="pageInfo" @input="onPaginationInput" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
new file mode 100644
index 00000000000000..41af54a3248e39
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
@@ -0,0 +1,41 @@
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
+
+query agentWorkspaces(
+  $first: Int
+  $before: String
+  $after: String
+  $agentName: String!
+  $projectPath: ID!
+  $actualStates: [String!]
+  $projectIds: [ProjectID!]
+) {
+  project(fullPath: $projectPath) {
+    id
+    clusterAgent(name: $agentName) {
+      id
+      workspaces(
+        first: $first
+        before: $before
+        after: $after
+        actualStates: $actualStates
+        projectIds: $projectIds
+      ) {
+        nodes {
+          id
+          name
+          namespace
+          projectId
+          desiredState
+          actualState
+          url
+          devfileRef
+          devfilePath
+          createdAt
+        }
+        pageInfo {
+          ...PageInfo
+        }
+      }
+    }
+  }
+}
diff --git a/ee/app/controllers/ee/projects/cluster_agents_controller.rb b/ee/app/controllers/ee/projects/cluster_agents_controller.rb
index 0f4234b5e84c9f..4fe724cfcd76ce 100644
--- a/ee/app/controllers/ee/projects/cluster_agents_controller.rb
+++ b/ee/app/controllers/ee/projects/cluster_agents_controller.rb
@@ -9,6 +9,7 @@ module ClusterAgentsController
         before_action do
           push_licensed_feature(:kubernetes_cluster_vulnerabilities, project)
           push_licensed_feature(:cluster_agents_ci_impersonation, project)
+          push_licensed_feature(:remote_development, project)
         end
       end
     end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f66d21bc1ad4bc..2f95310299c3c9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -40272,6 +40272,9 @@ msgstr ""
 msgid "Remote object has no absolute path."
 msgstr ""
 
+msgid "RemoteDevelopment|Workspaces"
+msgstr ""
+
 msgid "Remove"
 msgstr ""
 
-- 
GitLab


From d1a94138502d6fa3708c4104347923e1fce5dbe0 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Tue, 12 Dec 2023 15:54:06 -0800
Subject: [PATCH 02/16] WIP - refactoring from pairing with Paul and Enrique.
 TODO:

- Finish abstracting agent_workspaces_list
- Update tests
---
 ...ces_list.vue => agent_workspaces_list.vue} |   0
 .../agent_admin_ui/agent_workspaces_tab.vue   |   6 +-
 .../components/common/workspaces_list.vue     | 105 ++++++++++++++++++
 .../remote_development/pages/list.vue         |  78 ++++---------
 4 files changed, 127 insertions(+), 62 deletions(-)
 rename ee/app/assets/javascripts/remote_development/components/agent_admin_ui/{workspaces_list.vue => agent_workspaces_list.vue} (100%)
 create mode 100644 ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
similarity index 100%
rename from ee/app/assets/javascripts/remote_development/components/agent_admin_ui/workspaces_list.vue
rename to ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
index 799f13478de7ef..6f694c3a6136cf 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
@@ -2,7 +2,7 @@
 import { GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
-import WorkspacesList from './workspaces_list.vue';
+import AgentWorkspacesList from './agent_workspaces_list.vue';
 
 export default {
   i18n: {
@@ -10,7 +10,7 @@ export default {
   },
   components: {
     GlTab,
-    WorkspacesList,
+    AgentWorkspacesList,
   },
   inject: ['agentName', 'projectPath'],
 };
@@ -18,6 +18,6 @@ export default {
 
 <template>
   <gl-tab :title="$options.i18n.workspacesTabTitle" query-param-value="workspaces">
-    <workspaces-list />
+    <agent-workspaces-list />
   </gl-tab>
 </template>
diff --git a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
new file mode 100644
index 00000000000000..b189152062c1b4
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
@@ -0,0 +1,105 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { GlAlert, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { ROUTES } from '../../constants';
+import WorkspaceEmptyState from '../list/empty_state.vue';
+import WorkspacesTable from '../list/workspaces_table.vue';
+import WorkspacesListPagination from '../list/workspaces_list_pagination.vue';
+
+export const i18n = {
+  learnMoreHelpLink: __('Learn more'),
+  heading: s__('Workspaces|Workspaces'),
+};
+
+const workspacesHelpPath = helpPagePath('user/workspace/index.md');
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSkeletonLoader,
+    WorkspaceEmptyState,
+    WorkspacesListPagination,
+    WorkspacesTable,
+  },
+  props: {
+    workspaces: {
+      type: Array,
+      required: true,
+    },
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    isEmpty() {
+      return !this.workspaces.length && !this.isLoading;
+    },
+  },
+  methods: {
+    clearError() {
+      this.$emit('error', '');
+    },
+    onUpdateFailed({ error }) {
+      // TODO: review type of error, may need to be a different type or cast to string
+      this.$emit('error', error);
+    },
+    onPaginationInput(paginationVariables) {
+      this.$emit('page', paginationVariables);
+    },
+  },
+  i18n,
+  ROUTES,
+  workspacesHelpPath,
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
+      {{ error }}
+    </gl-alert>
+    <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+      <div class="gl-display-flex gl-align-items-center">
+        <h2>{{ $options.i18n.heading }}</h2>
+      </div>
+      <div
+        class="gl-display-flex gl-align-items-center gl-flex-direction-column gl-md-flex-direction-row"
+      >
+        <gl-link
+          class="gl-mr-5 workspace-preview-link gl-sm-display-none"
+          :href="$options.workspacesHelpPath"
+          >{{ $options.i18n.learnMoreHelpLink }}</gl-link
+        >
+        <slot name="header"></slot>
+      </div>
+    </div>
+    <workspace-empty-state v-if="isEmpty" />
+    <template v-else>
+      <div v-if="isLoading" class="gl-p-5 gl-display-flex gl-justify-content-left">
+        <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
+      </div>
+      <div v-else>
+        <workspaces-table
+          :workspaces="workspaces"
+          data-testid="workspace-list-item"
+          @updateFailed="onUpdateFailed"
+          @updateSucceed="clearError"
+        />
+        <workspaces-list-pagination :page-info="pageInfo" @input="onPaginationInput" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index c562aed9195462..fbe576b0caf4d3 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/list.vue
@@ -1,38 +1,25 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlAlert, GlButton, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
-import { s__, __ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
 import { WORKSPACES_LIST_PAGE_SIZE, ROUTES, WORKSPACES_LIST_POLL_INTERVAL } from '../constants';
 import userWorkspacesListQuery from '../graphql/queries/user_workspaces_list.query.graphql';
 import userWorkspacesProjectsNamesQuery from '../graphql/queries/user_workspaces_projects_names.query.graphql';
-import WorkspaceEmptyState from '../components/list/empty_state.vue';
-import WorkspacesTable from '../components/list/workspaces_table.vue';
-import WorkspacesListPagination from '../components/list/workspaces_list_pagination.vue';
+import WorkspacesList from '../components/common/workspaces_list.vue';
 import { populateWorkspacesWithProjectNames } from '../services/utils';
 
 export const i18n = {
-  updateWorkspaceFailedMessage: s__('Workspaces|Failed to update workspace'),
-  learnMoreHelpLink: __('Learn more'),
-  heading: s__('Workspaces|Workspaces'),
   newWorkspaceButton: s__('Workspaces|New workspace'),
   loadingWorkspacesFailed: s__(
     'Workspaces|Unable to load current Workspaces. Please try again or contact an administrator.',
   ),
 };
 
-const workspacesHelpPath = helpPagePath('user/workspace/index.md');
-
 export default {
   components: {
-    GlAlert,
     GlButton,
-    GlLink,
-    GlSkeletonLoader,
-    WorkspaceEmptyState,
-    WorkspacesListPagination,
-    WorkspacesTable,
+    WorkspacesList,
   },
   apollo: {
     workspaces: {
@@ -95,8 +82,8 @@ export default {
     },
   },
   methods: {
-    clearError() {
-      this.error = '';
+    onError(error) {
+      this.error = error;
     },
     async fetchProjectNames(workspaces) {
       const projectIds = workspaces.map(({ projectId }) => projectId);
@@ -125,48 +112,21 @@ export default {
   },
   i18n,
   ROUTES,
-  workspacesHelpPath,
 };
 </script>
 <template>
-  <div>
-    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
-      {{ error }}
-    </gl-alert>
-    <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-      <div class="gl-display-flex gl-align-items-center">
-        <h2>{{ $options.i18n.heading }}</h2>
-      </div>
-      <div
-        class="gl-display-flex gl-align-items-center gl-flex-direction-column gl-md-flex-direction-row"
-      >
-        <gl-link
-          class="gl-mr-5 workspace-preview-link gl-sm-display-none"
-          :href="$options.workspacesHelpPath"
-          >{{ $options.i18n.learnMoreHelpLink }}</gl-link
-        >
-        <gl-button
-          variant="confirm"
-          :to="$options.ROUTES.new"
-          data-testid="list-new-workspace-button"
-          >{{ $options.i18n.newWorkspaceButton }}</gl-button
-        >
-      </div>
-    </div>
-    <workspace-empty-state v-if="isEmpty" />
-    <template v-else>
-      <div v-if="isLoading" class="gl-p-5 gl-display-flex gl-justify-content-left">
-        <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
-      </div>
-      <div v-else>
-        <workspaces-table
-          :workspaces="workspaces"
-          data-testid="workspace-list-item"
-          @updateFailed="onUpdateFailed"
-          @updateSucceed="clearError"
-        />
-        <workspaces-list-pagination :page-info="pageInfo" @input="onPaginationInput" />
-      </div>
+  <workspaces-list
+    :workspaces="workspaces"
+    :error="error"
+    :page-info="pageInfo"
+    :is-loading="isLoading"
+    @error="onError"
+    @page="onPaginationInput"
+  >
+    <template #header>
+      <gl-button variant="confirm" :to="$options.ROUTES.new" data-testid="list-new-workspace-button"
+        >{{ $options.i18n.newWorkspaceButton }}
+      </gl-button>
     </template>
-  </div>
+  </workspaces-list>
 </template>
-- 
GitLab


From e4572271c78313ac40b379559d767d58c9f8dc2f Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Mon, 1 Jan 2024 23:08:32 -0700
Subject: [PATCH 03/16] WIP - DRY up fetchProjectNames function

---
 .../agent_admin_ui/agent_workspaces_list.vue  | 23 ++-----------------
 .../components/common/workspaces_list.vue     |  1 -
 .../remote_development/pages/list.vue         | 23 ++-----------------
 .../remote_development/services/utils.js      | 20 ++++++++++++++++
 4 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index e7e47cc79aa7a6..6454a3d56c8063 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -6,11 +6,10 @@ import { s__, __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { WORKSPACES_LIST_PAGE_SIZE, WORKSPACES_LIST_POLL_INTERVAL } from '../../constants';
 import agentWorkspacesListQuery from '../../graphql/queries/agent_workspaces_list.query.graphql';
-import userWorkspacesProjectsNamesQuery from '../../graphql/queries/user_workspaces_projects_names.query.graphql';
 import WorkspaceEmptyState from '../list/empty_state.vue';
 import WorkspacesTable from '../list/workspaces_table.vue';
 import WorkspacesListPagination from '../list/workspaces_list_pagination.vue';
-import { populateWorkspacesWithProjectNames } from '../../services/utils';
+import { fetchProjectNames, populateWorkspacesWithProjectNames } from '../../services/utils';
 
 export const i18n = {
   updateWorkspaceFailedMessage: s__('Workspaces|Failed to update workspace'),
@@ -57,7 +56,7 @@ export default {
           return;
         }
         const workspaces = data.project.clusterAgent.workspaces.nodes;
-        const result = await this.fetchProjectNames(workspaces);
+        const result = await fetchProjectNames(this.$apollo, workspaces);
 
         if (result.error) {
           this.error = i18n.loadingWorkspacesFailed;
@@ -101,24 +100,6 @@ export default {
     clearError() {
       this.error = '';
     },
-    async fetchProjectNames(workspaces) {
-      const projectIds = workspaces.map(({ projectId }) => projectId);
-
-      try {
-        const {
-          data: { projects },
-        } = await this.$apollo.query({
-          query: userWorkspacesProjectsNamesQuery,
-          variables: { ids: projectIds },
-        });
-
-        return {
-          projects: projects.nodes,
-        };
-      } catch (error) {
-        return { error };
-      }
-    },
     onUpdateFailed({ error }) {
       this.error = error;
     },
diff --git a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
index b189152062c1b4..db538f9587b31f 100644
--- a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
@@ -62,7 +62,6 @@ export default {
     },
   },
   i18n,
-  ROUTES,
   workspacesHelpPath,
 };
 </script>
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index fbe576b0caf4d3..156db7b8283466 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/list.vue
@@ -5,9 +5,8 @@ import { logError } from '~/lib/logger';
 import { s__ } from '~/locale';
 import { WORKSPACES_LIST_PAGE_SIZE, ROUTES, WORKSPACES_LIST_POLL_INTERVAL } from '../constants';
 import userWorkspacesListQuery from '../graphql/queries/user_workspaces_list.query.graphql';
-import userWorkspacesProjectsNamesQuery from '../graphql/queries/user_workspaces_projects_names.query.graphql';
 import WorkspacesList from '../components/common/workspaces_list.vue';
-import { populateWorkspacesWithProjectNames } from '../services/utils';
+import { fetchProjectNames, populateWorkspacesWithProjectNames } from '../services/utils';
 
 export const i18n = {
   newWorkspaceButton: s__('Workspaces|New workspace'),
@@ -42,7 +41,7 @@ export default {
           return;
         }
         const workspaces = data.currentUser.workspaces.nodes;
-        const result = await this.fetchProjectNames(workspaces);
+        const result = await fetchProjectNames(this.$apollo, workspaces);
 
         if (result.error) {
           this.error = i18n.loadingWorkspacesFailed;
@@ -85,24 +84,6 @@ export default {
     onError(error) {
       this.error = error;
     },
-    async fetchProjectNames(workspaces) {
-      const projectIds = workspaces.map(({ projectId }) => projectId);
-
-      try {
-        const {
-          data: { projects },
-        } = await this.$apollo.query({
-          query: userWorkspacesProjectsNamesQuery,
-          variables: { ids: projectIds },
-        });
-
-        return {
-          projects: projects.nodes,
-        };
-      } catch (error) {
-        return { error };
-      }
-    },
     onUpdateFailed({ error }) {
       this.error = error;
     },
diff --git a/ee/app/assets/javascripts/remote_development/services/utils.js b/ee/app/assets/javascripts/remote_development/services/utils.js
index 0ba5e02af33b9d..18a1789c2223aa 100644
--- a/ee/app/assets/javascripts/remote_development/services/utils.js
+++ b/ee/app/assets/javascripts/remote_development/services/utils.js
@@ -1,3 +1,5 @@
+import userWorkspacesProjectsNamesQuery from '../graphql/queries/user_workspaces_projects_names.query.graphql';
+
 export const populateWorkspacesWithProjectNames = (workspaces, projects) => {
   return workspaces.map((workspace) => {
     const project = projects.find((p) => p.id === workspace.projectId);
@@ -8,3 +10,21 @@ export const populateWorkspacesWithProjectNames = (workspaces, projects) => {
     };
   });
 };
+export const fetchProjectNames = async (apollo, workspaces) => {
+  const projectIds = workspaces.map(({ projectId }) => projectId);
+
+  try {
+    const {
+      data: { projects },
+    } = await apollo.query({
+      query: userWorkspacesProjectsNamesQuery,
+      variables: { ids: projectIds },
+    });
+
+    return {
+      projects: projects.nodes,
+    };
+  } catch (error) {
+    return { error };
+  }
+};
-- 
GitLab


From c323e88a40ee3fa3da1cabb289f9751028854e86 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Mon, 1 Jan 2024 23:19:43 -0700
Subject: [PATCH 04/16] WIP - dry up i18n

---
 .../agent_admin_ui/agent_workspaces_list.vue          | 10 ++++++----
 .../components/common/workspaces_list.vue             |  1 -
 .../javascripts/remote_development/constants.js       |  5 +++++
 .../javascripts/remote_development/pages/list.vue     | 11 +++++++----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index 6454a3d56c8063..a16ff12dcf8e2a 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -4,7 +4,11 @@ import { GlAlert, GlBadge, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import { s__, __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { WORKSPACES_LIST_PAGE_SIZE, WORKSPACES_LIST_POLL_INTERVAL } from '../../constants';
+import {
+  I18N_LOADING_WORKSPACES_FAILED,
+  WORKSPACES_LIST_PAGE_SIZE,
+  WORKSPACES_LIST_POLL_INTERVAL,
+} from '../../constants';
 import agentWorkspacesListQuery from '../../graphql/queries/agent_workspaces_list.query.graphql';
 import WorkspaceEmptyState from '../list/empty_state.vue';
 import WorkspacesTable from '../list/workspaces_table.vue';
@@ -16,9 +20,7 @@ export const i18n = {
   betaBadge: __('Beta'),
   learnMoreHelpLink: __('Learn more'),
   heading: s__('Workspaces|Workspaces'),
-  loadingWorkspacesFailed: s__(
-    'Workspaces|Unable to load current Workspaces. Please try again or contact an administrator.',
-  ),
+  loadingWorkspacesFailed: I18N_LOADING_WORKSPACES_FAILED,
 };
 
 const workspacesHelpPath = helpPagePath('user/workspace/index.md');
diff --git a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
index db538f9587b31f..b4625f0feea00f 100644
--- a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
@@ -3,7 +3,6 @@
 import { GlAlert, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { ROUTES } from '../../constants';
 import WorkspaceEmptyState from '../list/empty_state.vue';
 import WorkspacesTable from '../list/workspaces_table.vue';
 import WorkspacesListPagination from '../list/workspaces_list_pagination.vue';
diff --git a/ee/app/assets/javascripts/remote_development/constants.js b/ee/app/assets/javascripts/remote_development/constants.js
index 4d15df1a89fb48..4608a479f84236 100644
--- a/ee/app/assets/javascripts/remote_development/constants.js
+++ b/ee/app/assets/javascripts/remote_development/constants.js
@@ -1,4 +1,5 @@
 import { pick } from 'lodash';
+import { s__ } from '~/locale';
 
 export const DEFAULT_DEVFILE_PATH = '.devfile.yaml';
 export const DEFAULT_EDITOR = 'webide';
@@ -44,3 +45,7 @@ export const PROJECT_VISIBILITY = {
 export const EXCLUDED_WORKSPACE_AGE_IN_DAYS = 5;
 export const WORKSPACES_LIST_PAGE_SIZE = 10;
 export const WORKSPACES_DROPDOWN_GROUP_PAGE_SIZE = 20;
+
+export const I18N_LOADING_WORKSPACES_FAILED = s__(
+  'Workspaces|Unable to load current Workspaces. Please try again or contact an administrator.',
+);
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index 156db7b8283466..9f30f0c5a5f7bf 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/list.vue
@@ -3,16 +3,19 @@
 import { GlButton } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import { s__ } from '~/locale';
-import { WORKSPACES_LIST_PAGE_SIZE, ROUTES, WORKSPACES_LIST_POLL_INTERVAL } from '../constants';
+import {
+  WORKSPACES_LIST_PAGE_SIZE,
+  ROUTES,
+  WORKSPACES_LIST_POLL_INTERVAL,
+  I18N_LOADING_WORKSPACES_FAILED,
+} from '../constants';
 import userWorkspacesListQuery from '../graphql/queries/user_workspaces_list.query.graphql';
 import WorkspacesList from '../components/common/workspaces_list.vue';
 import { fetchProjectNames, populateWorkspacesWithProjectNames } from '../services/utils';
 
 export const i18n = {
   newWorkspaceButton: s__('Workspaces|New workspace'),
-  loadingWorkspacesFailed: s__(
-    'Workspaces|Unable to load current Workspaces. Please try again or contact an administrator.',
-  ),
+  loadingWorkspacesFailed: I18N_LOADING_WORKSPACES_FAILED,
 };
 
 export default {
-- 
GitLab


From 0537809780bfc9cd1544d73bd7dba2545f0e948b Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Tue, 2 Jan 2024 00:10:15 -0700
Subject: [PATCH 05/16] WIP - Finish DRYing up, add test

---
 .../agent_admin_ui/agent_workspaces_list.vue  |  69 +----
 .../agent_workspaces_list_spec.js             | 237 ++++++++++++++++++
 .../components/list/workspaces_table_spec.js  |   6 +-
 .../workspaces_dropdown_group_spec.js         |   4 +-
 .../remote_development/mock_data/index.js     |  69 ++++-
 .../remote_development/pages/list_spec.js     |  14 +-
 .../remote_development/router/index_spec.js   |  11 +-
 7 files changed, 335 insertions(+), 75 deletions(-)
 create mode 100644 ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index a16ff12dcf8e2a..49f0d7b643d3ce 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -1,39 +1,22 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlAlert, GlBadge, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
-import { s__, __ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   I18N_LOADING_WORKSPACES_FAILED,
   WORKSPACES_LIST_PAGE_SIZE,
   WORKSPACES_LIST_POLL_INTERVAL,
 } from '../../constants';
 import agentWorkspacesListQuery from '../../graphql/queries/agent_workspaces_list.query.graphql';
-import WorkspaceEmptyState from '../list/empty_state.vue';
-import WorkspacesTable from '../list/workspaces_table.vue';
-import WorkspacesListPagination from '../list/workspaces_list_pagination.vue';
 import { fetchProjectNames, populateWorkspacesWithProjectNames } from '../../services/utils';
+import WorkspacesList from '../common/workspaces_list.vue';
 
 export const i18n = {
-  updateWorkspaceFailedMessage: s__('Workspaces|Failed to update workspace'),
-  betaBadge: __('Beta'),
-  learnMoreHelpLink: __('Learn more'),
-  heading: s__('Workspaces|Workspaces'),
   loadingWorkspacesFailed: I18N_LOADING_WORKSPACES_FAILED,
 };
 
-const workspacesHelpPath = helpPagePath('user/workspace/index.md');
-
 export default {
   components: {
-    GlAlert,
-    GlLink,
-    GlBadge,
-    GlSkeletonLoader,
-    WorkspaceEmptyState,
-    WorkspacesListPagination,
-    WorkspacesTable,
+    WorkspacesList,
   },
   apollo: {
     workspaces: {
@@ -99,8 +82,8 @@ export default {
     },
   },
   methods: {
-    clearError() {
-      this.error = '';
+    onError(error) {
+      this.error = error;
     },
     onUpdateFailed({ error }) {
       this.error = error;
@@ -110,43 +93,15 @@ export default {
     },
   },
   i18n,
-  workspacesHelpPath,
 };
 </script>
 <template>
-  <div>
-    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
-      {{ error }}
-    </gl-alert>
-    <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-      <div class="gl-display-flex gl-align-items-center">
-        <h2>{{ $options.i18n.heading }}</h2>
-        <gl-badge class="gl-mt-4 gl-ml-3" variant="info">{{ $options.i18n.betaBadge }}</gl-badge>
-      </div>
-      <div
-        class="gl-display-flex gl-align-items-center gl-flex-direction-column gl-md-flex-direction-row"
-      >
-        <gl-link
-          class="gl-mr-5 workspace-preview-link gl-sm-display-none"
-          :href="$options.workspacesHelpPath"
-          >{{ $options.i18n.learnMoreHelpLink }}</gl-link
-        >
-      </div>
-    </div>
-    <workspace-empty-state v-if="isEmpty" />
-    <template v-else>
-      <div v-if="isLoading" class="gl-p-5 gl-display-flex gl-justify-content-left">
-        <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
-      </div>
-      <div v-else>
-        <workspaces-table
-          :workspaces="workspaces"
-          data-testid="workspace-list-item"
-          @updateFailed="onUpdateFailed"
-          @updateSucceed="clearError"
-        />
-        <workspaces-list-pagination :page-info="pageInfo" @input="onPaginationInput" />
-      </div>
-    </template>
-  </div>
+  <workspaces-list
+    :workspaces="workspaces"
+    :error="error"
+    :page-info="pageInfo"
+    :is-loading="isLoading"
+    @error="onError"
+    @page="onPaginationInput"
+  />
 </template>
diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
new file mode 100644
index 00000000000000..40efb3101a0432
--- /dev/null
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -0,0 +1,237 @@
+import { mount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import Vue, { nextTick } from 'vue';
+import { GlAlert, GlBadge, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { logError } from '~/lib/logger';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import AgentWorkspacesList from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_list.vue';
+import WorkspaceEmptyState from 'ee/remote_development/components/list/empty_state.vue';
+import WorkspacesTable from 'ee/remote_development/components/list/workspaces_table.vue';
+import WorkspacesListPagination from 'ee/remote_development/components/list/workspaces_list_pagination.vue';
+import agentWorkspacesListQuery from 'ee/remote_development/graphql/queries/agent_workspaces_list.query.graphql';
+import userWorkspacesProjectsNamesQuery from 'ee/remote_development/graphql/queries/user_workspaces_projects_names.query.graphql';
+import { populateWorkspacesWithProjectNames } from 'ee/remote_development/services/utils';
+import {
+  AGENT_WORKSPACES_LIST_QUERY_RESULT,
+  AGENT_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
+  WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
+} from '../../mock_data';
+
+jest.mock('~/lib/logger');
+
+Vue.use(VueApollo);
+
+const SVG_PATH = '/assets/illustrations/empty_states/empty_workspaces.svg';
+const AGENT_NAME = 'agent-name';
+const PROJECT_PATH = 'project/path';
+
+describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue', () => {
+  let wrapper;
+  let mockApollo;
+  let agentWorkspacesListQueryHandler;
+  let userWorkspacesProjectNamesQueryHandler;
+
+  const buildMockApollo = () => {
+    agentWorkspacesListQueryHandler = jest
+      .fn()
+      .mockResolvedValueOnce(AGENT_WORKSPACES_LIST_QUERY_RESULT);
+    userWorkspacesProjectNamesQueryHandler = jest
+      .fn()
+      .mockResolvedValueOnce(WORKSPACES_PROJECT_NAMES_QUERY_RESULT);
+
+    mockApollo = createMockApollo([
+      [agentWorkspacesListQuery, agentWorkspacesListQueryHandler],
+      [userWorkspacesProjectsNamesQuery, userWorkspacesProjectNamesQueryHandler],
+    ]);
+  };
+  const createWrapper = () => {
+    // noinspection JSCheckFunctionSignatures
+    wrapper = mount(AgentWorkspacesList, {
+      apolloProvider: mockApollo,
+      provide: {
+        emptyStateSvgPath: SVG_PATH,
+        agentName: AGENT_NAME,
+        projectPath: PROJECT_PATH,
+      },
+    });
+  };
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+  const findTable = () => wrapper.findComponent(WorkspacesTable);
+  const findPagination = () => wrapper.findComponent(WorkspacesListPagination);
+
+  beforeEach(() => {
+    buildMockApollo();
+  });
+
+  describe('when no workspaces are available', () => {
+    beforeEach(async () => {
+      agentWorkspacesListQueryHandler.mockReset();
+      agentWorkspacesListQueryHandler.mockResolvedValueOnce(
+        AGENT_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
+      );
+
+      createWrapper();
+      await waitForPromises();
+    });
+
+    it('renders empty state when no workspaces are available', () => {
+      expect(wrapper.findComponent(WorkspaceEmptyState).exists()).toBe(true);
+    });
+
+    it('does not render the workspaces table', () => {
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('does not render the workspaces pagination', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  it('shows loading state when workspaces are being fetched', () => {
+    createWrapper();
+    expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
+  });
+
+  describe('default (with nodes)', () => {
+    beforeEach(async () => {
+      createWrapper();
+      await waitForPromises();
+    });
+
+    it('renders table', () => {
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('renders pagination', () => {
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('provides workspaces data to the workspaces table', () => {
+      expect(findTable(wrapper).props('workspaces')).toEqual(
+        populateWorkspacesWithProjectNames(
+          AGENT_WORKSPACES_LIST_QUERY_RESULT.data.project.clusterAgent.workspaces.nodes,
+          WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
+        ),
+      );
+    });
+
+    it('does not call log error', () => {
+      expect(logError).not.toHaveBeenCalled();
+    });
+
+    it('does not show alert', () => {
+      expect(findAlert(wrapper).exists()).toBe(false);
+    });
+
+    describe('when pagination component emits input event', () => {
+      it('refetches workspaces starting at the specified cursor', async () => {
+        const pageVariables = {
+          after: 'end',
+          first: 10,
+          agentName: AGENT_NAME,
+          projectPath: PROJECT_PATH,
+        };
+
+        createWrapper();
+
+        await waitForPromises();
+
+        expect(agentWorkspacesListQueryHandler).toHaveBeenCalledTimes(1);
+
+        findPagination().vm.$emit('input', pageVariables);
+
+        await waitForPromises();
+
+        expect(agentWorkspacesListQueryHandler).toHaveBeenCalledTimes(2);
+        expect(agentWorkspacesListQueryHandler).toHaveBeenLastCalledWith(pageVariables);
+      });
+    });
+  });
+
+  describe('when workspace table emits updateFailed event', () => {
+    const error = 'Failed to stop workspace';
+
+    beforeEach(async () => {
+      createWrapper();
+      await waitForPromises();
+
+      findTable().vm.$emit('updateFailed', { error });
+    });
+
+    it('displays the error attached to the event', async () => {
+      await nextTick();
+
+      expect(findAlert().text()).toBe(error);
+    });
+
+    describe('when workspace table emits updateSucceed event', () => {
+      it('dismisses the previous update error', async () => {
+        expect(findAlert().text()).toBe(error);
+
+        findTable().vm.$emit('updateSucceed');
+
+        await nextTick();
+
+        expect(findAlert().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe.each`
+    query                            | queryHandlerFactory
+    ${'userWorkspaces'}              | ${() => agentWorkspacesListQueryHandler}
+    ${'userWorkspacesProjectsNames'} | ${() => userWorkspacesProjectNamesQueryHandler}
+  `('when $query query fails', ({ queryHandlerFactory }) => {
+    const ERROR = new Error('Something bad!');
+
+    beforeEach(async () => {
+      const queryHandler = queryHandlerFactory();
+
+      queryHandler.mockReset();
+      queryHandler.mockRejectedValueOnce(ERROR);
+
+      createWrapper();
+      await waitForPromises();
+    });
+
+    it('does not render table', () => {
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('logs error', () => {
+      expect(logError).toHaveBeenCalledWith(ERROR);
+    });
+
+    it('shows alert', () => {
+      expect(findAlert().text()).toBe(
+        'Unable to load current Workspaces. Please try again or contact an administrator.',
+      );
+    });
+
+    it('hides error when alert is dismissed', async () => {
+      findAlert().vm.$emit('dismiss');
+
+      await nextTick();
+
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('fixed elements', () => {
+    beforeEach(async () => {
+      createWrapper();
+
+      await waitForPromises();
+    });
+
+    it('displays a beta badge', () => {
+      expect(wrapper.findComponent(GlBadge).props().variant).toBe('info');
+    });
+
+    it('displays a link that navigates to the workspaces help page', () => {
+      expect(findHelpLink().attributes().href).toContain('user/workspace/index.md');
+    });
+  });
+});
diff --git a/ee/spec/frontend/remote_development/components/list/workspaces_table_spec.js b/ee/spec/frontend/remote_development/components/list/workspaces_table_spec.js
index b798b30488d3dd..3c6ff6b91997b5 100644
--- a/ee/spec/frontend/remote_development/components/list/workspaces_table_spec.js
+++ b/ee/spec/frontend/remote_development/components/list/workspaces_table_spec.js
@@ -11,7 +11,7 @@ import { populateWorkspacesWithProjectNames } from 'ee/remote_development/servic
 import { WORKSPACE_STATES, WORKSPACE_DESIRED_STATES } from 'ee/remote_development/constants';
 import {
   USER_WORKSPACES_LIST_QUERY_RESULT,
-  USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
+  WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
 } from '../../mock_data';
 
 jest.mock('~/lib/logger');
@@ -53,7 +53,7 @@ describe('remote_development/components/list/workspaces_table.vue', () => {
   const createWrapper = ({
     workspaces = populateWorkspacesWithProjectNames(
       USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.nodes,
-      USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
+      WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
     ),
   } = {}) => {
     updateWorkspaceMutationMock = jest.fn();
@@ -98,7 +98,7 @@ describe('remote_development/components/list/workspaces_table.vue', () => {
       expect(findTableRowsAsData(wrapper)).toEqual(
         populateWorkspacesWithProjectNames(
           USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.nodes,
-          USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
+          WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
         ).map((x) => {
           return {
             nameText: `${x.projectName}   ${x.name}`,
diff --git a/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js b/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
index 2da1ffcc1b4ff3..ad6667b4baf9ae 100644
--- a/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
+++ b/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
@@ -18,7 +18,7 @@ import {
   WORKSPACE_DESIRED_STATES,
 } from 'ee/remote_development/constants';
 import {
-  USER_WORKSPACES_QUERY_EMPTY_RESULT,
+  USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
   USER_WORKSPACES_LIST_QUERY_RESULT,
   PROJECT_ID,
   PROJECT_FULL_PATH,
@@ -231,7 +231,7 @@ describe('remote_development/components/workspaces_dropdown_group/workspaces_dro
   describe('when user does not have workspaces', () => {
     beforeEach(async () => {
       userWorkspacesListQueryHandler.mockReset();
-      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_QUERY_EMPTY_RESULT);
+      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT);
 
       createWrapper();
 
diff --git a/ee/spec/frontend/remote_development/mock_data/index.js b/ee/spec/frontend/remote_development/mock_data/index.js
index 1c81b95e994502..cc34435dce8d13 100644
--- a/ee/spec/frontend/remote_development/mock_data/index.js
+++ b/ee/spec/frontend/remote_development/mock_data/index.js
@@ -66,7 +66,7 @@ export const USER_WORKSPACES_LIST_QUERY_RESULT = {
   },
 };
 
-export const USER_WORKSPACES_QUERY_EMPTY_RESULT = {
+export const USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT = {
   data: {
     currentUser: {
       id: 1,
@@ -83,6 +83,71 @@ export const USER_WORKSPACES_QUERY_EMPTY_RESULT = {
   },
 };
 
+export const AGENT_WORKSPACES_LIST_QUERY_RESULT = {
+  data: {
+    project: {
+      id: 1,
+      clusterAgent: {
+        id: 1,
+        workspaces: {
+          nodes: [
+            {
+              id: 'gid://gitlab/RemoteDevelopment::Workspace/2',
+              name: 'workspace-1-1-idmi02',
+              namespace: 'gl-rd-ns-1-1-idmi02',
+              desiredState: 'Stopped',
+              actualState: 'CreationRequested',
+              url: 'https://8000-workspace-1-1-idmi02.workspaces.localdev.me?tkn=password',
+              devfileRef: 'main',
+              devfilePath: '.devfile.yaml',
+              projectId: 'gid://gitlab/Project/1',
+              createdAt: '2023-04-29T18:24:34Z',
+            },
+            {
+              id: 'gid://gitlab/RemoteDevelopment::Workspace/1',
+              name: 'workspace-1-1-rfu27q',
+              namespace: 'gl-rd-ns-1-1-rfu27q',
+              desiredState: 'Running',
+              actualState: 'Running',
+              url: 'https://8000-workspace-1-1-rfu27q.workspaces.localdev.me?tkn=password',
+              devfileRef: 'main',
+              devfilePath: '.devfile.yaml',
+              projectId: 'gid://gitlab/Project/1',
+              createdAt: '2023-05-01T18:24:34Z',
+            },
+          ],
+          pageInfo: {
+            hasNextPage: false,
+            hasPreviousPage: false,
+            startCursor: null,
+            endCursor: null,
+          },
+        },
+      },
+    },
+  },
+};
+
+export const AGENT_WORKSPACES_LIST_QUERY_EMPTY_RESULT = {
+  data: {
+    project: {
+      id: 1,
+      clusterAgent: {
+        id: 1,
+        workspaces: {
+          nodes: [],
+          pageInfo: {
+            hasNextPage: false,
+            hasPreviousPage: false,
+            startCursor: null,
+            endCursor: null,
+          },
+        },
+      },
+    },
+  },
+};
+
 export const SEARCH_PROJECTS_QUERY_RESULT = {
   data: {
     projects: {
@@ -234,7 +299,7 @@ export const WORKSPACE_UPDATE_MUTATION_RESULT = {
   },
 };
 
-export const USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT = {
+export const WORKSPACES_PROJECT_NAMES_QUERY_RESULT = {
   data: {
     projects: {
       nodes: [
diff --git a/ee/spec/frontend/remote_development/pages/list_spec.js b/ee/spec/frontend/remote_development/pages/list_spec.js
index 9a9831cfaaddf5..9d57d617f40a29 100644
--- a/ee/spec/frontend/remote_development/pages/list_spec.js
+++ b/ee/spec/frontend/remote_development/pages/list_spec.js
@@ -5,7 +5,7 @@ import { GlAlert, GlButton, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import WorkspaceList from 'ee/remote_development/pages/list.vue';
+import List from 'ee/remote_development/pages/list.vue';
 import WorkspaceEmptyState from 'ee/remote_development/components/list/empty_state.vue';
 import WorkspacesTable from 'ee/remote_development/components/list/workspaces_table.vue';
 import WorkspacesListPagination from 'ee/remote_development/components/list/workspaces_list_pagination.vue';
@@ -15,8 +15,8 @@ import { ROUTES } from 'ee/remote_development/constants';
 import { populateWorkspacesWithProjectNames } from 'ee/remote_development/services/utils';
 import {
   USER_WORKSPACES_LIST_QUERY_RESULT,
-  USER_WORKSPACES_QUERY_EMPTY_RESULT,
-  USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
+  USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
+  WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
 } from '../mock_data';
 
 jest.mock('~/lib/logger');
@@ -37,7 +37,7 @@ describe('remote_development/pages/list.vue', () => {
       .mockResolvedValueOnce(USER_WORKSPACES_LIST_QUERY_RESULT);
     userWorkspacesProjectNamesQueryHandler = jest
       .fn()
-      .mockResolvedValueOnce(USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT);
+      .mockResolvedValueOnce(WORKSPACES_PROJECT_NAMES_QUERY_RESULT);
 
     mockApollo = createMockApollo([
       [userWorkspacesListQuery, userWorkspacesListQueryHandler],
@@ -45,7 +45,7 @@ describe('remote_development/pages/list.vue', () => {
     ]);
   };
   const createWrapper = () => {
-    wrapper = mount(WorkspaceList, {
+    wrapper = mount(List, {
       apolloProvider: mockApollo,
       provide: {
         emptyStateSvgPath: SVG_PATH,
@@ -65,7 +65,7 @@ describe('remote_development/pages/list.vue', () => {
   describe('when no workspaces are available', () => {
     beforeEach(async () => {
       userWorkspacesListQueryHandler.mockReset();
-      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_QUERY_EMPTY_RESULT);
+      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT);
 
       createWrapper();
       await waitForPromises();
@@ -107,7 +107,7 @@ describe('remote_development/pages/list.vue', () => {
       expect(findTable(wrapper).props('workspaces')).toEqual(
         populateWorkspacesWithProjectNames(
           USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.nodes,
-          USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
+          WORKSPACES_PROJECT_NAMES_QUERY_RESULT.data.projects.nodes,
         ),
       );
     });
diff --git a/ee/spec/frontend/remote_development/router/index_spec.js b/ee/spec/frontend/remote_development/router/index_spec.js
index 30bbd2a70f99ea..87ec6f90c8e922 100644
--- a/ee/spec/frontend/remote_development/router/index_spec.js
+++ b/ee/spec/frontend/remote_development/router/index_spec.js
@@ -11,8 +11,8 @@ import { ROUTES } from 'ee/remote_development/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import userWorkspacesListQuery from 'ee/remote_development/graphql/queries/user_workspaces_list.query.graphql';
 import {
-  USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
-  USER_WORKSPACES_QUERY_EMPTY_RESULT,
+  WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
+  USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
 } from '../mock_data';
 
 Vue.use(VueRouter);
@@ -38,10 +38,13 @@ describe('remote_development/router/index.js', () => {
     wrapper = mountExtended(App, {
       router,
       apolloProvider: createMockApollo([
-        [userWorkspacesListQuery, jest.fn().mockResolvedValue(USER_WORKSPACES_QUERY_EMPTY_RESULT)],
+        [
+          userWorkspacesListQuery,
+          jest.fn().mockResolvedValue(USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT),
+        ],
         [
           userWorkspacesProjectsNamesQuery,
-          jest.fn().mockResolvedValueOnce(USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT),
+          jest.fn().mockResolvedValueOnce(WORKSPACES_PROJECT_NAMES_QUERY_RESULT),
         ],
       ]),
       provide: {
-- 
GitLab


From 8de61ad577e03a74f06bc040ee184da755e4bd22 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Tue, 2 Jan 2024 00:26:18 -0700
Subject: [PATCH 06/16] WIP - fix QA selector after refactor

---
 qa/qa/ee/page/workspace/list.rb | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/qa/qa/ee/page/workspace/list.rb b/qa/qa/ee/page/workspace/list.rb
index 58a528c513b264..8b9c266cd3326c 100644
--- a/qa/qa/ee/page/workspace/list.rb
+++ b/qa/qa/ee/page/workspace/list.rb
@@ -7,6 +7,9 @@ module Workspace
         class List < QA::Page::Base
           view 'ee/app/assets/javascripts/remote_development/pages/list.vue' do
             element 'list-new-workspace-button'
+          end
+
+          view 'ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue' do
             element 'workspace-list-item'
           end
 
-- 
GitLab


From 9a6b0417cda52cada5998fefa3ecc5e9537028cb Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Tue, 2 Jan 2024 01:14:11 -0700
Subject: [PATCH 07/16] Update cluster specs

---
 .../clusters/agents/components/show.vue       |  6 +-
 .../clusters/agents/components/show_spec.js   | 59 +++++++++++++++----
 .../clusters/agents/components/show_spec.js   | 20 +++++++
 3 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/ee/app/assets/javascripts/clusters/agents/components/show.vue b/ee/app/assets/javascripts/clusters/agents/components/show.vue
index d25ae7d35c5761..ebc4a31c81f81c 100644
--- a/ee/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/ee/app/assets/javascripts/clusters/agents/components/show.vue
@@ -32,7 +32,11 @@ export default {
 <template>
   <agent-show-page>
     <template v-if="showSecurityTab" #ee-security-tab="{ clusterAgentId }">
-      <gl-tab :title="$options.i18n.securityTabTitle" query-param-value="security">
+      <gl-tab
+        ref="security-tab"
+        :title="$options.i18n.securityTabTitle"
+        query-param-value="security"
+      >
         <agent-vulnerability-report :cluster-agent-id="clusterAgentId" />
       </gl-tab>
     </template>
diff --git a/ee/spec/frontend/clusters/agents/components/show_spec.js b/ee/spec/frontend/clusters/agents/components/show_spec.js
index cdb81ddf836e00..06b46970b0a33e 100644
--- a/ee/spec/frontend/clusters/agents/components/show_spec.js
+++ b/ee/spec/frontend/clusters/agents/components/show_spec.js
@@ -1,41 +1,51 @@
-import { GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import AgentWorkspacesTab from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue';
 import ClusterAgentShow from 'ee/clusters/agents/components/show.vue';
 import AgentShowPage from '~/clusters/agents/components/show.vue';
 import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/agent_vulnerability_report.vue';
 
 describe('ClusterAgentShow', () => {
   let wrapper;
+  let template;
 
   const clusterAgentId = 'gid://gitlab/Clusters::Agent/1';
-  const AgentShowPageStub = stubComponent(AgentShowPage, {
-    provide: { agentName: 'test', projectPath: 'test' },
-    template: `<div><slot name="ee-security-tab" clusterAgentId="${clusterAgentId}"></slot></div>`,
-  });
+  const securityTabTemplate = `<div><slot name="ee-security-tab" clusterAgentId="${clusterAgentId}"></slot></div>`;
+  const workspacesTabTemplate = `<div><slot name="ee-workspaces-tab" clusterAgentId="${clusterAgentId}"></slot></div>`;
+  const AgentShowPageStub = (slotTemplate) =>
+    stubComponent(AgentShowPage, {
+      provide: { agentName: 'test', projectPath: 'test' },
+      template: slotTemplate,
+    });
 
-  const createWrapper = ({ glFeatures = { kubernetesClusterVulnerabilities: true } } = {}) => {
+  const createWrapper = ({
+    glFeatures = {
+      kubernetesClusterVulnerabilities: true,
+      remoteDevelopment: true,
+    },
+  } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(ClusterAgentShow, {
         provide: { glFeatures },
         stubs: {
-          AgentShowPage: AgentShowPageStub,
+          AgentShowPage: AgentShowPageStub(template),
         },
       }),
     );
   };
 
   const findAgentVulnerabilityReport = () => wrapper.findComponent(AgentVulnerabilityReport);
-  const findTab = () => wrapper.findComponent(GlTab);
+  const findSecurityTab = () => wrapper.findComponent({ ref: 'security-tab' });
 
   describe('when a user does have permission', () => {
     beforeEach(() => {
+      template = securityTabTemplate;
       createWrapper();
     });
 
     it('does not display the tab', () => {
-      expect(findTab().exists()).toBe(true);
+      expect(findSecurityTab().exists()).toBe(true);
     });
 
     it('does display the cluster agent id', () => {
@@ -45,11 +55,40 @@ describe('ClusterAgentShow', () => {
 
   describe('without access', () => {
     beforeEach(() => {
+      template = securityTabTemplate;
       createWrapper({ glFeatures: { kubernetesClusterVulnerabilities: false } });
     });
 
     it('when a user does not have permission', () => {
-      expect(findTab().exists()).toBe(false);
+      expect(findSecurityTab().exists()).toBe(false);
+    });
+  });
+
+  describe('workspaces tab', () => {
+    const findAgentWorkspacesTab = () => wrapper.findComponent(AgentWorkspacesTab);
+
+    beforeEach(() => {
+      template = workspacesTabTemplate;
+    });
+
+    describe('when remote development feature is enabled', () => {
+      beforeEach(() => {
+        createWrapper({ glFeatures: { remoteDevelopment: true } });
+      });
+
+      it('shows the tab', () => {
+        expect(findAgentWorkspacesTab().exists()).toBe(true);
+      });
+    });
+
+    describe('when remote development feature is disabled', () => {
+      beforeEach(() => {
+        createWrapper({ glFeatures: { remoteDevelopment: false } });
+      });
+
+      it('shows the tab', () => {
+        expect(findAgentWorkspacesTab().exists()).toBe(false);
+      });
     });
   });
 });
diff --git a/spec/frontend/clusters/agents/components/show_spec.js b/spec/frontend/clusters/agents/components/show_spec.js
index 019f789d875112..8a40c528c1d6dd 100644
--- a/spec/frontend/clusters/agents/components/show_spec.js
+++ b/spec/frontend/clusters/agents/components/show_spec.js
@@ -76,6 +76,7 @@ describe('ClusterAgentShow', () => {
   const findPaginationButtons = () => wrapper.findComponent(GlKeysetPagination);
   const findTokenCount = () => wrapper.findByTestId('cluster-agent-token-count').text();
   const findEESecurityTabSlot = () => wrapper.findByTestId('ee-security-tab');
+  const findEEWorkspacesTabSlot = () => wrapper.findByTestId('ee-workspaces-tab');
   const findActivity = () => wrapper.findComponent(ActivityEvents);
   const findIntegrationStatus = () => wrapper.findComponent(IntegrationStatus);
 
@@ -253,4 +254,23 @@ describe('ClusterAgentShow', () => {
       expect(findEESecurityTabSlot().exists()).toBe(true);
     });
   });
+
+  describe('ee-workspaces-tab slot', () => {
+    it('does not display when a slot is not passed in', async () => {
+      createWrapperWithoutApollo({ clusterAgent: defaultClusterAgent });
+      await nextTick();
+      expect(findEEWorkspacesTabSlot().exists()).toBe(false);
+    });
+
+    it('does display when a slot is passed in', async () => {
+      createWrapperWithoutApollo({
+        clusterAgent: defaultClusterAgent,
+        slots: {
+          'ee-workspaces-tab': `<gl-tab data-testid="ee-workspaces-tab">Workspaces Tab!</gl-tab>`,
+        },
+      });
+      await nextTick();
+      expect(findEEWorkspacesTabSlot().exists()).toBe(true);
+    });
+  });
 });
-- 
GitLab


From f2e495874e614e679b1f800db9170dd6a8d322f6 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 12:27:18 -0700
Subject: [PATCH 08/16] Review feedback patch from pslaughter

- See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137336#note_1712925444
---
 .../clusters/agents/components/show.vue       |  7 +-
 .../clusters/agents/components/show.vue       | 17 ++--
 .../agent_admin_ui/agent_workspaces_list.vue  | 11 ++-
 .../agent_admin_ui/agent_workspaces_tab.vue   | 23 -----
 .../clusters/agents/components/show_spec.js   | 91 +++++++++++--------
 .../agent_workspaces_list_spec.js             |  2 +
 6 files changed, 74 insertions(+), 77 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue

diff --git a/app/assets/javascripts/clusters/agents/components/show.vue b/app/assets/javascripts/clusters/agents/components/show.vue
index 6c35948c8e20c4..c1a6f7e0800503 100644
--- a/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/app/assets/javascripts/clusters/agents/components/show.vue
@@ -162,12 +162,7 @@ export default {
           </div>
         </gl-tab>
 
-        <slot
-          name="ee-workspaces-tab"
-          :agent-name="agentName"
-          :project-path="projectPath"
-          :cluster-agent-id="clusterAgent.id"
-        ></slot>
+        <slot name="ee-workspaces-tab" :agent-name="agentName" :project-path="projectPath"></slot>
       </gl-tabs>
     </template>
 
diff --git a/ee/app/assets/javascripts/clusters/agents/components/show.vue b/ee/app/assets/javascripts/clusters/agents/components/show.vue
index ebc4a31c81f81c..87724c037e63f4 100644
--- a/ee/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/ee/app/assets/javascripts/clusters/agents/components/show.vue
@@ -5,17 +5,18 @@ import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AgentShowPage from '~/clusters/agents/components/show.vue';
 import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/agent_vulnerability_report.vue';
-import AgentWorkspacesTab from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue';
+import AgentWorkspacesList from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_list.vue';
 
 export default {
   i18n: {
     securityTabTitle: s__('ClusterAgents|Security'),
+    workspacesTabTitle: s__('RemoteDevelopment|Workspaces'),
   },
   components: {
     AgentShowPage,
     GlTab,
     AgentVulnerabilityReport,
-    AgentWorkspacesTab,
+    AgentWorkspacesList,
   },
   mixins: [glFeatureFlagMixin()],
   computed: {
@@ -32,16 +33,14 @@ export default {
 <template>
   <agent-show-page>
     <template v-if="showSecurityTab" #ee-security-tab="{ clusterAgentId }">
-      <gl-tab
-        ref="security-tab"
-        :title="$options.i18n.securityTabTitle"
-        query-param-value="security"
-      >
+      <gl-tab :title="$options.i18n.securityTabTitle" query-param-value="security">
         <agent-vulnerability-report :cluster-agent-id="clusterAgentId" />
       </gl-tab>
     </template>
-    <template v-if="showAgentWorkspacesTab" #ee-workspaces-tab="{ clusterAgentId }">
-      <agent-workspaces-tab :cluster-agent-id="clusterAgentId" />
+    <template v-if="showAgentWorkspacesTab" #ee-workspaces-tab="{ agentName, projectPath }">
+      <gl-tab :title="$options.i18n.workspacesTabTitle" query-param-value="workspaces">
+        <agent-workspaces-list :agent-name="agentName" :project-path="projectPath" />
+      </gl-tab>
     </template>
   </agent-show-page>
 </template>
diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index 49f0d7b643d3ce..9d66cb88da606b 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -18,6 +18,16 @@ export default {
   components: {
     WorkspacesList,
   },
+  props: {
+    agentName: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
   apollo: {
     workspaces: {
       query: agentWorkspacesListQuery,
@@ -55,7 +65,6 @@ export default {
       },
     },
   },
-  inject: ['agentName', 'projectPath'],
   data() {
     return {
       workspaces: [],
diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
deleted file mode 100644
index 6f694c3a6136cf..00000000000000
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-import { GlTab } from '@gitlab/ui';
-import { s__ } from '~/locale';
-
-import AgentWorkspacesList from './agent_workspaces_list.vue';
-
-export default {
-  i18n: {
-    workspacesTabTitle: s__('RemoteDevelopment|Workspaces'),
-  },
-  components: {
-    GlTab,
-    AgentWorkspacesList,
-  },
-  inject: ['agentName', 'projectPath'],
-};
-</script>
-
-<template>
-  <gl-tab :title="$options.i18n.workspacesTabTitle" query-param-value="workspaces">
-    <agent-workspaces-list />
-  </gl-tab>
-</template>
diff --git a/ee/spec/frontend/clusters/agents/components/show_spec.js b/ee/spec/frontend/clusters/agents/components/show_spec.js
index 06b46970b0a33e..f33677f91934ef 100644
--- a/ee/spec/frontend/clusters/agents/components/show_spec.js
+++ b/ee/spec/frontend/clusters/agents/components/show_spec.js
@@ -1,23 +1,25 @@
+import { GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import AgentWorkspacesTab from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_tab.vue';
+import AgentWorkspacesList from 'ee/remote_development/components/agent_admin_ui/agent_workspaces_list.vue';
 import ClusterAgentShow from 'ee/clusters/agents/components/show.vue';
 import AgentShowPage from '~/clusters/agents/components/show.vue';
 import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/agent_vulnerability_report.vue';
 
 describe('ClusterAgentShow', () => {
   let wrapper;
-  let template;
 
   const clusterAgentId = 'gid://gitlab/Clusters::Agent/1';
-  const securityTabTemplate = `<div><slot name="ee-security-tab" clusterAgentId="${clusterAgentId}"></slot></div>`;
-  const workspacesTabTemplate = `<div><slot name="ee-workspaces-tab" clusterAgentId="${clusterAgentId}"></slot></div>`;
-  const AgentShowPageStub = (slotTemplate) =>
-    stubComponent(AgentShowPage, {
-      provide: { agentName: 'test', projectPath: 'test' },
-      template: slotTemplate,
-    });
+
+  // FIXME: We should try to use the real AgentShowPage since we're quite coupled to it
+  const AgentShowPageStub = stubComponent(AgentShowPage, {
+    inject: ['agentName', 'projectPath', 'clusterAgentId'],
+    template: `<div>
+          <slot name="ee-security-tab" :cluster-agent-id="clusterAgentId"></slot>
+          <slot name="ee-workspaces-tab" :agent-name="agentName" :project-path="projectPath"></slot>
+        </div>`,
+  });
 
   const createWrapper = ({
     glFeatures = {
@@ -27,49 +29,58 @@ describe('ClusterAgentShow', () => {
   } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(ClusterAgentShow, {
-        provide: { glFeatures },
+        provide: {
+          glFeatures,
+          agentName: 'test-agent',
+          projectPath: 'test-project',
+          clusterAgentId,
+        },
         stubs: {
-          AgentShowPage: AgentShowPageStub(template),
+          AgentShowPage: AgentShowPageStub,
         },
       }),
     );
   };
 
-  const findAgentVulnerabilityReport = () => wrapper.findComponent(AgentVulnerabilityReport);
-  const findSecurityTab = () => wrapper.findComponent({ ref: 'security-tab' });
+  const createEmptyWrapper = () => wrapper.find('does-not-exist');
+  const findTab = (title) =>
+    wrapper.findAllComponents(GlTab).wrappers.find((x) => x.attributes('title') === title) ||
+    createEmptyWrapper();
 
-  describe('when a user does have permission', () => {
-    beforeEach(() => {
-      template = securityTabTemplate;
-      createWrapper();
-    });
+  describe('security tab', () => {
+    const findSecurityTab = () => findTab('Security');
+    const findAgentVulnerabilityReport = () =>
+      findSecurityTab().findComponent(AgentVulnerabilityReport);
 
-    it('does not display the tab', () => {
-      expect(findSecurityTab().exists()).toBe(true);
-    });
+    describe('when a user does have permission', () => {
+      beforeEach(() => {
+        createWrapper();
+      });
 
-    it('does display the cluster agent id', () => {
-      expect(findAgentVulnerabilityReport().props('clusterAgentId')).toBe(clusterAgentId);
-    });
-  });
+      it('does not display the tab', () => {
+        expect(findSecurityTab().exists()).toBe(true);
+      });
 
-  describe('without access', () => {
-    beforeEach(() => {
-      template = securityTabTemplate;
-      createWrapper({ glFeatures: { kubernetesClusterVulnerabilities: false } });
+      it('does display the cluster agent id', () => {
+        expect(findAgentVulnerabilityReport().props('clusterAgentId')).toBe(clusterAgentId);
+      });
     });
 
-    it('when a user does not have permission', () => {
-      expect(findSecurityTab().exists()).toBe(false);
+    describe('without access', () => {
+      beforeEach(() => {
+        createWrapper({ glFeatures: { kubernetesClusterVulnerabilities: false } });
+      });
+
+      it('when a user does not have permission', () => {
+        expect(findSecurityTab().exists()).toBe(false);
+      });
     });
   });
 
   describe('workspaces tab', () => {
-    const findAgentWorkspacesTab = () => wrapper.findComponent(AgentWorkspacesTab);
-
-    beforeEach(() => {
-      template = workspacesTabTemplate;
-    });
+    const findAgentWorkspacesTab = () => findTab('Workspaces');
+    const findAgentWorkspacesList = () =>
+      findAgentWorkspacesTab().findComponent(AgentWorkspacesList);
 
     describe('when remote development feature is enabled', () => {
       beforeEach(() => {
@@ -77,7 +88,11 @@ describe('ClusterAgentShow', () => {
       });
 
       it('shows the tab', () => {
-        expect(findAgentWorkspacesTab().exists()).toBe(true);
+        expect(findAgentWorkspacesList().exists()).toBe(true);
+        expect(findAgentWorkspacesList().props()).toEqual({
+          agentName: 'test-agent',
+          projectPath: 'test-project',
+        });
       });
     });
 
@@ -86,7 +101,7 @@ describe('ClusterAgentShow', () => {
         createWrapper({ glFeatures: { remoteDevelopment: false } });
       });
 
-      it('shows the tab', () => {
+      it('does not show the tab', () => {
         expect(findAgentWorkspacesTab().exists()).toBe(false);
       });
     });
diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
index 40efb3101a0432..b956886e832869 100644
--- a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -51,6 +51,8 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
       apolloProvider: mockApollo,
       provide: {
         emptyStateSvgPath: SVG_PATH,
+      },
+      props: {
         agentName: AGENT_NAME,
         projectPath: PROJECT_PATH,
       },
-- 
GitLab


From 4dc088b604bb26be6794f8b09c1e258acbeffcb2 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 12:30:22 -0700
Subject: [PATCH 09/16] Review feedback patch from pslaughter - part 2

- See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137336#note_1712937300
---
 .../fragments/workspaces_list_item.fragment.graphql  | 12 ++++++++++++
 .../queries/agent_workspaces_list.query.graphql      | 11 +----------
 .../queries/user_workspaces_list.query.graphql       | 12 ++----------
 3 files changed, 15 insertions(+), 20 deletions(-)
 create mode 100644 ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql

diff --git a/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql b/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql
new file mode 100644
index 00000000000000..4fb0516897bd1b
--- /dev/null
+++ b/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql
@@ -0,0 +1,12 @@
+fragment WorkspacesListItem on Workspace {
+  id
+  name
+  namespace
+  projectId
+  desiredState
+  actualState
+  url
+  devfileRef
+  devfilePath
+  createdAt
+}
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
index 41af54a3248e39..ac0687205949ae 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
@@ -21,16 +21,7 @@ query agentWorkspaces(
         projectIds: $projectIds
       ) {
         nodes {
-          id
-          name
-          namespace
-          projectId
-          desiredState
-          actualState
-          url
-          devfileRef
-          devfilePath
-          createdAt
+          ...WorkspacesListItem
         }
         pageInfo {
           ...PageInfo
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
index 302e4fc5718b63..cbd7ee205727be 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
@@ -1,4 +1,5 @@
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
+#import "../fragments/workspaces_list_item.fragment.graphql"
 
 query userWorkspacesList(
   $first: Int
@@ -17,16 +18,7 @@ query userWorkspacesList(
       projectIds: $projectIds
     ) {
       nodes {
-        id
-        name
-        namespace
-        projectId
-        desiredState
-        actualState
-        url
-        devfileRef
-        devfilePath
-        createdAt
+        ...WorkspacesListItem
       }
       pageInfo {
         ...PageInfo
-- 
GitLab


From 6781eb5bd569ede615bc1885617cda769cf7844e Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 12:59:09 -0700
Subject: [PATCH 10/16] Remove unnecessary variables from agentWorkspace query

- Was accidentally cargo-culted from userWorkspaces query
---
 .../queries/agent_workspaces_list.query.graphql        | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
index ac0687205949ae..4d003a56f9f559 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
@@ -6,20 +6,12 @@ query agentWorkspaces(
   $after: String
   $agentName: String!
   $projectPath: ID!
-  $actualStates: [String!]
-  $projectIds: [ProjectID!]
 ) {
   project(fullPath: $projectPath) {
     id
     clusterAgent(name: $agentName) {
       id
-      workspaces(
-        first: $first
-        before: $before
-        after: $after
-        actualStates: $actualStates
-        projectIds: $projectIds
-      ) {
+      workspaces(first: $first, before: $before, after: $after) {
         nodes {
           ...WorkspacesListItem
         }
-- 
GitLab


From 55f0af9d7cfb133d759e6a5f4cdcdbc2e37bca6f Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 13:08:36 -0700
Subject: [PATCH 11/16] Review feedback patch from pslaughter - part 3

- See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137336#note_1713002464
---
 .../agent_admin_ui/agent_workspaces_list_spec.js         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
index b956886e832869..3007d60d8a3906 100644
--- a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -132,8 +132,6 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
         const pageVariables = {
           after: 'end',
           first: 10,
-          agentName: AGENT_NAME,
-          projectPath: PROJECT_PATH,
         };
 
         createWrapper();
@@ -147,7 +145,12 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
         await waitForPromises();
 
         expect(agentWorkspacesListQueryHandler).toHaveBeenCalledTimes(2);
-        expect(agentWorkspacesListQueryHandler).toHaveBeenLastCalledWith(pageVariables);
+        expect(agentWorkspacesListQueryHandler).toHaveBeenLastCalledWith({
+          after: 'end',
+          first: 10,
+          agentName: AGENT_NAME,
+          projectPath: PROJECT_PATH,
+        });
       });
     });
   });
-- 
GitLab


From bd13f02fb5d64a9816974e4ecd66313aded7ba19 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 14:03:29 -0700
Subject: [PATCH 12/16] Remove unused methods

---
 .../components/agent_admin_ui/agent_workspaces_list.vue     | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index 9d66cb88da606b..2a0c7373cf81ff 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -83,9 +83,6 @@ export default {
     };
   },
   computed: {
-    isEmpty() {
-      return !this.workspaces.length && !this.isLoading;
-    },
     isLoading() {
       return this.$apollo.loading;
     },
@@ -94,9 +91,6 @@ export default {
     onError(error) {
       this.error = error;
     },
-    onUpdateFailed({ error }) {
-      this.error = error;
-    },
     onPaginationInput(paginationVariables) {
       this.paginationVariables = paginationVariables;
     },
-- 
GitLab


From ea6b1724e3d65ac265b59d1f63a2d111288fc159 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 14:03:40 -0700
Subject: [PATCH 13/16] Revert "Review feedback patch from pslaughter - part 2"

This reverts commit 884c58f5e2577fc330ef072d11e6817ea155aa06.
---
 .../fragments/workspaces_list_item.fragment.graphql  | 12 ------------
 .../queries/agent_workspaces_list.query.graphql      | 11 ++++++++++-
 .../queries/user_workspaces_list.query.graphql       | 12 ++++++++++--
 3 files changed, 20 insertions(+), 15 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql

diff --git a/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql b/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql
deleted file mode 100644
index 4fb0516897bd1b..00000000000000
--- a/ee/app/assets/javascripts/remote_development/graphql/fragments/workspaces_list_item.fragment.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-fragment WorkspacesListItem on Workspace {
-  id
-  name
-  namespace
-  projectId
-  desiredState
-  actualState
-  url
-  devfileRef
-  devfilePath
-  createdAt
-}
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
index 4d003a56f9f559..423fefc75b8726 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/agent_workspaces_list.query.graphql
@@ -13,7 +13,16 @@ query agentWorkspaces(
       id
       workspaces(first: $first, before: $before, after: $after) {
         nodes {
-          ...WorkspacesListItem
+          id
+          name
+          namespace
+          projectId
+          desiredState
+          actualState
+          url
+          devfileRef
+          devfilePath
+          createdAt
         }
         pageInfo {
           ...PageInfo
diff --git a/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql b/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
index cbd7ee205727be..302e4fc5718b63 100644
--- a/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
+++ b/ee/app/assets/javascripts/remote_development/graphql/queries/user_workspaces_list.query.graphql
@@ -1,5 +1,4 @@
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
-#import "../fragments/workspaces_list_item.fragment.graphql"
 
 query userWorkspacesList(
   $first: Int
@@ -18,7 +17,16 @@ query userWorkspacesList(
       projectIds: $projectIds
     ) {
       nodes {
-        ...WorkspacesListItem
+        id
+        name
+        namespace
+        projectId
+        desiredState
+        actualState
+        url
+        devfileRef
+        devfilePath
+        createdAt
       }
       pageInfo {
         ...PageInfo
-- 
GitLab


From 822be79d9794315cd73084eba7695aeb035dc79a Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 3 Jan 2024 14:09:53 -0700
Subject: [PATCH 14/16] Revert "Review feedback patch from pslaughter - part 3"

This reverts commit 49852e9de23b8af1e472c5ebb29afae99cb5847d.
---
 .../agent_admin_ui/agent_workspaces_list_spec.js         | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
index 3007d60d8a3906..b956886e832869 100644
--- a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -132,6 +132,8 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
         const pageVariables = {
           after: 'end',
           first: 10,
+          agentName: AGENT_NAME,
+          projectPath: PROJECT_PATH,
         };
 
         createWrapper();
@@ -145,12 +147,7 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
         await waitForPromises();
 
         expect(agentWorkspacesListQueryHandler).toHaveBeenCalledTimes(2);
-        expect(agentWorkspacesListQueryHandler).toHaveBeenLastCalledWith({
-          after: 'end',
-          first: 10,
-          agentName: AGENT_NAME,
-          projectPath: PROJECT_PATH,
-        });
+        expect(agentWorkspacesListQueryHandler).toHaveBeenLastCalledWith(pageVariables);
       });
     });
   });
-- 
GitLab


From 5077afb08bd08cf202a7153cce4896838bf8d922 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Thu, 4 Jan 2024 15:42:56 -0700
Subject: [PATCH 15/16] Use Optional Chaining Operator for safety

---
 .../components/agent_admin_ui/agent_workspaces_list.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
index 2a0c7373cf81ff..4d272408b7bc36 100644
--- a/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
+++ b/ee/app/assets/javascripts/remote_development/components/agent_admin_ui/agent_workspaces_list.vue
@@ -40,7 +40,7 @@ export default {
         };
       },
       update(data) {
-        return data.project.clusterAgent.workspaces?.nodes || [];
+        return data.project?.clusterAgent?.workspaces?.nodes || [];
       },
       error(err) {
         logError(err);
@@ -50,7 +50,7 @@ export default {
           this.error = i18n.loadingWorkspacesFailed;
           return;
         }
-        const workspaces = data.project.clusterAgent.workspaces.nodes;
+        const workspaces = data?.project?.clusterAgent?.workspaces?.nodes;
         const result = await fetchProjectNames(this.$apollo, workspaces);
 
         if (result.error) {
@@ -61,7 +61,7 @@ export default {
         }
 
         this.workspaces = populateWorkspacesWithProjectNames(workspaces, result.projects);
-        this.pageInfo = data.project.clusterAgent.workspaces.pageInfo;
+        this.pageInfo = data?.project?.clusterAgent?.workspaces?.pageInfo;
       },
     },
   },
-- 
GitLab


From f8eb016ab2dfecc1a1b8409a86a05abb623a3541 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Fri, 5 Jan 2024 12:08:43 -0700
Subject: [PATCH 16/16] Fix failing test due to non-DRY tech debt

---
 .../components/agent_admin_ui/agent_workspaces_list_spec.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
index b956886e832869..58c4c52e83e380 100644
--- a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
-import { GlAlert, GlBadge, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -228,10 +228,6 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
       await waitForPromises();
     });
 
-    it('displays a beta badge', () => {
-      expect(wrapper.findComponent(GlBadge).props().variant).toBe('info');
-    });
-
     it('displays a link that navigates to the workspaces help page', () => {
       expect(findHelpLink().attributes().href).toContain('user/workspace/index.md');
     });
-- 
GitLab