From 258bd55dd213e25e560e84dae57d88323280955f Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Mon, 25 Jan 2021 20:01:19 -0500
Subject: [PATCH] Show about info from contact profiles

---
 stylesheets/_global.scss                      | 15 -------
 stylesheets/_modules.scss                     | 41 +++++++++++++++++--
 ts/components/ContactListItem.stories.tsx     | 40 ++++--------------
 ts/components/ContactListItem.tsx             | 25 ++---------
 ts/components/conversation/About.tsx          | 22 ++++++++++
 .../conversation/ContactModal.stories.tsx     |  1 +
 ts/components/conversation/ContactModal.tsx   |  4 ++
 .../conversation/ConversationHero.stories.tsx |  7 ++++
 .../conversation/ConversationHero.tsx         |  8 ++++
 ts/model-types.d.ts                           |  2 +
 ts/models/conversations.ts                    | 40 ++++++++++++++++++
 ts/state/ducks/conversations.ts               |  1 +
 ts/util/lint/exceptions.json                  | 10 ++---
 13 files changed, 140 insertions(+), 76 deletions(-)
 create mode 100644 ts/components/conversation/About.tsx

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 8165ca42e2..8ca6bd3362 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -201,21 +201,6 @@ a {
   .container {
     outline: none;
   }
-
-  .members .contact {
-    @include light-theme {
-      border-bottom: 1px solid $color-gray-05;
-      &:last-of-type {
-        border-bottom: none;
-      }
-    }
-    @include dark-theme {
-      border-bottom: 1px solid $color-gray-75;
-      &:last-of-type {
-        border-bottom: none;
-      }
-    }
-  }
 }
 
 .banner {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 5576bcc9a2..8a31160caa 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2077,6 +2077,32 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 }
 
+.module-about {
+  &__container {
+    margin-bottom: 8px;
+    max-width: 248px;
+  }
+
+  &__text {
+    @include font-body-1;
+    @include light-theme {
+      color: $color-gray-60;
+    }
+    @include dark-theme {
+      color: $color-gray-25;
+    }
+    max-width: 400px;
+
+    img.emoji {
+      height: 1em;
+      margin-right: 3px;
+      margin-bottom: 3px;
+      vertical-align: middle;
+      width: 1em;
+    }
+  }
+}
+
 // Module: Embedded Contact
 
 .module-embedded-contact {
@@ -2689,6 +2715,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-contact-list-item__text {
   margin-left: 8px;
 
+  align-items: center;
   display: flex;
   flex-direction: row;
 
@@ -2696,7 +2723,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-contact-list-item__text__name {
-  @include font-body-2-bold;
+  @include font-body-1-bold;
+  @include light-theme {
+    color: $color-gray-90;
+  }
+  @include dark-theme {
+    color: $color-gray-05;
+  }
 }
 
 .module-contact-list-item__text__profile-name {
@@ -2731,7 +2764,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   text-align: right;
   height: 100%;
 
-  @include font-body-2-bold;
+  @include font-body-2;
 }
 
 // Module: In Contacts Icon
@@ -10299,7 +10332,7 @@ $contact-modal-padding: 18px;
 .module-contact-modal {
   @include font-body-2;
 
-  min-width: 250px;
+  min-width: 280px;
   padding: $contact-modal-padding;
   border-radius: 8px;
   overflow: hidden;
@@ -10336,7 +10369,7 @@ $contact-modal-padding: 18px;
 }
 
 .module-contact-modal__name {
-  @include font-body-1-bold;
+  @include font-title-2;
 
   margin-top: 6px;
 }
diff --git a/ts/components/ContactListItem.stories.tsx b/ts/components/ContactListItem.stories.tsx
index 63aa15e8bd..fb88015a2d 100644
--- a/ts/components/ContactListItem.stories.tsx
+++ b/ts/components/ContactListItem.stories.tsx
@@ -23,7 +23,6 @@ storiesOf('Components/ContactListItem', module)
         title="Someone 🔥 Somewhere"
         name="Someone 🔥 Somewhere"
         phoneNumber="(202) 555-0011"
-        isVerified
         profileName="🔥Flames🔥"
         avatarPath={gifUrl}
         onClick={onClick}
@@ -39,6 +38,7 @@ storiesOf('Components/ContactListItem', module)
           name="Someone 🔥 Somewhere"
           phoneNumber="(202) 555-0011"
           profileName="🔥Flames🔥"
+          about="👍 Free to chat"
           avatarPath={gifUrl}
           onClick={onClick}
         />
@@ -48,26 +48,13 @@ storiesOf('Components/ContactListItem', module)
           name="Another ❄️ Yes"
           phoneNumber="(202) 555-0011"
           profileName="❄️Ice❄️"
+          about="🙏 Be kind"
           avatarPath={gifUrl}
           onClick={onClick}
         />
       </div>
     );
   })
