From fb89d02f33e43a09f2cde20c1f122033311318f2 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 15 May 2024 15:04:52 -0400
Subject: [PATCH 01/16] Base workspaces list component

---
 .../workspaces_list/base_workspaces_list.vue  | 73 +++++++++++++++
 .../base_workspaces_list_spec.js              | 90 +++++++++++++++++++
 2 files changed, 163 insertions(+)
 create mode 100644 ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
 create mode 100644 ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
new file mode 100644
index 00000000000000..c1f69caf3376be
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlAlert, GlLink } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import WorkspaceEmptyState from './empty_state.vue';
+
+export const i18n = {
+  learnMoreHelpLink: __('Learn more'),
+  heading: s__('Workspaces|Workspaces'),
+};
+
+const workspacesHelpPath = helpPagePath('user/workspace/index.md');
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    WorkspaceEmptyState,
+  },
+  props: {
+    empty: {
+      type: Boolean,
+      required: true,
+    },
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    newWorkspacePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    clearError() {
+      this.$emit('error', '');
+    },
+  },
+  i18n,
+  workspacesHelpPath,
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
+      {{ error }}
+    </gl-alert>
+    <workspace-empty-state v-if="empty" :new-workspace-path="newWorkspacePath" />
+    <template v-else>
+      <div
+        data-testid="workspaces-list-header"
+        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-list-link gl-display-none gl-sm-display-block"
+            :href="$options.workspacesHelpPath"
+            >{{ $options.i18n.learnMoreHelpLink }}</gl-link
+          >
+          <slot name="header"></slot>
+        </div>
+      </div>
+      <slot name="workspaces-list"></slot>
+    </template>
+  </div>
+</template>
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
new file mode 100644
index 00000000000000..6fd4f4d6ba822f
--- /dev/null
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
@@ -0,0 +1,90 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlSkeletonLoader, GlAlert } from '@gitlab/ui';
+
+import BaseWorkspacesList from 'ee/workspaces/common/components/workspaces_list/base_workspaces_list.vue';
+import WorkspaceEmptyState from 'ee/workspaces/common/components/workspaces_list/empty_state.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+const findAlert = (wrapper) => wrapper.findComponent(GlAlert);
+
+describe('BaseWorkspacesList', () => {
+  let wrapper;
+
+  function createWrapper(props) {
+    wrapper = extendedWrapper(
+      shallowMount(BaseWorkspacesList, {
+        propsData: {
+          empty: true,
+          loading: false,
+          error: null,
+          newWorkspacePath: '/some-path',
+          ...props,
+        },
+      }),
+    );
+  }
+
+  describe('is empty', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders an empty state', () => {
+      const emptyState = wrapper.findComponent(WorkspaceEmptyState);
+      expect(emptyState.exists()).toBe(true);
+    });
+
+    it('does not render header', () => {
+      const header = wrapper.findByTestId('workspaces-list-header');
+      expect(header.exists()).toBe(false);
+    });
+
+    it('does not render error', () => {
+      expect(findAlert(wrapper).exists()).toBe(false);
+    });
+  });
+
+  describe('is not empty', () => {
+    beforeEach(() => {
+      createWrapper({
+        empty: false,
+        loading: false,
+      });
+    });
+
+    it('does not render loading state', () => {
+      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
+    });
+
+    it('does not render empty state', () => {
+      const emptyState = wrapper.findComponent(WorkspaceEmptyState);
+      expect(emptyState.exists()).toBe(false);
+    });
+
+    it('renders header', () => {
+      const header = wrapper.findByTestId('workspaces-list-header');
+      expect(header.exists()).toBe(true);
+    });
+
+    it('does not render error', () => {
+      expect(findAlert(wrapper).exists()).toBe(false);
+    });
+  });
+
+  describe('on error', () => {
+    const MOCK_ERROR =
+      'Unable to load current workspaces. Please try again or contact an administrator.';
+
+    beforeEach(() => {
+      createWrapper({
+        empty: false,
+        loading: false,
+        error: MOCK_ERROR,
+      });
+    });
+
+    it('shows alert', () => {
+      expect(findAlert(wrapper).text()).toBe(MOCK_ERROR);
+    });
+  });
+});
-- 
GitLab


From 6d56c83d31c6b153aba7d1de689dac35ea6104bd Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 15 May 2024 17:58:48 -0400
Subject: [PATCH 02/16] Workspace tab component

