Merge branch '296888-resolve-conflicts-popover-does-not-show' into 'master'

Hide "Resolve conflicts" button on source branch protected instead of disabling it

See merge request gitlab-org/gitlab!51121

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue

 <script>
-import { GlButton, GlModalDirective, GlSkeletonLoader, GlPopover, GlLink } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { GlButton, GlModalDirective, GlSkeletonLoader } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import userPermissionsQuery from '../../queries/permissions.query.graphql';
@@ -13,8 +12,6 @@ export default {
     GlSkeletonLoader,
     StatusIcon,
     GlButton,
-    GlPopover,
-    GlLink,
   },
   directives: {
     GlModalDirective,
@@ -93,24 +90,12 @@ export default {
 
       return this.mr.sourceBranchProtected;
     },
-    popoverTitle() {
-      return s__(
-        'mrWidget|This feature merges changes from the target branch to the source branch. You cannot use this feature since the source branch is protected.',
-      );
-    },
     showResolveButton() {
-      return this.mr.conflictResolutionPath && this.canPushToSourceBranch;
-    },
-    showPopover() {
-      return this.showResolveButton && this.sourceBranchProtected;
+      return (
+        this.mr.conflictResolutionPath && this.canPushToSourceBranch && !this.sourceBranchProtected
+      );
     },
   },
-  i18n: {
-    title: s__(
-      'mrWidget|This feature merges changes from the target branch to the source branch. You cannot use this feature since the source branch is protected.',
-    ),
-    linkText: s__('mrWidget|Learn more about resolving conflicts'),
-  },
 };
 </script>
 <template>
@@ -141,28 +126,13 @@ export default {
             }}
           </span>
         </span>
-        <span v-if="showResolveButton" ref="popover">
-          <gl-button
-            :href="mr.conflictResolutionPath"
-            :disabled="sourceBranchProtected"
-            data-testid="resolve-conflicts-button"
-          >
-            {{ s__('mrWidget|Resolve conflicts') }}
-          </gl-button>
-          <gl-popover v-if="showPopover" :target="() => $refs.popover" placement="top">
-            <template #title>
-              <div class="gl-font-weight-normal gl-font-base">
-                {{ $options.i18n.title }}
-              </div>
-            </template>
-
-            <div class="gl-text-center">
-              <gl-link :href="mr.conflictsDocsPath" target="_blank" rel="noopener noreferrer">
-                {{ $options.i18n.linkText }}
-              </gl-link>
-            </div>
-          </gl-popover>
-        </span>
+        <gl-button
+          v-if="showResolveButton"
+          :href="mr.conflictResolutionPath"
+          data-testid="resolve-conflicts-button"
+        >
+          {{ s__('mrWidget|Resolve conflicts') }}
+        </gl-button>
         <gl-button
           v-if="canMerge"
           v-gl-modal-directive="'modal-merge-info'"

changelogs/unreleased/296888-resolve-conflicts-popover-does-not-show.yml

+---
+title: Hide "Resolve conflicts" button when source branch is protected.
+merge_request: 51121
+author: Marcin Majkowski @marcinmajkowski
+type: added

locale/gitlab.pot

@@ -36756,9 +36756,6 @@ msgstr ""
 msgid "mrWidget|Jump to first unresolved thread"
 msgstr ""
 
-msgid "mrWidget|Learn more about resolving conflicts"
-msgstr ""
-
 msgid "mrWidget|Loading deployment statistics"
 msgstr ""
 
@@ -36873,9 +36870,6 @@ msgstr ""
 msgid "mrWidget|This action will start a merge train when pipeline %{pipelineLink} succeeds."
 msgstr ""
 
-msgid "mrWidget|This feature merges changes from the target branch to the source branch. You cannot use this feature since the source branch is protected."
-msgstr ""
-
 msgid "mrWidget|This merge request failed to be merged automatically"
 msgstr ""
 

spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

-import { GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { removeBreakLine } from 'helpers/text_helper';
@@ -10,7 +9,6 @@ describe('MRWidgetConflicts', () => {
   let mergeRequestWidgetGraphql = null;
   const path = '/conflicts';
 
-  const findPopover = () => wrapper.find(GlPopover);
   const findResolveButton = () => wrapper.findByTestId('resolve-conflicts-button');
   const findMergeLocalButton = () => wrapper.findByTestId('merge-locally-button');
 
@@ -219,12 +217,8 @@ describe('MRWidgetConflicts', () => {
           });
         });
 
-        it('sets resolve button as disabled', () => {
-          expect(findResolveButton().attributes('disabled')).toBe('true');
-        });
-
-        it('shows the popover', () => {
-          expect(findPopover().exists()).toBe(true);
+        it('should not allow you to resolve the conflicts', () => {
+          expect(findResolveButton().exists()).toBe(false);
         });
       });
 
@@ -241,12 +235,9 @@ describe('MRWidgetConflicts', () => {
           });
         });
 
-        it('sets resolve button as disabled', () => {
-          expect(findResolveButton().attributes('disabled')).toBe(undefined);
-        });
-
-        it('does not show the popover', () => {
-          expect(findPopover().exists()).toBe(false);
+        it('should allow you to resolve the conflicts', () => {
+          expect(findResolveButton().text()).toContain('Resolve conflicts');
+          expect(findResolveButton().attributes('href')).toEqual(TEST_HOST);
         });
       });
     });