[HOLD for payment 2025-02-05] [$250] Tweak UI for deleted message and expense

[dubielzyk-expensify]

Problem

Today when you delete a message or expense with threads, the chat message gets replaced with [Deleted message] or [Deleted expense]. This feels a bit unpolished:

Solution

Let's spruce up the UI and reuse our attachement when showing a deleted message or expense:

For the receipt deleted we should use the icon already in our repo (App/assets/images/receipt-slash.svg). For the comment deleted, we should use this new icon:
chatbubble-slash.svg.zip

cc @Expensify/design @JmillsExpensify @saracouto

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864619157987293637
• Upwork Job ID: 1864619157987293637
• Last Price Increase: 2024-12-19
• Automatic offers:
• shubham1206agra | Reviewer | 105467437
• Krishna2323 | Contributor | 105467438

Issue Owner

Current Issue Owner: @MitchExpensify

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-12-05 05:53:14 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Tweak UI for deleted message and expense

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

• First we should create a custom rendered in HTMLEngineProviderComponentList, we can call it 'deleted-action': DeletedActionRenderer,.
  

  App/src/components/HTMLEngineProvider/HTMLRenderers/index.ts

  Lines 17 to 34 in e25e3fa

  	const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
  	// Standard HTML tag renderers
  	a: AnchorRenderer,
  	code: CodeRenderer,
  	img: ImageRenderer,
  	video: VideoRenderer,
  	// Custom tag renderers
  	edited: EditedRenderer,
  	pre: PreRenderer,
  	/* eslint-disable @typescript-eslint/naming-convention */
  	'mention-user': MentionUserRenderer,
  	'mention-report': MentionReportRenderer,
  	'mention-here': MentionHereRenderer,
  	emoji: EmojiRenderer,
  	'next-step-email': NextStepEmailRenderer,
  	/* eslint-enable @typescript-eslint/naming-convention */
  	};

• Create a new component DeletedActionRenderer.

Details




import React from 'react';
import {View} from 'react-native';
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';

function DeletedActionRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
    const styles = useThemeStyles();
    const theme = useTheme();
    const {translate} = useLocalize();

    const actionTypes = Object.values(CONST.REPORT.ACTION_TYPE);
    const action = tnode.attributes.action;
    let translation = action;

    if (actionTypes.some((e) => e === action)) {
        translation = translate(`parentReportAction.${action}` as TranslationPaths);
    }

    Object.values(CONST.REPORT.ACTION_TYPE);

    const getIcon = () => {
        // This needs to be updated with new icons
        switch (action) {
            case CONST.REPORT.ACTION_TYPE.DELETED_MESSAGE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_EXPENSE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_REPORT:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.DELETED_TASK:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.HIDDEN_MESSAGE:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            case CONST.REPORT.ACTION_TYPE.REVERSED_TRANSACTION:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
            default:
                return {icon: Expensicons.ReceiptSlash, width: 18, height: 18};
        }
    };

    const icon = getIcon();
    return (
        <View style={[styles.p4, styles.mt1, styles.border, {borderColor: theme.border}, styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap2]}>
            <Icon
                width={icon.height}
                height={icon.width}
                fill={theme.icon}
                src={icon.icon}
            />
            <Text style={(styles.textLabelSupporting, styles.textStrong)}>{translation}</Text>
        </View>
    );
}

DeletedActionRenderer.displayName = 'DeletedActionRenderer';

export default DeletedActionRenderer;

