New left pane search design

images/icons/v2/compose-24.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.29 2.75001c.0332-.00143.0664.00405.0974.0161.0309.01205.0591.0304.0826.0539l.71.71c.0235.02352.0419.05167.0539.08265.0121.03099.0175.06414.0161.09735.0001.03155-.0061.0628-.0181.09197s-.0296.05569-.0519.07803l-9.5 9.49999c-.0331.0315-.0749.0524-.12.06l-1.31.31.31-1.31c.0076-.0451.0285-.0868.06-.12l9.5-9.49999c.0223-.02226.0489-.03991.078-.05192.0292-.01201.0605-.01815.092-.01808zm0-1.75c-.5296.00224-1.0367.21442-1.41.59l-9.5 9.48999c-.26926.2754-.4533.6226-.53 1l-.75 3.22c-.01837.0727-.0198.1487-.0042.222s.04783.1421.0942.201c.04636.059.10564.1065.17325.1389.06762.0324.14177.0489.21675.0481h.12l3.3-.76c.3774-.0767.7246-.2607 1-.53l9.49-9.49999c.186-.18574.3335-.40632.4341-.64912.1007-.24279.1525-.50305.1525-.76588s-.0518-.52308-.1525-.76588c-.1006-.24279-.2481-.46337-.4341-.64912l-.7-.7c-.1954-.19702-.4297-.35122-.6879-.4528-.2583-.10157-.5348-.148296-.8121-.1372zm-6.79 2h-6.62c-1.29253 0-2.53226.51277-3.44715 1.42579-.91489.91301-1.4302 2.15169-1.43285 3.44421v9.24999c.00264 1.2935.51763 2.5332 1.43224 3.4478.9146.9146 2.15432 1.4296 3.44776 1.4322h9.24c1.2934-.0026 2.5332-.5176 3.4478-1.4322s1.4296-2.1543 1.4322-3.4478v-6.62c.0131-.1228.0003-.2469-.0377-.3644s-.1002-.22563-.1828-.31746c-.0825-.09184-.1834-.16528-.2962-.21555s-.2348-.07625-.3583-.07625-.2455.02598-.3583.07625-.2137.12371-.2962.21555c-.0826.09183-.1448.19996-.1828.31746s-.0508.2416-.0377.3644v6.62c0 .8301-.3298 1.6263-.9168 2.2133-.5869.5869-1.3831.9167-2.2132.9167h-9.24c-.83013 0-1.62626-.3298-2.21324-.9167-.58699-.587-.91676-1.3832-.91676-2.2133v-9.24999c.00265-.82839.33358-1.62195.92028-2.20678.58671-.58483 1.38132-.91322 2.20972-.91322h6.62c.1228.01315.2469.00031.3644-.03767.1175-.03799.2256-.10026.3175-.18279.0918-.08253.1652-.18345.2155-.29622s.0763-.23485.0763-.35832c0-.12346-.026-.24555-.0763-.35831-.0503-.11277-.1237-.2137-.2155-.29622-.0919-.08253-.2-.14481-.3175-.18279s-.2416-.05082-.3644-.03768z" fill="#000"/></svg>

stylesheets/_modules.scss

