[Search v2.4] Update Search results page (Search bar only)

src/components/Search/SearchPageHeader.tsx

@@ -1,5 +1,4 @@
 import React, {useMemo} from 'react';
-import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -33,59 +32,50 @@ import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults'
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
+import SearchRouterInput from './SearchRouter/SearchRouterInput';
 import type {SearchQueryJSON} from './types';
 
-type HeaderWrapperProps = Pick<HeaderWithBackButtonProps, 'title' | 'subtitle' | 'icon' | 'children'> & {
-    subtitleStyles?: StyleProp<TextStyle>;
+type HeaderWrapperProps = Pick<HeaderWithBackButtonProps, 'icon' | 'children'> & {
+    content: string;
+    isCannedQuery: boolean;
 };
 
-function HeaderWrapper({icon, title, subtitle, children, subtitleStyles = {}}: HeaderWrapperProps) {
+function HeaderWrapper({icon, children, content, isCannedQuery}: HeaderWrapperProps) {
     const styles = useThemeStyles();
 
     // If the icon is present, the header bar should be taller and use different font.
     const isCentralPaneSettings = !!icon;
 
-    const middleContent = useMemo(() => {
-        return (
-            <Header
-                title={
-                    <Text
-                        style={[styles.mutedTextLabel, styles.pre]}
-                        numberOfLines={1}
-                    >
-                        {title}
-                    </Text>
-                }
-                subtitle={
-                    <Text
-                        numberOfLines={2}
-                        style={[styles.textLarge, subtitleStyles]}
-                    >
-                        {subtitle}
-                    </Text>
-                }
-            />
-        );
-    }, [styles.mutedTextLabel, styles.pre, styles.textLarge, subtitle, subtitleStyles, title]);
-
     return (
         <View
             dataSet={{dragArea: false}}
             style={[styles.headerBar, isCentralPaneSettings && styles.headerBarDesktopHeight]}
         >
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
-                {icon && (
-                    <Icon
-                        src={icon}
-                        width={variables.iconHeader}
-                        height={variables.iconHeader}
-                        additionalStyles={[styles.mr2]}
+            {isCannedQuery ? (
+                <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
+                    {icon && (
+                        <Icon
+                            src={icon}
+                            width={variables.iconHeader}
+                            height={variables.iconHeader}
+                            additionalStyles={[styles.mr2]}
+                        />
+                    )}
+                    <Header subtitle={<Text style={[styles.textLarge, styles.textHeadlineH2]}>{content}</Text>} />
+                    <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter, styles.gap4]}>{children}</View>
+                </View>
+            ) : (
+                <View style={styles.pr5}>
+                    <SearchRouterInput
+                        disabled
+                        isFullWidth
+                        wrapperStyle={styles.searchRouterInputResultsStyle}
+                        defaultValue={content}
+                        shouldShowRightComponent
+                        rightComponent={children}
                     />
-                )}
-
-                {middleContent}
-                <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter, styles.gap4]}>{children}</View>
-            </View>
+                </View>
+            )}
         </View>
     );
 }
@@ -153,11 +143,8 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
 
     const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);
 
