In conversation hero, show “No group in common” if you have no common groups and no phone number

_locales/en/messages.json

@@ -3122,6 +3122,10 @@
       }
     }
   },
+  "no-groups-in-common": {
+    "message": "No groups in common.",
+    "description": "Shown to indicate this user is not a member of any groups"
+  },
   "acceptCall": {
     "message": "Answer",
     "description": "Shown in tooltip for the button to accept a call (audio or video)"

ts/components/conversation/ConversationHero.tsx

@@ -23,22 +23,26 @@ export type Props = {
 
 const renderMembershipRow = ({
   i18n,
-  sharedGroupNames,
+  phoneNumber,
+  sharedGroupNames = [],
   conversationType,
   isMe,
-}: Pick<Props, 'i18n' | 'sharedGroupNames' | 'conversationType' | 'isMe'>) => {
+}: Pick<
+  Props,
+  'i18n' | 'phoneNumber' | 'sharedGroupNames' | 'conversationType' | 'isMe'
+>) => {
   const className = 'module-conversation-hero__membership';
   const nameClassName = `${className}__name`;
 
+  if (conversationType !== 'direct') {
+    return null;
+  }
+
   if (isMe) {
     return <div className={className}>{i18n('noteToSelfHero')}</div>;
   }
 
-  if (
+  if (sharedGroupNames.length > 0) {
-    conversationType === 'direct' &&
-    sharedGroupNames &&
-    sharedGroupNames.length > 0
-  ) {
     const firstThreeGroups = take(sharedGroupNames, 3).map((group, i) => (
       // We cannot guarantee uniqueness of group names
       // eslint-disable-next-line react/no-array-index-key
@@ -108,6 +112,10 @@ const renderMembershipRow = ({
     }
   }
 
+  if (!phoneNumber) {
+    return <div className={className}>{i18n('no-groups-in-common')}</div>;
+  }
+
   return null;
 };
 
@@ -207,7 +215,13 @@ export const ConversationHero = ({
             : phoneNumber}
         </div>
       ) : null}
-      {renderMembershipRow({ isMe, sharedGroupNames, conversationType, i18n })}
+      {renderMembershipRow({
+        conversationType,
+        i18n,
+        isMe,
+        phoneNumber,
+        sharedGroupNames,
+      })}
     </div>
   );
   /* eslint-enable no-nested-ternary */

ts/util/lint/exceptions.json

@@ -14577,7 +14577,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.js",
     "line": "    const firstRenderRef = React.useRef(true);",
-    "lineNumber": 81,
+    "lineNumber": 85,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14586,7 +14586,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.tsx",
     "line": "  const firstRenderRef = React.useRef(true);",
-    "lineNumber": 130,
+    "lineNumber": 138,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."