@@ -2660,14 +2660,19 @@ button.ConversationDetails__action-button {
   height: calc(#{$header-height} + var(--title-bar-drag-area-height));
   width: 100%;
 
-  padding-left: 24px;
+  padding-left: 16px;
-  padding-right: 24px;
+  padding-right: 16px;
   padding-top: var(--title-bar-drag-area-height);
 
   display: flex;
+  justify-content: space-between;
   flex-direction: row;
   align-items: center;
 
+  .module-left-pane--width-narrow & {
+    justify-content: center;
+  }
+
   & > * {
     margin-right: 12px;
 
@@ -2681,6 +2686,10 @@ button.ConversationDetails__action-button {
 
     &--container {
       position: relative;
+
+      .module-left-pane--width-narrow & {
+        display: none;
+      }
     }
 
     &--badged {
@@ -2693,14 +2702,10 @@ button.ConversationDetails__action-button {
       top: 0;
       right: 0;
     }
-
-    .module-left-pane--width-narrow & {
-      display: none;
-    }
   }
 
   &__compose-icon {
-    $icon: '../images/icons/v2/compose-outline-24.svg';
+    $icon: '../images/icons/v2/compose-24.svg';
 
     width: 24px;
     height: 24px;

stylesheets/components/LeftPaneDialog.scss

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 @keyframes progress-animation {
@@ -21,12 +21,12 @@
   align-items: center;
   background: $default-background-color;
   color: $default-text-color;
+  cursor: inherit;
   display: flex;
-  width: 100%;
   min-height: 64px;
   padding: 12px 18px;
   user-select: none;
-  cursor: inherit;
+  width: 100%;
 
   .module-left-pane--width-narrow & {
     padding-left: 36px;

stylesheets/components/LeftPaneSearchInput.scss

@@ -1,31 +1,29 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .LeftPaneSearchInput {
-  -webkit-app-region: no-drag;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
   position: relative;
+  margin: 0 16px;
+  margin-bottom: 16px;
 
   &__input {
     @include font-body-2;
-    @include rounded-corners;
     border: none;
+    border-radius: 8px;
     height: 28px;
     padding-left: 30px;
     padding-right: 5px;
     width: 100%;
 
     @include light-theme {
-      background-color: $color-gray-05;
+      background-color: $color-gray-15;
+      border: solid 1px $color-gray-15;
       color: $color-gray-90;
-      border: solid 1px $color-gray-02;
     }
     @include dark-theme {
+      background-color: $color-gray-65;
+      border: solid 1px $color-gray-65;
       color: $color-gray-05;
-      background-color: $color-gray-95;
-      border: solid 1px $color-gray-80;
     }
 
     &:placeholder {
@@ -75,10 +73,10 @@
     top: 3px;
 
     @include light-theme {
-      background-color: $color-gray-15;
+      background-color: $color-gray-25;
     }
     @include dark-theme {
-      background-color: $color-gray-75;
+      background-color: $color-gray-80;
     }
 
     &__x-button {

stylesheets/components/SearchInput.scss

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-SearchInput {
@@ -12,14 +12,14 @@
     @include font-body-2;
 
     @include light-theme {
-      background-color: $color-black-alpha-08;
+      background-color: $color-gray-15;
-      border: solid 1px $color-gray-02;
+      border: solid 1px $color-gray-15;
       color: $color-gray-90;
     }
 
     @include dark-theme {
-      background: $color-gray-90;
+      background-color: $color-gray-65;
-      border: solid 1px $color-gray-90;
+      border: solid 1px $color-gray-65;
       color: $color-gray-05;
     }
 

ts/components/LeftPane.stories.tsx

@@ -35,6 +35,13 @@ const defaultConversations: Array<ConversationType> = [
   }),
 ];
 
+const defaultSearchProps = {
+  searchConversation: undefined,
+  searchDisabled: false,
+  searchTerm: 'hello',
+  startSearchCounter: 0,
+};
+
 const defaultGroups: Array<ConversationType> = [
   getDefaultConversation({
     id: 'biking-group',
@@ -72,18 +79,19 @@ const pinnedConversations: Array<ConversationType> = [
 ];
 
 const defaultModeSpecificProps = {
+  ...defaultSearchProps,
   mode: LeftPaneMode.Inbox as const,
   pinnedConversations,
   conversations: defaultConversations,
   archivedConversations: defaultArchivedConversations,
   isAboutToSearchInAConversation: false,
-  startSearchCounter: 0,
 };
 
 const emptySearchResultsGroup = { isLoading: false, results: [] };
 
 const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   cantAddContactToGroup: action('cantAddContactToGroup'),
+  clearConversationSearch: action('clearConversationSearch'),
   clearGroupCreationError: action('clearGroupCreationError'),
   clearSearch: action('clearSearch'),
   closeCantAddContactToGroupModal: action('closeCantAddContactToGroupModal'),
@@ -177,12 +185,12 @@ story.add('Inbox: no conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations: [],
         conversations: [],
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -192,12 +200,12 @@ story.add('Inbox: only pinned conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: [],
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -207,12 +215,12 @@ story.add('Inbox: only non-pinned conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations: [],
         conversations: defaultConversations,
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -222,12 +230,12 @@ story.add('Inbox: only archived conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations: [],
         conversations: [],
         archivedConversations: defaultArchivedConversations,
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -237,12 +245,12 @@ story.add('Inbox: pinned and archived conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: [],
         archivedConversations: defaultArchivedConversations,
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -252,12 +260,12 @@ story.add('Inbox: non-pinned and archived conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations: [],
         conversations: defaultConversations,
         archivedConversations: defaultArchivedConversations,
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -267,12 +275,12 @@ story.add('Inbox: pinned and non-pinned conversations', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
       },
     })}
   />
@@ -288,11 +296,11 @@ story.add('Search: no results when searching everywhere', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: emptySearchResultsGroup,
         contactResults: emptySearchResultsGroup,
         messageResults: emptySearchResultsGroup,
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -303,11 +311,11 @@ story.add('Search: no results when searching everywhere (SMS)', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: emptySearchResultsGroup,
         contactResults: emptySearchResultsGroup,
         messageResults: emptySearchResultsGroup,
-        searchTerm: 'foo bar',
         primarySendsSms: true,
       },
     })}
@@ -318,12 +326,12 @@ story.add('Search: no results when searching in a conversation', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: emptySearchResultsGroup,
         contactResults: emptySearchResultsGroup,
         messageResults: emptySearchResultsGroup,
         searchConversationName: 'Bing Bong',
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -334,11 +342,11 @@ story.add('Search: all results loading', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: { isLoading: true },
         contactResults: { isLoading: true },
         messageResults: { isLoading: true },
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -349,6 +357,7 @@ story.add('Search: some results loading', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: {
           isLoading: false,
@@ -356,7 +365,6 @@ story.add('Search: some results loading', () => (
         },
         contactResults: { isLoading: true },
         messageResults: { isLoading: true },
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -367,6 +375,7 @@ story.add('Search: has conversations and contacts, but not messages', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: {
           isLoading: false,
@@ -374,7 +383,6 @@ story.add('Search: has conversations and contacts, but not messages', () => (
         },
         contactResults: { isLoading: false, results: defaultConversations },
         messageResults: { isLoading: false, results: [] },
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -385,6 +393,7 @@ story.add('Search: all results', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Search,
         conversationResults: {
           isLoading: false,
@@ -398,7 +407,6 @@ story.add('Search: all results', () => (
             { id: 'msg2', conversationId: 'bar' },
           ],
         },
-        searchTerm: 'foo bar',
         primarySendsSms: false,
       },
     })}
@@ -614,12 +622,13 @@ story.add('Captcha dialog: required', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
+        searchTerm: '',
       },
       challengeStatus: 'required',
     })}
@@ -630,12 +639,13 @@ story.add('Captcha dialog: pending', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
+        searchTerm: '',
       },
       challengeStatus: 'pending',
     })}
@@ -648,12 +658,13 @@ story.add('Crash report dialog', () => (
   <LeftPane
     {...useProps({
       modeSpecificProps: {
+        ...defaultSearchProps,
         mode: LeftPaneMode.Inbox,
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
         isAboutToSearchInAConversation: false,
-        startSearchCounter: 0,
+        searchTerm: '',
       },
       crashReportCount: 42,
     })}
@@ -715,3 +726,20 @@ story.add('Group Metadata: Custom Timer', () => (
     })}
   />
 ));
+
+story.add('Searching Conversation', () => (
+  <LeftPane
+    {...useProps({
+      modeSpecificProps: {
+        ...defaultSearchProps,
+        mode: LeftPaneMode.Inbox,
+        pinnedConversations: [],
+        conversations: defaultConversations,
+        archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        searchConversation: getDefaultConversation(),
+        searchTerm: '',
+      },
+    })}
+  />
+));

ts/components/LeftPane.tsx

@@ -96,6 +96,7 @@ export type PropsType = {
 
   // Action Creators
   cantAddContactToGroup: (conversationId: string) => void;
+  clearConversationSearch: () => void;
   clearGroupCreationError: () => void;
   clearSearch: () => void;
   closeCantAddContactToGroupModal: () => void;
@@ -151,6 +152,7 @@ export const LeftPane: React.FC<PropsType> = ({
   cantAddContactToGroup,
   challengeStatus,
   crashReportCount,
+  clearConversationSearch,
   clearGroupCreationError,
   clearSearch,
   closeCantAddContactToGroupModal,
@@ -461,7 +463,9 @@ export const LeftPane: React.FC<PropsType> = ({
   ]);
 
   const preRowsNode = helper.getPreRowsNode({
+    clearConversationSearch,
     clearGroupCreationError,
+    clearSearch,
     closeCantAddContactToGroupModal,
     closeMaximumGroupSizeModal,
     closeRecommendedGroupSizeModal,
@@ -470,14 +474,11 @@ export const LeftPane: React.FC<PropsType> = ({
     composeSaveAvatarToDisk,
     createGroup,
     i18n,
-    setComposeGroupAvatar,
-    setComposeGroupName,
-    setComposeGroupExpireTimer,
-    toggleComposeEditingAvatar,
-    onChangeComposeSearchTerm: event => {
-      setComposeSearchTerm(event.target.value);
-    },
     removeSelectedContact: toggleConversationInChooseMembers,
+    setComposeGroupAvatar,
+    setComposeGroupExpireTimer,
+    setComposeGroupName,
+    toggleComposeEditingAvatar,
   });
   const footerContents = helper.getFooterContents({
     createGroup,
@@ -550,14 +551,21 @@ export const LeftPane: React.FC<PropsType> = ({
       {/* eslint-enable jsx-a11y/no-static-element-interactions */}
       <div className="module-left-pane__header">
         {helper.getHeaderContents({
-          clearSearch,
           i18n,
           showInbox,
           startComposing,
           showChooseGroupMembers,
-          updateSearchTerm,
         }) || renderMainHeader()}
       </div>
+      {helper.getSearchInput({
+        clearConversationSearch,
+        clearSearch,
+        i18n,
+        onChangeComposeSearchTerm: event => {
+          setComposeSearchTerm(event.target.value);
+        },
+        updateSearchTerm,
+      })}
       {renderExpiredBuildDialog({ containerWidthBreakpoint: widthBreakpoint })}
       {renderRelinkDialog({ containerWidthBreakpoint: widthBreakpoint })}
       {renderNetworkStatus({ containerWidthBreakpoint: widthBreakpoint })}

ts/components/LeftPaneMainSearchInput.tsx

@@ -0,0 +1,92 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useEffect, useRef } from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
+import { LeftPaneSearchInput } from './LeftPaneSearchInput';
+import { usePrevious } from '../hooks/usePrevious';
+
+export type PropsType = {
+  clearConversationSearch: () => void;
+  clearSearch: () => void;
+  disabled?: boolean;
+  i18n: LocalizerType;
+  searchConversation: undefined | ConversationType;
+  searchTerm: string;
+  startSearchCounter: number;
+  updateSearchTerm: (searchTerm: string) => void;
+};
+
+export const LeftPaneMainSearchInput = ({
+  clearConversationSearch,
+  clearSearch,
+  disabled,
+  i18n,
+  searchConversation,
+  searchTerm,
+  startSearchCounter,
+  updateSearchTerm,
+}: PropsType): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const prevSearchConversationId = usePrevious(
+    undefined,
+    searchConversation?.id
+  );
+  const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
+
+  useEffect(() => {
+    // When user chooses to search in a given conversation we focus the field for them
+    if (
+      searchConversation &&
+      searchConversation.id !== prevSearchConversationId
+    ) {
+      inputRef.current?.focus();
+    }
+    // When user chooses to start a new search, we focus the field
+    if (startSearchCounter !== prevSearchCounter) {
+      inputRef.current?.select();
+    }
+  }, [
+    prevSearchConversationId,
+    prevSearchCounter,
+    searchConversation,
+    startSearchCounter,
+  ]);
+
+  return (
+    <LeftPaneSearchInput
+      disabled={disabled}
+      i18n={i18n}
+      onBlur={() => {
+        if (!searchConversation && !searchTerm) {
+          clearSearch();
+        }
+      }}
+      onChangeValue={nextSearchTerm => {
+        if (!nextSearchTerm) {
+          if (searchConversation) {
+            clearConversationSearch();
+          } else {
+            clearSearch();
+          }
+
+          return;
+        }
+
+        if (updateSearchTerm) {
+          updateSearchTerm(nextSearchTerm);
+        }
+      }}
+      onClear={() => {
+        clearSearch();
+        inputRef.current?.focus();
+      }}
+      ref={inputRef}
+      searchConversation={searchConversation}
+      value={searchTerm}
+    />
+  );
+};

ts/components/MainHeader.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -10,7 +10,6 @@ import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 import type { PropsType } from './MainHeader';
 import { MainHeader } from './MainHeader';
-import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { ThemeType } from '../types/Util';
 
 const i18n = setupI18n('en', enMessages);
@@ -23,10 +22,6 @@ const optionalText = (name: string, value: string | undefined) =>
   text(name, value || '') || undefined;
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
-  searchTerm: requiredText('searchTerm', overrideProps.searchTerm),
-  searchConversation: overrideProps.searchConversation,
-  selectedConversation: undefined,
-  startSearchCounter: 0,
   theme: ThemeType.light,
 
   phoneNumber: optionalText('phoneNumber', overrideProps.phoneNumber),
@@ -37,9 +32,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
 
   i18n,
 
-  updateSearchTerm: action('updateSearchTerm'),
-  clearConversationSearch: action('clearConversationSearch'),
-  clearSearch: action('clearSearch'),
   startUpdate: action('startUpdate'),
 
   showArchivedConversations: action('showArchivedConversations'),
@@ -71,35 +63,6 @@ story.add('Phone Number', () => {
   return <MainHeader {...props} />;
 });
 
-story.add('Search Term', () => {
-  const props = createProps({
-    name: 'John Smith',
-    searchTerm: 'Hewwo?',
-    title: 'John Smith',
-  });
-
-  return <MainHeader {...props} />;
-});
-
-story.add('Searching Conversation', () => {
-  const props = createProps({
-    name: 'John Smith',
-    searchConversation: getDefaultConversation(),
-  });
-
-  return <MainHeader {...props} />;
-});
-
-story.add('Searching Conversation with Term', () => {
-  const props = createProps({
-    name: 'John Smith',
-    searchTerm: 'address',
-    searchConversation: getDefaultConversation(),
-  });
-
-  return <MainHeader {...props} />;
-});
-
 story.add('Update Available', () => {
   const props = createProps({ hasPendingUpdate: true });
 

ts/components/MainHeader.tsx

@@ -1,4 +1,4 @@
-// Copyright 2018-2021 Signal Messenger, LLC
+// Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -10,39 +10,25 @@ import { Avatar } from './Avatar';
 import { AvatarPopup } from './AvatarPopup';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import type { AvatarColorType } from '../types/Colors';
-import type { ConversationType } from '../state/ducks/conversations';
-import { LeftPaneSearchInput } from './LeftPaneSearchInput';
 import type { BadgeType } from '../badges/types';
 
 export type PropsType = {
-  searchTerm: string;
-  searchConversation: undefined | ConversationType;
-  startSearchCounter: number;
-  selectedConversation: undefined | ConversationType;
-
-  // For display
-  phoneNumber?: string;
-  isMe?: boolean;
-  name?: string;
-  color?: AvatarColorType;
-  disabled?: boolean;
-  isVerified?: boolean;
-  profileName?: string;
-  title: string;
   avatarPath?: string;
   badge?: BadgeType;
+  color?: AvatarColorType;
   hasPendingUpdate: boolean;
-  theme: ThemeType;
-
   i18n: LocalizerType;
-
+  isMe?: boolean;
-  updateSearchTerm: (searchTerm: string) => void;
+  isVerified?: boolean;
-  startUpdate: () => unknown;
+  name?: string;
-  clearConversationSearch: () => void;
+  phoneNumber?: string;
-  clearSearch: () => void;
+  profileName?: string;
+  theme: ThemeType;
+  title: string;
 
   showArchivedConversations: () => void;
   startComposing: () => void;
+  startUpdate: () => unknown;
   toggleProfileEditor: () => void;
 };
 
@@ -52,35 +38,15 @@ type StateType = {
 };
 
 export class MainHeader extends React.Component<PropsType, StateType> {
-  private readonly inputRef: React.RefObject<HTMLInputElement>;
-
   constructor(props: PropsType) {
     super(props);
 
-    this.inputRef = React.createRef();
-
     this.state = {
       showingAvatarPopup: false,
       popperRoot: null,
     };
   }
 
-  public override componentDidUpdate(prevProps: PropsType): void {
-    const { searchConversation, startSearchCounter } = this.props;
-
-    // When user chooses to search in a given conversation we focus the field for them
-    if (
-      searchConversation &&
-      searchConversation.id !== prevProps.searchConversation?.id
-    ) {
-      this.setFocus();
-    }
-    // When user chooses to start a new search, we focus the field
-    if (startSearchCounter !== prevProps.startSearchCounter) {
-      this.setSelected();
-    }
-  }
-
   public handleOutsideClick = ({ target }: MouseEvent): void => {
     const { popperRoot, showingAvatarPopup } = this.state;
 
@@ -134,42 +100,6 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   }
 
-  private updateSearch = (searchTerm: string): void => {
-    const {
-      updateSearchTerm,
-      clearConversationSearch,
-      clearSearch,
-      searchConversation,
-    } = this.props;
-
-    if (!searchTerm) {
-      if (searchConversation) {
-        clearConversationSearch();
-      } else {
-        clearSearch();
-      }
-
-      return;
-    }
-
-    if (updateSearchTerm) {
-      updateSearchTerm(searchTerm);
-    }
-  };
-
-  public clearSearch = (): void => {
-    const { clearSearch } = this.props;
-    clearSearch();
-    this.setFocus();
-  };
-
-  private handleInputBlur = (): void => {
-    const { clearSearch, searchConversation, searchTerm } = this.props;
-    if (!searchConversation && !searchTerm) {
-      clearSearch();
-    }
-  };
-
   public handleGlobalKeyDown = (event: KeyboardEvent): void => {
     const { showingAvatarPopup } = this.state;
     const { key } = event;
@@ -179,31 +109,16 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     }
   };
 
-  public setFocus = (): void => {
-    if (this.inputRef.current) {
-      this.inputRef.current.focus();
-    }
-  };
-
-  public setSelected = (): void => {
-    if (this.inputRef.current) {
-      this.inputRef.current.select();
-    }
-  };
-
   public override render(): JSX.Element {
     const {
       avatarPath,
       badge,
       color,
-      disabled,
       hasPendingUpdate,
       i18n,
       name,
       phoneNumber,
       profileName,
-      searchConversation,
-      searchTerm,
       showArchivedConversations,
       startComposing,
       startUpdate,
@@ -213,8 +128,6 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     } = this.props;
     const { showingAvatarPopup, popperRoot } = this.state;
 
-    const isSearching = Boolean(searchConversation || searchTerm.trim().length);
-
     return (
       <div className="module-main-header">
         <Manager>
@@ -291,25 +204,13 @@ export class MainHeader extends React.Component<PropsType, StateType> {
               )
             : null}
         </Manager>
-        <LeftPaneSearchInput
+        <button
-          disabled={disabled}
+          aria-label={i18n('newConversation')}
-          i18n={i18n}
+          className="module-main-header__compose-icon"
-          onBlur={this.handleInputBlur}
+          onClick={startComposing}
-          onChangeValue={this.updateSearch}
+          title={i18n('newConversation')}
-          onClear={this.clearSearch}
+          type="button"
-          ref={this.inputRef}
-          searchConversation={searchConversation}
-          value={searchTerm}
         />
-        {!isSearching && (
-          <button
-            aria-label={i18n('newConversation')}
-            className="module-main-header__compose-icon"
-            onClick={startComposing}
-            title={i18n('newConversation')}
-            type="button"
-          />
-        )}
       </div>
     );
   }

ts/components/leftPane/LeftPaneArchiveHelper.tsx

@@ -49,15 +49,11 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
   }
 
   override getHeaderContents({
-    clearSearch,
     i18n,
     showInbox,
-    updateSearchTerm,
   }: Readonly<{
-    clearSearch: () => void;
     i18n: LocalizerType;
     showInbox: () => void;
-    updateSearchTerm: (query: string) => void;
   }>): ReactChild {
     return (
       <div className="module-left-pane__header__contents">
@@ -69,29 +65,44 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
           type="button"
         />
         <div className="module-left-pane__header__contents__text">
-          {this.searchConversation ? (
+          {i18n('archivedConversations')}
-            <LeftPaneSearchInput
-              i18n={i18n}
-              onChangeValue={newValue => {
-                updateSearchTerm(newValue);
-              }}
-              onClear={() => {
-                clearSearch();
-              }}
-              ref={el => {
-                el?.focus();
-              }}
-              searchConversation={this.searchConversation}
-              value={this.searchTerm}
-            />
-          ) : (
-            i18n('archivedConversations')
-          )}
         </div>
       </div>
     );
   }
 
+  override getSearchInput({
+    clearSearch,
+    i18n,
+    updateSearchTerm,
+  }: Readonly<{
+    clearConversationSearch: () => unknown;
+    clearSearch: () => unknown;
+    i18n: LocalizerType;
+    updateSearchTerm: (searchTerm: string) => unknown;
+  }>): ReactChild | null {
+    if (!this.searchConversation) {
+      return null;
+    }
+
+    return (
+      <LeftPaneSearchInput
+        i18n={i18n}
+        onChangeValue={newValue => {
+          updateSearchTerm(newValue);
+        }}
+        onClear={() => {
+          clearSearch();
+        }}
+        ref={el => {
+          el?.focus();
+        }}
+        searchConversation={this.searchConversation}
+        value={this.searchTerm}
+      />
+    );
+  }
+
   override getBackAction({ showInbox }: { showInbox: () => void }): () => void {
     return showInbox;
   }

ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactChild, ChangeEvent } from 'react';
@@ -105,21 +105,37 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     return startComposing;
   }
 
+  override getSearchInput({
+    i18n,
+    onChangeComposeSearchTerm,
+  }: Readonly<{
+    i18n: LocalizerType;
+    onChangeComposeSearchTerm: (
+      event: ChangeEvent<HTMLInputElement>
+    ) => unknown;
+  }>): ReactChild {
+    return (
+      <SearchInput
+        moduleClassName="module-left-pane__compose-search-form"
+        onChange={onChangeComposeSearchTerm}
+        placeholder={i18n('contactSearchPlaceholder')}
+        ref={focusRef}
+        value={this.searchTerm}
+      />
+    );
+  }
+
   override getPreRowsNode({
     closeCantAddContactToGroupModal,
     closeMaximumGroupSizeModal,
     closeRecommendedGroupSizeModal,
     i18n,
-    onChangeComposeSearchTerm,
     removeSelectedContact,
   }: Readonly<{
     closeCantAddContactToGroupModal: () => unknown;
     closeMaximumGroupSizeModal: () => unknown;
     closeRecommendedGroupSizeModal: () => unknown;
     i18n: LocalizerType;
-    onChangeComposeSearchTerm: (
-      event: ChangeEvent<HTMLInputElement>
-    ) => unknown;
     removeSelectedContact: (conversationId: string) => unknown;
   }>): ReactChild {
     let modalNode: undefined | ReactChild;
@@ -154,14 +170,6 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
 
     return (
       <>
-        <SearchInput
-          moduleClassName="module-left-pane__compose-search-form"
-          onChange={onChangeComposeSearchTerm}
-          placeholder={i18n('contactSearchPlaceholder')}
-          ref={focusRef}
-          value={this.searchTerm}
-        />
-
         {Boolean(this.selectedContacts.length) && (
           <ContactPills>
             {this.selectedContacts.map(contact => (

ts/components/leftPane/LeftPaneComposeHelper.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactChild, ChangeEvent } from 'react';
@@ -94,7 +94,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
     return showInbox;
   }
 
-  override getPreRowsNode({
+  override getSearchInput({
     i18n,
     onChangeComposeSearchTerm,
   }: Readonly<{
@@ -104,21 +104,25 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
     ) => unknown;
   }>): ReactChild {
     return (
-      <>
+      <SearchInput
-        <SearchInput
+        moduleClassName="module-left-pane__compose-search-form"
-          moduleClassName="module-left-pane__compose-search-form"
+        onChange={onChangeComposeSearchTerm}
-          onChange={onChangeComposeSearchTerm}
+        placeholder={i18n('contactSearchPlaceholder')}
-          placeholder={i18n('contactSearchPlaceholder')}
+        ref={focusRef}
-          ref={focusRef}
+        value={this.searchTerm}
-          value={this.searchTerm}
+      />
-        />
+    );
+  }
 
-        {this.getRowCount() ? null : (
+  override getPreRowsNode({
-          <div className="module-left-pane__compose-no-contacts">
+    i18n,
-            {i18n('noConversationsFound')}
+  }: Readonly<{
-          </div>
+    i18n: LocalizerType;
-        )}
+  }>): ReactChild | null {
-      </>
+    return this.getRowCount() ? null : (
+      <div className="module-left-pane__compose-no-contacts">
+        {i18n('noConversationsFound')}
+      </div>
     );
   }
 

ts/components/leftPane/LeftPaneHelper.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ChangeEvent, ReactChild } from 'react';
@@ -24,12 +24,24 @@ export type ToFindType = {
 export abstract class LeftPaneHelper<T> {
   getHeaderContents(
     _: Readonly<{
-      clearSearch: () => void;
       i18n: LocalizerType;
       showInbox: () => void;
       startComposing: () => void;
       showChooseGroupMembers: () => void;
-      updateSearchTerm: (query: string) => void;
+    }>
+  ): null | ReactChild {
+    return null;
+  }
+
+  getSearchInput(
+    _: Readonly<{
+      clearConversationSearch: () => unknown;
+      clearSearch: () => unknown;
+      i18n: LocalizerType;
+      onChangeComposeSearchTerm: (
+        event: ChangeEvent<HTMLInputElement>
+      ) => unknown;
+      updateSearchTerm: (searchTerm: string) => unknown;
     }>
   ): null | ReactChild {
     return null;
@@ -47,7 +59,9 @@ export abstract class LeftPaneHelper<T> {
 
   getPreRowsNode(
     _: Readonly<{
+      clearConversationSearch: () => unknown;
       clearGroupCreationError: () => void;
+      clearSearch: () => unknown;
       closeCantAddContactToGroupModal: () => unknown;
       closeMaximumGroupSizeModal: () => unknown;
       closeRecommendedGroupSizeModal: () => unknown;
@@ -56,13 +70,10 @@ export abstract class LeftPaneHelper<T> {
       composeSaveAvatarToDisk: SaveAvatarToDiskActionType;
       createGroup: () => unknown;
       i18n: LocalizerType;
-      setComposeGroupAvatar: (_: undefined | Uint8Array) => unknown;
-      setComposeGroupName: (_: string) => unknown;
-      setComposeGroupExpireTimer: (_: number) => void;
-      onChangeComposeSearchTerm: (
-        event: ChangeEvent<HTMLInputElement>
-      ) => unknown;
       removeSelectedContact: (_: string) => unknown;
+      setComposeGroupAvatar: (_: undefined | Uint8Array) => unknown;
+      setComposeGroupExpireTimer: (_: number) => void;
+      setComposeGroupName: (_: string) => unknown;
       toggleComposeEditingAvatar: () => unknown;
     }>
   ): null | ReactChild {

ts/components/leftPane/LeftPaneInboxHelper.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { last } from 'lodash';
@@ -7,6 +7,7 @@ import React from 'react';
 
 import { Intl } from '../Intl';
 import type { ToFindType } from './LeftPaneHelper';
+import type { ConversationType } from '../../state/ducks/conversations';
 import { LeftPaneHelper } from './LeftPaneHelper';
 import { getConversationInDirection } from './getConversationInDirection';
 import type { Row } from '../ConversationList';
@@ -14,6 +15,7 @@ import { RowType } from '../ConversationList';
 import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import type { LocalizerType } from '../../types/Util';
 import { handleKeydownForSearch } from './handleKeydownForSearch';
+import { LeftPaneMainSearchInput } from '../LeftPaneMainSearchInput';
 
 export type LeftPaneInboxPropsType = {
   conversations: ReadonlyArray<ConversationListItemPropsType>;
@@ -21,6 +23,9 @@ export type LeftPaneInboxPropsType = {
   pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
   isAboutToSearchInAConversation: boolean;
   startSearchCounter: number;
+  searchDisabled: boolean;
+  searchTerm: string;
+  searchConversation: undefined | ConversationType;
 };
 
 export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType> {
@@ -34,12 +39,21 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
 
   private readonly startSearchCounter: number;
 
+  private readonly searchDisabled: boolean;
+
+  private readonly searchTerm: string;
+
+  private readonly searchConversation: undefined | ConversationType;
+
   constructor({
     conversations,
     archivedConversations,
     pinnedConversations,
     isAboutToSearchInAConversation,
     startSearchCounter,
+    searchDisabled,
+    searchTerm,
+    searchConversation,
   }: Readonly<LeftPaneInboxPropsType>) {
     super();
 
@@ -48,6 +62,9 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     this.pinnedConversations = pinnedConversations;
     this.isAboutToSearchInAConversation = isAboutToSearchInAConversation;
     this.startSearchCounter = startSearchCounter;
+    this.searchDisabled = searchDisabled;
+    this.searchTerm = searchTerm;
+    this.searchConversation = searchConversation;
   }
 
   getRowCount(): number {
@@ -61,9 +78,36 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     );
   }
 
+  override getSearchInput({
+    clearConversationSearch,
+    clearSearch,
+    i18n,
+    updateSearchTerm,
+  }: Readonly<{
+    clearConversationSearch: () => unknown;
+    clearSearch: () => unknown;
+    i18n: LocalizerType;
+    updateSearchTerm: (searchTerm: string) => unknown;
+  }>): ReactChild {
+    return (
+      <LeftPaneMainSearchInput
+        clearConversationSearch={clearConversationSearch}
+        clearSearch={clearSearch}
+        disabled={this.searchDisabled}
+        i18n={i18n}
+        searchConversation={this.searchConversation}
+        searchTerm={this.searchTerm}
+        startSearchCounter={this.startSearchCounter}
+        updateSearchTerm={updateSearchTerm}
+      />
+    );
+  }
+
   override getPreRowsNode({
     i18n,
-  }: Readonly<{ i18n: LocalizerType }>): null | ReactChild {
+  }: Readonly<{
+    i18n: LocalizerType;
+  }>): ReactChild | null {
     if (this.getRowCount() === 0) {
       return (
         <div className="module-left-pane__empty">

ts/components/leftPane/LeftPaneSearchHelper.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactChild } from 'react';
@@ -11,6 +11,8 @@ import type { Row } from '../ConversationList';
 import { RowType } from '../ConversationList';
 import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import { handleKeydownForSearch } from './handleKeydownForSearch';
+import type { ConversationType } from '../../state/ducks/conversations';
+import { LeftPaneMainSearchInput } from '../LeftPaneMainSearchInput';
 
 import { Intl } from '../Intl';
 import { Emojify } from '../conversation/Emojify';
@@ -37,6 +39,9 @@ export type LeftPaneSearchPropsType = {
   searchConversationName?: string;
   primarySendsSms: boolean;
   searchTerm: string;
+  startSearchCounter: number;
+  searchDisabled: boolean;
+  searchConversation: undefined | ConversationType;
 };
 
 const searchResultKeys: Array<
@@ -61,30 +66,70 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
 
   private readonly searchTerm: string;
 
+  private readonly startSearchCounter: number;
+
+  private readonly searchDisabled: boolean;
+
+  private readonly searchConversation: undefined | ConversationType;
+
   constructor({
-    conversationResults,
     contactResults,
+    conversationResults,
     messageResults,
-    searchConversationName,
     primarySendsSms,
+    searchConversation,
+    searchConversationName,
+    searchDisabled,
     searchTerm,
+    startSearchCounter,
   }: Readonly<LeftPaneSearchPropsType>) {
     super();
 
-    this.conversationResults = conversationResults;
     this.contactResults = contactResults;
+    this.conversationResults = conversationResults;
     this.messageResults = messageResults;
-    this.searchConversationName = searchConversationName;
     this.primarySendsSms = primarySendsSms;
+    this.searchConversation = searchConversation;
+    this.searchConversationName = searchConversationName;
+    this.searchDisabled = searchDisabled;
     this.searchTerm = searchTerm;
+    this.startSearchCounter = startSearchCounter;
+  }
+
+  override getSearchInput({
+    clearConversationSearch,
+    clearSearch,
+    i18n,
+    updateSearchTerm,
+  }: Readonly<{
+    clearConversationSearch: () => unknown;
+    clearSearch: () => unknown;
+    i18n: LocalizerType;
+    updateSearchTerm: (searchTerm: string) => unknown;
+  }>): ReactChild {
+    return (
+      <LeftPaneMainSearchInput
+        clearConversationSearch={clearConversationSearch}
+        clearSearch={clearSearch}
+        disabled={this.searchDisabled}
+        i18n={i18n}
+        searchConversation={this.searchConversation}
+        searchTerm={this.searchTerm}
+        startSearchCounter={this.startSearchCounter}
+        updateSearchTerm={updateSearchTerm}
+      />
+    );
   }
 
   override getPreRowsNode({
     i18n,
-  }: Readonly<{ i18n: LocalizerType }>): null | ReactChild {
+  }: Readonly<{
+    i18n: LocalizerType;
+  }>): ReactChild | null {
     const mightHaveSearchResults = this.allResults().some(
       searchResult => searchResult.isLoading || searchResult.results.length
     );
+
     if (mightHaveSearchResults) {
       return null;
     }

ts/state/selectors/conversations.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import memoizee from 'memoizee';
@@ -133,25 +133,6 @@ export const getSelectedConversationId = createSelector(
   }
 );
 
-export const getSelectedConversation = createSelector(
-  getSelectedConversationId,
-  getConversationLookup,
-  (
-    selectedConversationId: string | undefined,
-    conversationLookup: ConversationLookupType
-  ): undefined | ConversationType => {
-    if (!selectedConversationId) {
-      return undefined;
-    }
-    const conversation = getOwn(conversationLookup, selectedConversationId);
-    assert(
-      conversation,
-      'getSelectedConversation: could not find selected conversation in lookup; returning undefined'
-    );
-    return conversation;
-  }
-);
-
 type SelectedMessageType = {
   id: string;
   counter: number;

ts/state/selectors/search.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import memoizee from 'memoizee';
@@ -95,7 +95,14 @@ export const getSearchResults = createSelector(
     state: SearchStateType,
     searchConversationName,
     conversationLookup: ConversationLookupType
-  ): Omit<LeftPaneSearchPropsType, 'primarySendsSms'> => {
+  ): Pick<
+    LeftPaneSearchPropsType,
+    | 'conversationResults'
+    | 'contactResults'
+    | 'messageResults'
+    | 'searchConversationName'
+    | 'searchTerm'
+  > => {
     const {
       contactIds,
       conversationIds,

ts/state/smart/LeftPane.tsx

@@ -118,12 +118,18 @@ const getModeSpecificProps = (
         return {
           mode: LeftPaneMode.Search,
           primarySendsSms,
+          searchConversation: getSearchConversation(state),
+          searchDisabled: state.network.challengeStatus !== 'idle',
+          startSearchCounter: getStartSearchCounter(state),
           ...getSearchResults(state),
         };
       }
       return {
         mode: LeftPaneMode.Inbox,
         isAboutToSearchInAConversation: getIsSearchingInAConversation(state),
+        searchConversation: getSearchConversation(state),
+        searchDisabled: state.network.challengeStatus !== 'idle',
+        searchTerm: getQuery(state),
         startSearchCounter: getStartSearchCounter(state),
         ...getLeftPaneLists(state),
       };

ts/state/smart/MainHeader.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -8,11 +8,6 @@ import { MainHeader } from '../../components/MainHeader';
 import type { StateType } from '../reducer';
 
 import { getPreferredBadgeSelector } from '../selectors/badges';
-import {
-  getQuery,
-  getSearchConversation,
-  getStartSearchCounter,
-} from '../selectors/search';
 import {
   getIntl,
   getRegionCode,
@@ -21,18 +16,13 @@ import {
   getUserNumber,
   getUserUuid,
 } from '../selectors/user';
-import { getMe, getSelectedConversation } from '../selectors/conversations';
+import { getMe } from '../selectors/conversations';
 
 const mapStateToProps = (state: StateType) => {
   const me = getMe(state);
 
   return {
-    disabled: state.network.challengeStatus !== 'idle',
     hasPendingUpdate: Boolean(state.updates.didSnooze),
-    searchTerm: getQuery(state),
-    searchConversation: getSearchConversation(state),
-    selectedConversation: getSelectedConversation(state),
-    startSearchCounter: getStartSearchCounter(state),
     regionCode: getRegionCode(state),
     ourConversationId: getUserConversationId(state),
     ourNumber: getUserNumber(state),

ts/test-both/state/selectors/conversations_test.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2021 Signal Messenger, LLC
+// Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
@@ -39,7 +39,6 @@ import {
   getNumberOfMessagesPendingBecauseOfVerification,
   getPlaceholderContact,
   getRecommendedGroupSizeModalState,
-  getSelectedConversation,
   getSelectedConversationId,
   hasGroupCreationError,
   isCreatingGroup,
@@ -1744,36 +1743,6 @@ describe('both/state/selectors/conversations', () => {
     });
   });
 
-  describe('#getSelectedConversation', () => {
-    it('returns undefined if no conversation is selected', () => {
-      const state = {
-        ...getEmptyRootState(),
-        conversations: {
-          ...getEmptyState(),
-          conversationLookup: {
-            abc123: makeConversation('abc123'),
-          },
-        },
-      };
-      assert.isUndefined(getSelectedConversation(state));
-    });
-
-    it('returns the selected conversation', () => {
-      const conversation = makeConversation('abc123');
-      const state = {
-        ...getEmptyRootState(),
-        conversations: {
-          ...getEmptyState(),
-          conversationLookup: {
-            abc123: conversation,
-          },
-          selectedConversationId: 'abc123',
-        },
-      };
-      assert.strictEqual(getSelectedConversation(state), conversation);
-    });
-  });
-
   describe('#getContactNameColorSelector', () => {
     it('returns the right color order sorted by UUID ASC', () => {
       const group = makeConversation('group');

ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
@@ -12,10 +12,13 @@ import { LeftPaneInboxHelper } from '../../../components/leftPane/LeftPaneInboxH
 
 describe('LeftPaneInboxHelper', () => {
   const defaultProps: LeftPaneInboxPropsType = {
-    conversations: [],
-    pinnedConversations: [],
     archivedConversations: [],
+    conversations: [],
     isAboutToSearchInAConversation: false,
+    pinnedConversations: [],
+    searchConversation: undefined,
+    searchDisabled: false,
+    searchTerm: '',
     startSearchCounter: 0,
   };
 

ts/test-node/components/leftPane/LeftPaneSearchHelper_test.ts

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
@@ -23,6 +23,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: [] },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.isUndefined(
@@ -44,6 +47,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }).getRowCount(),
         100
       );
@@ -57,6 +63,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }).getRowCount(),
         100
       );
@@ -67,6 +76,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: false, results: [fakeMessage()] },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }).getRowCount(),
         100
       );
@@ -79,6 +91,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: [] },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.strictEqual(helper.getRowCount(), 0);
@@ -94,6 +109,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: [fakeMessage()] },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.strictEqual(helper.getRowCount(), 5);
@@ -109,6 +127,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
         new LeftPaneSearchHelper({
           conversationResults: {
@@ -119,6 +140,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
         new LeftPaneSearchHelper({
           conversationResults: { isLoading: true },
@@ -126,6 +150,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: false, results: [fakeMessage()] },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
       ];
 
@@ -159,6 +186,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: messages },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -208,6 +238,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: messages },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -248,6 +281,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: messages },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -290,6 +326,9 @@ describe('LeftPaneSearchHelper', () => {
       messageResults: { isLoading: false, results: [] },
       searchTerm: 'foo',
       primarySendsSms: false,
+      searchConversation: undefined,
+      searchDisabled: false,
+      startSearchCounter: 0,
     });
 
     assert.deepEqual(helper.getRow(0), {
@@ -324,6 +363,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
         new LeftPaneSearchHelper({
           conversationResults: {
@@ -334,6 +376,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
         new LeftPaneSearchHelper({
           conversationResults: { isLoading: true },
@@ -341,6 +386,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: false, results: [fakeMessage()] },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         }),
       ];
 
@@ -362,6 +410,9 @@ describe('LeftPaneSearchHelper', () => {
         },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
       assert.isTrue(helper.isScrollable());
     });
@@ -381,6 +432,9 @@ describe('LeftPaneSearchHelper', () => {
         },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.isFalse(
@@ -396,6 +450,9 @@ describe('LeftPaneSearchHelper', () => {
           },
           searchTerm: 'bar',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         })
       );
     });
@@ -407,6 +464,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: true },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.isFalse(
@@ -419,6 +479,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'bar',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         })
       );
     });
@@ -430,6 +493,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: [fakeMessage()] },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.isTrue(
@@ -442,6 +508,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: false, results: [fakeMessage()] },
           searchTerm: 'foo',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         })
       );
     });
@@ -456,6 +525,9 @@ describe('LeftPaneSearchHelper', () => {
         messageResults: { isLoading: false, results: [] },
         searchTerm: 'foo',
         primarySendsSms: false,
+        searchConversation: undefined,
+        searchDisabled: false,
+        startSearchCounter: 0,
       });
 
       assert.isTrue(
@@ -468,6 +540,9 @@ describe('LeftPaneSearchHelper', () => {
           messageResults: { isLoading: true },
           searchTerm: 'bar',
           primarySendsSms: false,
+          searchConversation: undefined,
+          searchDisabled: false,
+          startSearchCounter: 0,
         })
       );
     });

ts/util/lint/exceptions.json

@@ -7488,20 +7488,11 @@
     "updated": "2021-10-11T21:21:08.188Z"
   },
   {
-    "rule": "React-createRef",
+    "rule": "React-useRef",
-    "path": "ts/components/MainHeader.js",
+    "path": "ts/components/LeftPaneMainSearchInput.tsx",
-    "line": "        this.inputRef = react_1.default.createRef();",
+    "line": "  const inputRef = useRef<HTMLInputElement | null>(null);",
     "reasonCategory": "usageTrusted",
-    "updated": "2020-02-14T20:02:37.507Z",
+    "updated": "2022-01-26T23:11:05.369Z"
-    "reasonDetail": "Used only to set focus"
-  },
-  {
-    "rule": "React-createRef",
-    "path": "ts/components/MainHeader.tsx",
-    "line": "    this.inputRef = React.createRef();",
-    "reasonCategory": "usageTrusted",
-    "updated": "2020-02-14T20:02:37.507Z",
-    "reasonDetail": "Used only to set focus"
   },
   {
     "rule": "React-useRef",
@@ -8411,4 +8402,4 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
   }
-]
+]