1 files changed, 14 insertions, 39 deletions

diff --git a/app/assets/javascripts/content_editor/components/top_toolbar.vue b/app/assets/javascripts/content_editor/components/top_toolbar.vue
index fafc7a660e7..82a449ae6af 100644
--- a/app/assets/javascripts/content_editor/components/top_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/top_toolbar.vue
@@ -1,7 +1,5 @@
 <script>
-import Tracking from '~/tracking';
-import { CONTENT_EDITOR_TRACKING_LABEL, TOOLBAR_CONTROL_TRACKING_ACTION } from '../constants';
-import { ContentEditor } from '../services/content_editor';
+import trackUIControl from '../services/track_ui_control';
 import Divider from './divider.vue';
 import ToolbarButton from './toolbar_button.vue';
 import ToolbarImageButton from './toolbar_image_button.vue';
@@ -9,10 +7,6 @@ import ToolbarLinkButton from './toolbar_link_button.vue';
 import ToolbarTableButton from './toolbar_table_button.vue';
 import ToolbarTextStyleDropdown from './toolbar_text_style_dropdown.vue';
 
-const trackingMixin = Tracking.mixin({
-  label: CONTENT_EDITOR_TRACKING_LABEL,
-});
-
 export default {
   components: {
     ToolbarButton,
@@ -22,19 +16,9 @@ export default {
     ToolbarImageButton,
     Divider,
   },
-  mixins: [trackingMixin],
-  props: {
-    contentEditor: {
-      type: ContentEditor,
-      required: true,
-    },
-  },
   methods: {
-    trackToolbarControlExecution({ contentType: property, value }) {
-      this.track(TOOLBAR_CONTROL_TRACKING_ACTION, {
-        property,
-        value,
-      });
+    trackToolbarControlExecution({ contentType, value }) {
+      trackUIControl({ property: contentType, value });
     },
   },
 };
@@ -45,7 +29,6 @@ export default {
   >
     <toolbar-text-style-dropdown
       data-testid="text-styles"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <divider />
@@ -53,99 +36,91 @@ export default {
       data-testid="bold"
       content-type="bold"
       icon-name="bold"
+      class="gl-mx-2"
       editor-command="toggleBold"
       :label="__('Bold text')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="italic"
       content-type="italic"
       icon-name="italic"
+      class="gl-mx-2"
       editor-command="toggleItalic"
       :label="__('Italic text')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="strike"
       content-type="strike"
       icon-name="strikethrough"
+      class="gl-mx-2"
       editor-command="toggleStrike"
       :label="__('Strikethrough')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="code"
       content-type="code"
       icon-name="code"
+      class="gl-mx-2"
       editor-command="toggleCode"
       :label="__('Code')"
-      :tiptap-editor="contentEditor.tiptapEditor"
-      @execute="trackToolbarControlExecution"
-    />
-    <toolbar-link-button
-      data-testid="link"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
+    <toolbar-link-button data-testid="link" @execute="trackToolbarControlExecution" />
     <divider />
     <toolbar-image-button
       ref="imageButton"
       data-testid="image"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="blockquote"
       content-type="blockquote"
       icon-name="quote"
+      class="gl-mx-2"
       editor-command="toggleBlockquote"
       :label="__('Insert a quote')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="code-block"
       content-type="codeBlock"
       icon-name="doc-code"
+      class="gl-mx-2"
       editor-command="toggleCodeBlock"
       :label="__('Insert a code block')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="bullet-list"
       content-type="bulletList"
       icon-name="list-bulleted"
+      class="gl-mx-2"
       editor-command="toggleBulletList"
       :label="__('Add a bullet list')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="ordered-list"
       content-type="orderedList"
       icon-name="list-numbered"
+      class="gl-mx-2"
       editor-command="toggleOrderedList"
       :label="__('Add a numbered list')"
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
     <toolbar-button
       data-testid="horizontal-rule"
       content-type="horizontalRule"
       icon-name="dash"
+      class="gl-mx-2"
       editor-command="setHorizontalRule"
       :label="__('Add a horizontal rule')"
-      :tiptap-editor="contentEditor.tiptapEditor"
-      @execute="trackToolbarControlExecution"
-    />
-    <toolbar-table-button
-      :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
+    <toolbar-table-button @execute="trackToolbarControlExecution" />
   </div>
 </template>
 <style>