[MM-52171] webapp: Make rhs_card reloading when card body is changed (#23612)

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"

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>
             );
         }