diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 4373dae8ac730..7831e116a89d4 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -537,6 +537,7 @@ function AttachmentModal({ threeDotsMenuItems={threeDotsMenuItems} shouldOverlayDots subTitleLink={currentAttachmentLink ?? ''} + shouldDisplayHelpButton={false} /> {isLoading && } diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx index 497c2f91e767b..1f8b225c4f0c5 100644 --- a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx +++ b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx @@ -1,6 +1,5 @@ import React, {useEffect, useRef, useState} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import {WebView} from 'react-native-webview'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; @@ -8,29 +7,24 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import useLocalize from '@hooks/useLocalize'; import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline'; -import * as PolicyAction from '@userActions/Policy/Policy'; +import {enablePolicyTaxes} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Session} from '@src/types/onyx'; import type {ConnectToQuickbooksOnlineFlowProps} from './types'; -type ConnectToQuickbooksOnlineFlowOnyxProps = { - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - const renderLoading = () => ; -function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksOnlineFlowProps & ConnectToQuickbooksOnlineFlowOnyxProps) { +function ConnectToQuickbooksOnlineFlow({policyID}: ConnectToQuickbooksOnlineFlowProps) { const {translate} = useLocalize(); const webViewRef = useRef(null); const [isWebViewOpen, setWebViewOpen] = useState(false); + const [session] = useOnyx(ONYXKEYS.SESSION); const authToken = session?.authToken ?? null; useEffect(() => { // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO - PolicyAction.enablePolicyTaxes(policyID, false); + enablePolicyTaxes(policyID, false); setWebViewOpen(true); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); @@ -46,6 +40,7 @@ function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksO setWebViewOpen(false)} + shouldDisplayHelpButton={false} /> ({ - session: { - key: ONYXKEYS.SESSION, - }, -})(ConnectToQuickbooksOnlineFlow); +export default ConnectToQuickbooksOnlineFlow; diff --git a/src/components/ConnectToXeroFlow/index.native.tsx b/src/components/ConnectToXeroFlow/index.native.tsx index 5cda933a7ebe5..b78586520422d 100644 --- a/src/components/ConnectToXeroFlow/index.native.tsx +++ b/src/components/ConnectToXeroFlow/index.native.tsx @@ -59,6 +59,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) { setWebViewOpen(false)} + shouldDisplayHelpButton={false} /> ( @@ -72,7 +75,7 @@ function Header({title = '', subtitle = '', textStyles = [], style, containerSty {typeof title === 'string' ? !!title && ( {title} diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 68b59879d3dfd..605d2f6d3938b 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -108,6 +108,7 @@ function HeaderWithBackButton({ subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle} textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2]} subTitleLink={subTitleLink} + numberOfTitleLines={1} /> ); }, [ @@ -143,12 +144,12 @@ function HeaderWithBackButton({ // progressBarPercentage can be 0 which would // be falsey, hence using !== undefined explicitly progressBarPercentage !== undefined && styles.pl0, - shouldShowBackButton && [styles.pl2, styles.pr2], + shouldShowBackButton && [styles.pl2], shouldOverlay && StyleSheet.absoluteFillObject, style, ]} > - + {shouldShowBackButton && ( )} {middleContent} - - {children} - {shouldShowDownloadButton && - (!isDownloading ? ( - - { - // Blur the pressable in case this button triggers a Growl notification - // We do not want to overlap Growl with the Tooltip (#15271) - (event?.currentTarget as HTMLElement)?.blur(); + + + {children} + {shouldShowDownloadButton && + (!isDownloading ? ( + + { + // Blur the pressable in case this button triggers a Growl notification + // We do not want to overlap Growl with the Tooltip (#15271) + (event?.currentTarget as HTMLElement)?.blur(); - if (!isDownloadButtonActive) { - return; - } + if (!isDownloadButtonActive) { + return; + } - onDownloadButtonPress(); - temporarilyDisableDownloadButton(); - }} + onDownloadButtonPress(); + temporarilyDisableDownloadButton(); + }} + style={[styles.touchableButtonImage]} + role="button" + accessibilityLabel={translate('common.download')} + > + + + + ) : ( + - - - - ) : ( - - ))} - {shouldShowPinButton && !!report && } + size="small" + color={theme.spinner} + /> + ))} + {shouldShowPinButton && !!report && } + {shouldShowThreeDotsButton && ( {shouldDisplayHelpButton && } - {shouldDisplaySearchRouter && } + {shouldDisplaySearchRouter && } ); diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index dd7e848f8fe12..e6ff26c43d7ab 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -20,11 +20,11 @@ type TopBarProps = { breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; - shouldDisplaySidePane?: boolean; + shouldDisplayHelpButton?: boolean; cancelSearch?: () => void; }; -function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplaySidePane = true, cancelSearch}: TopBarProps) { +function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayHelpButton = true, cancelSearch}: TopBarProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const policy = usePolicy(activeWorkspaceID); @@ -44,10 +44,10 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, return ( - + @@ -65,7 +65,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, {!!cancelSearch && ( { cancelSearch(); }} @@ -73,7 +73,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, {translate('common.cancel')} )} - {shouldDisplaySidePane && } + {shouldDisplayHelpButton && } {displaySearch && } diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 35fd8c2d30efc..7f6a38d70b574 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -18,6 +18,7 @@ import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types' import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem'; import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem'; import type {SelectionListHandle} from '@components/SelectionList/types'; +import HelpButton from '@components/SidePane/HelpButton'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -291,60 +292,64 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo setIsAutocompleteListVisible(true); }; // we need `- BORDER_WIDTH` to achieve the effect that the input will not "jump" - const popoverHorizontalPosition = 12 - BORDER_WIDTH; + const leftPopoverHorizontalPosition = 12 - BORDER_WIDTH; + const rightPopoverHorizontalPosition = 4 - BORDER_WIDTH; const autocompleteInputStyle = isAutocompleteListVisible ? [ styles.border, styles.borderRadiusComponentLarge, styles.pAbsolute, styles.pt2, - {top: 8 - BORDER_WIDTH, left: popoverHorizontalPosition, right: popoverHorizontalPosition}, + {top: 8 - BORDER_WIDTH, left: leftPopoverHorizontalPosition, right: rightPopoverHorizontalPosition}, {boxShadow: variables.popoverMenuShadow}, ] : [styles.pt4]; const inputWrapperActiveStyle = isAutocompleteListVisible ? styles.ph2 : null; return ( - - - { - const focusedOption = listRef.current?.getFocusedOption(); - if (focusedOption) { - return; - } - submitSearch(textInputValue); - }} - autoFocus={false} - onFocus={showAutocompleteList} - onBlur={hideAutocompleteList} - wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} - wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} - outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]} - rightComponent={inputRightComponent} - autocompleteListRef={listRef} - ref={textInputRef} - selection={selection} - substitutionMap={autocompleteSubstitutions} - /> - - + + + { + const focusedOption = listRef.current?.getFocusedOption(); + if (focusedOption) { + return; + } + submitSearch(textInputValue); + }} + autoFocus={false} + onFocus={showAutocompleteList} + onBlur={hideAutocompleteList} + wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} + wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} + outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]} + rightComponent={inputRightComponent} + autocompleteListRef={listRef} + ref={textInputRef} + selection={selection} + substitutionMap={autocompleteSubstitutions} /> + + + + ); } diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 5281032967cfc..a1b0a6f942fc9 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -312,6 +312,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps, onRouterClose()} + shouldDisplayHelpButton={false} /> )} {isRecentSearchesDataLoaded && ( diff --git a/src/components/SidePane/HelpButton.tsx b/src/components/SidePane/HelpButton.tsx index a7b305e7f616e..3f45e31b0d773 100644 --- a/src/components/SidePane/HelpButton.tsx +++ b/src/components/SidePane/HelpButton.tsx @@ -31,7 +31,7 @@ function HelpButton({style}: HelpButtonProps) { { KeyboardUtils.dismiss(); triggerSidePane({ diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 72d6b4f77acb1..12f942f380ff0 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -404,6 +404,7 @@ function SearchPage({route}: SearchPageProps) { activeWorkspaceID={policyID} breadcrumbLabel={translate('common.reports')} shouldDisplaySearch={false} + shouldDisplayHelpButton={false} /> diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index faf0aeb2e9632..ec77fa771bf86 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -235,7 +235,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, style={[styles.borderBottom]} dataSet={{dragArea: true}} > - + {isLoading ? ( ) : ( @@ -354,7 +354,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, {!isParentReportLoading && canJoin && !shouldUseNarrowLayout && joinButton} - {shouldDisplaySearchRouter && } + {shouldDisplaySearchRouter && } diff --git a/src/pages/home/sidebar/SignInButton.tsx b/src/pages/home/sidebar/SignInButton.tsx index c55ee3ce7b39d..228bc70fe08db 100644 --- a/src/pages/home/sidebar/SignInButton.tsx +++ b/src/pages/home/sidebar/SignInButton.tsx @@ -4,7 +4,7 @@ import Button from '@components/Button'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as Session from '@userActions/Session'; +import {signOutAndRedirectToSignIn} from '@userActions/Session'; import CONST from '@src/CONST'; function SignInButton() { @@ -15,13 +15,13 @@ function SignInButton() { Session.signOutAndRedirectToSignIn()} + onPress={() => signOutAndRedirectToSignIn()} > - +