From f021ff84ee74ea1b575ca48417e08c6f0a80e16c Mon Sep 17 00:00:00 2001
From: Long Nguyen <n.h.long.9697@gmail.com>
Date: Fri, 1 Aug 2025 02:56:57 +0700
Subject: [PATCH] Add export CSV to work items UI

Add export CSV to work items UI

Changelog: added
---
 .../components/work_item_list_actions.vue     |  95 +++++++-
 .../work_item_metadata_provider.vue           |   1 +
 .../work_items_csv_export_modal.vue           | 146 ++++++++++++
 .../graphql/work_item_metadata.query.graphql  |   1 +
 .../work_items_csv_export.mutation.graphql    |   6 +
 .../work_items/pages/work_items_list_app.vue  |  43 +++-
 .../graphql/work_item_metadata.query.graphql  |   1 +
 locale/gitlab.pot                             |  26 ++
 .../components/work_item_list_actions_spec.js |  69 +++++-
 .../work_items_csv_export_modal_spec.js       | 222 ++++++++++++++++++
 .../components/work_items_list_app_spec.js    |   3 +
 spec/frontend/work_items/mock_data.js         |  21 ++
 12 files changed, 611 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/javascripts/work_items/components/work_items_csv_export_modal.vue
 create mode 100644 app/assets/javascripts/work_items/graphql/work_items_csv_export.mutation.graphql
 create mode 100644 spec/frontend/work_items/components/work_items_csv_export_modal_spec.js

