Merge pull request #37124 from bernhardoj/fix/36598-workspace-system-…

…message-markdown-is-not-muted Fix workspace system message when contains markdown isn't grayed out
Expensify · Mar 5, 2024 · ec64dc1 · ec64dc1
2 parents c7cca94 + 03fa99f
commit ec64dc1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -488,19 +488,6 @@ function ReportActionItem(props) {
                                 action={props.action}
                                 displayAsGroup={props.displayAsGroup}
                                 isHidden={isHidden}
-                                style={[
-                                    _.contains(
-                                        [
-                                            ..._.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG),
-                                            CONST.REPORT.ACTIONS.TYPE.IOU,
-                                            CONST.REPORT.ACTIONS.TYPE.APPROVED,
-                                            CONST.REPORT.ACTIONS.TYPE.MOVED,
-                                        ],
-                                        props.action.actionName,
-                                    )
-                                        ? styles.colorMuted
-                                        : undefined,
-                                ]}
                             />
                             {hasBeenFlagged && (
                                 <Button

diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx
@@ -11,7 +11,7 @@ import convertToLTR from '@libs/convertToLTR';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
-import type {DecisionName, OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
+import type {ActionName, DecisionName, OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import type {Message} from '@src/types/onyx/ReportAction';
 import AttachmentCommentFragment from './comment/AttachmentCommentFragment';
 import TextCommentFragment from './comment/TextCommentFragment';
@@ -59,11 +59,22 @@ type ReportActionItemFragmentProps = {
     /** The pending action for the report action */
     pendingAction?: OnyxCommon.PendingAction;
 
+    /** The report action name */
+    actionName?: ActionName;
+
     moderationDecision?: DecisionName;
 };
 
+const MUTED_ACTIONS = [
+    ...Object.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG),
+    CONST.REPORT.ACTIONS.TYPE.IOU,
+    CONST.REPORT.ACTIONS.TYPE.APPROVED,
+    CONST.REPORT.ACTIONS.TYPE.MOVED,
+] as ActionName[];
+
 function ReportActionItemFragment({
     pendingAction,
+    actionName,
     fragment,
     accountID,
     iouMessage = '',
@@ -115,6 +126,7 @@ function ReportActionItemFragment({
                     source={source}
                     fragment={fragment}
                     styleAsDeleted={!!(isOffline && isPendingDelete)}
+                    styleAsMuted={!!actionName && MUTED_ACTIONS.includes(actionName)}
                     iouMessage={iouMessage}
                     displayAsGroup={displayAsGroup}
                     style={style}

diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -80,6 +80,7 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
                 iouMessage={iouMessage}
                 isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(action, reportID)}
                 pendingAction={action.pendingAction}
+                actionName={action.actionName}
                 source={(action.originalMessage as OriginalMessageAddComment['originalMessage'])?.source}
                 accountID={action.actorAccountID ?? 0}
                 style={style}

diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -27,6 +27,9 @@ type TextCommentFragmentProps = {
     /** Should this message fragment be styled as deleted? */
     styleAsDeleted: boolean;
 
+    /** Should this message fragment be styled as muted */
+    styleAsMuted?: boolean;
+
     /** Should the comment have the appearance of being grouped with the previous comment? */
     displayAsGroup: boolean;
 
@@ -37,7 +40,7 @@ type TextCommentFragmentProps = {
     iouMessage?: string;
 };
 
-function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) {
+function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {html = '', text} = fragment;
@@ -54,7 +57,10 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
         const editedTag = fragment.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
         const htmlContent = styleAsDeleted ? `<del>${html}</del>` : html;
 
-        const htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
+        let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
+        if (styleAsMuted) {
+            htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
+        }
 
         return (
             <RenderCommentHTML
@@ -79,6 +85,7 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
                     styles.ltr,
                     style,
                     styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
+                    styleAsMuted ? styles.colorMuted : undefined,
                     !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone,
                 ]}
             >