---
 .../common/components/workspace_tab.vue       | 110 +++++++++++++
 .../workspaces_list/workspaces_table.vue      |   1 +
 .../common/components/workspace_tab_spec.js   | 147 ++++++++++++++++++
 .../base_workspaces_list_spec.js              |   2 +-
 4 files changed, 259 insertions(+), 1 deletion(-)
 create mode 100644 ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
 create mode 100644 ee/spec/frontend/workspaces/common/components/workspace_tab_spec.js

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
new file mode 100644
index 00000000000000..c3ebc908f594c6
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
@@ -0,0 +1,110 @@
+<script>
+import { GlTab, GlSkeletonLoader } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+import { WORKSPACES_LIST_PAGE_SIZE, I18N_LOADING_WORKSPACES_FAILED } from '../constants';
+import WorkspacesTable from './workspaces_list/workspaces_table.vue';
+import WorkspacesListPagination from './workspaces_list/workspaces_list_pagination.vue';
+
+export const i18n = {
+  loadingWorkspacesFailed: I18N_LOADING_WORKSPACES_FAILED,
+};
+
+function getTabTitle(tabName) {
+  switch (tabName) {
+    case 'active':
+      return s__('Workspaces|Active');
+    case 'terminated':
+      return s__('Workspaces|Terminated');
+    default:
+      throw Error(__('Status not supported'));
+  }
+}
+
+function getEmptyStateText(tabName) {
+  switch (tabName) {
+    case 'active':
+      return s__('Workspaces|No active workspaces to show.');
+    case 'terminated':
+      return s__('Workspaces|No terminated workspaces to show.');
+    default:
+      throw Error(__('Status not supported'));
+  }
+}
+
+export default {
+  components: {
+    GlTab,
+    GlSkeletonLoader,
+    WorkspacesTable,
+    WorkspacesListPagination,
+  },
+  props: {
+    tabName: {
+      type: String,
+      required: true,
+    },
+    workspaces: {
+      type: Array,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    isEmpty() {
+      return !this.workspaces.length && !this.loading;
+    },
+  },
+  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('onPaginationInput', { tab: this.tabName, paginationVariables });
+    },
+  },
+  i18n,
+  WORKSPACES_LIST_PAGE_SIZE,
+  getTabTitle,
+  getEmptyStateText,
+};
+</script>
+<template>
+  <gl-tab :title="$options.getTabTitle(tabName)" :query-param-value="tabName">
+    <div v-if="loading" class="gl-p-5 gl-display-flex gl-justify-content-left">
+      <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
+    </div>
+    <template v-else>
+      <p
+        v-if="isEmpty"
+        class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-py-6"
+        data-testid="empty-state"
+      >
+        {{ $options.getEmptyStateText(tabName) }}
+      </p>
+
+      <div v-else>
+        <workspaces-table
+          :workspaces="workspaces"
+          @updateFailed="onUpdateFailed"
+          @updateSucceed="clearError"
+        />
+        <workspaces-list-pagination
+          :page-info="pageInfo"
+          :page-size="$options.WORKSPACES_LIST_PAGE_SIZE"
+          @input="onPaginationInput"
+        />
+      </div>
+    </template>
+  </gl-tab>
+</template>
diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index b0a594f8ad0d4e..45595e67d40f5d 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -144,6 +144,7 @@ export default {
         :fields="$options.fields"
         :tbody-transition-props="transitionProps"
         primary-key="name"
+        class="gl-my-5"
         :tbody-tr-attr="(item) => ({ 'data-testid': item.name })"
       >
         <template #cell(status)="{ item }">
diff --git a/ee/spec/frontend/workspaces/common/components/workspace_tab_spec.js b/ee/spec/frontend/workspaces/common/components/workspace_tab_spec.js
new file mode 100644
index 00000000000000..14c58a65fc62fc
--- /dev/null
+++ b/ee/spec/frontend/workspaces/common/components/workspace_tab_spec.js
@@ -0,0 +1,147 @@
+import { mount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import Vue, { nextTick } from 'vue';
+import { GlSkeletonLoader, GlTab } from '@gitlab/ui';
+
+import WorkspaceTab from 'ee/workspaces/common/components/workspace_tab.vue';
+import WorkspaceTable from 'ee/workspaces/common/components/workspaces_list/workspaces_table.vue';
+import WorkspacesListPagination from 'ee/workspaces/common/components/workspaces_list/workspaces_list_pagination.vue';
+import { populateWorkspacesWithProjectDetails } from 'ee/workspaces/common/services/utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import {
+  USER_WORKSPACES_LIST_QUERY_RESULT,
+  GET_PROJECTS_DETAILS_QUERY_RESULT,
+} from '../../mock_data';
+
+jest.mock('~/lib/logger');
+
+Vue.use(VueApollo);
+
+const MOCK_WORKSPACES = populateWorkspacesWithProjectDetails(
+  USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.nodes,
+  GET_PROJECTS_DETAILS_QUERY_RESULT.data.projects.nodes,
+);
+
+describe('workspaces/common/components/workspace_tab.vue', () => {
+  let wrapper;
+
+  const createWrapper = (props) => {
+    wrapper = extendedWrapper(
+      mount(WorkspaceTab, {
+        propsData: {
+          tabName: 'terminated',
+          workspaces: MOCK_WORKSPACES,
+          loading: false,
+          pageInfo: {
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+          ...props,
+        },
+      }),
+    );
+  };
+  const findTab = () => wrapper.findComponent(GlTab);
+  const findTable = () => wrapper.findComponent(WorkspaceTable);
+  const findPagination = () => wrapper.findComponent(WorkspacesListPagination);
+  const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
+
+  it('shows loading state when workspaces are being fetched', () => {
+    createWrapper({ loading: true });
+    expect(findLoader().exists()).toBe(true);
+  });
+
+  describe('when no workspaces are available', () => {
+    beforeEach(() => {
+      createWrapper({ workspaces: [] });
+    });
+
+    it('renders tab', () => {
+      expect(findTab().exists()).toBe(true);
+    });
+
+    it('renders empty state when no workspaces are available', () => {
+      const emptyState = wrapper.findByTestId('empty-state');
+
+      expect(emptyState.exists()).toBe(true);
+    });
+
+    it('does not render table and pagination', () => {
+      expect(findTable().exists()).toBe(false);
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('with workspaces', () => {
+    beforeEach(() => {
+      createWrapper({ workspaces: MOCK_WORKSPACES });
+    });
+
+    it('renders the tab', () => {
+      expect(findTab().exists()).toBe(true);
+    });
+
+    it('renders table', () => {
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('provides workspaces data to the workspaces table', () => {
+      expect(findTable(wrapper).props('workspaces')).toEqual(MOCK_WORKSPACES);
+    });
+
+    it('renders pagination component', () => {
+      expect(findPagination().exists()).toBe(true);
+    });
+  });
+
+  describe('when pagination component emits events', () => {
+    it.each(['active', 'terminated'])(
+      'emits onPaginationInput event with correct variables for %s tab when input event is emitted',
+      async (tab) => {
+        const pageVariables = {
+          after: 'end',
+          first: 10,
+        };
+
+        createWrapper({ tabName: tab });
+
+        await waitForPromises();
+
+        findPagination().vm.$emit('input', pageVariables);
+
+        await waitForPromises();
+
+        expect(wrapper.emitted('onPaginationInput')).toHaveLength(1);
+        expect(wrapper.emitted('onPaginationInput')[0]).toEqual([
+          { tab, paginationVariables: pageVariables },
+        ]);
+      },
+    );
+
+    it('emits error event with error message when updatedFailed event is emitted', async () => {
+      const mockError = 'Failed to stop workspace';
+      createWrapper();
+
+      await waitForPromises();
+      findTable().vm.$emit('updateFailed', { error: mockError });
+
+      await nextTick();
+
+      expect(wrapper.emitted('error')).toHaveLength(1);
+      expect(wrapper.emitted('error')[0]).toEqual([mockError]);
+    });
+
+    it('emits error event with empty string when updateSucceed event is emitted', async () => {
+      createWrapper();
+
+      await waitForPromises();
+      findTable().vm.$emit('updateSucceed');
+
+      await nextTick();
+
+      expect(wrapper.emitted('error')).toHaveLength(1);
+      expect(wrapper.emitted('error')[0]).toEqual(['']);
+    });
+  });
+});
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
index 6fd4f4d6ba822f..3a6c51fcd756ec 100644
--- a/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
@@ -7,7 +7,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const findAlert = (wrapper) => wrapper.findComponent(GlAlert);
 
-describe('BaseWorkspacesList', () => {
+describe('workspaces/common/components/workspaces_list/base_workspaces_list.vue', () => {
   let wrapper;
 
   function createWrapper(props) {
-- 
GitLab


From 762b53cc65f3480b72a15898b99bf8c94910a2c6 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 15 May 2024 17:59:34 -0400
Subject: [PATCH 03/16] Separate terminated workspaces into a new tabbed list
 view

Changelog: changed
EE: true
---
 .../user_workspaces_tab_list.query.graphql    |  53 +++++++
 .../workspaces/user/pages/list.vue            | 136 ++++++++++++-----
 .../frontend/workspaces/mock_data/index.js    | 110 ++++++++++++++
 .../workspaces/user/pages/list_spec.js        | 139 ++++++++++--------
 locale/gitlab.pot                             |  12 ++
 5 files changed, 349 insertions(+), 101 deletions(-)
 create mode 100644 ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql

diff --git a/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql b/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql
new file mode 100644
index 00000000000000..d222b636a7cca3
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql
@@ -0,0 +1,53 @@
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
+#import "../fragments/workspace_item.fragment.graphql"
+
+query userWorkspacesTabList(
+  $first: Int
+  $activeBefore: String
+  $activeAfter: String
+  $terminatedBefore: String
+  $terminatedAfter: String
+  $projectIds: [ProjectID!]
+) {
+  currentUser {
+    id
+    activeWorkspaces: workspaces(
+      first: $first
+      before: $activeBefore
+      after: $activeAfter
+      actualStates: [
+        "CreationRequested"
+        "Starting"
+        "Running"
+        "Stopping"
+        "Stopped"
+        "Terminating"
+        "Failed"
+        "Error"
+        "Unknown"
+      ]
+      projectIds: $projectIds
+    ) {
+      nodes {
+        ...WorkspaceItem
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+    terminatedWorkspaces: workspaces(
+      first: $first
+      before: $terminatedBefore
+      after: $terminatedAfter
+      actualStates: ["Terminated"]
+      projectIds: $projectIds
+    ) {
+      nodes {
+        ...WorkspaceItem
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index ef7039f41dedb8..23953cb7d9dcac 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -1,34 +1,57 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTabs } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import { s__ } from '~/locale';
 import {
-  WORKSPACES_LIST_PAGE_SIZE,
   ROUTES,
-  WORKSPACES_LIST_POLL_INTERVAL,
   I18N_LOADING_WORKSPACES_FAILED,
+  WORKSPACES_LIST_POLL_INTERVAL,
+  WORKSPACES_LIST_PAGE_SIZE,
 } from '../constants';
-import userWorkspacesListQuery from '../../common/graphql/queries/user_workspaces_list.query.graphql';
-import WorkspacesList from '../../common/components/workspaces_list/workspaces_list.vue';
 import {
   fetchProjectsDetails,
   populateWorkspacesWithProjectDetails,
 } from '../../common/services/utils';
+import userWorkspacesTabListQuery from '../../common/graphql/queries/user_workspaces_tab_list.query.graphql';
+import BaseWorkspacesList from '../../common/components/workspaces_list/base_workspaces_list.vue';
+import WorkspaceTab from '../../common/components/workspace_tab.vue';
 
 export const i18n = {
   newWorkspaceButton: s__('Workspaces|New workspace'),
   loadingWorkspacesFailed: I18N_LOADING_WORKSPACES_FAILED,
 };
 
+const DEFAULT_WORKSPACES_DATA = {
+  workspaces: [],
+  pageInfo: {
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: null,
+    endCursor: null,
+  },
+};
+
+const ACTIVE_PAGINATION_VARIABLE_KEY_MAP = {
+  after: 'activeAfter',
+  before: 'activeBefore',
+};
+
+const TERMINATED_PAGINATION_VARIABLE_KEY_MAP = {
+  after: 'terminatedAfter',
+  before: 'terminatedBefore',
+};
+
 export default {
   components: {
     GlButton,
-    WorkspacesList,
+    GlTabs,
+    BaseWorkspacesList,
+    WorkspaceTab,
   },
   apollo: {
     workspaces: {
-      query: userWorkspacesListQuery,
+      query: userWorkspacesTabListQuery,
       pollInterval: WORKSPACES_LIST_POLL_INTERVAL,
       variables() {
         return {
@@ -36,7 +59,13 @@ export default {
         };
       },
       update(data) {
-        return data.currentUser.workspaces?.nodes || [];
+        const { activeWorkspaces, terminatedWorkspaces } = data.currentUser;
+
+        this.active.workspaces = activeWorkspaces?.nodes || [];
+        this.terminated.workspaces = terminatedWorkspaces?.nodes || [];
+        this.active.pageInfo = activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo;
+        this.terminated.pageInfo =
+          terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo;
       },
       error(err) {
         logError(err);
@@ -46,39 +75,50 @@ export default {
           this.error = i18n.loadingWorkspacesFailed;
           return;
         }
-        const workspaces = data.currentUser.workspaces.nodes;
+
+        const { activeWorkspaces, terminatedWorkspaces } = data.currentUser;
+        const workspaces = [...activeWorkspaces.nodes, ...terminatedWorkspaces.nodes];
         const result = await fetchProjectsDetails(this.$apollo, workspaces);
 
         if (result.error) {
           this.error = i18n.loadingWorkspacesFailed;
-          this.workspaces = [];
+          this.active = DEFAULT_WORKSPACES_DATA;
+          this.terminated = DEFAULT_WORKSPACES_DATA;
           logError(result.error);
           return;
         }
-
-        this.workspaces = populateWorkspacesWithProjectDetails(workspaces, result.projects);
-        this.pageInfo = data.currentUser.workspaces.pageInfo;
+        this.active = {
+          workspaces: populateWorkspacesWithProjectDetails(activeWorkspaces.nodes, result.projects),
+          pageInfo: activeWorkspaces.pageInfo,
+        };
+        this.terminated = {
+          workspaces: populateWorkspacesWithProjectDetails(
+            terminatedWorkspaces.nodes,
+            result.projects,
+          ),
+          pageInfo: terminatedWorkspaces.pageInfo,
+        };
       },
     },
   },
   data() {
     return {
-      workspaces: [],
-      pageInfo: {
-        hasNextPage: false,
-        hasPreviousPage: false,
-        startCursor: null,
-        endCursor: null,
-      },
+      active: DEFAULT_WORKSPACES_DATA,
+      terminated: DEFAULT_WORKSPACES_DATA,
       paginationVariables: {
         first: WORKSPACES_LIST_PAGE_SIZE,
-        after: null,
-        before: null,
+        activeAfter: null,
+        activeBefore: null,
+        terminatedAfter: null,
+        terminatedBefore: null,
       },
       error: '',
     };
   },
   computed: {
+    workspaces() {
+      return [...this.active.workspaces, ...this.terminated.workspaces];
+    },
     isEmpty() {
       return !this.workspaces.length && !this.isLoading;
     },
@@ -90,33 +130,57 @@ export default {
     onError(error) {
       this.error = error;
     },
-    onUpdateFailed({ error }) {
-      this.error = error;
-    },
-    onPaginationInput(paginationVariables) {
-      this.paginationVariables = paginationVariables;
+    onPaginationInput({ tab, paginationVariables }) {
+      const updatedVariables = Object.keys(paginationVariables).reduce((variables, key) => {
+        const newKey =
+          tab === 'active'
+            ? ACTIVE_PAGINATION_VARIABLE_KEY_MAP[key]
+            : TERMINATED_PAGINATION_VARIABLE_KEY_MAP[key];
+        return {
+          ...variables,
+          [newKey || key]: paginationVariables[key],
+        };
+      }, {});
+
+      this.paginationVariables = updatedVariables;
     },
   },
   i18n,
   ROUTES,
-  WORKSPACES_LIST_PAGE_SIZE,
 };
 </script>
 <template>
-  <workspaces-list
-    :workspaces="workspaces"
+  <base-workspaces-list
     :error="error"
-    :page-info="pageInfo"
-    :is-loading="isLoading"
+    :loading="isLoading"
+    :empty="isEmpty"
     :new-workspace-path="$options.ROUTES.new"
-    :page-size="$options.WORKSPACES_LIST_PAGE_SIZE"
     @error="onError"
-    @page="onPaginationInput"
   >
-    <template v-if="!isEmpty" #header>
+    <template #header>
       <gl-button variant="confirm" :to="$options.ROUTES.new" data-testid="list-new-workspace-button"
         >{{ $options.i18n.newWorkspaceButton }}
       </gl-button>
     </template>
-  </workspaces-list>
+    <template #workspaces-list>
+      <gl-tabs sync-active-tab-with-query-params>
+        <workspace-tab
+          tab-name="active"
+          :loading="isLoading"
+          :workspaces="active.workspaces"
+          :page-info="active.pageInfo"
+          @error="onError"
+          @onPaginationInput="onPaginationInput"
+        />
+        <workspace-tab
+          tab-name="terminated"
+          :loading="isLoading"
+          :workspaces="terminated.workspaces"
+          :page-info="terminated.pageInfo"
+          @error="onError"
+          @onPaginationInput="onPaginationInput"
+        />
+      </gl-tabs>
+    </template>
+  </base-workspaces-list>
 </template>
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index cc4c90628fd561..d88353055f8a8f 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -79,6 +79,116 @@ export const USER_WORKSPACES_LIST_QUERY_RESULT = {
   },
 };
 
+export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
+  data: {
+    currentUser: {
+      id: 1,
+      activeWorkspaces: {
+        nodes: [
+          {
+            __typename: 'Workspace',
+            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',
+            devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
+            projectId: 'gid://gitlab/Project/1',
+            createdAt: '2023-04-29T18:24:34Z',
+          },
+          {
+            __typename: 'Workspace',
+            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',
+            devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
+            projectId: 'gid://gitlab/Project/1',
+            createdAt: '2023-05-01T18:24:34Z',
+          },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+          endCursor: null,
+        },
+      },
+      terminatedWorkspaces: {
+        nodes: [
+          {
+            __typename: 'Workspace',
+            id: 'gid://gitlab/RemoteDevelopment::Workspace/4',
+            name: 'workspace-1-1-iawi02',
+            namespace: 'gl-rd-ns-1-1-iawi02',
+            desiredState: 'Terminated',
+            actualState: 'Terminated',
+            url: 'https://8000-workspace-1-1-idmi02.workspaces.localdev.me?tkn=password',
+            devfileRef: 'main',
+            devfilePath: '.devfile.yaml',
+            devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
+            projectId: 'gid://gitlab/Project/1',
+            createdAt: '2023-04-29T18:24:34Z',
+          },
+          {
+            __typename: 'Workspace',
+            id: 'gid://gitlab/RemoteDevelopment::Workspace/3',
+            name: 'workspace-1-1-rsl27q',
+            namespace: 'gl-rd-ns-1-1-rsl27q',
+            desiredState: 'Terminated',
+            actualState: 'Terminated',
+            url: 'https://8000-workspace-1-1-rfu27q.workspaces.localdev.me?tkn=password',
+            devfileRef: 'main',
+            devfilePath: '.devfile.yaml',
+            devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
+            projectId: 'gid://gitlab/Project/1',
+            createdAt: '2023-05-01T18:24:34Z',
+          },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+          endCursor: null,
+        },
+      },
+    },
+  },
+};
+
+export const USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT = {
+  data: {
+    currentUser: {
+      id: 1,
+      activeWorkspaces: {
+        nodes: [],
+        pageInfo: {
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+          endCursor: null,
+        },
+      },
+      terminatedWorkspaces: {
+        nodes: [],
+        pageInfo: {
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+          endCursor: null,
+        },
+      },
+    },
+  },
+};
+
 export const USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT = {
   data: {
     currentUser: {
diff --git a/ee/spec/frontend/workspaces/user/pages/list_spec.js b/ee/spec/frontend/workspaces/user/pages/list_spec.js
index 4adb654efcb45e..5f8577eb9777d5 100644
--- a/ee/spec/frontend/workspaces/user/pages/list_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/list_spec.js
@@ -6,16 +6,15 @@ import { logError } from '~/lib/logger';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import WorkspaceEmptyState from 'ee/workspaces/common/components/workspaces_list/empty_state.vue';
-import WorkspacesTable from 'ee/workspaces/common/components/workspaces_list/workspaces_table.vue';
-import WorkspacesListPagination from 'ee/workspaces/common/components/workspaces_list/workspaces_list_pagination.vue';
-import userWorkspacesListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_list.query.graphql';
+import WorkspaceTab from 'ee/workspaces/common/components/workspace_tab.vue';
+import WorkspaceTable from 'ee/workspaces/common/components/workspaces_list/workspaces_table.vue';
+import userWorkspacesTabListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import getProjectsDetailsQuery from 'ee/workspaces/common/graphql/queries/get_projects_details.query.graphql';
-import { populateWorkspacesWithProjectDetails } from 'ee/workspaces/common/services/utils';
 import List from 'ee/workspaces/user/pages/list.vue';
 import { ROUTES } from 'ee/workspaces/user/constants';
 import {
-  USER_WORKSPACES_LIST_QUERY_RESULT,
-  USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
+  USER_WORKSPACES_TAB_LIST_QUERY_RESULT,
+  USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT,
   GET_PROJECTS_DETAILS_QUERY_RESULT,
 } from '../../mock_data';
 
@@ -28,19 +27,17 @@ const SVG_PATH = '/assets/illustrations/empty_states/empty_workspaces.svg';
 describe('workspaces/user/pages/list.vue', () => {
   let wrapper;
   let mockApollo;
-  let userWorkspacesListQueryHandler;
+  let userWorkspacesTabListQueryHandler;
   let getProjectsDetailsQueryHandler;
 
   const buildMockApollo = () => {
-    userWorkspacesListQueryHandler = jest
+    userWorkspacesTabListQueryHandler = jest
       .fn()
-      .mockResolvedValueOnce(USER_WORKSPACES_LIST_QUERY_RESULT);
-    getProjectsDetailsQueryHandler = jest
-      .fn()
-      .mockResolvedValueOnce(GET_PROJECTS_DETAILS_QUERY_RESULT);
+      .mockResolvedValue(USER_WORKSPACES_TAB_LIST_QUERY_RESULT);
+    getProjectsDetailsQueryHandler = jest.fn().mockResolvedValue(GET_PROJECTS_DETAILS_QUERY_RESULT);
 
     mockApollo = createMockApollo([
-      [userWorkspacesListQuery, userWorkspacesListQueryHandler],
+      [userWorkspacesTabListQuery, userWorkspacesTabListQueryHandler],
       [getProjectsDetailsQuery, getProjectsDetailsQueryHandler],
     ]);
   };
@@ -55,9 +52,10 @@ describe('workspaces/user/pages/list.vue', () => {
   };
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findHelpLink = () => wrapper.findComponent(GlLink);
-  const findTable = () => wrapper.findComponent(WorkspacesTable);
-  const findPagination = () => wrapper.findComponent(WorkspacesListPagination);
+  const findTabs = () => wrapper.findAllComponents(WorkspaceTab);
+  const findTable = () => wrapper.findComponent(WorkspaceTable);
   const findNewWorkspaceButton = () => wrapper.findComponent(GlButton);
+
   const findAllConfirmButtons = () =>
     wrapper.findAllComponents(GlButton).filter((button) => button.props().variant === 'confirm');
 
@@ -67,8 +65,10 @@ describe('workspaces/user/pages/list.vue', () => {
 
   describe('when no workspaces are available', () => {
     beforeEach(async () => {
-      userWorkspacesListQueryHandler.mockReset();
-      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT);
+      userWorkspacesTabListQueryHandler.mockReset();
+      userWorkspacesTabListQueryHandler.mockResolvedValueOnce(
+        USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT,
+      );
 
       createWrapper();
       await waitForPromises();
@@ -82,12 +82,9 @@ describe('workspaces/user/pages/list.vue', () => {
       expect(findAllConfirmButtons().length).toBe(1);
     });
 
-    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('does not render the workspace tabs', () => {
+      const tabs = findTabs();
+      expect(tabs.exists()).toBe(false);
     });
   });
 
@@ -102,21 +99,13 @@ describe('workspaces/user/pages/list.vue', () => {
       await waitForPromises();
     });
 
-    it('renders table', () => {
-      expect(findTable().exists()).toBe(true);
-    });
+    it('renders the workspace tabs', () => {
+      const tabs = findTabs();
 
-    it('renders pagination', () => {
-      expect(findPagination().exists()).toBe(true);
-    });
-
-    it('provides workspaces data to the workspaces table', () => {
-      expect(findTable(wrapper).props('workspaces')).toEqual(
-        populateWorkspacesWithProjectDetails(
-          USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.nodes,
-          GET_PROJECTS_DETAILS_QUERY_RESULT.data.projects.nodes,
-        ),
-      );
+      expect(tabs.exists()).toBe(true);
+      expect(tabs).toHaveLength(2);
+      expect(tabs.at(0).props('tabName')).toEqual('active');
+      expect(tabs.at(1).props('tabName')).toEqual('terminated');
     });
 
     it('does not call log error', () => {
@@ -126,28 +115,9 @@ describe('workspaces/user/pages/list.vue', () => {
     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 };
-
-        createWrapper();
-
-        await waitForPromises();
-
-        expect(userWorkspacesListQueryHandler).toHaveBeenCalledTimes(1);
-
-        findPagination().vm.$emit('input', pageVariables);
-
-        await waitForPromises();
-
-        expect(userWorkspacesListQueryHandler).toHaveBeenCalledTimes(2);
-        expect(userWorkspacesListQueryHandler).toHaveBeenLastCalledWith(pageVariables);
-      });
-    });
   });
 
-  describe('when workspace table emits updateFailed event', () => {
+  describe('when workspace tab emits updateFailed event', () => {
     const error = 'Failed to stop workspace';
 
     beforeEach(async () => {
@@ -163,7 +133,7 @@ describe('workspaces/user/pages/list.vue', () => {
       expect(findAlert().text()).toBe(error);
     });
 
-    describe('when workspace table emits updateSucceed event', () => {
+    describe('when workspace tab emits updateSucceed event', () => {
       it('dismisses the previous update error', async () => {
         expect(findAlert().text()).toBe(error);
 
@@ -176,10 +146,52 @@ describe('workspaces/user/pages/list.vue', () => {
     });
   });
 
+  describe('when workspace tab emits onPaginationInput event', () => {
+    const EXPECTED_ACTIVE_WORKSPACES_PAGINATION_VARIABLES = {
+      first: 10,
+      activeAfter: 'end',
+    };
+    const EXPECTED_TERMINATED_WORKSPACES_PAGINATION_VARIABLES = {
+      first: 10,
+      terminatedAfter: 'end',
+    };
+
+    it.each`
+      tabName         | tabIdx | expectedPaginationVariables
+      ${'active'}     | ${0}   | ${EXPECTED_ACTIVE_WORKSPACES_PAGINATION_VARIABLES}
+      ${'terminated'} | ${1}   | ${EXPECTED_TERMINATED_WORKSPACES_PAGINATION_VARIABLES}
+    `(
+      'correctly sets pagination variables for $tabName tab',
+      async ({ tabName, tabIdx, expectedPaginationVariables }) => {
+        const pageVariables = { after: 'end', first: 10 };
+
+        createWrapper();
+
+        await waitForPromises();
+
+        expect(userWorkspacesTabListQueryHandler).toHaveBeenCalledTimes(1);
+
+        const workspaceTab = findTabs().at(tabIdx);
+
+        workspaceTab.vm.$emit('onPaginationInput', {
+          tab: tabName,
+          paginationVariables: pageVariables,
+        });
+
+        await nextTick();
+
+        expect(userWorkspacesTabListQueryHandler).toHaveBeenCalledTimes(2);
+        expect(userWorkspacesTabListQueryHandler).toHaveBeenLastCalledWith(
+          expectedPaginationVariables,
+        );
+      },
+    );
+  });
+
   describe.each`
-    query                | queryHandlerFactory
-    ${'userWorkspaces'}  | ${() => userWorkspacesListQueryHandler}
-    ${'projectsDetails'} | ${() => getProjectsDetailsQueryHandler}
+    query                      | queryHandlerFactory
+    ${'userWorkspacesTabList'} | ${() => userWorkspacesTabListQueryHandler}
+    ${'projectsDetails'}       | ${() => getProjectsDetailsQueryHandler}
   `('when $query query fails', ({ queryHandlerFactory }) => {
     const ERROR = new Error('Something bad!');
 
@@ -193,10 +205,6 @@ describe('workspaces/user/pages/list.vue', () => {
       await waitForPromises();
     });
 
-    it('does not render table', () => {
-      expect(findTable().exists()).toBe(false);
-    });
-
     it('logs error', () => {
       expect(logError).toHaveBeenCalledWith(ERROR);
     });
@@ -222,6 +230,7 @@ describe('workspaces/user/pages/list.vue', () => {
 
       await waitForPromises();
     });
+
     it('displays a link button that navigates to the create workspace page', () => {
       expect(findNewWorkspaceButton().attributes().to).toBe(ROUTES.new);
       expect(findNewWorkspaceButton().text()).toMatch(/New workspace/);
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 35bebb41c732bb..e2dbe2c0e6a5ea 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -51203,6 +51203,9 @@ msgstr ""
 msgid "Status checks must pass."
 msgstr ""
 
+msgid "Status not supported"
+msgstr ""
+
 msgid "Status was retried."
 msgstr ""
 
@@ -60289,6 +60292,9 @@ msgstr ""
 msgid "Workspaces|A workspace is a virtual sandbox environment for your code in GitLab."
 msgstr ""
 
+msgid "Workspaces|Active"
+msgstr ""
+
 msgid "Workspaces|Agents connect workspaces to your Kubernetes cluster. To create a workspace with an allowed agent, group members must have at least the Developer role."
 msgstr ""
 
@@ -60379,6 +60385,12 @@ msgstr ""
 msgid "Workspaces|New workspace"
 msgstr ""
 
+msgid "Workspaces|No active workspaces to show."
+msgstr ""
+
+msgid "Workspaces|No terminated workspaces to show."
+msgstr ""
+
 msgid "Workspaces|Path to devfile"
 msgstr ""
 
-- 
GitLab


From be1a4cae09cabc68fde60d34e4fdc420af845b88 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 16 May 2024 13:48:11 -0400
Subject: [PATCH 04/16] Show toast on successful workspace termination

Show toast when workspace is successfully terminated by comparing previous and updated query results.
---
 .../workspaces/common/services/utils.js       |  13 ++
 .../user/init_user_workspaces_app.js          |   2 +
 .../workspaces/user/pages/list.vue            |  16 +-
 .../workspaces/common/services/utils_spec.js  | 141 +++++++++++++++++-
 locale/gitlab.pot                             |   3 +
 5 files changed, 173 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/services/utils.js b/ee/app/assets/javascripts/workspaces/common/services/utils.js
index 7bbb9873cf9407..47045e5eebf9c2 100644
--- a/ee/app/assets/javascripts/workspaces/common/services/utils.js
+++ b/ee/app/assets/javascripts/workspaces/common/services/utils.js
@@ -1,4 +1,16 @@
 import getProjectsDetailsQuery from '../graphql/queries/get_projects_details.query.graphql';
+import { WORKSPACE_STATES } from '../constants';
+
+export function getSuccessfullyTerminatedWorkspaces(prevWorkspaces, updatedWorkspaces) {
+  const updatedWorkspacesIds = new Set(updatedWorkspaces.map((workspace) => workspace.id));
+  const terminatedWorkspaces = prevWorkspaces.filter(
+    (workspace) =>
+      workspace.actualState !== WORKSPACE_STATES.terminated &&
+      workspace.desiredState === WORKSPACE_STATES.terminated &&
+      !updatedWorkspacesIds.has(workspace.id),
+  );
+  return terminatedWorkspaces;
+}
 
 export const populateWorkspacesWithProjectDetails = (workspaces, projects) => {
   return workspaces.map((workspace) => {
@@ -10,6 +22,7 @@ export const populateWorkspacesWithProjectDetails = (workspaces, projects) => {
     };
   });
 };
+
 export const fetchProjectsDetails = async (apollo, workspaces) => {
   const projectIds = workspaces.map(({ projectId }) => projectId);
 
diff --git a/ee/app/assets/javascripts/workspaces/user/init_user_workspaces_app.js b/ee/app/assets/javascripts/workspaces/user/init_user_workspaces_app.js
index 942d5e56d3b23e..9443ab2258883b 100644
--- a/ee/app/assets/javascripts/workspaces/user/init_user_workspaces_app.js
+++ b/ee/app/assets/javascripts/workspaces/user/init_user_workspaces_app.js
@@ -1,3 +1,4 @@
+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
@@ -8,6 +9,7 @@ import App from './pages/app.vue';
 import createRouter from './router/index';
 
 Vue.use(VueApollo);
+Vue.use(GlToast);
 
 const createApolloProvider = () => {
   const defaultClient = createDefaultClient();
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 23953cb7d9dcac..8c08220ef0b317 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -2,7 +2,7 @@
 <script>
 import { GlButton, GlTabs } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
-import { s__ } from '~/locale';
+import { sprintf, s__ } from '~/locale';
 import {
   ROUTES,
   I18N_LOADING_WORKSPACES_FAILED,
@@ -12,6 +12,7 @@ import {
 import {
   fetchProjectsDetails,
   populateWorkspacesWithProjectDetails,
+  getSuccessfullyTerminatedWorkspaces,
 } from '../../common/services/utils';
 import userWorkspacesTabListQuery from '../../common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import BaseWorkspacesList from '../../common/components/workspaces_list/base_workspaces_list.vue';
@@ -59,8 +60,21 @@ export default {
         };
       },
       update(data) {
+        const prevActiveWorkspaces = this.active.workspaces;
         const { activeWorkspaces, terminatedWorkspaces } = data.currentUser;
 
+        const successTerminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
+          prevActiveWorkspaces,
+          activeWorkspaces?.nodes,
+        );
+        successTerminatedWorkspaces.forEach((workspace) => {
+          this.$toast.show(
+            sprintf(s__('Workspaces|%{workspaceName} has been terminated.'), {
+              workspaceName: workspace.name,
+            }),
+          );
+        });
+
         this.active.workspaces = activeWorkspaces?.nodes || [];
         this.terminated.workspaces = terminatedWorkspaces?.nodes || [];
         this.active.pageInfo = activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo;
diff --git a/ee/spec/frontend/workspaces/common/services/utils_spec.js b/ee/spec/frontend/workspaces/common/services/utils_spec.js
index 096c4aaa1c75b6..a35a9e633314e5 100644
--- a/ee/spec/frontend/workspaces/common/services/utils_spec.js
+++ b/ee/spec/frontend/workspaces/common/services/utils_spec.js
@@ -1,4 +1,8 @@
-import { populateWorkspacesWithProjectDetails } from 'ee/workspaces/common/services/utils';
+import {
+  populateWorkspacesWithProjectDetails,
+  getSuccessfullyTerminatedWorkspaces,
+} from 'ee/workspaces/common/services/utils';
+import { WORKSPACE_STATES } from 'ee/workspaces/common/constants';
 
 describe('ee/workspaces/common/services/utils', () => {
   describe('populateWorkspacesWithProjectDetails', () => {
@@ -48,4 +52,139 @@ describe('ee/workspaces/common/services/utils', () => {
       });
     });
   });
+
+  function createMockWorkspaceNode({ id, name, desiredState, actualState }) {
+    return {
+      __typename: 'Workspace',
+      id,
+      name,
+      namespace: 'gl-rd-ns-5-1-rj76fr',
+      projectId: 'gid://gitlab/Project/3',
+      desiredState,
+      actualState,
+      url:
+        'https://60001-workspace-5-1-rj76fr.workspaces.localdev.me?folder=%2Fprojects%2Fgitlab-shell',
+      devfileRef: 'main',
+      devfilePath: '.devfile.yaml',
+      devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
+      createdAt: '2024-05-16T17:15:24Z',
+    };
+  }
+
+  describe('getSuccessfullyTerminatedWorkspaces', () => {
+    it('correctly returns successfully terminated workspaces', () => {
+      const MOCK_TERMINATED_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '1',
+          name: '1',
+          desiredState: WORKSPACE_STATES.terminated,
+          actualState: WORKSPACE_STATES.running,
+        }),
+        createMockWorkspaceNode({
+          id: '3',
+          name: '3',
+          desiredState: WORKSPACE_STATES.terminated,
+          actualState: WORKSPACE_STATES.stopped,
+        }),
+      ];
+      const MOCK_PREV_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '2',
+          name: '2',
+          desiredState: WORKSPACE_STATES.stopped,
+          actualState: WORKSPACE_STATES.running,
+        }),
+        ...MOCK_TERMINATED_WORKSPACES,
+      ];
+
+      const MOCK_UPDATED_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '2',
+          name: '2',
+          desiredState: WORKSPACE_STATES.stopped,
+          actualState: WORKSPACE_STATES.running,
+        }),
+      ];
+
+      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
+        MOCK_PREV_WORKSPACES,
+        MOCK_UPDATED_WORKSPACES,
+      );
+      expect(terminatedWorkspaces).toHaveLength(2);
+      expect(terminatedWorkspaces).toStrictEqual(MOCK_TERMINATED_WORKSPACES);
+    });
+
+    it('correctly returns terminated workspaces when a worksplace is created at the same time', () => {
+      const MOCK_TERMINATED_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '1',
+          name: '1',
+          desiredState: WORKSPACE_STATES.terminated,
+          actualState: WORKSPACE_STATES.running,
+        }),
+      ];
+      const MOCK_PREV_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '2',
+          name: '2',
+          desiredState: WORKSPACE_STATES.stopped,
+          actualState: WORKSPACE_STATES.running,
+        }),
+        ...MOCK_TERMINATED_WORKSPACES,
+      ];
+
+      const MOCK_UPDATED_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '2',
+          name: '2',
+          desiredState: WORKSPACE_STATES.stopped,
+          actualState: WORKSPACE_STATES.running,
+        }),
+        createMockWorkspaceNode({
+          id: '3',
+          name: '3',
+          desiredState: WORKSPACE_STATES.running,
+          actualState: WORKSPACE_STATES.starting,
+        }),
+      ];
+      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
+        MOCK_PREV_WORKSPACES,
+        MOCK_UPDATED_WORKSPACES,
+      );
+      expect(terminatedWorkspaces).toHaveLength(1);
+      expect(terminatedWorkspaces).toStrictEqual(MOCK_TERMINATED_WORKSPACES);
+    });
+
+    it('does not treat pagination updates as terminated workspaces', () => {
+      const MOCK_PREV_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '1',
+          name: '1',
+          desiredState: WORKSPACE_STATES.running,
+          actualState: WORKSPACE_STATES.running,
+        }),
+        createMockWorkspaceNode({
+          id: '2',
+          name: '2',
+          desiredState: WORKSPACE_STATES.stopped,
+          actualState: WORKSPACE_STATES.running,
+        }),
+      ];
+
+      const MOCK_UPDATED_WORKSPACES = [
+        createMockWorkspaceNode({
+          id: '3',
+          name: '3',
+          desiredState: WORKSPACE_STATES.running,
+          actualState: WORKSPACE_STATES.starting,
+        }),
+      ];
+
+      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
+        MOCK_PREV_WORKSPACES,
+        MOCK_UPDATED_WORKSPACES,
+      );
+      expect(terminatedWorkspaces).toHaveLength(0);
+    });
+  });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e2dbe2c0e6a5ea..ddd2bc82fd00d9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -60286,6 +60286,9 @@ msgstr ""
 msgid "Workspaces"
 msgstr ""
 
+msgid "Workspaces|%{workspaceName} has been terminated."
+msgstr ""
+
 msgid "Workspaces|A devfile defines the development environment for a GitLab project. A workspace must have a valid devfile in the Git reference you use."
 msgstr ""
 
-- 
GitLab


From e501d82654f9f143e0d07770030ba8f70e6cde94 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 24 May 2024 09:24:38 -0400
Subject: [PATCH 05/16] Update workspaces user router specs

---
 ee/spec/frontend/workspaces/user/router/index_spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ee/spec/frontend/workspaces/user/router/index_spec.js b/ee/spec/frontend/workspaces/user/router/index_spec.js
index 3acf45dcd1f966..5f6b97eeebc0cc 100644
--- a/ee/spec/frontend/workspaces/user/router/index_spec.js
+++ b/ee/spec/frontend/workspaces/user/router/index_spec.js
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router';
 import VueApollo from 'vue-apollo';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import getProjectsDetailsQuery from 'ee/workspaces/common/graphql/queries/get_projects_details.query.graphql';
-import userWorkspacesListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_list.query.graphql';
+import userWorkspacesTabListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import App from 'ee/workspaces/user/pages/app.vue';
 import WorkspacesList from 'ee/workspaces/user/pages/list.vue';
 import createRouter from 'ee/workspaces/user/router/index';
@@ -12,7 +12,7 @@ import { ROUTES } from 'ee/workspaces/user/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
   GET_PROJECTS_DETAILS_QUERY_RESULT,
-  USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT,
+  USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT,
 } from '../../mock_data';
 
 Vue.use(VueRouter);
@@ -42,8 +42,8 @@ describe('workspaces/router/index.js', () => {
       router,
       apolloProvider: createMockApollo([
         [
-          userWorkspacesListQuery,
-          jest.fn().mockResolvedValue(USER_WORKSPACES_LIST_QUERY_EMPTY_RESULT),
+          userWorkspacesTabListQuery,
+          jest.fn().mockResolvedValue(USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT),
         ],
         [
           getProjectsDetailsQuery,
-- 
GitLab


From 386ff615d0f6801ea287db6a12e2b2dd0b376c70 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 18 Jun 2024 13:48:09 -0400
Subject: [PATCH 06/16] Update workspace actions E2E tests

---
 .../common/components/workspace_tab.vue       |  7 ++++++-
 qa/qa/ee/page/workspace/list.rb               | 19 ++++++++++++++++++-
 ...and_terminate_workspace_shared_examples.rb |  7 ++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
index c3ebc908f594c6..bbac27a669ded4 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
@@ -80,7 +80,11 @@ export default {
 };
 </script>
 <template>
-  <gl-tab :title="$options.getTabTitle(tabName)" :query-param-value="tabName">
+  <gl-tab
+    :data-testid="`workspace-tab-${tabName}`"
+    :title="$options.getTabTitle(tabName)"
+    :query-param-value="tabName"
+  >
     <div v-if="loading" class="gl-p-5 gl-display-flex gl-justify-content-left">
       <gl-skeleton-loader :lines="4" :equal-width-lines="true" :width="600" />
     </div>
@@ -95,6 +99,7 @@ export default {
 
       <div v-else>
         <workspaces-table
+          data-testid="workspace-list-item"
           :workspaces="workspaces"
           @updateFailed="onUpdateFailed"
           @updateSucceed="clearError"
diff --git a/qa/qa/ee/page/workspace/list.rb b/qa/qa/ee/page/workspace/list.rb
index 12def2374a9796..a3fb895e0283b3 100644
--- a/qa/qa/ee/page/workspace/list.rb
+++ b/qa/qa/ee/page/workspace/list.rb
@@ -26,6 +26,8 @@ def has_empty_workspace?
           end
 
           def create_workspace(agent, project)
+            existing_workspaces = get_workspaces_list
+
             if has_empty_workspace?
               click_element('new-workspace-button', skip_finished_loading_check: true)
             else
@@ -38,7 +40,22 @@ def create_workspace(agent, project)
               new.add_new_variable('VAR1', 'value 1')
               new.save_workspace
             end
-            Support::WaitForRequests.wait_for_requests(skip_finished_loading_check: true)
+
+            Support::Waiter.wait_until(max_duration: 5, raise_on_failure: false) do
+              get_workspaces_list.length > existing_workspaces.length
+            end
+
+            updated_workspaces = get_workspaces_list
+
+            workspace_name = (updated_workspaces - existing_workspaces).fetch(0, '').to_s
+
+            raise "Workspace name is empty" if workspace_name == ''
+
+            workspace_name
+          end
+
+          def click_terminated_tab
+            find('a[role="tab"]', text: "Terminated", exact_text: true).click
           end
 
           def get_workspaces_list
diff --git a/qa/qa/specs/features/shared_examples/create_and_terminate_workspace_shared_examples.rb b/qa/qa/specs/features/shared_examples/create_and_terminate_workspace_shared_examples.rb
index 7a9a485d6112e5..b4313e3873f25f 100644
--- a/qa/qa/specs/features/shared_examples/create_and_terminate_workspace_shared_examples.rb
+++ b/qa/qa/specs/features/shared_examples/create_and_terminate_workspace_shared_examples.rb
@@ -7,11 +7,7 @@ module QA
       workspace_name = ""
 
       QA::EE::Page::Workspace::List.perform do |list|
-        existing_workspaces = list.get_workspaces_list
-        list.create_workspace(kubernetes_agent.name, devfile_project.name)
-        updated_workspaces = list.get_workspaces_list
-        workspace_name = (updated_workspaces - existing_workspaces).fetch(0, '').to_s
-        raise "Workspace name is empty" if workspace_name == ''
+        workspace_name = list.create_workspace(kubernetes_agent.name, devfile_project.name)
 
         expect(list).to have_workspace_state(workspace_name, "Creating")
         list.wait_for_workspaces_creation(workspace_name)
@@ -31,6 +27,7 @@ module QA
       end
 
       QA::EE::Page::Workspace::List.perform do |list_item|
+        list_item.click_terminated_tab
         expect(list_item).to have_workspace_state(workspace_name, "Terminated")
       end
     end
-- 
GitLab


From 9c78a0728dde56a070ead5dd3e65ba0a800dabe8 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 19 Jun 2024 14:18:37 -0400
Subject: [PATCH 07/16] Fix terminated workspace toast appearing on different
 pages

---
 .../workspaces/common/services/utils.js       |  21 ++-
 .../workspaces/user/pages/list.vue            |  14 +-
 .../workspaces/common/services/utils_spec.js  | 159 ++++++------------
 .../frontend/workspaces/mock_data/index.js    |   4 +
 .../workspaces/user/pages/list_spec.js        |   4 +-
 5 files changed, 78 insertions(+), 124 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/services/utils.js b/ee/app/assets/javascripts/workspaces/common/services/utils.js
index 47045e5eebf9c2..e9bf74617cf457 100644
--- a/ee/app/assets/javascripts/workspaces/common/services/utils.js
+++ b/ee/app/assets/javascripts/workspaces/common/services/utils.js
@@ -1,14 +1,23 @@
 import getProjectsDetailsQuery from '../graphql/queries/get_projects_details.query.graphql';
-import { WORKSPACE_STATES } from '../constants';
 
-export function getSuccessfullyTerminatedWorkspaces(prevWorkspaces, updatedWorkspaces) {
-  const updatedWorkspacesIds = new Set(updatedWorkspaces.map((workspace) => workspace.id));
+export function getSuccessfullyTerminatedWorkspaces(
+  prevWorkspaces,
+  updatedActiveWorkspaces,
+  updatedTerminatedWorkspaces,
+) {
+  const updatedActiveWorkspacesIds = new Set(
+    updatedActiveWorkspaces.map((workspace) => workspace.id),
+  );
+  const updatedTerminatedWorkspacesIds = new Set(
+    updatedTerminatedWorkspaces.map((workspace) => workspace.id),
+  );
+
   const terminatedWorkspaces = prevWorkspaces.filter(
     (workspace) =>
-      workspace.actualState !== WORKSPACE_STATES.terminated &&
-      workspace.desiredState === WORKSPACE_STATES.terminated &&
-      !updatedWorkspacesIds.has(workspace.id),
+      !updatedActiveWorkspacesIds.has(workspace.id) &&
+      updatedTerminatedWorkspacesIds.has(workspace.id),
   );
+
   return terminatedWorkspaces;
 }
 
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 8c08220ef0b317..7dc500d373e835 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -66,6 +66,7 @@ export default {
         const successTerminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
           prevActiveWorkspaces,
           activeWorkspaces?.nodes,
+          terminatedWorkspaces?.nodes,
         );
         successTerminatedWorkspaces.forEach((workspace) => {
           this.$toast.show(
@@ -75,11 +76,14 @@ export default {
           );
         });
 
-        this.active.workspaces = activeWorkspaces?.nodes || [];
-        this.terminated.workspaces = terminatedWorkspaces?.nodes || [];
-        this.active.pageInfo = activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo;
-        this.terminated.pageInfo =
-          terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo;
+        this.active = {
+          workspaces: activeWorkspaces?.nodes || [],
+          pageInfo: activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
+        };
+        this.terminated = {
+          workspaces: terminatedWorkspaces?.nodes || [],
+          pageInfo: terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
+        };
       },
       error(err) {
         logError(err);
diff --git a/ee/spec/frontend/workspaces/common/services/utils_spec.js b/ee/spec/frontend/workspaces/common/services/utils_spec.js
index a35a9e633314e5..e7f6b2b2706ff8 100644
--- a/ee/spec/frontend/workspaces/common/services/utils_spec.js
+++ b/ee/spec/frontend/workspaces/common/services/utils_spec.js
@@ -2,7 +2,6 @@ import {
   populateWorkspacesWithProjectDetails,
   getSuccessfullyTerminatedWorkspaces,
 } from 'ee/workspaces/common/services/utils';
-import { WORKSPACE_STATES } from 'ee/workspaces/common/constants';
 
 describe('ee/workspaces/common/services/utils', () => {
   describe('populateWorkspacesWithProjectDetails', () => {
@@ -53,137 +52,75 @@ describe('ee/workspaces/common/services/utils', () => {
     });
   });
 
-  function createMockWorkspaceNode({ id, name, desiredState, actualState }) {
+  function createMockWorkspaceNode({ id, name }) {
     return {
-      __typename: 'Workspace',
       id,
       name,
-      namespace: 'gl-rd-ns-5-1-rj76fr',
-      projectId: 'gid://gitlab/Project/3',
-      desiredState,
-      actualState,
-      url:
-        'https://60001-workspace-5-1-rj76fr.workspaces.localdev.me?folder=%2Fprojects%2Fgitlab-shell',
-      devfileRef: 'main',
-      devfilePath: '.devfile.yaml',
-      devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
-      createdAt: '2024-05-16T17:15:24Z',
     };
   }
 
   describe('getSuccessfullyTerminatedWorkspaces', () => {
-    it('correctly returns successfully terminated workspaces', () => {
-      const MOCK_TERMINATED_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '1',
-          name: '1',
-          desiredState: WORKSPACE_STATES.terminated,
-          actualState: WORKSPACE_STATES.running,
-        }),
-        createMockWorkspaceNode({
-          id: '3',
-          name: '3',
-          desiredState: WORKSPACE_STATES.terminated,
-          actualState: WORKSPACE_STATES.stopped,
-        }),
-      ];
-      const MOCK_PREV_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '2',
-          name: '2',
-          desiredState: WORKSPACE_STATES.stopped,
-          actualState: WORKSPACE_STATES.running,
-        }),
-        ...MOCK_TERMINATED_WORKSPACES,
-      ];
+    const MOCK_TERMINATED_WORKSPACES = [
+      createMockWorkspaceNode({
+        id: '1',
+        name: '1',
+      }),
+      createMockWorkspaceNode({
+        id: '3',
+        name: '3',
+      }),
+    ];
+    const MOCK_ACTIVE_WORKSPACES = [
+      createMockWorkspaceNode({
+        id: '4',
+        name: '4',
+      }),
+    ];
+    const MOCK_WORKSPACE = createMockWorkspaceNode({
+      id: '2',
+      name: '2',
+    });
 
-      const MOCK_UPDATED_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '2',
-          name: '2',
-          desiredState: WORKSPACE_STATES.stopped,
-          actualState: WORKSPACE_STATES.running,
-        }),
-      ];
+    it('returns the succesfully terminated workspaces', () => {
+      const mockPrevWorkspaces = [...MOCK_ACTIVE_WORKSPACES, MOCK_WORKSPACE];
+      const mockUpdatedActiveWorkspaces = MOCK_ACTIVE_WORKSPACES;
+      const mockUpdatedTerminatedWorkspaces = [...MOCK_TERMINATED_WORKSPACES, MOCK_WORKSPACE];
 
       const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        MOCK_PREV_WORKSPACES,
-        MOCK_UPDATED_WORKSPACES,
+        mockPrevWorkspaces,
+        mockUpdatedActiveWorkspaces,
+        mockUpdatedTerminatedWorkspaces,
       );
-      expect(terminatedWorkspaces).toHaveLength(2);
-      expect(terminatedWorkspaces).toStrictEqual(MOCK_TERMINATED_WORKSPACES);
+
+      expect(terminatedWorkspaces).toHaveLength(1);
+      expect(terminatedWorkspaces).toStrictEqual([MOCK_WORKSPACE]);
     });
 
-    it('correctly returns terminated workspaces when a worksplace is created at the same time', () => {
-      const MOCK_TERMINATED_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '1',
-          name: '1',
-          desiredState: WORKSPACE_STATES.terminated,
-          actualState: WORKSPACE_STATES.running,
-        }),
-      ];
-      const MOCK_PREV_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '2',
-          name: '2',
-          desiredState: WORKSPACE_STATES.stopped,
-          actualState: WORKSPACE_STATES.running,
-        }),
-        ...MOCK_TERMINATED_WORKSPACES,
-      ];
+    it('does not treat new active workspaces as successfully terminated', () => {
+      const mockPrevWorkspaces = MOCK_ACTIVE_WORKSPACES;
+      const mockUpdatedActiveWorkspaces = [...MOCK_ACTIVE_WORKSPACES, MOCK_WORKSPACE];
+      const mockUpdatedTerminatedWorkspaces = MOCK_TERMINATED_WORKSPACES;
 
-      const MOCK_UPDATED_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '2',
-          name: '2',
-          desiredState: WORKSPACE_STATES.stopped,
-          actualState: WORKSPACE_STATES.running,
-        }),
-        createMockWorkspaceNode({
-          id: '3',
-          name: '3',
-          desiredState: WORKSPACE_STATES.running,
-          actualState: WORKSPACE_STATES.starting,
-        }),
-      ];
       const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        MOCK_PREV_WORKSPACES,
-        MOCK_UPDATED_WORKSPACES,
+        mockPrevWorkspaces,
+        mockUpdatedActiveWorkspaces,
+        mockUpdatedTerminatedWorkspaces,
       );
-      expect(terminatedWorkspaces).toHaveLength(1);
-      expect(terminatedWorkspaces).toStrictEqual(MOCK_TERMINATED_WORKSPACES);
-    });
 
-    it('does not treat pagination updates as terminated workspaces', () => {
-      const MOCK_PREV_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '1',
-          name: '1',
-          desiredState: WORKSPACE_STATES.running,
-          actualState: WORKSPACE_STATES.running,
-        }),
-        createMockWorkspaceNode({
-          id: '2',
-          name: '2',
-          desiredState: WORKSPACE_STATES.stopped,
-          actualState: WORKSPACE_STATES.running,
-        }),
-      ];
+      expect(terminatedWorkspaces).toHaveLength(0);
+    });
 
-      const MOCK_UPDATED_WORKSPACES = [
-        createMockWorkspaceNode({
-          id: '3',
-          name: '3',
-          desiredState: WORKSPACE_STATES.running,
-          actualState: WORKSPACE_STATES.starting,
-        }),
-      ];
+    it('does not return already terminated workspaces', () => {
+      const mockPrevWorkspaces = MOCK_ACTIVE_WORKSPACES;
+      const mockUpdatedActiveWorkspaces = MOCK_ACTIVE_WORKSPACES;
+      const mockUpdatedTerminatedWorkspaces = [...MOCK_TERMINATED_WORKSPACES, MOCK_WORKSPACE];
 
       const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        MOCK_PREV_WORKSPACES,
-        MOCK_UPDATED_WORKSPACES,
+        mockPrevWorkspaces,
+        mockUpdatedActiveWorkspaces,
+        mockUpdatedTerminatedWorkspaces,
       );
+
       expect(terminatedWorkspaces).toHaveLength(0);
     });
   });
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index d88353055f8a8f..39122d05e34a4f 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -98,6 +98,7 @@ export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-04-29T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
           {
             __typename: 'Workspace',
@@ -112,6 +113,7 @@ export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-05-01T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
         ],
         pageInfo: {
@@ -136,6 +138,7 @@ export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-04-29T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
           {
             __typename: 'Workspace',
@@ -150,6 +153,7 @@ export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-05-01T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
         ],
         pageInfo: {
diff --git a/ee/spec/frontend/workspaces/user/pages/list_spec.js b/ee/spec/frontend/workspaces/user/pages/list_spec.js
index 5f8577eb9777d5..74c0514e3c29e8 100644
--- a/ee/spec/frontend/workspaces/user/pages/list_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/list_spec.js
@@ -117,7 +117,7 @@ describe('workspaces/user/pages/list.vue', () => {
     });
   });
 
-  describe('when workspace tab emits updateFailed event', () => {
+  describe('when workspace table emits updateFailed event', () => {
     const error = 'Failed to stop workspace';
 
     beforeEach(async () => {
@@ -133,7 +133,7 @@ describe('workspaces/user/pages/list.vue', () => {
       expect(findAlert().text()).toBe(error);
     });
 
-    describe('when workspace tab emits updateSucceed event', () => {
+    describe('when workspace table emits updateSucceed event', () => {
       it('dismisses the previous update error', async () => {
         expect(findAlert().text()).toBe(error);
 
-- 
GitLab


From bb7ec16c9badce0a73fe85a34bf22c0e6a5b68f4 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 28 Jun 2024 12:17:28 -0400
Subject: [PATCH 08/16] Update query on create workspace success

---
 .../user/services/apollo_cache_mutators.js    | 14 ++++++---
 .../workspaces/user/pages/create_spec.js      | 30 +++++++++++--------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/user/services/apollo_cache_mutators.js b/ee/app/assets/javascripts/workspaces/user/services/apollo_cache_mutators.js
index 1baa97ef0ec923..20972cc8fafdf2 100644
--- a/ee/app/assets/javascripts/workspaces/user/services/apollo_cache_mutators.js
+++ b/ee/app/assets/javascripts/workspaces/user/services/apollo_cache_mutators.js
@@ -1,12 +1,18 @@
 import produce from 'immer';
-import userWorkspacesListQuery from '../../common/graphql/queries/user_workspaces_list.query.graphql';
+import userWorkspacesTabListQuery from '../../common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import { WORKSPACES_LIST_PAGE_SIZE } from '../constants';
 
 export const addWorkspace = (store, workspace) => {
   store.updateQuery(
     {
-      query: userWorkspacesListQuery,
-      variables: { after: null, before: null, first: WORKSPACES_LIST_PAGE_SIZE },
+      query: userWorkspacesTabListQuery,
+      variables: {
+        first: WORKSPACES_LIST_PAGE_SIZE,
+        activeAfter: null,
+        activeBefore: null,
+        terminatedAfter: null,
+        terminatedBefore: null,
+      },
     },
     (sourceData) =>
       produce(sourceData, (draftData) => {
@@ -15,7 +21,7 @@ export const addWorkspace = (store, workspace) => {
           return;
         }
 
-        draftData.currentUser.workspaces.nodes.unshift(workspace);
+        draftData.currentUser.activeWorkspaces.nodes.unshift(workspace);
       }),
   );
 };
diff --git a/ee/spec/frontend/workspaces/user/pages/create_spec.js b/ee/spec/frontend/workspaces/user/pages/create_spec.js
index 4f8e52a4677960..99a9ec9c743eb5 100644
--- a/ee/spec/frontend/workspaces/user/pages/create_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/create_spec.js
@@ -31,11 +31,11 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { logError } from '~/lib/logger';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import userWorkspacesListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_list.query.graphql';
+import userWorkspacesTabListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import workspaceCreateMutation from 'ee/workspaces/user/graphql/mutations/workspace_create.mutation.graphql';
 import {
   GET_PROJECT_DETAILS_QUERY_RESULT,
-  USER_WORKSPACES_LIST_QUERY_RESULT,
+  USER_WORKSPACES_TAB_LIST_QUERY_RESULT,
   WORKSPACE_CREATE_MUTATION_RESULT,
   WORKSPACE_QUERY_RESULT,
 } from '../../mock_data';
@@ -74,32 +74,37 @@ describe('workspaces/user/pages/create.vue', () => {
   const readCachedWorkspaces = () => {
     const apolloClient = mockApollo.clients.defaultClient;
     const result = apolloClient.readQuery({
-      query: userWorkspacesListQuery,
+      query: userWorkspacesTabListQuery,
       variables: {
-        before: null,
-        after: null,
+        activeBefore: null,
+        activeAfter: null,
+        terminatedBefore: null,
+        terminatedAfter: null,
         first: WORKSPACES_LIST_PAGE_SIZE,
       },
     });
 
-    return result?.currentUser.workspaces.nodes;
+    return result?.currentUser.activeWorkspaces.nodes;
   };
 
   const writeCachedWorkspaces = (workspaces) => {
     const apolloClient = mockApollo.clients.defaultClient;
     apolloClient.writeQuery({
-      query: userWorkspacesListQuery,
+      query: userWorkspacesTabListQuery,
       variables: {
-        before: null,
-        after: null,
+        activeBefore: null,
+        activeAfter: null,
+        terminatedBefore: null,
+        terminatedAfter: null,
         first: WORKSPACES_LIST_PAGE_SIZE,
       },
       data: {
         currentUser: {
-          ...USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser,
-          workspaces: {
+          ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser,
+          activeWorkspaces: {
             nodes: workspaces,
-            pageInfo: USER_WORKSPACES_LIST_QUERY_RESULT.data.currentUser.workspaces.pageInfo,
+            pageInfo:
+              USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces.pageInfo,
           },
         },
       },
@@ -425,6 +430,7 @@ describe('workspaces/user/pages/create.vue', () => {
 
         it('when workspaces are previously cached, updates cache', async () => {
           const originalWorkspace = WORKSPACE_QUERY_RESULT.data.workspace;
+
           writeCachedWorkspaces([originalWorkspace]);
 
           await submitCreateWorkspaceForm();
-- 
GitLab


From fb1aff078d12df6ab62b6d01f9fdcf2991506387 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 28 Jun 2024 15:37:44 -0400
Subject: [PATCH 09/16] Fix empty state flashing

---
 .../workspaces_list/base_workspaces_list.vue       |  7 ++++++-
 .../javascripts/workspaces/user/pages/list.vue     |  4 ++--
 .../workspaces_list/base_workspaces_list_spec.js   | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
index c1f69caf3376be..f63c0406778ae4 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/base_workspaces_list.vue
@@ -32,6 +32,11 @@ export default {
       required: false,
       default: '',
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     clearError() {
@@ -47,7 +52,7 @@ export default {
     <gl-alert v-if="error" variant="danger" @dismiss="clearError">
       {{ error }}
     </gl-alert>
-    <workspace-empty-state v-if="empty" :new-workspace-path="newWorkspacePath" />
+    <workspace-empty-state v-if="!loading && empty" :new-workspace-path="newWorkspacePath" />
     <template v-else>
       <div
         data-testid="workspaces-list-header"
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 7dc500d373e835..5fa9a343c2fb18 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -138,7 +138,7 @@ export default {
       return [...this.active.workspaces, ...this.terminated.workspaces];
     },
     isEmpty() {
-      return !this.workspaces.length && !this.isLoading;
+      return !this.workspaces.length;
     },
     isLoading() {
       return this.$apollo.loading;
@@ -181,7 +181,7 @@ export default {
       </gl-button>
     </template>
     <template #workspaces-list>
-      <gl-tabs sync-active-tab-with-query-params>
+      <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
         <workspace-tab
           tab-name="active"
           :loading="isLoading"
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
index 3a6c51fcd756ec..125a4c12f4135f 100644
--- a/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/base_workspaces_list_spec.js
@@ -24,6 +24,20 @@ describe('workspaces/common/components/workspaces_list/base_workspaces_list.vue'
     );
   }
 
+  describe('is loading', () => {
+    beforeEach(() => {
+      createWrapper({
+        empty: true,
+        loading: true,
+      });
+    });
+
+    it('does not render empty state', () => {
+      const emptyState = wrapper.findComponent(WorkspaceEmptyState);
+      expect(emptyState.exists()).toBe(false);
+    });
+  });
+
   describe('is empty', () => {
     beforeEach(() => {
       createWrapper();
-- 
GitLab


From 81917d7b054adb6583a00c319d6ef354905f0622 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 28 Jun 2024 15:37:17 -0400
Subject: [PATCH 10/16] Workspaces table styling improvements

---
 .../common/components/workspace_tab.vue       |   1 +
 .../workspaces_list/workspaces_table.vue      | 113 ++++++++++--------
 .../workspaces/user/pages/list.vue            |  17 ++-
 .../workspaces/user/pages/list_spec.js        |   9 +-
 4 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
index bbac27a669ded4..2bac43dd27cd4f 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
@@ -99,6 +99,7 @@ export default {
 
       <div v-else>
         <workspaces-table
+          tabs-mode
           data-testid="workspace-list-item"
           :workspaces="workspaces"
           @updateFailed="onUpdateFailed"
diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index 45595e67d40f5d..3aee1076a1f0d1 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -18,6 +18,51 @@ export const i18n = {
   },
 };
 
+const tableFields = [
+  {
+    key: 'status',
+    /*
+     * The status and action columns in this table
+     * do not have a label in the table header. We
+     * use this zero-width unicode character because
+     * using an empty string breaks the table alignment
+     * in mobile views.
+     */
+    label: '\u200b',
+    thClass: 'gl-w-2/20',
+  },
+  {
+    key: 'name',
+    label: i18n.tableColumnHeaders.name,
+    thClass: 'gl-w-4/20',
+  },
+  {
+    key: 'created',
+    label: i18n.tableColumnHeaders.created,
+    thClass: 'gl-w-2/20',
+  },
+  {
+    key: 'terminates',
+    label: i18n.tableColumnHeaders.terminates,
+    thClass: 'gl-w-2/20',
+  },
+  {
+    key: 'devfile',
+    label: i18n.tableColumnHeaders.devfile,
+    thClass: 'gl-w-3/20',
+  },
+  {
+    key: 'preview',
+    label: i18n.tableColumnHeaders.preview,
+    thClass: 'gl-w-4/20',
+  },
+  {
+    key: 'actions',
+    label: '\u200b',
+    thClass: 'gl-w-3/20',
+  },
+];
+
 export default {
   components: {
     GlTableLite,
@@ -35,6 +80,11 @@ export default {
       type: Array,
       required: true,
     },
+    tabsMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -49,6 +99,18 @@ export default {
     sortedWorkspaces() {
       return [...this.workspaces].sort(this.sortWorkspacesByTerminatedState);
     },
+    tableFields() {
+      return this.tabsMode
+        ? tableFields.map((tableField) => ({
+            ...tableField,
+            // eslint-disable-next-line @gitlab/require-i18n-strings
+            thClass: `${tableField.thClass} gl-border-t-0!`,
+          }))
+        : tableFields;
+    },
+    tableClasses() {
+      return this.tabsMode ? 'gl-mb-5' : 'gl-my-5';
+    },
   },
   methods: {
     devfileRefAndPathDisplay(ref, path) {
@@ -84,50 +146,6 @@ export default {
       return workspace.actualState === WORKSPACE_STATES.terminated;
     },
   },
-  fields: [
-    {
-      key: 'status',
-      /*
-       * The status and action columns in this table
-       * do not have a label in the table header. We
-       * use this zero-width unicode character because
-       * using an empty string breaks the table alignment
-       * in mobile views.
-       */
-      label: '\u200b',
-      thClass: 'gl-w-1/20',
-    },
-    {
-      key: 'name',
-      label: i18n.tableColumnHeaders.name,
-      thClass: 'gl-w-4/20',
-    },
-    {
-      key: 'created',
-      label: i18n.tableColumnHeaders.created,
-      thClass: 'gl-w-2/20',
-    },
-    {
-      key: 'terminates',
-      label: i18n.tableColumnHeaders.terminates,
-      thClass: 'gl-w-2/20',
-    },
-    {
-      key: 'devfile',
-      label: i18n.tableColumnHeaders.devfile,
-      thClass: 'gl-w-4/20',
-    },
-    {
-      key: 'preview',
-      label: i18n.tableColumnHeaders.preview,
-      thClass: 'gl-w-4/20',
-    },
-    {
-      key: 'actions',
-      label: '\u200b',
-      thClass: 'gl-w-4/20',
-    },
-  ],
   i18n,
   WORKSPACE_STATES,
 };
@@ -139,12 +157,13 @@ export default {
   >
     <template #default="{ update }">
       <gl-table-lite
+        fixed
+        stacked="md"
         :items="sortedWorkspaces"
-        stacked="sm"
-        :fields="$options.fields"
+        :fields="tableFields"
+        :class="tableClasses"
         :tbody-transition-props="transitionProps"
         primary-key="name"
-        class="gl-my-5"
         :tbody-tr-attr="(item) => ({ 'data-testid': item.name })"
       >
         <template #cell(status)="{ item }">
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 5fa9a343c2fb18..eaccfdaa668f07 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -78,11 +78,11 @@ export default {
 
         this.active = {
           workspaces: activeWorkspaces?.nodes || [],
-          pageInfo: activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
+          pageInfo: activeWorkspaces?.pageInfo || { ...DEFAULT_WORKSPACES_DATA.pageInfo },
         };
         this.terminated = {
           workspaces: terminatedWorkspaces?.nodes || [],
-          pageInfo: terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
+          pageInfo: terminatedWorkspaces?.pageInfo || { ...DEFAULT_WORKSPACES_DATA.pageInfo },
         };
       },
       error(err) {
@@ -100,8 +100,8 @@ export default {
 
         if (result.error) {
           this.error = i18n.loadingWorkspacesFailed;
-          this.active = DEFAULT_WORKSPACES_DATA;
-          this.terminated = DEFAULT_WORKSPACES_DATA;
+          this.active = { ...DEFAULT_WORKSPACES_DATA };
+          this.terminated = { ...DEFAULT_WORKSPACES_DATA };
           logError(result.error);
           return;
         }
@@ -121,8 +121,13 @@ export default {
   },
   data() {
     return {
-      active: DEFAULT_WORKSPACES_DATA,
-      terminated: DEFAULT_WORKSPACES_DATA,
+      active: {
+        ...DEFAULT_WORKSPACES_DATA,
+      },
+      terminated: {
+        ...DEFAULT_WORKSPACES_DATA,
+      },
+      terminatingWorkspaces: new Map(),
       paginationVariables: {
         first: WORKSPACES_LIST_PAGE_SIZE,
         activeAfter: null,
diff --git a/ee/spec/frontend/workspaces/user/pages/list_spec.js b/ee/spec/frontend/workspaces/user/pages/list_spec.js
index 74c0514e3c29e8..74013970188af3 100644
--- a/ee/spec/frontend/workspaces/user/pages/list_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/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, GlButton, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLink, GlSkeletonLoader, GlTabs } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -52,6 +52,7 @@ describe('workspaces/user/pages/list.vue', () => {
   };
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findHelpLink = () => wrapper.findComponent(GlLink);
+  const findTabContainer = () => wrapper.findComponent(GlTabs);
   const findTabs = () => wrapper.findAllComponents(WorkspaceTab);
   const findTable = () => wrapper.findComponent(WorkspaceTable);
   const findNewWorkspaceButton = () => wrapper.findComponent(GlButton);
@@ -83,7 +84,9 @@ describe('workspaces/user/pages/list.vue', () => {
     });
 
     it('does not render the workspace tabs', () => {
+      const tabContainer = findTabContainer();
       const tabs = findTabs();
+      expect(tabContainer.exists()).toBe(false);
       expect(tabs.exists()).toBe(false);
     });
   });
@@ -100,8 +103,12 @@ describe('workspaces/user/pages/list.vue', () => {
     });
 
     it('renders the workspace tabs', () => {
+      const tabContainer = findTabContainer();
       const tabs = findTabs();
 
+      expect(tabContainer.exists()).toBe(true);
+      expect(tabContainer.props('syncActiveTabWithQueryParams')).toBe(true);
+
       expect(tabs.exists()).toBe(true);
       expect(tabs).toHaveLength(2);
       expect(tabs.at(0).props('tabName')).toEqual('active');
-- 
GitLab


From 6ca37933829eeac6fd948d65925c22434841fa69 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 28 Jun 2024 16:17:50 -0400
Subject: [PATCH 11/16] Add toast logic unit tests

---
 .../workspaces/user/pages/list_spec.js        | 77 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/ee/spec/frontend/workspaces/user/pages/list_spec.js b/ee/spec/frontend/workspaces/user/pages/list_spec.js
index 74013970188af3..75dc60ee4546d5 100644
--- a/ee/spec/frontend/workspaces/user/pages/list_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/list_spec.js
@@ -11,7 +11,7 @@ import WorkspaceTable from 'ee/workspaces/common/components/workspaces_list/work
 import userWorkspacesTabListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import getProjectsDetailsQuery from 'ee/workspaces/common/graphql/queries/get_projects_details.query.graphql';
 import List from 'ee/workspaces/user/pages/list.vue';
-import { ROUTES } from 'ee/workspaces/user/constants';
+import { ROUTES, WORKSPACES_LIST_POLL_INTERVAL } from 'ee/workspaces/user/constants';
 import {
   USER_WORKSPACES_TAB_LIST_QUERY_RESULT,
   USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT,
@@ -41,6 +41,11 @@ describe('workspaces/user/pages/list.vue', () => {
       [getProjectsDetailsQuery, getProjectsDetailsQueryHandler],
     ]);
   };
+
+  const $toast = {
+    show: jest.fn(),
+  };
+
   const createWrapper = () => {
     // noinspection JSCheckFunctionSignatures - TODO: Address in https://gitlab.com/gitlab-org/gitlab/-/issues/437600
     wrapper = mount(List, {
@@ -48,6 +53,9 @@ describe('workspaces/user/pages/list.vue', () => {
       provide: {
         emptyStateSvgPath: SVG_PATH,
       },
+      mocks: {
+        $toast,
+      },
     });
   };
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -231,6 +239,73 @@ describe('workspaces/user/pages/list.vue', () => {
     });
   });
 
+  describe('terminated workspace toast', () => {
+    const MOCK_WORKSPACE_NAME = 'test-workspace';
+    const mockActiveWorkspaces =
+      USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces.nodes;
+    const mockTerminatedWorkspaces =
+      USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.terminatedWorkspaces.nodes;
+
+    const MOCK_TERMINATING_WORKSPACE = {
+      ...mockActiveWorkspaces[0],
+      id: 'test',
+      name: MOCK_WORKSPACE_NAME,
+    };
+
+    const MOCK_TERMINATING_WORKSPACES_QUERY_RESULT = {
+      data: {
+        currentUser: {
+          ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser,
+          activeWorkspaces: {
+            ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces,
+            nodes: [MOCK_TERMINATING_WORKSPACE, ...mockActiveWorkspaces],
+          },
+        },
+      },
+    };
+
+    const MOCK_TERMINATED_WORKSPACES_QUERY_RESULT = {
+      data: {
+        currentUser: {
+          ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser,
+          terminatedWorkspaces: {
+            ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.terminatedWorkspaces,
+            nodes: [MOCK_TERMINATING_WORKSPACE, ...mockTerminatedWorkspaces],
+          },
+        },
+      },
+    };
+
+    const advanceToNextFetch = () => {
+      jest.advanceTimersByTime(WORKSPACES_LIST_POLL_INTERVAL);
+    };
+
+    beforeEach(async () => {
+      userWorkspacesTabListQueryHandler.mockReset();
+      userWorkspacesTabListQueryHandler
+        .mockResolvedValueOnce(MOCK_TERMINATING_WORKSPACES_QUERY_RESULT)
+        .mockResolvedValueOnce(MOCK_TERMINATED_WORKSPACES_QUERY_RESULT);
+      createWrapper();
+      await waitForPromises();
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+    });
+
+    it('does not show toast when no workspace terminated', () => {
+      expect($toast.show).toHaveBeenCalledTimes(0);
+    });
+
+    it('shows toast when workspace is successfully terminated', async () => {
+      await advanceToNextFetch();
+      await waitForPromises();
+
+      expect($toast.show).toHaveBeenCalledTimes(1);
+      expect($toast.show).toHaveBeenCalledWith(`${MOCK_WORKSPACE_NAME} has been terminated.`);
+    });
+  });
+
   describe('fixed elements', () => {
     beforeEach(async () => {
       createWrapper();
-- 
GitLab


From 2b9a92c085aa3c2cf3fe69de583c0de336268b28 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Fri, 28 Jun 2024 17:03:59 -0400
Subject: [PATCH 12/16] Fix table transition

Pass table transition properties as workspace table prop to prevent
transition occurring during page navigation.
---
 .../common/components/workspace_tab.vue          | 12 ++++++++++++
 .../workspaces_list/workspaces_table.vue         | 16 ++++++----------
 .../javascripts/workspaces/user/pages/list.vue   | 16 ++++++----------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
index 2bac43dd27cd4f..b6a385f5517668 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
@@ -56,14 +56,24 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      withTableRowTransition: true,
+    };
+  },
   computed: {
     isEmpty() {
       return !this.workspaces.length && !this.loading;
     },
+    transitionProps() {
+      const transitionProps = { name: 'fade', delay: 200, duration: 300 };
+      return this.withTableRowTransition ? transitionProps : undefined;
+    },
   },
   methods: {
     clearError() {
       this.$emit('error', '');
+      this.withTableRowTransition = true;
     },
     onUpdateFailed({ error }) {
       // TODO: review type of error, may need to be a different type or cast to string
@@ -71,6 +81,7 @@ export default {
     },
     onPaginationInput(paginationVariables) {
       this.$emit('onPaginationInput', { tab: this.tabName, paginationVariables });
+      this.withTableRowTransition = false;
     },
   },
   i18n,
@@ -100,6 +111,7 @@ export default {
       <div v-else>
         <workspaces-table
           tabs-mode
+          :transition-props="transitionProps"
           data-testid="workspace-list-item"
           :workspaces="workspaces"
           @updateFailed="onUpdateFailed"
diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index 3aee1076a1f0d1..57cc8882aaf011 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -85,15 +85,11 @@ export default {
       required: false,
       default: false,
     },
-  },
-  data() {
-    return {
-      transitionProps: {
-        name: 'fade',
-        delay: 200,
-        duration: 300,
-      },
-    };
+    transitionProps: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     sortedWorkspaces() {
@@ -158,7 +154,7 @@ export default {
     <template #default="{ update }">
       <gl-table-lite
         fixed
-        stacked="md"
+        stacked="sm"
         :items="sortedWorkspaces"
         :fields="tableFields"
         :class="tableClasses"
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index eaccfdaa668f07..555ffcf4ebc43f 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -78,11 +78,11 @@ export default {
 
         this.active = {
           workspaces: activeWorkspaces?.nodes || [],
-          pageInfo: activeWorkspaces?.pageInfo || { ...DEFAULT_WORKSPACES_DATA.pageInfo },
+          pageInfo: activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
         };
         this.terminated = {
           workspaces: terminatedWorkspaces?.nodes || [],
-          pageInfo: terminatedWorkspaces?.pageInfo || { ...DEFAULT_WORKSPACES_DATA.pageInfo },
+          pageInfo: terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
         };
       },
       error(err) {
@@ -100,8 +100,8 @@ export default {
 
         if (result.error) {
           this.error = i18n.loadingWorkspacesFailed;
-          this.active = { ...DEFAULT_WORKSPACES_DATA };
-          this.terminated = { ...DEFAULT_WORKSPACES_DATA };
+          this.active = DEFAULT_WORKSPACES_DATA;
+          this.terminated = DEFAULT_WORKSPACES_DATA;
           logError(result.error);
           return;
         }
@@ -121,12 +121,8 @@ export default {
   },
   data() {
     return {
-      active: {
-        ...DEFAULT_WORKSPACES_DATA,
-      },
-      terminated: {
-        ...DEFAULT_WORKSPACES_DATA,
-      },
+      active: DEFAULT_WORKSPACES_DATA,
+      terminated: DEFAULT_WORKSPACES_DATA,
       terminatingWorkspaces: new Map(),
       paginationVariables: {
         first: WORKSPACES_LIST_PAGE_SIZE,
-- 
GitLab


From 286dfb19856cfa26c8d6bd87cb534a8dc4adaf88 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 9 Jul 2024 14:25:11 -0400
Subject: [PATCH 13/16] Monitor workspace state logic

---
 .../monitor_terminating_workspace.vue         | 38 +++++++++
 .../workspaces/common/constants.js            |  1 +
 .../queries/get_workspace_state.query.graphql |  7 ++
 .../monitor_terminating_workspace_spec.js     | 85 +++++++++++++++++++
 .../frontend/workspaces/mock_data/index.js    | 10 +++
 5 files changed, 141 insertions(+)
 create mode 100644 ee/app/assets/javascripts/workspaces/common/components/monitor_terminating_workspace.vue
 create mode 100644 ee/app/assets/javascripts/workspaces/common/graphql/queries/get_workspace_state.query.graphql
 create mode 100644 ee/spec/frontend/workspaces/common/components/workspaces_list/monitor_terminating_workspace_spec.js

diff --git a/ee/app/assets/javascripts/workspaces/common/components/monitor_terminating_workspace.vue b/ee/app/assets/javascripts/workspaces/common/components/monitor_terminating_workspace.vue
new file mode 100644
index 00000000000000..5be75f7a28db4d
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/common/components/monitor_terminating_workspace.vue
@@ -0,0 +1,38 @@
+<script>
+import { sprintf, s__ } from '~/locale';
+import getWorkspaceStateQuery from '../graphql/queries/get_workspace_state.query.graphql';
+import { WORKSPACE_STATES, GET_WORKSPACE_STATE_INTERVAL } from '../constants';
+
+export default {
+  props: {
+    workspaceId: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    workspace: {
+      query: getWorkspaceStateQuery,
+      variables() {
+        return { id: this.workspaceId };
+      },
+      pollInterval: GET_WORKSPACE_STATE_INTERVAL,
+    },
+  },
+  watch: {
+    workspace(workspace) {
+      if (workspace.actualState === WORKSPACE_STATES.terminated) {
+        this.$toast.show(
+          sprintf(s__('Workspaces|%{workspaceName} has been terminated.'), {
+            workspaceName: workspace.name,
+          }),
+        );
+        this.$apollo.queries.workspace.stop();
+      }
+    },
+  },
+  render() {
+    return null;
+  },
+};
+</script>
diff --git a/ee/app/assets/javascripts/workspaces/common/constants.js b/ee/app/assets/javascripts/workspaces/common/constants.js
index 3ee4d92f3c047a..20480768b1e7eb 100644
--- a/ee/app/assets/javascripts/workspaces/common/constants.js
+++ b/ee/app/assets/javascripts/workspaces/common/constants.js
@@ -34,3 +34,4 @@ export const I18N_LOADING_WORKSPACES_FAILED = s__(
 
 export const WORKSPACES_LIST_PAGE_SIZE = 10;
 export const WORKSPACES_LIST_POLL_INTERVAL = 3000;
+export const GET_WORKSPACE_STATE_INTERVAL = 1000;
diff --git a/ee/app/assets/javascripts/workspaces/common/graphql/queries/get_workspace_state.query.graphql b/ee/app/assets/javascripts/workspaces/common/graphql/queries/get_workspace_state.query.graphql
new file mode 100644
index 00000000000000..7b82c6fca3c0f2
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/common/graphql/queries/get_workspace_state.query.graphql
@@ -0,0 +1,7 @@
+query getWorkspaceState($id: RemoteDevelopmentWorkspaceID!) {
+  workspace(id: $id) {
+    id
+    name
+    actualState
+  }
+}
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/monitor_terminating_workspace_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/monitor_terminating_workspace_spec.js
new file mode 100644
index 00000000000000..f720d68df829dc
--- /dev/null
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/monitor_terminating_workspace_spec.js
@@ -0,0 +1,85 @@
+import { shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import MonitorTerminatingWorkspace from 'ee/workspaces/common/components/monitor_terminating_workspace.vue';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import getWorkspaceStateQuery from 'ee/workspaces/common/graphql/queries/get_workspace_state.query.graphql';
+import { GET_WORKSPACE_STATE_INTERVAL, WORKSPACE_STATES } from 'ee/workspaces/common/constants';
+import { GET_WORKSPACE_STATE_QUERY_RESULT } from '../../../mock_data';
+
+Vue.use(VueApollo);
+describe('workspaces/common/components/workspaces_list/monitor_terminating_workspace.vue', () => {
+  // eslint-disable-next-line no-unused-vars
+  let wrapper;
+  let mockApollo;
+
+  const $toast = {
+    show: jest.fn(),
+  };
+
+  const createComponent = (
+    options = {
+      getWorkspaceStateQueryHandler: jest.fn().mockResolvedValue(GET_WORKSPACE_STATE_QUERY_RESULT),
+    },
+  ) => {
+    mockApollo = createMockApollo([
+      [getWorkspaceStateQuery, options.getWorkspaceStateQueryHandler],
+    ]);
+
+    wrapper = shallowMount(MonitorTerminatingWorkspace, {
+      apolloProvider: mockApollo,
+      propsData: {
+        workspaceId: '1',
+      },
+      mocks: {
+        $toast,
+      },
+    });
+  };
+
+  describe('terminated workspace', () => {
+    const mockTerminatedWorkspaceStateResult = {
+      data: {
+        workspace: {
+          ...GET_WORKSPACE_STATE_QUERY_RESULT.data.workspace,
+          actualState: WORKSPACE_STATES.terminated,
+        },
+      },
+    };
+
+    const advanceToNextFetch = () => {
+      jest.advanceTimersByTime(GET_WORKSPACE_STATE_INTERVAL);
+    };
+
+    beforeEach(async () => {
+      createComponent({
+        getWorkspaceStateQueryHandler: jest
+          .fn()
+          .mockResolvedValueOnce(GET_WORKSPACE_STATE_QUERY_RESULT)
+          .mockResolvedValue(mockTerminatedWorkspaceStateResult),
+      });
+      await waitForPromises();
+    });
+
+    afterEach(() => {
+      mockApollo = null;
+    });
+
+    it('does not show toast when no workspace terminated', () => {
+      expect($toast.show).toHaveBeenCalledTimes(0);
+    });
+
+    it('shows toast when workspace is successfully terminated', async () => {
+      await advanceToNextFetch();
+      await waitForPromises();
+
+      expect($toast.show).toHaveBeenCalledTimes(1);
+      expect($toast.show).toHaveBeenCalledWith(
+        `${mockTerminatedWorkspaceStateResult.data.workspace.name} has been terminated.`,
+      );
+    });
+  });
+});
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index 39122d05e34a4f..c08e5ab4d0cfe1 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -167,6 +167,16 @@ export const USER_WORKSPACES_TAB_LIST_QUERY_RESULT = {
   },
 };
 
+export const GET_WORKSPACE_STATE_QUERY_RESULT = {
+  data: {
+    workspace: {
+      id: '1',
+      name: 'workspace-1-1-rfu27q',
+      actualState: 'Running',
+    },
+  },
+};
+
 export const USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT = {
   data: {
     currentUser: {
-- 
GitLab


From def7a33ccdf6233d3db38c28251a59f99be1c606 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 9 Jul 2024 15:16:22 -0400
Subject: [PATCH 14/16] Use monitor terminating workspace and handle pagination
 cases

---
 .../user_workspaces_tab_list.query.graphql    |   2 +-
 .../workspaces/common/services/utils.js       |  21 ---
 .../workspaces/user/pages/list.vue            | 141 +++++++++++-------
 .../workspaces/common/services/utils_spec.js  |  78 +---------
 .../workspaces/user/pages/list_spec.js        | 132 ++++++++--------
 5 files changed, 152 insertions(+), 222 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql b/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql
index d222b636a7cca3..8cf213d1792d30 100644
--- a/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql
+++ b/ee/app/assets/javascripts/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql
@@ -27,7 +27,7 @@ query userWorkspacesTabList(
         "Unknown"
       ]
       projectIds: $projectIds
-    ) {
+    ) @connection(key: "activeWorkspaces") {
       nodes {
         ...WorkspaceItem
       }
diff --git a/ee/app/assets/javascripts/workspaces/common/services/utils.js b/ee/app/assets/javascripts/workspaces/common/services/utils.js
index e9bf74617cf457..b9ad54e8069edd 100644
--- a/ee/app/assets/javascripts/workspaces/common/services/utils.js
+++ b/ee/app/assets/javascripts/workspaces/common/services/utils.js
@@ -1,26 +1,5 @@
 import getProjectsDetailsQuery from '../graphql/queries/get_projects_details.query.graphql';
 
-export function getSuccessfullyTerminatedWorkspaces(
-  prevWorkspaces,
-  updatedActiveWorkspaces,
-  updatedTerminatedWorkspaces,
-) {
-  const updatedActiveWorkspacesIds = new Set(
-    updatedActiveWorkspaces.map((workspace) => workspace.id),
-  );
-  const updatedTerminatedWorkspacesIds = new Set(
-    updatedTerminatedWorkspaces.map((workspace) => workspace.id),
-  );
-
-  const terminatedWorkspaces = prevWorkspaces.filter(
-    (workspace) =>
-      !updatedActiveWorkspacesIds.has(workspace.id) &&
-      updatedTerminatedWorkspacesIds.has(workspace.id),
-  );
-
-  return terminatedWorkspaces;
-}
-
 export const populateWorkspacesWithProjectDetails = (workspaces, projects) => {
   return workspaces.map((workspace) => {
     const project = projects.find((p) => p.id === workspace.projectId);
diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 555ffcf4ebc43f..1b049f3c9df546 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -2,7 +2,7 @@
 <script>
 import { GlButton, GlTabs } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
-import { sprintf, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import {
   ROUTES,
   I18N_LOADING_WORKSPACES_FAILED,
@@ -12,11 +12,12 @@ import {
 import {
   fetchProjectsDetails,
   populateWorkspacesWithProjectDetails,
-  getSuccessfullyTerminatedWorkspaces,
 } from '../../common/services/utils';
 import userWorkspacesTabListQuery from '../../common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import BaseWorkspacesList from '../../common/components/workspaces_list/base_workspaces_list.vue';
 import WorkspaceTab from '../../common/components/workspace_tab.vue';
+import MonitorTerminatingWorkspace from '../../common/components/monitor_terminating_workspace.vue';
+import { WORKSPACE_STATES } from '../../common/constants';
 
 export const i18n = {
   newWorkspaceButton: s__('Workspaces|New workspace'),
@@ -33,15 +34,25 @@ const DEFAULT_WORKSPACES_DATA = {
   },
 };
 
-const ACTIVE_PAGINATION_VARIABLE_KEY_MAP = {
-  after: 'activeAfter',
-  before: 'activeBefore',
+const PAGINATION_TO_VARIABLES_KEY_MAP = {
+  first: {
+    active: 'first',
+    terminated: 'first',
+  },
+  after: {
+    active: 'activeAfter',
+    terminated: 'terminatedAfter',
+  },
+  before: {
+    active: 'activeBefore',
+    terminated: 'terminatedBefore',
+  },
 };
 
-const TERMINATED_PAGINATION_VARIABLE_KEY_MAP = {
-  after: 'terminatedAfter',
-  before: 'terminatedBefore',
-};
+function getPaginationVariableKey(tab, key) {
+  if (!(key in PAGINATION_TO_VARIABLES_KEY_MAP)) return null;
+  return PAGINATION_TO_VARIABLES_KEY_MAP[key][tab];
+}
 
 export default {
   components: {
@@ -49,33 +60,21 @@ export default {
     GlTabs,
     BaseWorkspacesList,
     WorkspaceTab,
+    MonitorTerminatingWorkspace,
   },
   apollo: {
     workspaces: {
       query: userWorkspacesTabListQuery,
       pollInterval: WORKSPACES_LIST_POLL_INTERVAL,
+      fetchPolicy: 'network-only',
       variables() {
         return {
           ...this.paginationVariables,
         };
       },
       update(data) {
-        const prevActiveWorkspaces = this.active.workspaces;
         const { activeWorkspaces, terminatedWorkspaces } = data.currentUser;
 
-        const successTerminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-          prevActiveWorkspaces,
-          activeWorkspaces?.nodes,
-          terminatedWorkspaces?.nodes,
-        );
-        successTerminatedWorkspaces.forEach((workspace) => {
-          this.$toast.show(
-            sprintf(s__('Workspaces|%{workspaceName} has been terminated.'), {
-              workspaceName: workspace.name,
-            }),
-          );
-        });
-
         this.active = {
           workspaces: activeWorkspaces?.nodes || [],
           pageInfo: activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
@@ -121,9 +120,9 @@ export default {
   },
   data() {
     return {
-      active: DEFAULT_WORKSPACES_DATA,
-      terminated: DEFAULT_WORKSPACES_DATA,
-      terminatingWorkspaces: new Map(),
+      active: { ...DEFAULT_WORKSPACES_DATA },
+      terminated: { ...DEFAULT_WORKSPACES_DATA },
+      terminatingWorkspaces: [],
       paginationVariables: {
         first: WORKSPACES_LIST_PAGE_SIZE,
         activeAfter: null,
@@ -145,23 +144,50 @@ export default {
       return this.$apollo.loading;
     },
   },
+  watch: {
+    active(active) {
+      if (!active.workspaces.length && active.pageInfo.hasPreviousPage) {
+        // navigate to previous page if at the last page and no workspaces are left
+        this.paginationVariables = {
+          ...this.paginationVariables,
+          activeBefore: active.pageInfo.startCursor,
+          activeAfter: null,
+        };
+      }
+
+      this.terminatingWorkspaces.push(
+        ...active.workspaces
+          .filter((workspace) => workspace.desiredState === WORKSPACE_STATES.terminated)
+          .filter(
+            (workspace) =>
+              !this.terminatingWorkspaces.some((terminating) => terminating.id === workspace.id),
+          )
+          .map(({ id }) => ({
+            id,
+          })),
+      );
+    },
+  },
   methods: {
     onError(error) {
       this.error = error;
     },
     onPaginationInput({ tab, paginationVariables }) {
-      const updatedVariables = Object.keys(paginationVariables).reduce((variables, key) => {
-        const newKey =
-          tab === 'active'
-            ? ACTIVE_PAGINATION_VARIABLE_KEY_MAP[key]
-            : TERMINATED_PAGINATION_VARIABLE_KEY_MAP[key];
-        return {
-          ...variables,
-          [newKey || key]: paginationVariables[key],
-        };
-      }, {});
+      const updatedVariables = Object.keys(paginationVariables).reduce(
+        (variables, key) => {
+          const newKey = getPaginationVariableKey(tab, key);
+          return {
+            ...variables,
+            [newKey]: paginationVariables[key],
+          };
+        },
+        {
+          [PAGINATION_TO_VARIABLES_KEY_MAP.after[tab]]: null,
+          [PAGINATION_TO_VARIABLES_KEY_MAP.before[tab]]: null,
+        },
+      );
 
-      this.paginationVariables = updatedVariables;
+      this.paginationVariables = { ...this.paginationVariables, ...updatedVariables };
     },
   },
   i18n,
@@ -182,24 +208,31 @@ export default {
       </gl-button>
     </template>
     <template #workspaces-list>
-      <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
-        <workspace-tab
-          tab-name="active"
-          :loading="isLoading"
-          :workspaces="active.workspaces"
-          :page-info="active.pageInfo"
-          @error="onError"
-          @onPaginationInput="onPaginationInput"
-        />
-        <workspace-tab
-          tab-name="terminated"
-          :loading="isLoading"
-          :workspaces="terminated.workspaces"
-          :page-info="terminated.pageInfo"
-          @error="onError"
-          @onPaginationInput="onPaginationInput"
+      <div>
+        <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
+          <workspace-tab
+            tab-name="active"
+            :loading="isLoading"
+            :workspaces="active.workspaces"
+            :page-info="active.pageInfo"
+            @error="onError"
+            @onPaginationInput="onPaginationInput"
+          />
+          <workspace-tab
+            tab-name="terminated"
+            :loading="isLoading"
+            :workspaces="terminated.workspaces"
+            :page-info="terminated.pageInfo"
+            @error="onError"
+            @onPaginationInput="onPaginationInput"
+          />
+        </gl-tabs>
+        <monitor-terminating-workspace
+          v-for="(workspace, idx) in terminatingWorkspaces"
+          :key="idx"
+          :workspace-id="workspace.id"
         />
-      </gl-tabs>
+      </div>
     </template>
   </base-workspaces-list>
 </template>
diff --git a/ee/spec/frontend/workspaces/common/services/utils_spec.js b/ee/spec/frontend/workspaces/common/services/utils_spec.js
index e7f6b2b2706ff8..096c4aaa1c75b6 100644
--- a/ee/spec/frontend/workspaces/common/services/utils_spec.js
+++ b/ee/spec/frontend/workspaces/common/services/utils_spec.js
@@ -1,7 +1,4 @@
-import {
-  populateWorkspacesWithProjectDetails,
-  getSuccessfullyTerminatedWorkspaces,
-} from 'ee/workspaces/common/services/utils';
+import { populateWorkspacesWithProjectDetails } from 'ee/workspaces/common/services/utils';
 
 describe('ee/workspaces/common/services/utils', () => {
   describe('populateWorkspacesWithProjectDetails', () => {
@@ -51,77 +48,4 @@ describe('ee/workspaces/common/services/utils', () => {
       });
     });
   });
-
-  function createMockWorkspaceNode({ id, name }) {
-    return {
-      id,
-      name,
-    };
-  }
-
-  describe('getSuccessfullyTerminatedWorkspaces', () => {
-    const MOCK_TERMINATED_WORKSPACES = [
-      createMockWorkspaceNode({
-        id: '1',
-        name: '1',
-      }),
-      createMockWorkspaceNode({
-        id: '3',
-        name: '3',
-      }),
-    ];
-    const MOCK_ACTIVE_WORKSPACES = [
-      createMockWorkspaceNode({
-        id: '4',
-        name: '4',
-      }),
-    ];
-    const MOCK_WORKSPACE = createMockWorkspaceNode({
-      id: '2',
-      name: '2',
-    });
-
-    it('returns the succesfully terminated workspaces', () => {
-      const mockPrevWorkspaces = [...MOCK_ACTIVE_WORKSPACES, MOCK_WORKSPACE];
-      const mockUpdatedActiveWorkspaces = MOCK_ACTIVE_WORKSPACES;
-      const mockUpdatedTerminatedWorkspaces = [...MOCK_TERMINATED_WORKSPACES, MOCK_WORKSPACE];
-
-      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        mockPrevWorkspaces,
-        mockUpdatedActiveWorkspaces,
-        mockUpdatedTerminatedWorkspaces,
-      );
-
-      expect(terminatedWorkspaces).toHaveLength(1);
-      expect(terminatedWorkspaces).toStrictEqual([MOCK_WORKSPACE]);
-    });
-
-    it('does not treat new active workspaces as successfully terminated', () => {
-      const mockPrevWorkspaces = MOCK_ACTIVE_WORKSPACES;
-      const mockUpdatedActiveWorkspaces = [...MOCK_ACTIVE_WORKSPACES, MOCK_WORKSPACE];
-      const mockUpdatedTerminatedWorkspaces = MOCK_TERMINATED_WORKSPACES;
-
-      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        mockPrevWorkspaces,
-        mockUpdatedActiveWorkspaces,
-        mockUpdatedTerminatedWorkspaces,
-      );
-
-      expect(terminatedWorkspaces).toHaveLength(0);
-    });
-
-    it('does not return already terminated workspaces', () => {
-      const mockPrevWorkspaces = MOCK_ACTIVE_WORKSPACES;
-      const mockUpdatedActiveWorkspaces = MOCK_ACTIVE_WORKSPACES;
-      const mockUpdatedTerminatedWorkspaces = [...MOCK_TERMINATED_WORKSPACES, MOCK_WORKSPACE];
-
-      const terminatedWorkspaces = getSuccessfullyTerminatedWorkspaces(
-        mockPrevWorkspaces,
-        mockUpdatedActiveWorkspaces,
-        mockUpdatedTerminatedWorkspaces,
-      );
-
-      expect(terminatedWorkspaces).toHaveLength(0);
-    });
-  });
 });
diff --git a/ee/spec/frontend/workspaces/user/pages/list_spec.js b/ee/spec/frontend/workspaces/user/pages/list_spec.js
index 75dc60ee4546d5..d2e02c36e1d770 100644
--- a/ee/spec/frontend/workspaces/user/pages/list_spec.js
+++ b/ee/spec/frontend/workspaces/user/pages/list_spec.js
@@ -10,12 +10,16 @@ import WorkspaceTab from 'ee/workspaces/common/components/workspace_tab.vue';
 import WorkspaceTable from 'ee/workspaces/common/components/workspaces_list/workspaces_table.vue';
 import userWorkspacesTabListQuery from 'ee/workspaces/common/graphql/queries/user_workspaces_tab_list.query.graphql';
 import getProjectsDetailsQuery from 'ee/workspaces/common/graphql/queries/get_projects_details.query.graphql';
+import getWorkspaceStateQuery from 'ee/workspaces/common/graphql/queries/get_workspace_state.query.graphql';
 import List from 'ee/workspaces/user/pages/list.vue';
-import { ROUTES, WORKSPACES_LIST_POLL_INTERVAL } from 'ee/workspaces/user/constants';
+import { ROUTES } from 'ee/workspaces/user/constants';
+import { WORKSPACE_STATES } from 'ee/workspaces/common/constants';
+import MonitorTerminatingWorkspace from 'ee/workspaces/common/components/monitor_terminating_workspace.vue';
 import {
   USER_WORKSPACES_TAB_LIST_QUERY_RESULT,
   USER_WORKSPACES_TAB_LIST_QUERY_EMPTY_RESULT,
   GET_PROJECTS_DETAILS_QUERY_RESULT,
+  GET_WORKSPACE_STATE_QUERY_RESULT,
 } from '../../mock_data';
 
 jest.mock('~/lib/logger');
@@ -29,23 +33,22 @@ describe('workspaces/user/pages/list.vue', () => {
   let mockApollo;
   let userWorkspacesTabListQueryHandler;
   let getProjectsDetailsQueryHandler;
+  let getWorkspaceStateQueryHandler;
 
   const buildMockApollo = () => {
     userWorkspacesTabListQueryHandler = jest
       .fn()
       .mockResolvedValue(USER_WORKSPACES_TAB_LIST_QUERY_RESULT);
     getProjectsDetailsQueryHandler = jest.fn().mockResolvedValue(GET_PROJECTS_DETAILS_QUERY_RESULT);
+    getWorkspaceStateQueryHandler = jest.fn().mockResolvedValue(GET_WORKSPACE_STATE_QUERY_RESULT);
 
     mockApollo = createMockApollo([
       [userWorkspacesTabListQuery, userWorkspacesTabListQueryHandler],
       [getProjectsDetailsQuery, getProjectsDetailsQueryHandler],
+      [getWorkspaceStateQuery, getWorkspaceStateQueryHandler],
     ]);
   };
 
-  const $toast = {
-    show: jest.fn(),
-  };
-
   const createWrapper = () => {
     // noinspection JSCheckFunctionSignatures - TODO: Address in https://gitlab.com/gitlab-org/gitlab/-/issues/437600
     wrapper = mount(List, {
@@ -53,9 +56,6 @@ describe('workspaces/user/pages/list.vue', () => {
       provide: {
         emptyStateSvgPath: SVG_PATH,
       },
-      mocks: {
-        $toast,
-      },
     });
   };
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -165,10 +165,16 @@ describe('workspaces/user/pages/list.vue', () => {
     const EXPECTED_ACTIVE_WORKSPACES_PAGINATION_VARIABLES = {
       first: 10,
       activeAfter: 'end',
+      activeBefore: null,
+      terminatedAfter: null,
+      terminatedBefore: null,
     };
     const EXPECTED_TERMINATED_WORKSPACES_PAGINATION_VARIABLES = {
       first: 10,
       terminatedAfter: 'end',
+      activeAfter: null,
+      activeBefore: null,
+      terminatedBefore: null,
     };
 
     it.each`
@@ -239,87 +245,75 @@ describe('workspaces/user/pages/list.vue', () => {
     });
   });
 
-  describe('terminated workspace toast', () => {
-    const MOCK_WORKSPACE_NAME = 'test-workspace';
+  describe('fixed elements', () => {
+    beforeEach(async () => {
+      createWrapper();
+
+      await waitForPromises();
+    });
+
+    it('displays a link button that navigates to the create workspace page', () => {
+      expect(findNewWorkspaceButton().attributes().to).toBe(ROUTES.new);
+      expect(findNewWorkspaceButton().text()).toMatch(/New workspace/);
+    });
+
+    it('displays a link that navigates to the workspaces help page', () => {
+      expect(findHelpLink().attributes().href).toContain('user/workspace/index.md');
+    });
+  });
+
+  describe('terminating workspaces', () => {
+    const MOCK_PAGE_INFO = {
+      hasNextPage: false,
+      hasPreviousPage: true,
+      startCursor: 'start',
+      endCursor: 'end',
+    };
+
     const mockActiveWorkspaces =
       USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces.nodes;
-    const mockTerminatedWorkspaces =
-      USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.terminatedWorkspaces.nodes;
 
-    const MOCK_TERMINATING_WORKSPACE = {
+    const createMockTerminatingWorkspace = (id) => ({
       ...mockActiveWorkspaces[0],
-      id: 'test',
-      name: MOCK_WORKSPACE_NAME,
-    };
+      id,
+      name: id,
+      namespace: id,
+      desiredState: WORKSPACE_STATES.terminated,
+    });
 
-    const MOCK_TERMINATING_WORKSPACES_QUERY_RESULT = {
+    const createMockWorkspaceQueryResult = (workspaces) => ({
       data: {
         currentUser: {
           ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser,
           activeWorkspaces: {
             ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces,
-            nodes: [MOCK_TERMINATING_WORKSPACE, ...mockActiveWorkspaces],
-          },
-        },
-      },
-    };
-
-    const MOCK_TERMINATED_WORKSPACES_QUERY_RESULT = {
-      data: {
-        currentUser: {
-          ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser,
-          terminatedWorkspaces: {
-            ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.terminatedWorkspaces,
-            nodes: [MOCK_TERMINATING_WORKSPACE, ...mockTerminatedWorkspaces],
+            nodes: [...workspaces],
+            pageInfo: {
+              ...USER_WORKSPACES_TAB_LIST_QUERY_RESULT.data.currentUser.activeWorkspaces.pageInfo,
+              ...MOCK_PAGE_INFO,
+            },
           },
         },
       },
-    };
-
-    const advanceToNextFetch = () => {
-      jest.advanceTimersByTime(WORKSPACES_LIST_POLL_INTERVAL);
-    };
-
-    beforeEach(async () => {
-      userWorkspacesTabListQueryHandler.mockReset();
-      userWorkspacesTabListQueryHandler
-        .mockResolvedValueOnce(MOCK_TERMINATING_WORKSPACES_QUERY_RESULT)
-        .mockResolvedValueOnce(MOCK_TERMINATED_WORKSPACES_QUERY_RESULT);
-      createWrapper();
-      await waitForPromises();
-    });
-
-    afterEach(() => {
-      jest.clearAllTimers();
-    });
-
-    it('does not show toast when no workspace terminated', () => {
-      expect($toast.show).toHaveBeenCalledTimes(0);
-    });
-
-    it('shows toast when workspace is successfully terminated', async () => {
-      await advanceToNextFetch();
-      await waitForPromises();
-
-      expect($toast.show).toHaveBeenCalledTimes(1);
-      expect($toast.show).toHaveBeenCalledWith(`${MOCK_WORKSPACE_NAME} has been terminated.`);
     });
-  });
 
-  describe('fixed elements', () => {
     beforeEach(async () => {
+      const mockTerminatingWorkspacesQueryResult = createMockWorkspaceQueryResult([
+        createMockTerminatingWorkspace('test1'),
+        createMockTerminatingWorkspace('test2'),
+        ...mockActiveWorkspaces,
+      ]);
+      userWorkspacesTabListQueryHandler.mockReset();
+      userWorkspacesTabListQueryHandler.mockResolvedValueOnce(mockTerminatingWorkspacesQueryResult);
       createWrapper();
-
       await waitForPromises();
     });
 
-    it('displays a link button that navigates to the create workspace page', () => {
-      expect(findNewWorkspaceButton().attributes().to).toBe(ROUTES.new);
-      expect(findNewWorkspaceButton().text()).toMatch(/New workspace/);
-    });
-
-    it('displays a link that navigates to the workspaces help page', () => {
-      expect(findHelpLink().attributes().href).toContain('user/workspace/index.md');
+    it('renders correct amount of MonitorTerminatingWorkspace components', () => {
+      const monitorTerminatingWorkspaceComponents = wrapper.findAllComponents(
+        MonitorTerminatingWorkspace,
+      );
+      expect(monitorTerminatingWorkspaceComponents).toHaveLength(2);
     });
   });
 });
-- 
GitLab


From 9459a023ba4d4c88235743aa4999193bc97eb8d6 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 9 Jul 2024 15:19:06 -0400
Subject: [PATCH 15/16] Update active tab empty state copy

---
 .../javascripts/workspaces/common/components/workspace_tab.vue  | 2 +-
 locale/gitlab.pot                                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
index b6a385f5517668..bfbab4580c6284 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspace_tab.vue
@@ -23,7 +23,7 @@ function getTabTitle(tabName) {
 function getEmptyStateText(tabName) {
   switch (tabName) {
     case 'active':
-      return s__('Workspaces|No active workspaces to show.');
+      return s__('Workspaces|No active workspaces. Create a workspace to get started.');
     case 'terminated':
       return s__('Workspaces|No terminated workspaces to show.');
     default:
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ddd2bc82fd00d9..a9e756d4122162 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -60388,7 +60388,7 @@ msgstr ""
 msgid "Workspaces|New workspace"
 msgstr ""
 
-msgid "Workspaces|No active workspaces to show."
+msgid "Workspaces|No active workspaces. Create a workspace to get started."
 msgstr ""
 
 msgid "Workspaces|No terminated workspaces to show."
-- 
GitLab


From 07634d9759af84dbe797e6d9520a25bae2d75e50 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 11 Jul 2024 09:10:04 -0400
Subject: [PATCH 16/16] Fix workspaces list loading

---
 .../workspaces/user/pages/list.vue            | 28 +++++++------------
 .../user/init_user_workspaces_app_spec.js     |  6 +---
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/user/pages/list.vue b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
index 1b049f3c9df546..712525bee19823 100644
--- a/ee/app/assets/javascripts/workspaces/user/pages/list.vue
+++ b/ee/app/assets/javascripts/workspaces/user/pages/list.vue
@@ -63,7 +63,7 @@ export default {
     MonitorTerminatingWorkspace,
   },
   apollo: {
-    workspaces: {
+    userWorkspacesTabList: {
       query: userWorkspacesTabListQuery,
       pollInterval: WORKSPACES_LIST_POLL_INTERVAL,
       fetchPolicy: 'network-only',
@@ -72,17 +72,8 @@ export default {
           ...this.paginationVariables,
         };
       },
-      update(data) {
-        const { activeWorkspaces, terminatedWorkspaces } = data.currentUser;
-
-        this.active = {
-          workspaces: activeWorkspaces?.nodes || [],
-          pageInfo: activeWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
-        };
-        this.terminated = {
-          workspaces: terminatedWorkspaces?.nodes || [],
-          pageInfo: terminatedWorkspaces?.pageInfo || DEFAULT_WORKSPACES_DATA.pageInfo,
-        };
+      update() {
+        return [];
       },
       error(err) {
         logError(err);
@@ -115,6 +106,8 @@ export default {
           ),
           pageInfo: terminatedWorkspaces.pageInfo,
         };
+
+        this.loading = false;
       },
     },
   },
@@ -123,6 +116,7 @@ export default {
       active: { ...DEFAULT_WORKSPACES_DATA },
       terminated: { ...DEFAULT_WORKSPACES_DATA },
       terminatingWorkspaces: [],
+      loading: true,
       paginationVariables: {
         first: WORKSPACES_LIST_PAGE_SIZE,
         activeAfter: null,
@@ -140,9 +134,6 @@ export default {
     isEmpty() {
       return !this.workspaces.length;
     },
-    isLoading() {
-      return this.$apollo.loading;
-    },
   },
   watch: {
     active(active) {
@@ -187,6 +178,7 @@ export default {
         },
       );
 
+      this.loading = true;
       this.paginationVariables = { ...this.paginationVariables, ...updatedVariables };
     },
   },
@@ -197,7 +189,7 @@ export default {
 <template>
   <base-workspaces-list
     :error="error"
-    :loading="isLoading"
+    :loading="loading"
     :empty="isEmpty"
     :new-workspace-path="$options.ROUTES.new"
     @error="onError"
@@ -212,7 +204,7 @@ export default {
         <gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params>
           <workspace-tab
             tab-name="active"
-            :loading="isLoading"
+            :loading="loading"
             :workspaces="active.workspaces"
             :page-info="active.pageInfo"
             @error="onError"
@@ -220,7 +212,7 @@ export default {
           />
           <workspace-tab
             tab-name="terminated"
-            :loading="isLoading"
+            :loading="loading"
             :workspaces="terminated.workspaces"
             :page-info="terminated.pageInfo"
             @error="onError"
diff --git a/ee/spec/frontend/workspaces/user/init_user_workspaces_app_spec.js b/ee/spec/frontend/workspaces/user/init_user_workspaces_app_spec.js
index e14fc0c8b469a9..834ef884a22f09 100644
--- a/ee/spec/frontend/workspaces/user/init_user_workspaces_app_spec.js
+++ b/ee/spec/frontend/workspaces/user/init_user_workspaces_app_spec.js
@@ -1,5 +1,5 @@
 import { escape } from 'lodash';
-import { GlEmptyState } from '@gitlab/ui';
+
 import { createWrapper } from '@vue/test-utils';
 import { injectVueAppBreadcrumbs } from '~/lib/utils/breadcrumbs';
 import { initUserWorkspacesApp } from 'ee/workspaces/user/init_user_workspaces_app';
@@ -35,10 +35,6 @@ describe('ee/workspaces/init_user_workspaces_app', () => {
       expect(wrapper.vm.$router.options.base).toBe('/aaa');
     });
 
-    it('renders empty state', () => {
-      expect(wrapper.findComponent(GlEmptyState).props('svgPath')).toBe('/bbb');
-    });
-
     it('renders list component', () => {
       const workspaceListComponent = wrapper.findComponent(WorkspaceList);
 
-- 
GitLab