Merge branch '2526-popovers-instead-of-tooltips' into 'master'

Use popovers instead of tooltips in inline code quality

See merge request gitlab-org/gitlab!64371

doc/user/project/merge_requests/code_quality.md

@@ -65,7 +65,7 @@ See also the Code Climate list of [Supported Languages for Maintainability](http
 Changes to files in merge requests can cause Code Quality to fall if merged. In these cases,
 the merge request's diff view displays an indicator next to lines with new Code Quality violations. For example:
 
-![Code Quality MR diff report](img/code_quality_mr_diff_report_v14.png)
+![Code Quality MR diff report](img/code_quality_mr_diff_report_v14_2.png)
 
 ## Example configuration
 

ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue

 <script>
-import { GlTooltipDirective, GlIcon, GlModalDirective, GlModal } from '@gitlab/ui';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-import { __, s__, sprintf } from '~/locale';
+import { GlPopover, GlIcon } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import CodequalityIssueBody from '~/reports/codequality_report/components/codequality_issue_body.vue';
 import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/constants';
 
-const i18n = {
-  tooltip: s__('CodeQuality|Code quality: %{severity} - %{description}'),
-};
-
 export default {
   components: {
     GlIcon,
-    GlModal,
+    GlPopover,
     CodequalityIssueBody,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-    GlModal: GlModalDirective,
-  },
   modalCloseButton: {
     text: __('Close'),
     attributes: [{ variant: 'info' }],
   },
   i18n: {
-    modalTitle: s__('CodeQuality|New code quality degradations on this line'),
+    popoverTitle: s__('CodeQuality|New code quality degradations on this line'),
   },
   props: {
     filePath: {
@@ -38,12 +29,6 @@ export default {
     },
   },
   computed: {
-    tooltipText() {
-      return sprintf(i18n.tooltip, {
-        severity: capitalizeFirstCharacter(this.severity),
-        description: this.codequality[0].description,
-      });
-    },
     severity() {
       return this.codequality[0].severity;
     },
@@ -61,8 +46,6 @@ export default {
         return {
           name: degradation.description,
           severity: degradation.severity,
-          path: this.filePath,
-          line: this.line,
         };
       });
     },
@@ -73,24 +56,24 @@ export default {
 <template>
   <div>
     <gl-icon
-      v-gl-modal="`codequality-${filePath}:${line}`"
-      v-gl-tooltip.hover
-      :title="tooltipText"
+      :id="`codequality-${filePath}:${line}`"
       :size="12"
       :name="severityIcon"
       :class="severityClass"
       class="gl-hover-cursor-pointer codequality-severity-icon"
     />
-    <gl-modal
-      :modal-id="`codequality-${filePath}:${line}`"
-      :title="$options.i18n.modalTitle"
-      :action-primary="$options.modalCloseButton"
+    <gl-popover
+      triggers="hover focus"
+      placement="topright"
+      :css-classes="['gl-max-w-max-content', 'gl-w-half']"
+      :target="`codequality-${filePath}:${line}`"
+      :title="$options.i18n.popoverTitle"
     >
       <codequality-issue-body
         v-for="(degradation, index) in degradations"
         :key="index"
         :issue="degradation"
       />
-    </gl-modal>
+    </gl-popover>
   </div>
 </template>

ee/spec/frontend/diffs/components/code_quality_gutter_icon_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -68,17 +68,17 @@ describe('EE CodeQualityGutterIcon', () => {
     });
   });
 
-  describe('code quality modal', () => {
+  describe('code quality gutter icon', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('opens a code quality modal on click', () => {
-      const modalId = 'codequality-index.js:3';
-      const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
-      wrapper.findComponent(GlIcon).trigger('click');
+    it('shows a popover on hover', () => {
+      const popoverTarget = 'codequality-index.js:3';
 
-      expect(rootEmit.mock.calls[0]).toContainEqual(modalId);
+      wrapper.findComponent(GlIcon).trigger('mouseover');
+
+      expect(wrapper.find(GlPopover).props().target).toBe(popoverTarget);
     });
 
     it('passes the issue data into the issue components correctly', () => {
@@ -89,19 +89,15 @@ describe('EE CodeQualityGutterIcon', () => {
       expect(issueProps).toEqual([
         {
           issue: {
-            path: defaultProps.filePath,
             severity: defaultProps.codequality[0].severity,
             name: defaultProps.codequality[0].description,
-            line: defaultProps.codequality[0].line,
           },
           status: 'neutral',
         },
         {
           issue: {
-            path: defaultProps.filePath,
             severity: defaultProps.codequality[1].severity,
             name: defaultProps.codequality[1].description,
-            line: defaultProps.codequality[1].line,
           },
           status: 'neutral',
         },

locale/gitlab.pot

@@ -8009,9 +8009,6 @@ msgstr ""
 msgid "CodeOwner|Pattern"
 msgstr ""
 
-msgid "CodeQuality|Code quality: %{severity} - %{description}"
-msgstr ""
-
 msgid "CodeQuality|New code quality degradations on this line"
 msgstr ""