Do not populate left pane on initial link

ts/components/leftPane/LeftPaneComposeHelper.tsx

@@ -7,6 +7,7 @@ import { PhoneNumber } from 'google-libphonenumber';
 import { LeftPaneHelper } from './LeftPaneHelper';
 import { Row, RowType } from '../ConversationList';
 import { PropsDataType as ContactListItemPropsType } from '../conversationList/ContactListItem';
+import { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import { LocalizerType } from '../../types/Util';
 import {
   instance as phoneNumberInstance,
@@ -18,6 +19,7 @@ import { isStorageWriteFeatureEnabled } from '../../storage/isFeatureEnabled';
 
 export type LeftPaneComposePropsType = {
   composeContacts: ReadonlyArray<ContactListItemPropsType>;
+  composeGroups: ReadonlyArray<ContactListItemPropsType>;
   regionCode: string;
   searchTerm: string;
 };
@@ -35,20 +37,24 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
 > {
   private readonly composeContacts: ReadonlyArray<ContactListItemPropsType>;
 
+  private readonly composeGroups: ReadonlyArray<ConversationListItemPropsType>;
+
   private readonly searchTerm: string;
 
   private readonly phoneNumber: undefined | PhoneNumber;
 
   constructor({
     composeContacts,
+    composeGroups,
     regionCode,
     searchTerm,
   }: Readonly<LeftPaneComposePropsType>) {
     super();
 
-    this.composeContacts = composeContacts;
     this.searchTerm = searchTerm;
     this.phoneNumber = parsePhoneNumber(searchTerm, regionCode);
+    this.composeGroups = composeGroups;
+    this.composeContacts = composeContacts;
   }
 
   getHeaderContents({
@@ -103,7 +109,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
 
         {this.getRowCount() ? null : (
           <div className="module-left-pane__compose-no-contacts">
-            {i18n('noContactsFound')}
+            {i18n('noConversationsFound')}
           </div>
         )}
       </>
@@ -111,62 +117,89 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
   }
 
   getRowCount(): number {
-    let result = this.composeContacts.length;
+    let result = this.composeContacts.length + this.composeGroups.length;
     if (this.hasTopButton()) {
       result += 1;
     }
     if (this.hasContactsHeader()) {
       result += 1;
     }
+    if (this.hasGroupsHeader()) {
+      result += 1;
+    }
+
     return result;
   }
 
-  getRow(rowIndex: number): undefined | Row {
-    if (rowIndex === 0) {
-      const topButton = this.getTopButton();
-      switch (topButton) {
-        case TopButton.None:
-          break;
-        case TopButton.StartNewConversation:
-          assert(
-            this.phoneNumber,
-            'LeftPaneComposeHelper: we should have a phone number if the top button is "Start new conversation"'
-          );
-          return {
-            type: RowType.StartNewConversation,
-            phoneNumber: phoneNumberInstance.format(
+  getRow(actualRowIndex: number): undefined | Row {
+    let virtualRowIndex = actualRowIndex;
+    if (this.hasTopButton()) {
+      if (virtualRowIndex === 0) {
+        const topButton = this.getTopButton();
+        switch (topButton) {
+          case TopButton.None:
+            break;
+          case TopButton.StartNewConversation:
+            assert(
               this.phoneNumber,
-              PhoneNumberFormat.E164
-            ),
-          };
-        case TopButton.CreateNewGroup:
-          return { type: RowType.CreateNewGroup };
-        default:
-          throw missingCaseError(topButton);
+              'LeftPaneComposeHelper: we should have a phone number if the top button is "Start new conversation"'
+            );
+            return {
+              type: RowType.StartNewConversation,
+              phoneNumber: phoneNumberInstance.format(
+                this.phoneNumber,
+                PhoneNumberFormat.E164
+              ),
+            };
+          case TopButton.CreateNewGroup:
+            return { type: RowType.CreateNewGroup };
+          default:
+            throw missingCaseError(topButton);
+        }
       }
+
+      virtualRowIndex -= 1;
     }
 
-    if (rowIndex === 1 && this.hasContactsHeader()) {
+    if (this.hasContactsHeader()) {
+      if (virtualRowIndex === 0) {
+        return {
+          type: RowType.Header,
+          i18nKey: 'contactsHeader',
+        };
+      }
+
+      virtualRowIndex -= 1;
+
+      const contact = this.composeContacts[virtualRowIndex];
+      if (contact) {
+        return {
+          type: RowType.Contact,
+          contact,
+        };
+      }
+
+      virtualRowIndex -= this.composeContacts.length;
+    }
+
+    if (this.hasGroupsHeader()) {
+      if (virtualRowIndex === 0) {
+        return {
+          type: RowType.Header,
+          i18nKey: 'groupsHeader',
+        };
+      }
+
+      virtualRowIndex -= 1;
+
+      const group = this.composeGroups[virtualRowIndex];
       return {
-        type: RowType.Header,
-        i18nKey: 'contactsHeader',
+        type: RowType.Conversation,
+        conversation: group,
       };
     }
 
-    let contactIndex: number;
-    if (this.hasTopButton()) {
-      contactIndex = rowIndex - 2;
-    } else {
-      contactIndex = rowIndex;
-    }
-
-    const contact = this.composeContacts[contactIndex];
-    return contact
-      ? {
-          type: RowType.Contact,
-          contact,
-        }
-      : undefined;
+    return undefined;
   }
 
   // This is deliberately unimplemented because these keyboard shortcuts shouldn't work in
@@ -183,10 +216,17 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
     return undefined;
   }
 
-  shouldRecomputeRowHeights(old: Readonly<LeftPaneComposePropsType>): boolean {
+  shouldRecomputeRowHeights(
+    exProps: Readonly<LeftPaneComposePropsType>
+  ): boolean {
+    const prev = new LeftPaneComposeHelper(exProps);
+    const currHeaderIndices = this.getHeaderIndices();
+    const prevHeaderIndices = prev.getHeaderIndices();
+
     return (
-      this.hasContactsHeader() !==
-      new LeftPaneComposeHelper(old).hasContactsHeader()
+      currHeaderIndices.top !== prevHeaderIndices.top ||
+      currHeaderIndices.contact !== prevHeaderIndices.contact ||
+      currHeaderIndices.group !== prevHeaderIndices.group
     );
   }
 
@@ -205,7 +245,39 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
   }
 
   private hasContactsHeader(): boolean {
-    return this.hasTopButton() && Boolean(this.composeContacts.length);
+    return Boolean(this.composeContacts.length);
+  }
+
+  private hasGroupsHeader(): boolean {
+    return Boolean(this.composeGroups.length);
+  }
+
+  private getHeaderIndices(): {
+    top?: number;
+    contact?: number;
+    group?: number;
+  } {
+    let top: number | undefined;
+    let contact: number | undefined;
+    let group: number | undefined;
+    let rowCount = 0;
+    if (this.hasTopButton()) {
+      top = 0;
+      rowCount += 1;
+    }
+    if (this.composeContacts.length) {
+      contact = rowCount;
+      rowCount += this.composeContacts.length;
+    }
+    if (this.composeGroups.length) {
+      group = rowCount;
+    }
+
+    return {
+      top,
+      contact,
+      group,
+    };
   }
 }