-  .add('With name and profile, verified', () => {
-    return (
-      <ContactListItem
-        i18n={i18n}
-        title="Someone 🔥 Somewhere"
-        name="Someone 🔥 Somewhere"
-        phoneNumber="(202) 555-0011"
-        profileName="🔥Flames🔥"
-        isVerified
-        avatarPath={gifUrl}
-        onClick={onClick}
-      />
-    );
-  })
   .add('With name and profile, admin', () => {
     return (
       <ContactListItem
@@ -77,7 +64,7 @@ storiesOf('Components/ContactListItem', module)
         name="Someone 🔥 Somewhere"
         phoneNumber="(202) 555-0011"
         profileName="🔥Flames🔥"
-        isVerified
+        about="👍 Free to chat"
         avatarPath={gifUrl}
         onClick={onClick}
       />
@@ -90,6 +77,7 @@ storiesOf('Components/ContactListItem', module)
         isAdmin
         title="(202) 555-0011"
         phoneNumber="(202) 555-0011"
+        about="👍 Free to chat"
         avatarPath={gifUrl}
         onClick={onClick}
       />
@@ -104,6 +92,7 @@ storiesOf('Components/ContactListItem', module)
         color="teal"
         phoneNumber="(202) 555-0011"
         profileName="🔥Flames🔥"
+        about="👍 Free to chat"
         onClick={onClick}
       />
     );
@@ -115,39 +104,28 @@ storiesOf('Components/ContactListItem', module)
         phoneNumber="(202) 555-0011"
         title="🔥Flames🔥"
         profileName="🔥Flames🔥"
+        about="👍 Free to chat"
         onClick={onClick}
       />
     );
   })
