Stop flashing issue description on details toggle

Issue description flashes an animation for task completion
to indicate a change. This is unneeded for <details> html
tags opening and closing, because the issue description
did not in fact change. The commit removes the animation
for that scenario.

Changelog: changed

app/assets/javascripts/issues/show/components/description.vue

@@ -132,7 +132,10 @@ export default {
   },
   watch: {
     descriptionHtml(newDescription, oldDescription) {
-      if (!this.initialUpdate && newDescription !== oldDescription) {
+      if (
+        !this.initialUpdate &&
+        this.stripClientState(newDescription) !== this.stripClientState(oldDescription)
+      ) {
         this.animateChange();
       } else {
         this.initialUpdate = false;
@@ -321,6 +324,9 @@ export default {
         listItem.append(element);
       }
     },
+    stripClientState(description) {
+      return description.replaceAll('<details open="true">', '<details>');
+    },
     async createTask({ taskTitle, taskDescription, oldDescription }) {
       try {
         const { title, description } = extractTaskTitleAndDescription(taskTitle, taskDescription);

spec/frontend/issues/show/components/description_spec.js

@@ -19,7 +19,11 @@ import {
   getIssueDetailsResponse,
   projectWorkItemTypesQueryResponse,
 } from 'jest/work_items/mock_data';
-import { descriptionProps as initialProps, descriptionHtmlWithList } from '../mock_data/mock_data';
+import {
+  descriptionProps as initialProps,
+  descriptionHtmlWithList,
+  descriptionHtmlWithDetailsTag,
+} from '../mock_data/mock_data';
 
 jest.mock('~/alert');
 jest.mock('~/task_list');
@@ -111,6 +115,19 @@ describe('Description component', () => {
     expect(findGfmContent().classes()).toContain('issue-realtime-trigger-pulse');
   });
 
+  it('doesnt animate expand/collapse of details elements', async () => {
+    createComponent();
+
+    await wrapper.setProps({ descriptionHtml: descriptionHtmlWithDetailsTag.collapsed });
+    expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
+
+    await wrapper.setProps({ descriptionHtml: descriptionHtmlWithDetailsTag.expanded });
+    expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
+
+    await wrapper.setProps({ descriptionHtml: descriptionHtmlWithDetailsTag.collapsed });
+    expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
+  });
+
   it('applies syntax highlighting and math when description changed', async () => {
     createComponent();
 

spec/frontend/issues/show/mock_data/mock_data.js

@@ -79,3 +79,16 @@ export const descriptionHtmlWithList = `
     <li data-sourcepos="3:1-3:8">todo 3</li>
   </ul>
 `;
+
+export const descriptionHtmlWithDetailsTag = {
+  expanded: `
+    <details open="true">
+      <summary>Section 1</summary>
+      <p>Data</p>
+    </details>'`,
+  collapsed: `
+    <details>
+      <summary>Section 1</summary>
+      <p>Data</p>
+    </details>'`,
+};