-    const headerSubtitle = isCannedQuery ? translate(getHeaderContent(type).titleText) : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);
-    const headerTitle = isCannedQuery ? '' : translate('search.filtersHeader');
-    const headerIcon = isCannedQuery ? getHeaderContent(type).icon : Illustrations.Filters;
-
-    const subtitleStyles = isCannedQuery ? styles.textHeadlineH2 : {};
+    const headerIcon = getHeaderContent(type).icon;
+    const headerContent = isCannedQuery ? translate(getHeaderContent(type).titleText) : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);
 
     const headerButtonsOptions = useMemo(() => {
         if (selectedTransactionsKeys.length === 0) {
@@ -302,10 +289,9 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
 
     return (
         <HeaderWrapper
-            title={headerTitle}
-            subtitle={headerSubtitle}
             icon={headerIcon}
-            subtitleStyles={subtitleStyles}
+            content={headerContent}
+            isCannedQuery={isCannedQuery}
         >
             {headerButtonsOptions.length > 0 ? (
                 <ButtonWithDropdownMenu
@@ -320,6 +306,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 />
             ) : (
                 <Button
+                    innerStyles={!isCannedQuery && styles.highlightBG}
                     text={translate('search.filtersHeader')}
                     icon={Expensicons.Filters}
                     onPress={onPress}

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -1,38 +1,68 @@
 import React, {useState} from 'react';
+import type {ReactNode} from 'react';
+import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import BaseTextInput from '@components/TextInput/BaseTextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type SearchRouterInputProps = {
+    onChange?: (searchTerm: string) => void;
+
+    onSubmit?: () => void;
+
+    /** Whether the input is full width */
     isFullWidth: boolean;
-    onChange: (searchTerm: string) => void;
-    onSubmit: () => void;
+
+    /** Default value for text input */
+    defaultValue?: string;
+
+    /** Whether the input is disabled */
+    disabled?: boolean;
+
+    /** Any additional styles to apply */
+    wrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Should render component on the right */
+    shouldShowRightComponent?: boolean;
+
+    /** Component to be displayed on the right */
+    rightComponent?: ReactNode;
 };
 
-function SearchRouterInput({isFullWidth, onChange, onSubmit}: SearchRouterInputProps) {
+function SearchRouterInput({isFullWidth, onChange, onSubmit, defaultValue = '', disabled = false, wrapperStyle, shouldShowRightComponent = false, rightComponent}: SearchRouterInputProps) {
     const styles = useThemeStyles();
 
-    const [value, setValue] = useState('');
+    const [value, setValue] = useState(defaultValue);
 
     const onChangeText = (text: string) => {
         setValue(text);
-        onChange(text);
+        if (onChange) {
+            onChange(text);
+        }
     };
 
-    const modalWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth};
+    const inputWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
-        <BaseTextInput
-            value={value}
-            onChangeText={onChangeText}
-            onSubmitEditing={onSubmit}
-            autoFocus
-            textInputContainerStyles={[{borderBottomWidth: 0}, modalWidth]}
-            inputStyle={[styles.searchInputStyle, styles.searchRouterInputStyle, styles.ph2]}
-            role={CONST.ROLE.PRESENTATION}
-            autoCapitalize="none"
-        />
+        <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterInputStyle]}>
+            <View style={styles.flex1}>
+                <BaseTextInput
+                    disabled={disabled}
+                    shouldUseDisabledStyles={false}
+                    value={value}
+                    onChangeText={onChangeText}
+                    onSubmitEditing={onSubmit}
+                    autoFocus
+                    textInputContainerStyles={[{borderBottomWidth: 0}, styles.ph3, inputWidth]}
+                    inputStyle={[styles.searchInputStyle]}
+                    role={CONST.ROLE.PRESENTATION}
+                    autoCapitalize="none"
+                />
+            </View>
+            {shouldShowRightComponent && rightComponent}
+        </View>
     );
 }
 

src/components/TextInput/BaseTextInput/index.tsx

@@ -66,6 +66,7 @@ function BaseTextInput(
         isMarkdownEnabled = false,
         excludedMarkdownStyles = [],
         shouldShowClearButton = false,
+        shouldUseDisabledStyles = true,
         prefixContainerStyle = [],
         prefixStyle = [],
         suffixContainerStyle = [],
@@ -390,7 +391,7 @@ function BaseTextInput(
                                         : []),
 
                                     // Add disabled color theme when field is not editable.
-                                    inputProps.disabled && styles.textInputDisabled,
+                                    inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
                                 ]}
                                 multiline={isMultiline}

src/components/TextInput/BaseTextInput/types.ts

@@ -122,6 +122,9 @@ type CustomBaseTextInputProps = {
     /** Whether the clear button should be displayed */
     shouldShowClearButton?: boolean;
 
+    /** Whether to apply styles when input is disabled */
+    shouldUseDisabledStyles?: boolean;
+
     /** Style for the prefix */
     prefixStyle?: StyleProp<TextStyle>;
 

src/styles/index.ts

@@ -3603,7 +3603,11 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusSmall,
             borderWidth: 2,
             borderColor: theme.borderFocus,
-            paddingHorizontal: 8,
+        },
+
+        searchRouterInputResultsStyle: {
+            backgroundColor: theme.highlightBG,
+            borderRadius: variables.componentBorderRadius,
         },
 
         searchTableHeaderActive: {