• Add the icons in @components/Icon/Expensicons.
• From everywhere we are using these values of parentReportAction, we should check if it is being used to render <RenderHTML html={and replace it with<RenderHTML html={<deleted-action action="${CONST.REPORT.ACTION_TYPE.DELETED_MESSAGE}"></deleted-action>} />`.
  

  App/src/languages/en.ts

  Lines 4775 to 4782 in e25e3fa

  	parentReportAction: {
  	deletedReport: '[Deleted report]',
  	deletedMessage: '[Deleted message]',
  	deletedExpense: '[Deleted expense]',
  	reversedTransaction: '[Reversed transaction]',
  	deletedTask: '[Deleted task]',
  	hiddenMessage: '[Hidden message]',
  	},

  
  

  App/src/components/ReportActionItem/MoneyRequestAction.tsx

  Lines 114 to 122 in e25e3fa

  	if (isDeletedParentAction || isReversedTransaction) {
  	let message: TranslationPaths;
  	if (isReversedTransaction) {
  	message = 'parentReportAction.reversedTransaction';
  	} else {
  	message = 'parentReportAction.deletedExpense';
  	}
  	return <RenderHTML html={`<comment>${translate(message)}</comment>`} />;
  	}

  
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Lines 88 to 90 in e25e3fa

  	if (isDeletedParentAction) {
  	return <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />;
  	}

  
  

  App/src/pages/home/report/ReportActionItem.tsx

  Lines 569 to 571 in e25e3fa

  	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW) {
  	children = ReportUtils.isClosedExpenseReportWithNoExpenses(iouReport) ? (
  	<RenderHTML html={`<comment>${translate('parentReportAction.deletedReport')}</comment>`} />

  
  

  App/src/pages/home/report/ReportActionItemContentCreated.tsx

  Lines 85 to 89 in e25e3fa

  	if (isReversedTransaction) {
  	message = 'parentReportAction.reversedTransaction';
  	} else {
  	message = 'parentReportAction.deletedExpense';
  	}

  
  

  App/src/pages/home/report/ReportActionItemContentCreated.tsx

  Line 134 in e25e3fa

  <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />

  
  

  App/src/pages/home/report/ReportActionItemFragment.tsx

  Lines 108 to 113 in e25e3fa

  	if ((!isOffline && isThreadParentMessage && isPendingDelete) || fragment?.isDeletedParentAction) {
  	return <RenderHTML html={`<comment>${translate('parentReportAction.deletedMessage')}</comment>`} />;
  	}
  	if (isThreadParentMessage && moderationDecision === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE) {
  	return <RenderHTML html={`<comment>${translate('parentReportAction.hiddenMessage')}</comment>`} />;

• Add the customHTMLElementModel for deleted-action in BaseHTMLEngineProvider it will look similar to alert-text.
  

  App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

  Lines 24 to 39 in e25e3fa

  	function BaseHTMLEngineProvider({textSelectable = false, children, enableExperimentalBRCollapsing = false}: BaseHTMLEngineProviderProps) {
  	const styles = useThemeStyles();
  	// Declare nonstandard tags and their content model here
  	/* eslint-disable @typescript-eslint/naming-convention */
  	const customHTMLElementModels = useMemo(
  	() => ({
  	edited: HTMLElementModel.fromCustomModel({
  	tagName: 'edited',
  	contentModel: HTMLContentModel.textual,
  	}),
  	'alert-text': HTMLElementModel.fromCustomModel({
  	tagName: 'alert-text',
  	mixedUAStyles: {...styles.formError, ...styles.mb0},
  	contentModel: HTMLContentModel.block,
  	}),

• Create actions types in CONST file.

        ACTION_TYPE: {
            DELETED_MESSAGE: 'deletedMessage',
            DELETED_REPORT: 'deletedReport',
            DELETED_EXPENSE: 'deletedExpense',
            REVERSED_TRANSACTION: 'reversedTransaction',
            DELETED_TASK: 'deletedTask',
            HIDDEN_MESSAGE: 'hiddenMessage',
        },

TEST BRANCH

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


What alternative solutions did you explore? (Optional)

[Krishna2323]

@dubielzyk-expensify, these messages are also shown in similar way, do we want to update these too?

App/src/languages/en.ts

Lines 4775 to 4782 in e25e3fa

	parentReportAction: {
	deletedReport: '[Deleted report]',
	deletedMessage: '[Deleted message]',
	deletedExpense: '[Deleted expense]',
	reversedTransaction: '[Reversed transaction]',
	deletedTask: '[Deleted task]',
	hiddenMessage: '[Hidden message]',
	},

NOTE: I have hidden my proposal for now, will bring back when we are ready with the designs and this issue is made external.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021864619157987293637

[melvin-bot]

Triggered auto assignment to @MitchExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.