diff --git a/app/assets/javascripts/work_items/components/work_item_list_actions.vue b/app/assets/javascripts/work_items/components/work_item_list_actions.vue
index a810c246e3bc18..8ae810a0ee1ba8 100644
--- a/app/assets/javascripts/work_items/components/work_item_list_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_list_actions.vue
@@ -3,20 +3,32 @@ import {
   GlDisclosureDropdown,
   GlDisclosureDropdownGroup,
   GlDisclosureDropdownItem,
+  GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { s__, __ } from '~/locale';
+import WorkItemCsvExportModal from './work_items_csv_export_modal.vue';
 
 export default {
+  exportModalId: 'work-item-export-modal',
   components: {
     GlDisclosureDropdownItem,
     GlDisclosureDropdown,
     GlDisclosureDropdownGroup,
+    WorkItemCsvExportModal,
+  },
+  i18n: {
+    exportAsCSV: s__('WorkItem|Export as CSV'),
+    importFromJira: s__('WorkItem|Import from Jira'),
   },
   directives: {
+    GlModal: GlModalDirective,
     GlTooltip: GlTooltipDirective,
   },
   inject: {
+    showExportButton: {
+      default: false,
+    },
     projectImportJiraPath: {
       default: null,
     },
@@ -27,13 +39,43 @@ export default {
       default: null,
     },
   },
+  props: {
+    workItemCount: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    queryVariables: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    showImportExportButtons: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
   computed: {
     importFromJira() {
       return {
-        text: __('Import from Jira'),
+        text: this.$options.i18n.importFromJira,
         href: this.projectImportJiraPath,
       };
     },
+    exportAsCSV() {
+      return {
+        text: this.$options.i18n.exportAsCSV,
+      };
+    },
+    dropdownTooltip() {
+      return !this.showTooltip ? __('Actions') : '';
+    },
     subscribeDropdownOptions() {
       return {
         items: [
@@ -53,8 +95,19 @@ export default {
     hasSubscriptionOptions() {
       return this.rssPath || this.calendarPath;
     },
+    hasImportExportOptions() {
+      return this.showImportExportButtons && (this.projectImportJiraPath || this.showExportButton);
+    },
     shouldShowDropdown() {
-      return this.projectImportJiraPath || this.hasSubscriptionOptions;
+      return this.hasImportExportOptions || this.hasSubscriptionOptions;
+    },
+  },
+  methods: {
+    showDropdown() {
+      this.showTooltip = true;
+    },
+    hideDropdown() {
+      this.showTooltip = false;
     },
   },
 };
@@ -63,23 +116,43 @@ export default {
 <template>
   <gl-disclosure-dropdown
     v-if="shouldShowDropdown"
-    v-gl-tooltip="__('Actions')"
+    v-gl-tooltip
     category="tertiary"
     icon="ellipsis_v"
     no-caret
-    :toggle-text="__('Actions')"
+    toggle-text="Actions"
+    :title="dropdownTooltip"
     text-sr-only
+    data-testid="work-items-list-more-actions-dropdown"
     toggle-class="!gl-m-0 gl-h-full"
     class="!gl-w-7"
+    @shown="showDropdown"
+    @hidden="hideDropdown"
   >
-    <gl-disclosure-dropdown-item
-      v-if="projectImportJiraPath"
-      data-testid="import-from-jira-link"
-      :item="importFromJira"
-    />
+    <template v-if="hasImportExportOptions">
+      <gl-disclosure-dropdown-item
+        v-if="projectImportJiraPath"
+        data-testid="import-from-jira-link"
+        :item="importFromJira"
+      />
+
+      <gl-disclosure-dropdown-item
+        v-if="showExportButton"
+        v-gl-modal="$options.exportModalId"
+        data-testid="export-as-csv-button"
+        :item="exportAsCSV"
+      />
+
+      <work-item-csv-export-modal
+        v-if="showExportButton"
+        :modal-id="$options.exportModalId"
+        :work-item-count="workItemCount"
+        :query-variables="queryVariables"
+      />
+    </template>
     <gl-disclosure-dropdown-group
       v-if="hasSubscriptionOptions"
-      :bordered="projectImportJiraPath"
+      :bordered="hasImportExportOptions"
       :group="subscribeDropdownOptions"
     />
   </gl-disclosure-dropdown>
diff --git a/app/assets/javascripts/work_items/components/work_item_metadata_provider.vue b/app/assets/javascripts/work_items/components/work_item_metadata_provider.vue
index 164c08b6264ad5..5425e9629561ee 100644
--- a/app/assets/javascripts/work_items/components/work_item_metadata_provider.vue
+++ b/app/assets/javascripts/work_items/components/work_item_metadata_provider.vue
@@ -30,6 +30,7 @@ export default {
       issuesSettings: computed(() => this.metadata?.issuesSettings),
       hasStatusFeature: computed(() => this.metadata?.hasWorkItemStatusFeature),
       metadataLoading: computed(() => this.$apollo.queries.metadata.loading),
+      userExportEmail: computed(() => this.metadata?.userExportEmail),
       // newCommentTemplatePaths not included as it is already available on the `WorkItem` type.
     };
   },
diff --git a/app/assets/javascripts/work_items/components/work_items_csv_export_modal.vue b/app/assets/javascripts/work_items/components/work_items_csv_export_modal.vue
new file mode 100644
index 00000000000000..f69203d91a5e60
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_items_csv_export_modal.vue
@@ -0,0 +1,146 @@
+<script>
+import { GlModal, GlSprintf, GlIcon } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { __, n__, s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import workItemsCsvExportMutation from '../graphql/work_items_csv_export.mutation.graphql';
+
+export default {
+  actionCancel: {
+    text: __('Cancel'),
+  },
+  i18n: {
+    workItemExportTitle: s__('WorkItem|Export work items'),
+    workItemErrorMessage: s__('WorkItem|An error occurred while exporting work items.'),
+    issueExportTitle: s__('WorkItem|Export issues'),
+    issueErrorMessage: s__('WorkItem|An error occurred while exporting issues.'),
+    exportText: s__(
+      'WorkItem|The CSV export will be created in the background. Once finished, it will be sent to %{email} in an attachment.',
+    ),
+  },
+  components: {
+    GlModal,
+    GlSprintf,
+    GlIcon,
+  },
+  mixins: [glFeatureFlagMixin()],
+  inject: {
+    userExportEmail: {
+      default: '',
+    },
+  },
+  props: {
+    workItemCount: {
+      type: Number,
+      required: true,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+    queryVariables: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isExporting: false,
+    };
+  },
+  computed: {
+    isPlanningViewsEnabled() {
+      return this.glFeatures.workItemPlanningView;
+    },
+    actionPrimary() {
+      return {
+        text: this.isPlanningViewsEnabled
+          ? this.$options.i18n.workItemExportTitle
+          : this.$options.i18n.issueExportTitle,
+        attributes: {
+          variant: 'confirm',
+          loading: this.isExporting,
+          'data-testid': 'export-work-items-button',
+          'data-track-action': 'click_button',
+          'data-track-label': 'export_work_items_csv',
+        },
+      };
+    },
+    workItemCountText() {
+      return this.isPlanningViewsEnabled
+        ? n__('1 work item selected', '%d work items selected', this.workItemCount)
+        : n__('1 issue selected', '%d issues selected', this.workItemCount);
+    },
+    modalTitle() {
+      return this.isPlanningViewsEnabled
+        ? this.$options.i18n.workItemExportTitle
+        : this.$options.i18n.issueExportTitle;
+    },
+    exportErrorMessage() {
+      return this.isPlanningViewsEnabled
+        ? this.$options.i18n.workItemErrorMessage
+        : this.$options.i18n.issueErrorMessage;
+    },
+  },
+  methods: {
+    async exportWorkItems() {
+      this.isExporting = true;
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: workItemsCsvExportMutation,
+          variables: {
+            input: {
+              ...this.queryVariables,
+            },
+          },
+        });
+
+        const { message } = data.workItemsCsvExport || {};
+
+        if (message) {
+          createAlert({
+            message,
+            variant: 'success',
+          });
+          this.$refs.modal?.hide();
+        }
+      } catch (error) {
+        createAlert({
+          message: this.exportErrorMessage,
+        });
+      } finally {
+        this.isExporting = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    :modal-id="modalId"
+    :action-primary="actionPrimary"
+    :action-cancel="$options.actionCancel"
+    body-class="!gl-p-0"
+    :title="modalTitle"
+    data-testid="export-work-items-modal"
+    @primary="exportWorkItems"
+  >
+    <div
+      class="gl-items-center gl-justify-start gl-border-1 gl-border-subtle gl-p-4 gl-border-b-solid"
+    >
+      <gl-icon name="check" class="gl-color-green-400" />
+      <strong class="gl-m-3">{{ workItemCountText }}</strong>
+    </div>
+    <div class="modal-text gl-px-4 gl-py-5">
+      <gl-sprintf :message="$options.i18n.exportText">
+        <template #email>
+          <strong>{{ userExportEmail }}</strong>
+        </template>
+      </gl-sprintf>
+    </div>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
index 0b394f688e9dfc..465dad5d7d7fdb 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
@@ -21,6 +21,7 @@ query workItemMetadata($fullPath: ID!) {
       register
       reportAbuse
       signIn
+      userExportEmail
     }
   }
 }
diff --git a/app/assets/javascripts/work_items/graphql/work_items_csv_export.mutation.graphql b/app/assets/javascripts/work_items/graphql/work_items_csv_export.mutation.graphql
new file mode 100644
index 00000000000000..528d4b8537f20e
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/work_items_csv_export.mutation.graphql
@@ -0,0 +1,6 @@
+mutation WorkItemsCsvExport($input: WorkItemsCsvExportInput!) {
+  workItemsCsvExport(input: $input) {
+    message
+    errors
+  }
+}
diff --git a/app/assets/javascripts/work_items/pages/work_items_list_app.vue b/app/assets/javascripts/work_items/pages/work_items_list_app.vue
index 0251827325cc3b..5e65d0aa3a1363 100644
--- a/app/assets/javascripts/work_items/pages/work_items_list_app.vue
+++ b/app/assets/javascripts/work_items/pages/work_items_list_app.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
+import { computed } from 'vue';
+import { GlButton, GlFilteredSearchToken, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { isEmpty, unionBy } from 'lodash';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
@@ -164,7 +165,16 @@ export default {
     WorkItemUserPreferences,
     WorkItemListActions,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [glFeatureFlagMixin()],
+  provide() {
+    return {
+      showExportButton: computed(() => this.showImportExportButtons && this.workItems.length > 0),
+      projectImportJiraPath: this.projectImportJiraPath,
+    };
+  },
   inject: [
     'autocompleteAwardEmojisPath',
     'canBulkUpdate',
@@ -188,6 +198,7 @@ export default {
     'canReadCrmContact',
     'releasesPath',
     'metadataLoading',
+    'projectImportJiraPath',
   ],
   props: {
     eeWorkItemUpdateCount: {
@@ -317,7 +328,7 @@ export default {
         return data?.[this.namespace].workItemStateCounts ?? {};
       },
       skip() {
-        return isEmpty(this.pageParams) || !this.withTabs;
+        return isEmpty(this.pageParams);
       },
       result({ data }) {
         const { all } = data?.[this.namespace].workItemStateCounts ?? {};
@@ -435,6 +446,16 @@ export default {
         isGroup: this.isGroup,
       };
     },
+    csvExportQueryVariables() {
+      const singleWorkItemType = this.workItemType ? NAME_TO_ENUM_MAP[this.workItemType] : null;
+      return {
+        ...this.apiFilterParams,
+        projectPath: this.rootPageFullPath,
+        state: this.state,
+        search: this.searchQuery,
+        types: this.apiFilterParams.types || singleWorkItemType || this.defaultWorkItemTypes,
+      };
+    },
     searchQuery() {
       return convertToSearchQuery(this.filterTokens);
     },
@@ -771,6 +792,12 @@ export default {
     hiddenMetadataKeys() {
       return this.displaySettings?.namespacePreferences?.hiddenMetadataKeys || [];
     },
+    showImportExportButtons() {
+      return !this.isGroup && this.isSignedIn;
+    },
+    currentTabCount() {
+      return this.tabCounts[this.state] ?? 0;
+    },
     showParentFilter() {
       return this.glFeatures.workItemsListParentFilter;
     },
@@ -1287,7 +1314,11 @@ export default {
               :preselected-work-item-type="preselectedWorkItemType"
               @workItemCreated="refetchItems"
             />
-            <work-item-list-actions />
+            <work-item-list-actions
+              :show-import-export-buttons="showImportExportButtons"
+              :work-item-count="currentTabCount"
+              :query-variables="csvExportQueryVariables"
+            />
           </div>
         </template>
 
@@ -1319,7 +1350,11 @@ export default {
                 :preselected-work-item-type="preselectedWorkItemType"
                 @workItemCreated="refetchItems"
               />
-              <work-item-list-actions />
+              <work-item-list-actions
+                :show-import-export-buttons="showImportExportButtons"
+                :work-item-count="currentTabCount"
+                :query-variables="csvExportQueryVariables"
+              />
             </div>
           </work-item-list-heading>
         </template>
diff --git a/ee/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql b/ee/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
index 213bd629c11600..53b0f64e7484ad 100644
--- a/ee/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
+++ b/ee/app/assets/javascripts/work_items/graphql/work_item_metadata.query.graphql
@@ -26,6 +26,7 @@ query workItemMetadataEE($fullPath: ID!) {
       reportAbuse
       signIn
       issuesSettings @gl_introduced(version: "18.3.0-pre")
+      userExportEmail
     }
   }
 }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b5e92f5fb203fd..d94e8b0e7184ec 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2069,6 +2069,11 @@ msgid_plural "%d weeks remaining"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "1 work item selected"
+msgid_plural "%d work items selected"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "1 year remaining"
 msgid_plural "%d years remaining"
 msgstr[0] ""
@@ -72533,6 +72538,12 @@ msgstr ""
 msgid "WorkItem|All activity"
 msgstr ""
 
+msgid "WorkItem|An error occurred while exporting issues."
+msgstr ""
+
+msgid "WorkItem|An error occurred while exporting work items."
+msgstr ""
+
 msgid "WorkItem|An error occurred while getting work item counts."
 msgstr ""
 
@@ -72818,6 +72829,15 @@ msgstr ""
 msgid "WorkItem|Existing task"
 msgstr ""
 
+msgid "WorkItem|Export as CSV"
+msgstr ""
+
+msgid "WorkItem|Export issues"
+msgstr ""
+
+msgid "WorkItem|Export work items"
+msgstr ""
+
 msgid "WorkItem|Failed to archive custom field %{fieldName}."
 msgstr ""
 
@@ -72869,6 +72889,9 @@ msgstr ""
 msgid "WorkItem|How do I use custom fields?"
 msgstr ""
 
+msgid "WorkItem|Import from Jira"
+msgstr ""
+
 msgid "WorkItem|In progress"
 msgstr ""
 
@@ -73386,6 +73409,9 @@ msgstr ""
 msgid "WorkItem|The %{workItemType} was closed automatically when a branch was merged."
 msgstr ""
 
+msgid "WorkItem|The CSV export will be created in the background. Once finished, it will be sent to %{email} in an attachment."
+msgstr ""
+
 msgid "WorkItem|The current key result"
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/work_item_list_actions_spec.js b/spec/frontend/work_items/components/work_item_list_actions_spec.js
index 330e90f797cf36..103e7aed4aaeff 100644
--- a/spec/frontend/work_items/components/work_item_list_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_list_actions_spec.js
@@ -1,19 +1,30 @@
 import { GlDisclosureDropdown } from '@gitlab/ui';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import WorkItemsListActions from '~/work_items/components/work_item_list_actions.vue';
+import WorkItemListActions from '~/work_items/components/work_item_list_actions.vue';
+import WorkItemCsvExportModal from '~/work_items/components/work_items_csv_export_modal.vue';
 
 describe('WorkItemsListActions component', () => {
   let wrapper;
+  let glModalDirective;
 
   const projectImportJiraPath = 'gitlab-org/gitlab-test/-/import/jira';
   const rssPath = '/rss/path';
   const calendarPath = '/calendar/path';
 
-  function createComponent(injectedProperties = {}) {
-    return mountExtended(WorkItemsListActions, {
+  const workItemCount = 10;
+  const showImportExportButtons = true;
+
+  function createComponent(injectedProperties = {}, props = {}) {
+    glModalDirective = jest.fn();
+    return mountExtended(WorkItemListActions, {
       directives: {
         GlTooltip: createMockDirective('gl-tooltip'),
+        glModal: {
+          bind(_, { value }) {
+            glModalDirective(value);
+          },
+        },
       },
       provide: {
         projectImportJiraPath: null,
@@ -21,15 +32,22 @@ describe('WorkItemsListActions component', () => {
         calendarPath: null,
         ...injectedProperties,
       },
+      propsData: {
+        workItemCount,
+        showImportExportButtons,
+        ...props,
+      },
     });
   }
 
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findExportButton = () => wrapper.findByTestId('export-as-csv-button');
+  const findExportModal = () => wrapper.findComponent(WorkItemCsvExportModal);
   const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link');
   const findRssLink = () => wrapper.findByTestId('subscribe-rss');
   const findCalendarLink = () => wrapper.findByTestId('subscribe-calendar');
 
-  describe('import from jira', () => {
+  describe('import/export options', () => {
     describe('when projectImportJiraPath is provided', () => {
       beforeEach(() => {
         wrapper = createComponent({ projectImportJiraPath });
@@ -45,13 +63,38 @@ describe('WorkItemsListActions component', () => {
       });
     });
 
-    describe('when projectImportJiraPath is not provided', () => {
+    describe('when the showExportButton=true', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ showExportButton: true });
+      });
+
+      it('displays the export button and the dropdown', () => {
+        expect(findExportButton().exists()).toBe(true);
+        expect(findDropdown().exists()).toBe(true);
+      });
+
+      it('renders the export modal', () => {
+        expect(findExportModal().props()).toMatchObject({
+          modalId: 'work-item-export-modal',
+          workItemCount,
+        });
+      });
+
+      it('opens the export modal', () => {
+        findExportButton().vm.$emit('click');
+
+        expect(glModalDirective).toHaveBeenCalledWith('work-item-export-modal');
+      });
+    });
+
+    describe('when the showExportButton=false', () => {
       beforeEach(() => {
-        wrapper = createComponent();
+        wrapper = createComponent({ showExportButton: false });
       });
 
-      it('does not render the dropdown if no other paths are provided', () => {
-        expect(findDropdown().exists()).toBe(false);
+      it('does not display the export button and modal', () => {
+        expect(findExportButton().exists()).toBe(false);
+        expect(findExportModal().exists()).toBe(false);
       });
     });
   });
@@ -75,4 +118,14 @@ describe('WorkItemsListActions component', () => {
       expect(findCalendarLink().attributes('href')).toBe(calendarPath);
     });
   });
+
+  describe('when no options are provided', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('does not render the dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_items_csv_export_modal_spec.js b/spec/frontend/work_items/components/work_items_csv_export_modal_spec.js
new file mode 100644
index 00000000000000..f0775dac95d375
--- /dev/null
+++ b/spec/frontend/work_items/components/work_items_csv_export_modal_spec.js
@@ -0,0 +1,222 @@
+import { GlModal, GlIcon } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubComponent } from 'helpers/stub_component';
+import { createAlert } from '~/alert';
+import WorkItemsCsvExportModal from '~/work_items/components/work_items_csv_export_modal.vue';
+import workItemsCsvExportMutation from '~/work_items/graphql/work_items_csv_export.mutation.graphql';
+import { workItemsCsvExportResponse, workItemsCsvExportFailureResponse } from '../mock_data';
+
+jest.mock('~/alert');
+
+Vue.use(VueApollo);
+
+describe('WorkItemsCsvExportModal', () => {
+  let wrapper;
+  const workItemCount = 10;
+
+  function createComponent(options = {}) {
+    const {
+      injectedProperties = {},
+      props = {},
+      workItemsCsvExportHandler = jest.fn().mockResolvedValue(workItemsCsvExportResponse),
+    } = options;
+
+    return mount(WorkItemsCsvExportModal, {
+      apolloProvider: createMockApollo([[workItemsCsvExportMutation, workItemsCsvExportHandler]]),
+      propsData: {
+        modalId: 'csv-export-modal',
+        workItemCount,
+        ...props,
+      },
+      provide: {
+        userExportEmail: 'admin@example.com',
+        glFeatures: {
+          workItemPlanningView: true,
+        },
+        ...injectedProperties,
+      },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          template:
+            '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+        }),
+      },
+    });
+  }
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+
+  describe('template', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('displays the cancel button', () => {
+      expect(findModal().props('actionCancel')).toEqual({ text: 'Cancel' });
+    });
+
+    describe('email info text', () => {
+      it('displays the proper email', () => {
+        const email = 'admin@example.com';
+        wrapper = createComponent({ injectedProperties: { userExportEmail: email } });
+        expect(findModal().text()).toContain(
+          `The CSV export will be created in the background. Once finished, it will be sent to ${email} in an attachment.`,
+        );
+      });
+    });
+
+    describe('when workItemPlanningView is enabled', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      it('displays the modal title "Export work items"', () => {
+        expect(findModal().props('title')).toBe('Export work items');
+      });
+
+      it('displays the primary button with title "Export work items"', () => {
+        expect(findModal().props('actionPrimary')).toMatchObject({
+          text: 'Export work items',
+          attributes: {
+            variant: 'confirm',
+            'data-testid': 'export-work-items-button',
+            'data-track-action': 'click_button',
+            'data-track-label': 'export_work_items_csv',
+          },
+        });
+      });
+
+      it('displays work item count text', () => {
+        expect(wrapper.text()).toContain(`${workItemCount} work items selected`);
+        expect(findIcon().exists()).toBe(true);
+      });
+    });
+
+    describe('when workItemPlanningView is disabled', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          injectedProperties: {
+            glFeatures: {
+              workItemPlanningView: false,
+            },
+          },
+        });
+      });
+
+      it('displays the modal title "Export issues"', () => {
+        expect(findModal().props('title')).toBe('Export issues');
+      });
+
+      it('displays the primary button with title "Export issues"', () => {
+        expect(findModal().props('actionPrimary')).toMatchObject({
+          text: 'Export issues',
+          attributes: {
+            variant: 'confirm',
+            'data-testid': 'export-work-items-button',
+            'data-track-action': 'click_button',
+            'data-track-label': 'export_work_items_csv',
+          },
+        });
+      });
+
+      it('displays issue count text', () => {
+        wrapper = createComponent({
+          injectedProperties: {
+            glFeatures: {
+              workItemPlanningView: false,
+            },
+          },
+        });
+        expect(wrapper.text()).toContain(`${workItemCount} issues selected`);
+        expect(findIcon().exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('exportWorkItems', () => {
+    it('exports successfully', async () => {
+      const workItemsCsvExportHandler = jest.fn().mockResolvedValue(workItemsCsvExportResponse);
+      const queryVariables = { projectPath: 'gitlab-org/gitlab', search: 'test' };
+      wrapper = createComponent({
+        workItemsCsvExportHandler,
+        props: { queryVariables },
+      });
+
+      findModal().vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(workItemsCsvExportHandler).toHaveBeenCalledWith({
+        input: queryVariables,
+      });
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'Your CSV export request has succeeded. The result will be emailed to email',
+        variant: 'success',
+      });
+    });
+
+    it('sets loading state during export', async () => {
+      let resolveExport;
+      const exportPromise = new Promise((resolve) => {
+        resolveExport = resolve;
+      });
+      const workItemsCsvExportHandler = jest.fn().mockReturnValue(exportPromise);
+      wrapper = createComponent({ workItemsCsvExportHandler });
+
+      findModal().vm.$emit('primary');
+
+      await nextTick();
+
+      expect(findModal().props('actionPrimary').attributes.loading).toBe(true);
+
+      resolveExport(workItemsCsvExportResponse);
+      await waitForPromises();
+
+      expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
+    });
+
+    describe('when export fails', () => {
+      it('shows work items error message when workItemPlanningView is enabled', async () => {
+        const workItemsCsvExportHandler = jest
+          .fn()
+          .mockRejectedValue(workItemsCsvExportFailureResponse);
+        wrapper = createComponent({ workItemsCsvExportHandler });
+
+        findModal().vm.$emit('primary');
+
+        await waitForPromises();
+
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'An error occurred while exporting work items.',
+        });
+      });
+
+      it('shows issues error message when workItemPlanningView is disabled', async () => {
+        const workItemsCsvExportHandler = jest
+          .fn()
+          .mockRejectedValue(workItemsCsvExportFailureResponse);
+        wrapper = createComponent({
+          workItemsCsvExportHandler,
+          injectedProperties: {
+            glFeatures: {
+              workItemPlanningView: false,
+            },
+          },
+        });
+
+        findModal().vm.$emit('primary');
+
+        await waitForPromises();
+
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'An error occurred while exporting issues.',
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/work_items/list/components/work_items_list_app_spec.js b/spec/frontend/work_items/list/components/work_items_list_app_spec.js
index 54ac0dfc6e8a14..94e2b98acd2c50 100644
--- a/spec/frontend/work_items/list/components/work_items_list_app_spec.js
+++ b/spec/frontend/work_items/list/components/work_items_list_app_spec.js
@@ -192,6 +192,9 @@ describeSkipVue3(skipReason, () => {
         hasStatusFeature: true,
         releasesPath: RELEASES_ENDPOINT,
         metadataLoading: false,
+        email: '',
+        hasAnyWorkItems: false,
+        projectImportJiraPath: '/project/import/jira',
         ...provide,
       },
       propsData: {
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 7120e0fa103e2c..164faf433b689d 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -8992,3 +8992,24 @@ export const namespacePathsQueryResponse = {
     },
   },
 };
+
+export const workItemsCsvExportResponse = {
+  data: {
+    workItemsCsvExport: {
+      message: 'Your CSV export request has succeeded. The result will be emailed to email',
+      errors: [],
+      __typename: 'WorkItemsCsvExportPayload',
+    },
+  },
+};
+
+export const workItemsCsvExportFailureResponse = {
+  data: {},
+  errors: [
+    {
+      message: 'Csv export failed',
+      locations: [{ line: 2, column: 3 }],
+      path: ['workItemsCsvExport'],
+    },
+  ],
+};
-- 
GitLab