From d3b799eaa57c3d0e2fc5e0946c5347cf109fc56b Mon Sep 17 00:00:00 2001
From: Yusuke Nemoto <kaakaa@users.noreply.github.com>
Date: Thu, 15 Feb 2024 19:50:39 +0900
Subject: [PATCH] [MM-52171] webapp: Make rhs_card reloading when card body is
 changed (#23612)

---
 .../rhs_card/__snapshots__/rhs_card.test.tsx.snap    | 12 +++++++++---
 webapp/channels/src/components/rhs_card/rhs_card.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap b/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
index 1cb350cf18..4b5df65c6b 100644
--- a/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
+++ b/webapp/channels/src/components/rhs_card/__snapshots__/rhs_card.test.tsx.snap
@@ -31,7 +31,9 @@ exports[`comoponents/rhs_card/RhsCard should match on post when no plugin defini
       <div
         className="info-card"
       >
-        <Connect(Markdown) />
+        <Connect(Markdown)
+          message=""
+        />
       </div>
       <div
         className="d-flex post-card--info"
@@ -135,7 +137,9 @@ exports[`comoponents/rhs_card/RhsCard should match on post when plugin defining
       <div
         className="info-card"
       >
-        <Connect(Markdown) />
+        <Connect(Markdown)
+          message=""
+        />
       </div>
       <div
         className="d-flex post-card--info"
@@ -239,7 +243,9 @@ exports[`comoponents/rhs_card/RhsCard should match on post when plugin defining
       <div
         className="info-card"
       >
-        <Connect(Markdown) />
+        <Connect(Markdown)
+          message=""
+        />
       </div>
       <div
         className="d-flex post-card--info"
diff --git a/webapp/channels/src/components/rhs_card/rhs_card.tsx b/webapp/channels/src/components/rhs_card/rhs_card.tsx
index 397d83b315..c72d1009b2 100644
--- a/webapp/channels/src/components/rhs_card/rhs_card.tsx
+++ b/webapp/channels/src/components/rhs_card/rhs_card.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import deepEqual from 'fast-deep-equal';
 import React from 'react';
 import type {ReactNode} from 'react';
 import Scrollbars from 'react-custom-scrollbars';
@@ -80,6 +81,9 @@ export default class RhsCard extends React.Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Props, nextState: State) {
+        if (!deepEqual(nextProps.selected?.props?.card, this.props.selected?.props?.card)) {
+            return true;
+        }
         if (nextState.isScrolling !== this.state.isScrolling) {
             return true;
         }
@@ -124,7 +128,7 @@ export default class RhsCard extends React.Component<Props, State> {
         if (!content) {
             content = (
                 <div className='info-card'>
-                    <Markdown message={selected.props && selected.props.card}/>
+                    <Markdown message={(selected.props && selected.props.card) || ''}/>
                 </div>
             );
         }