HelpScout Tasks Search

pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx

@@ -19,7 +19,7 @@ export const ContactsWrapper: React.FC<Props> = ({ children }) => {
     urlFilters ?? {},
   );
   const [starredFilter, setStarredFilter] = useState<ContactFilterSetInput>({});
-  const [filterPanelOpen, setFilterPanelOpen] = useState<boolean>(false);
+  const [filterPanelOpen, setFilterPanelOpen] = useState<boolean>(true);
   const sanitizedFilters = useMemo(
     () => sanitizeFilters(activeFilters),
     [activeFilters],

pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx

@@ -120,7 +120,7 @@ const TasksPage: React.FC = () => {
   const urlFilters =
     query?.filters && JSON.parse(decodeURI(query.filters as string));
 
-  const [filterPanelOpen, setFilterPanelOpen] = useState<boolean>(false);
+  const [filterPanelOpen, setFilterPanelOpen] = useState<boolean>(true);
   const [activeFilters, setActiveFilters] = useState<TaskFilterSetInput>(
     urlFilters ?? {},
   );

src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx

@@ -6,7 +6,10 @@ import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { InfiniteList } from 'src/components/InfiniteList/InfiniteList';
-import { ListHeaderCheckBoxState } from 'src/components/Shared/Header/ListHeader';
+import {
+  ListHeaderCheckBoxState,
+  PageEnum,
+} from 'src/components/Shared/Header/ListHeader';
 import { StarFilterButton } from 'src/components/Shared/Header/StarFilterButton/StarFilterButton';
 import { TasksMassActionsDropdown } from 'src/components/Shared/MassActions/TasksMassActionsDropdown';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
@@ -227,6 +230,7 @@ export const ContactTasksTab: React.FC<ContactTasksTabProps> = ({
               showContactSearchIcon={false}
               onChange={setSearchTerm}
               placeholder={t('Search Tasks')}
+              page={PageEnum.Task}
             />
           </HeaderItemsWrap>
           <HeaderItemsWrap>

src/components/Dashboard/Welcome/Welcome.tsx

@@ -15,18 +15,15 @@ const Welcome = ({ firstName }: Props): ReactElement => {
   const { appName } = useGetAppSettings();
   const currentHour = today.hour;
 
-  let greeting = firstName
-    ? t('Good Evening, {{ firstName }}.', { firstName })
-    : t('Good Evening,');
+  let greeting = t('Good Evening,');
 
   if (currentHour < 12) {
-    greeting = firstName
-      ? t('Good Morning, {{ firstName }}.', { firstName })
-      : t('Good Morning,');
+    greeting = t('Good Morning,');
   } else if (currentHour < 18) {
-    greeting = firstName
-      ? t('Good Afternoon, {{ firstName }}.', { firstName })
-      : t('Good Afternoon,');
+    greeting = t('Good Afternoon,');
+  }
+  if (firstName) {
+    greeting += ` ${firstName}.`;
   }
 
   return (

src/components/Shared/Header/ListHeader.test.tsx

@@ -132,12 +132,16 @@ const ButtonGroup: React.FC = () => {
 
 describe('ListHeader', () => {
   describe('Contact', () => {
-    it('renders contact header', () => {
-      const { getByPlaceholderText, getByTestId, getByText } = render(
-        <Components />,
-      );
+    it('renders contact header', async () => {
+      const { getByPlaceholderText, getByTestId, getByText, findByText } =
+        render(<Components />);
+      const searchBox = getByPlaceholderText('Search Contacts');
+      expect(searchBox).toBeInTheDocument();
 
-      expect(getByPlaceholderText('Search Contacts')).toBeInTheDocument();
+      userEvent.hover(searchBox);
+      expect(
+        await findByText('Search by name, phone, email, or partner #'),
+      ).toBeVisible();
       expect(getByText('Actions')).toBeInTheDocument();
       expect(getByTestId('star-filter-button')).toBeInTheDocument();
       expect(getByTestId('showing-text')).toBeInTheDocument();
@@ -214,12 +218,18 @@ describe('ListHeader', () => {
   });
 
   describe('Task', () => {
-    it('renders task header', () => {
-      const { getByPlaceholderText } = render(
+    it('renders task header', async () => {
+      const { getByPlaceholderText, findByText } = render(
         <Components page={PageEnum.Task} />,
       );
 
-      expect(getByPlaceholderText('Search Tasks')).toBeVisible();
+      const searchBox = getByPlaceholderText('Search Tasks');
+      expect(searchBox).toBeVisible();
+
+      userEvent.hover(searchBox);
+      expect(
+        await findByText('Search by subject, tags, contact name, or comments'),
+      ).toBeVisible();
     });
   });
 

src/components/Shared/Header/ListHeader.tsx

@@ -170,6 +170,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
           placeholder={
             page === PageEnum.Task ? t('Search Tasks') : t('Search Contacts')
           }
+          page={page}
         />
         <Hidden smDown>
           <ItemsShowingText data-testid="showing-text">

src/components/common/SearchBox/SearchBox.tsx

@@ -3,15 +3,17 @@
 import Icon from '@mdi/react';
 import Close from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { PageEnum } from 'src/components/Shared/Header/ListHeader';
 
 export interface SearchBoxProps {
   onChange: (searchTerm: string) => void;
   searchTerm?: string | string[];
   placeholder?: string;
   showContactSearchIcon: boolean;
+  page?: PageEnum;
 }
 
 const SearchInput = styled(TextField)(() => ({
@@ -25,6 +27,7 @@
   searchTerm,
   placeholder,
   showContactSearchIcon,
+  page,
 }) => {
   const { t } = useTranslation();
   const [currentSearchTerm, setSearchTerm] = useState(searchTerm ?? '');
@@ -41,43 +44,52 @@
   };
 
   return (
-    <SearchInput
-      size="small"
-      variant="outlined"
-      sx={{ width: { sm: '27ch', md: '31ch' } }}
-      onChange={(e) => handleOnChange(e.target.value)}
-      placeholder={placeholder ?? t('Search')}
-      value={currentSearchTerm}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            {showContactSearchIcon ? (
-              <Icon path={mdiAccountSearch} size={1} />
-            ) : (
-              <SearchIcon />
-            )}
-          </InputAdornment>
-        ),
-        endAdornment: (
-          <InputAdornment position="end">
-            {currentSearchTerm && (
-              <IconButton
-                onClick={() => handleOnChange('')}
-                data-testid="SearchInputCloseButton"
-              >
-                <Close
-                  titleAccess={t('Close')}
-                  sx={{
-                    width: 14,
-                    height: 14,
-                    color: 'text.primary',
-                  }}
-                />
-              </IconButton>
-            )}
-          </InputAdornment>
-        ),
-      }}
-    />
+    <Tooltip
+      arrow
+      title={
+        page === PageEnum.Task
+          ? t('Search by subject, tags, contact name, or comments')
+          : t('Search by name, phone, email, or partner #')
+      }
+    >
+      <SearchInput
+        size="small"
+        variant="outlined"
+        sx={{ width: { sm: '27ch', md: '31ch' } }}
+        onChange={(e) => handleOnChange(e.target.value)}
+        placeholder={placeholder ?? t('Search')}
+        value={currentSearchTerm}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              {showContactSearchIcon ? (
+                <Icon path={mdiAccountSearch} size={1} />
+              ) : (
+                <SearchIcon />
+              )}
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              {currentSearchTerm && (
+                <IconButton
+                  onClick={() => handleOnChange('')}
+                  data-testid="SearchInputCloseButton"
+                >
+                  <Close
+                    titleAccess={t('Close')}
+                    sx={{
+                      width: 14,
+                      height: 14,
+                      color: 'text.primary',
+                    }}
+                  />
+                </IconButton>
+              )}
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Tooltip>
   );
 };