Merge branch 'track-content-editor-links' into 'master'

Track content editor links

See merge request gitlab-org/gitlab!63941

app/assets/javascripts/content_editor/components/toolbar_link_button.vue

@@ -6,6 +6,7 @@ import {
   GlFormInputGroup,
   GlDropdownDivider,
   GlDropdownItem,
+  GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
 import { Editor as TiptapEditor } from '@tiptap/vue-2';
 import { hasSelection } from '../services/utils';
@@ -21,6 +22,9 @@ export default {
     GlDropdownItem,
     GlButton,
   },
+  directives: {
+    GlTooltip,
+  },
   props: {
     tiptapEditor: {
       type: TiptapEditor,
@@ -68,6 +72,9 @@ export default {
 </script>
 <template>
   <gl-dropdown
+    v-gl-tooltip
+    :aria-label="__('Insert link')"
+    :title="__('Insert link')"
     :toggle-class="{ active: isActive }"
     size="small"
     category="tertiary"

app/assets/javascripts/content_editor/components/top_toolbar.vue

@@ -72,7 +72,11 @@ export default {
       :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
-    <toolbar-link-button :tiptap-editor="contentEditor.tiptapEditor" />
+    <toolbar-link-button
+      data-testid="link"
+      :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
+    />
     <divider />
     <toolbar-button
       data-testid="blockquote"

locale/gitlab.pot

@@ -17492,6 +17492,9 @@ msgstr ""
 msgid "Insert inline code"
 msgstr ""
 
+msgid "Insert link"
+msgstr ""
+
 msgid "Insert suggestion"
 msgstr ""
 

spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content_editor/components/toolbar_link_button renders dropdown component 1`] = `
-"<div class=\\"dropdown b-dropdown gl-new-dropdown btn-group\\">
+"<div class=\\"dropdown b-dropdown gl-new-dropdown btn-group\\" aria-label=\\"Insert link\\" title=\\"Insert link\\">
   <!----><button aria-haspopup=\\"true\\" aria-expanded=\\"false\\" type=\\"button\\" class=\\"btn dropdown-toggle btn-default btn-sm gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only\\">
     <!----> <svg data-testid=\\"link-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"dropdown-icon gl-icon s16\\">
       <use href=\\"#link\\"></use>

spec/frontend/content_editor/components/top_toolbar_spec.js

@@ -48,6 +48,7 @@ describe('content_editor/components/top_toolbar', () => {
     ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
     ${'code-block'}   | ${{ contentType: 'codeBlock', iconName: 'doc-code', label: 'Insert a code block', editorCommand: 'toggleCodeBlock' }}
     ${'text-styles'}  | ${{}}
+    ${'link'}         | ${{}}
   `('given a $testId toolbar control', ({ testId, controlProps }) => {
     beforeEach(() => {
       buildWrapper();