Merge branch '224649-fix-resolved-threads-popup-link-and-placement' into 'master'

Resolve "Fix 'Resolved threads' popup link and placement"

See merge request gitlab-org/gitlab!40489

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -60,6 +60,18 @@ export default {
       return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
     },
   },
+  watch: {
+    isResolvedCommentsPopoverHidden(newVal) {
+      if (!newVal) {
+        this.$refs.resolvedComments.scrollIntoView();
+      }
+    },
+  },
+  mounted() {
+    if (!this.isResolvedCommentsPopoverHidden && this.$refs.resolvedComments) {
+      this.$refs.resolvedComments.$el.scrollIntoView();
+    }
+  },
   methods: {
     handleSidebarClick() {
       this.isResolvedCommentsPopoverHidden = true;
@@ -129,6 +141,7 @@ export default {
     <template v-if="resolvedDiscussions.length > 0">
       <gl-button
         id="resolved-comments"
+        ref="resolvedComments"
         data-testid="resolved-comments"
         :icon="resolvedCommentsToggleIcon"
         variant="link"
@@ -151,9 +164,12 @@ export default {
             )
           }}
         </p>
-        <a href="#" rel="noopener noreferrer" target="_blank">{{
-          s__('DesignManagement|Learn more about resolving comments')
-        }}</a>
+        <a
+          href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
+          rel="noopener noreferrer"
+          target="_blank"
+          >{{ s__('DesignManagement|Learn more about resolving comments') }}</a
+        >
       </gl-popover>
       <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3">
         <design-discussion

changelogs/unreleased/224649-fix-resolved-threads-popup-link-and-placement.yml

+---
+title: Resolve Fix Resolved threads popup link and placement
+merge_request: 40489
+author:
+type: fixed

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -7,6 +7,9 @@ import DesignDiscussion from '~/design_management/components/design_notes/design
 import design from '../mock_data/design';
 import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
 
+const scrollIntoViewMock = jest.fn();
+HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
 const updateActiveDiscussionMutationVariables = {
   mutation: updateActiveDiscussionMutation,
   variables: {
@@ -53,6 +56,7 @@ describe('Design management design sidebar component', () => {
           mutate,
         },
       },
+      stubs: { GlPopover },
     });
   }
 
@@ -220,6 +224,10 @@ describe('Design management design sidebar component', () => {
       expect(findPopover().exists()).toBe(true);
     });
 
+    it('scrolls to resolved threads link', () => {
+      expect(scrollIntoViewMock).toHaveBeenCalled();
+    });
+
     it('dismisses a popover on the outside click', () => {
       wrapper.trigger('click');
       return wrapper.vm.$nextTick(() => {

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -92,7 +92,7 @@ exports[`Design management design index page renders design index 1`] = `
       </p>
        
       <a
-        href="#"
+        href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
         rel="noopener noreferrer"
         target="_blank"
       >