From 756f8aaff62f4d422889c4efea2e341b3cb037da Mon Sep 17 00:00:00 2001
From: Zhaochen Li <zli@gitlab.com>
Date: Fri, 23 May 2025 17:13:26 +1000
Subject: [PATCH] Add metric for open worksapce button

---
 .../components/open_workspace_button.vue      |  5 +++++
 .../events/click_open_workspace_button.yml    | 16 ++++++++++++++
 ...unt_total_open_workspace_button_clicks.yml | 22 +++++++++++++++++++
 .../components/open_workspace_button_spec.js  | 14 ++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 ee/config/events/click_open_workspace_button.yml
 create mode 100644 ee/config/metrics/counts_all/count_total_open_workspace_button_clicks.yml

diff --git a/ee/app/assets/javascripts/workspaces/common/components/open_workspace_button.vue b/ee/app/assets/javascripts/workspaces/common/components/open_workspace_button.vue
index bba1be8527a181..c3ea4613b2211b 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/open_workspace_button.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/open_workspace_button.vue
@@ -1,7 +1,10 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { InternalEvents } from '~/tracking';
 import { WORKSPACE_STATES } from '../constants';
 
+const trackingMixin = InternalEvents.mixin();
+
 export default {
   components: {
     GlButton,
@@ -9,6 +12,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [trackingMixin],
   props: {
     workspaceDisplayState: {
       type: String,
@@ -41,6 +45,7 @@ export default {
       class="gl-w-full sm:gl-w-auto"
       data-testid="workspace-open-button"
       target="_blank"
+      @click="trackEvent('click_open_workspace_button')"
     >
       {{ s__('Workspaces|Open workspace') }}
     </gl-button>
diff --git a/ee/config/events/click_open_workspace_button.yml b/ee/config/events/click_open_workspace_button.yml
new file mode 100644
index 00000000000000..949f94ad6faa12
--- /dev/null
+++ b/ee/config/events/click_open_workspace_button.yml
@@ -0,0 +1,16 @@
+---
+description: Track number of 'Open workspace' button clicks in workspace feature
+internal_events: true
+action: click_open_workspace_button
+identifiers:
+- project
+- namespace
+- user
+product_group: remote_development
+product_categories:
+- workspaces
+milestone: '18.1'
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/192315
+tiers:
+- premium
+- ultimate
diff --git a/ee/config/metrics/counts_all/count_total_open_workspace_button_clicks.yml b/ee/config/metrics/counts_all/count_total_open_workspace_button_clicks.yml
new file mode 100644
index 00000000000000..118f0974a394c2
--- /dev/null
+++ b/ee/config/metrics/counts_all/count_total_open_workspace_button_clicks.yml
@@ -0,0 +1,22 @@
+---
+key_path: counts.count_total_open_workspace_button_clicks
+description: Count of Total Number of 'Open workspace' button clicks
+product_group: remote_development
+product_categories:
+- workspaces
+performance_indicator_type: []
+value_type: number
+status: active
+milestone: '18.1'
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/192315
+time_frame:
+- 28d
+- 7d
+- all
+data_source: internal_events
+data_category: optional
+tiers:
+- premium
+- ultimate
+events:
+- name: click_open_workspace_button
diff --git a/ee/spec/frontend/workspaces/common/components/open_workspace_button_spec.js b/ee/spec/frontend/workspaces/common/components/open_workspace_button_spec.js
index 66b5d8a1a442ab..07cbea08e98050 100644
--- a/ee/spec/frontend/workspaces/common/components/open_workspace_button_spec.js
+++ b/ee/spec/frontend/workspaces/common/components/open_workspace_button_spec.js
@@ -2,9 +2,11 @@ import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import OpenWorkspaceButton from 'ee/workspaces/common/components/open_workspace_button.vue';
 import { WORKSPACE_STATES } from 'ee/workspaces/common/constants';
+import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 
 describe('OpenWorkspaceButton', () => {
   let wrapper;
+  const { bindInternalEventDocument } = useMockInternalEventsTracking();
 
   const createWrapper = ({ workspaceDisplayState, workspaceUrl }) => {
     wrapper = shallowMount(OpenWorkspaceButton, {
@@ -25,6 +27,18 @@ describe('OpenWorkspaceButton', () => {
 
         expect(wrapper.findComponent(GlButton).text()).toContain('Open workspace');
       });
+
+      it('calls trackEvent method when clicked on "Open Workspace" button', () => {
+        const { trackEventSpy } = bindInternalEventDocument(wrapper.element);
+        createWrapper({
+          workspaceDisplayState: WORKSPACE_STATES.running,
+          workspaceUrl: 'http://example.com/',
+        });
+
+        wrapper.findComponent(GlButton).vm.$emit('click');
+
+        expect(trackEventSpy).toHaveBeenCalledWith('click_open_workspace_button', {}, undefined);
+      });
     });
 
     describe('when workspace does not have URL', () => {
-- 
GitLab