-  .add('Verified, profile, no name, no avatar', () => {
+  .add('No name, no profile, no avatar, no about', () => {
     return (
       <ContactListItem
         i18n={i18n}
         phoneNumber="(202) 555-0011"
-        title="🔥Flames🔥"
-        profileName="🔥Flames🔥"
-        isVerified
+        title="(202) 555-0011"
         onClick={onClick}
       />
     );
   })
   .add('No name, no profile, no avatar', () => {
-    return (
-      <ContactListItem
-        i18n={i18n}
-        phoneNumber="(202) 555-0011"
-        title="(202) 555-0011"
-        onClick={onClick}
-      />
-    );
-  })
-  .add('Verified, no name, no profile, no avatar', () => {
     return (
       <ContactListItem
         i18n={i18n}
         title="(202) 555-0011"
+        about="👍 Free to chat"
         phoneNumber="(202) 555-0011"
-        isVerified
         onClick={onClick}
       />
     );
diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx
index 857bb1f5f5..defeae2d13 100644
--- a/ts/components/ContactListItem.tsx
+++ b/ts/components/ContactListItem.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { About } from './conversation/About';
 import { Avatar } from './Avatar';
 import { Emojify } from './conversation/Emojify';
 import { InContactsIcon } from './InContactsIcon';
@@ -12,12 +13,12 @@ import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
 
 type Props = {
+  about?: string;
   avatarPath?: string;
   color?: ColorType;
   i18n: LocalizerType;
   isAdmin?: boolean;
   isMe?: boolean;
-  isVerified?: boolean;
   name?: string;
   onClick?: () => void;
   phoneNumber?: string;
@@ -53,24 +54,11 @@ export class ContactListItem extends React.Component<Props> {
   }
 
   public render(): JSX.Element {
-    const {
-      i18n,
-      isAdmin,
-      isMe,
-      isVerified,
-      name,
-      onClick,
-      phoneNumber,
-      profileName,
-      title,
-    } = this.props;
+    const { about, i18n, isAdmin, isMe, name, onClick, title } = this.props;
 
     const displayName = isMe ? i18n('you') : title;
     const shouldShowIcon = Boolean(name);
 
-    const showNumber = Boolean(isMe || name || profileName);
-    const showVerified = !isMe && isVerified;
-
     return (
       <button
         onClick={onClick}
@@ -93,12 +81,7 @@ export class ContactListItem extends React.Component<Props> {
               ) : null}
             </div>
             <div className="module-contact-list-item__text__additional-data">
-              {showVerified ? (
-                <div className="module-contact-list-item__text__verified-icon" />
-              ) : null}
-              {showVerified ? ` ${i18n('verified')}` : null}
-              {showVerified && showNumber ? ' ∙ ' : null}
-              {showNumber ? phoneNumber : null}
+              <About text={about} />
             </div>
           </div>
           {isAdmin ? (
diff --git a/ts/components/conversation/About.tsx b/ts/components/conversation/About.tsx
new file mode 100644
index 0000000000..779cded2ea
--- /dev/null
+++ b/ts/components/conversation/About.tsx
@@ -0,0 +1,22 @@
+// Copyright 2018-2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { Emojify } from './Emojify';
+
+export type PropsType = {
+  text?: string;
+};
+
+export const About = ({ text }: PropsType): JSX.Element | null => {
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <span className="module-about__text" dir="auto">
+      <Emojify text={text || ''} />
+    </span>
+  );
+};
diff --git a/ts/components/conversation/ContactModal.stories.tsx b/ts/components/conversation/ContactModal.stories.tsx
index 3847dbc706..b04ce05da8 100644
--- a/ts/components/conversation/ContactModal.stories.tsx
+++ b/ts/components/conversation/ContactModal.stories.tsx
@@ -24,6 +24,7 @@ const defaultContact: ConversationType = {
   title: 'Pauline Oliveros',
   type: 'direct',
   phoneNumber: '(333) 444-5515',
+  about: '👍 Free to chat',
 };
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx
index 35baf16082..5fdda46a65 100644
--- a/ts/components/conversation/ContactModal.tsx
+++ b/ts/components/conversation/ContactModal.tsx
@@ -5,6 +5,7 @@ import React, { ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ConversationType } from '../../state/ducks/conversations';
+import { About } from './About';
 import { Avatar } from '../Avatar';
 import { LocalizerType } from '../../types/Util';
 
@@ -110,6 +111,9 @@ export const ContactModal = ({
               title={contact.title}
             />
             <div className="module-contact-modal__name">{contact.title}</div>
+            <div className="module-about__container">
+              <About text={contact.about} />
+            </div>
             {contact.phoneNumber && (
               <div className="module-contact-modal__profile-and-number">
                 {contact.phoneNumber}
diff --git a/ts/components/conversation/ConversationHero.stories.tsx b/ts/components/conversation/ConversationHero.stories.tsx
index 0f8087c3bd..9b8c5b28df 100644
--- a/ts/components/conversation/ConversationHero.stories.tsx
+++ b/ts/components/conversation/ConversationHero.stories.tsx
@@ -11,6 +11,7 @@ import enMessages from '../../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
+const getAbout = () => text('about', '👍 Free to chat');
 const getTitle = () => text('name', 'Cayce Bollard');
 const getName = () => text('name', 'Cayce Bollard');
 const getProfileName = () => text('profileName', 'Cayce Bollard (profile)');
@@ -23,6 +24,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -39,6 +41,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -55,6 +58,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -71,6 +75,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -87,6 +92,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={text('title', 'Cayce Bollard (profile)')}
           avatarPath={getAvatarPath()}
@@ -103,6 +109,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={text('title', '+1 (646) 327-2700')}
           avatarPath={getAvatarPath()}
diff --git a/ts/components/conversation/ConversationHero.tsx b/ts/components/conversation/ConversationHero.tsx
index 77bb2bc387..f2bda07e53 100644
--- a/ts/components/conversation/ConversationHero.tsx
+++ b/ts/components/conversation/ConversationHero.tsx
@@ -5,11 +5,13 @@ import * as React from 'react';
 import { take } from 'lodash';
 import { Avatar, Props as AvatarProps } from '../Avatar';
 import { ContactName } from './ContactName';
+import { About } from './About';
 import { Emojify } from './Emojify';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 
 export type Props = {
+  about?: string;
   i18n: LocalizerType;
   isMe?: boolean;
   sharedGroupNames?: Array<string>;
@@ -111,6 +113,7 @@ const renderMembershipRow = ({
 
 export const ConversationHero = ({
   i18n,
+  about,
   avatarPath,
   color,
   conversationType,
@@ -188,6 +191,11 @@ export const ConversationHero = ({
           />
         )}
       </h1>
+      {about && (
+        <div className="module-about__container">
+          <About text={about} />
+        </div>
+      )}
       {!isMe ? (
         <div className="module-conversation-hero__with">
           {membersCount === 1
diff --git a/ts/model-types.d.ts b/ts/model-types.d.ts
index 03e7c37702..64ada8a477 100644
--- a/ts/model-types.d.ts
+++ b/ts/model-types.d.ts
@@ -201,6 +201,8 @@ export type ConversationAttributesType = {
   e164?: string;
 
   // Private other fields
+  about?: string;
+  aboutEmoji?: string;
   profileFamilyName?: string;
   profileKey?: string;
   profileName?: string;
diff --git a/ts/models/conversations.ts b/ts/models/conversations.ts
index ba2496a84a..3f06beecc9 100644
--- a/ts/models/conversations.ts
+++ b/ts/models/conversations.ts
@@ -1173,6 +1173,7 @@ export class ConversationModel extends window.Backbone.Model<
       uuid: this.get('uuid'),
       e164: this.get('e164'),
 
+      about: this.getAboutText(),
       acceptedMessageRequest: this.getAccepted(),
       activeAt: this.get('active_at')!,
       areWePending: Boolean(
@@ -1884,6 +1885,17 @@ export class ConversationModel extends window.Backbone.Model<
     return !this.get('profileSharing');
   }
 
+  getAboutText(): string | undefined {
+    if (!this.get('about')) {
+      return undefined;
+    }
+
+    return window.i18n('message--getNotificationText--text-with-emoji', {
+      text: this.get('about'),
+      emoji: this.get('aboutEmoji'),
+    });
+  }
+
   /**
    * Determine if this conversation should be considered "accepted" in terms
    * of message requests
@@ -3755,6 +3767,30 @@ export class ConversationModel extends window.Backbone.Model<
         });
       }
 
+      if (profile.about) {
+        const key = this.get('profileKey');
+        if (key) {
+          const keyBuffer = base64ToArrayBuffer(key);
+          const decrypted = await window.textsecure.crypto.decryptProfile(
+            base64ToArrayBuffer(profile.about),
+            keyBuffer
+          );
+          this.set('about', stringFromBytes(decrypted));
+        }
+      }
+
+      if (profile.aboutEmoji) {
+        const key = this.get('profileKey');
+        if (key) {
+          const keyBuffer = base64ToArrayBuffer(key);
+          const decrypted = await window.textsecure.crypto.decryptProfile(
+            base64ToArrayBuffer(profile.aboutEmoji),
+            keyBuffer
+          );
+          this.set('aboutEmoji', stringFromBytes(decrypted));
+        }
+      }
+
       if (profile.capabilities) {
         c.set({ capabilities: profile.capabilities });
       }
@@ -3900,6 +3936,8 @@ export class ConversationModel extends window.Backbone.Model<
         `Setting sealedSender to UNKNOWN for conversation ${this.idForLogging()}`
       );
       this.set({
+        about: undefined,
+        aboutEmoji: undefined,
         profileAvatar: undefined,
         profileKey,
         profileKeyVersion: undefined,
@@ -3943,6 +3981,8 @@ export class ConversationModel extends window.Backbone.Model<
       }
 
       this.set({
+        about: undefined,
+        aboutEmoji: undefined,
         profileKey: undefined,
         profileKeyVersion: undefined,
         profileKeyCredential: null,
diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts
index 162958373f..7d404f284c 100644
--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@@ -51,6 +51,7 @@ export type ConversationType = {
   name?: string;
   firstName?: string;
   profileName?: string;
+  about?: string;
   avatarPath?: string;
   areWeAdmin?: boolean;
   areWePending?: boolean;
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 315455e1f9..0a9a22e3d3 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -14745,7 +14745,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ContactModal.js",
     "line": "    const overlayRef = react_1.default.useRef(null);",
-    "lineNumber": 17,
+    "lineNumber": 18,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-09T17:48:12.173Z"
   },
@@ -14753,7 +14753,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ContactModal.js",
     "line": "    const closeButtonRef = react_1.default.useRef(null);",
-    "lineNumber": 18,
+    "lineNumber": 19,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-10T21:27:04.909Z"
   },
@@ -14779,7 +14779,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.js",
     "line": "    const firstRenderRef = React.useRef(true);",
-    "lineNumber": 80,
+    "lineNumber": 81,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -14788,7 +14788,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.tsx",
     "line": "  const firstRenderRef = React.useRef(true);",
-    "lineNumber": 127,
+    "lineNumber": 130,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -15300,4 +15300,4 @@
     "updated": "2021-01-08T15:46:32.143Z",
     "reasonDetail": "Doesn't manipulate the DOM. This is just a function."
   }
-]
\ No newline at end of file
+]