Skip to content

feat: add close icon to header for concierge chat in desktop #78955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blimpich merged 2 commits into from
Jan 7, 2026
Merged

feat: add close icon to header for concierge chat in desktop #78955

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4894c73
feat: add close icon to header for concierge chat
samranahm Jan 6, 2026
5fef001
Merge branch 'Expensify:main' into 78870/concierge-rhp-use-close-icon
samranahm Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/pages/home/HeaderView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
isChatRoom as isChatRoomReportUtils,
isChatThread as isChatThreadReportUtils,
isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils,
isConciergeChatReport,
isCurrentUserSubmitter,
isDeprecatedGroupDM,
isExpenseRequest,
Expand Down Expand Up @@ -104,7 +105,7 @@ type HeaderViewProps = {
};

function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false, isInSidePanel}: HeaderViewProps) {
const icons = useMemoizedLazyExpensifyIcons(['BackArrow']);
const icons = useMemoizedLazyExpensifyIcons(['BackArrow', 'Close']);
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth} = useResponsiveLayout();
const route = useRoute();
Expand Down Expand Up @@ -243,6 +244,10 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
const hasActiveScheduledCall = latestScheduledCall && !isPast(latestScheduledCall.eventTime) && latestScheduledCall.status !== CONST.SCHEDULE_CALL_STATUS.CANCELLED;
const shouldShowBackButton = shouldUseNarrowLayout || !!isInSidePanel;

const shouldShowCloseButton = isInSidePanel && !shouldUseNarrowLayout && isConciergeChatReport(report);
const backButtonIcon = shouldShowCloseButton ? icons.Close : icons.BackArrow;
const backButtonLabel = shouldShowCloseButton ? translate('common.close') : translate('common.back');
Comment on lines +247 to +249

Copilot AI Jan 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new behavior for showing a close icon for concierge chat in the side panel lacks test coverage. Consider adding a test case that verifies the close icon is displayed when the header is rendered for a concierge chat in a side panel on desktop, and that the back arrow is shown in other scenarios.

Copilot uses AI. Check for mistakes.

const onboardingHelpDropdownButton = (
<OnboardingHelpDropdownButton
reportID={report?.reportID}
Expand Down Expand Up @@ -277,17 +282,17 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
onPress={onNavigationMenuButtonClicked}
style={[styles.LHNToggle, shouldUseNarrowLayout && styles.pl5]}
accessibilityHint={translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={translate('common.back')}
accessibilityLabel={backButtonLabel}
role={CONST.ROLE.BUTTON}
sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.BACK_BUTTON}

Copilot AI Jan 6, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sentry label remains 'BACK_BUTTON' even when the button functions as a close button for the concierge chat. This could make analytics and error tracking less accurate. Consider using a conditional sentry label or adding a CLOSE_BUTTON constant to CONST.SENTRY_LABEL.HEADER_VIEW to differentiate between the two button types.

Suggested change
sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.BACK_BUTTON}
sentryLabel={isChatUsedForOnboarding ? 'HEADER_VIEW.CLOSE_BUTTON' : CONST.SENTRY_LABEL.HEADER_VIEW.BACK_BUTTON}

Copilot uses AI. Check for mistakes.
>
<Tooltip
text={translate('common.back')}
text={backButtonLabel}
shiftVertical={4}
>
<View>
<Icon
src={icons.BackArrow}
src={backButtonIcon}
fill={theme.icon}
/>
</View>
Expand Down
Loading