Support new 'requiredProtocolVersion' in DataMessage

* Add new requiredProtocolVersion field to DataMessage

* Message.requiredProtocolVersion, warning if version mot supported

* Update strings; limit width; new left pane preview text

_locales/en/messages.json

@@ -1740,6 +1740,11 @@
     "description":
       "Shown in notifications and in the left pane instead of sticker image."
   },
+  "message--getDescription--unsupported-message": {
+    "message": "Unsupported message",
+    "description":
+      "Shown in notifications and in the left pane when a message has features too new for this signal install."
+  },
   "stickers--toast--InstallFailed": {
     "message": "Sticker pack could not be installed",
     "description":
@@ -1863,5 +1868,38 @@
   "confirmation-dialog--Cancel": {
     "message": "Cancel",
     "description": "Appears on the cancel button in confirmation dialogs."
+  },
+  "Message--unsupported-message": {
+    "message":
+      "$contact$ sent you a message that can't be processed or displayed because it uses a new Signal feature.",
+    "placeholders": {
+      "contact": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
+  },
+  "Message--unsupported-message-ask-to-resend": {
+    "message":
+      "You can ask $contact$ to re-send this message now that you are using an up-to-date version of Signal.",
+    "placeholders": {
+      "contact": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
+  },
+  "Message--from-me-unsupported-message": {
+    "message":
+      "One of your devices sent a message that can't be processed or displayed because it uses a new Signal feature."
+  },
+  "Message--from-me-unsupported-message-ask-to-resend": {
+    "message":
+      "You’ve updated to the latest version of Signal and will now receive this message type on your device."
+  },
+  "Message--update-signal": {
+    "message": "Update Signal",
+    "description":
+      "Text for a button which will take user to Signal download page"
   }
 }

js/models/messages.js

@@ -87,6 +87,10 @@
         );
       }
 
+      this.CURRENT_PROTOCOL_VERSION =
+        textsecure.protobuf.DataMessage.ProtocolVersion.CURRENT;
+      this.INITIAL_PROTOCOL_VERSION =
+        textsecure.protobuf.DataMessage.ProtocolVersion.INITIAL;
       this.OUR_NUMBER = textsecure.storage.user.getNumber();
 
       this.on('destroy', this.onDestroy);
@@ -122,7 +126,12 @@
 
     // Top-level prop generation for the message bubble
     generateProps() {
-      if (this.isExpirationTimerUpdate()) {
+      if (this.isUnsupportedMessage()) {
+        this.props = {
+          type: 'unsupportedMessage',
+          data: this.getPropsForUnsupportedMessage(),
+        };
+      } else if (this.isExpirationTimerUpdate()) {
         this.props = {
           type: 'timerNotification',
           data: this.getPropsForTimerNotification(),
@@ -267,6 +276,16 @@
     },
 
     // Bucketing messages
+    isUnsupportedMessage() {
+      const versionAtReceive = this.get('supportedVersionAtReceive');
+      const requiredVersion = this.get('requiredProtocolVersion');
+
+      return (
+        _.isNumber(versionAtReceive) &&
+        _.isNumber(requiredVersion) &&
+        versionAtReceive < requiredVersion
+      );
+    },
     isExpirationTimerUpdate() {
       const flag =
         textsecure.protobuf.DataMessage.Flags.EXPIRATION_TIMER_UPDATE;
@@ -289,6 +308,16 @@
     },
 
     // Props for each message type
+    getPropsForUnsupportedMessage() {
+      const requiredVersion = this.get('requiredProtocolVersion');
+      const canProcessNow = this.CURRENT_PROTOCOL_VERSION >= requiredVersion;
+      const phoneNumber = this.getSource();
+
+      return {
+        canProcessNow,
+        contact: this.findAndFormatContact(phoneNumber),
+      };
+    },
     getPropsForTimerNotification() {
       const timerUpdate = this.get('expirationTimerUpdate');
       if (!timerUpdate) {
@@ -479,6 +508,7 @@
           this.trigger('download', downloadOptions),
 
         openLink: url => this.trigger('navigate-to', url),
+        downloadNewVersion: () => this.trigger('download-new-version'),
         scrollToMessage: scrollOptions =>
           this.trigger('scroll-to-message', scrollOptions),
       };
@@ -694,6 +724,9 @@
 
     // More display logic
     getDescription() {
+      if (this.isUnsupportedMessage()) {
+        return i18n('message--getDescription--unsupported-message');
+      }
       if (this.isGroupUpdate()) {
         const groupUpdate = this.get('group_update');
         if (groupUpdate.left === 'You') {
@@ -1733,6 +1766,10 @@
             hasFileAttachments: dataMessage.hasFileAttachments,
             hasVisualMediaAttachments: dataMessage.hasVisualMediaAttachments,
             preview,
+            requiredProtocolVersion:
+              dataMessage.requiredProtocolVersion ||
+              this.INITIAL_PROTOCOL_VERSION,
+            supportedVersionAtReceive: this.CURRENT_PROTOCOL_VERSION,
             quote: dataMessage.quote,
             schemaVersion: dataMessage.schemaVersion,
             sticker: dataMessage.sticker,
@@ -1888,10 +1925,12 @@
           message.set({ id });
           MessageController.register(message.id, message);
 
+          if (!message.isUnsupportedMessage()) {
             // Note that this can save the message again, if jobs were queued. We need to
             //   call it after we have an id for this message, because the jobs refer back
             //   to their source message.
             await message.queueAttachmentDownloads();
+          }
 
           await window.Signal.Data.updateConversation(
             conversationId,

js/modules/signal.js

@@ -65,6 +65,9 @@ const {
 const {
   TypingBubble,
 } = require('../../ts/components/conversation/TypingBubble');
+const {
+  UnsupportedMessage,
+} = require('../../ts/components/conversation/UnsupportedMessage');
 const {
   VerificationNotification,
 } = require('../../ts/components/conversation/VerificationNotification');
@@ -277,6 +280,7 @@ exports.setup = (options = {}) => {
       Message: MediaGalleryMessage,
     },
     TypingBubble,
+    UnsupportedMessage,
     VerificationNotification,
   };
 

js/views/conversation_view.js

@@ -144,6 +144,13 @@
       this.listenTo(this.model.messageCollection, 'navigate-to', url => {
         window.location = url;
       });
+      this.listenTo(
+        this.model.messageCollection,
+        'download-new-version',
+        () => {
+          window.location = 'https://signal.org/download';
+        }
+      );
 
       this.lazyUpdateVerified = _.debounce(
         this.model.updateVerified.bind(this.model),

js/views/message_view.js

@@ -51,7 +51,12 @@
       const { Components } = window.Signal;
       const { type, data: props } = this.model.props;
 
-      if (type === 'timerNotification') {
+      if (type === 'unsupportedMessage') {
+        return {
+          Component: Components.UnsupportedMessage,
+          props,
+        };
+      } else if (type === 'timerNotification') {
         return {
           Component: Components.TimerNotification,
           props,

protos/SignalService.proto

@@ -169,6 +169,13 @@ message DataMessage {
     optional AttachmentPointer data = 4;
   }
 
+  enum ProtocolVersion {
+    option allow_alias = true;
+
+    INITIAL = 0;
+    CURRENT = 0;
+  }
+
   optional string             body                    = 1;
   repeated AttachmentPointer  attachments             = 2;
   optional GroupContext       group                   = 3;
@@ -180,6 +187,7 @@ message DataMessage {
   repeated Contact            contact                 = 9;
   repeated Preview            preview                 = 10;
   optional Sticker            sticker                 = 11;
+  optional uint32             requiredProtocolVersion = 12;
 }
 
 message NullMessage {

stylesheets/_modules.scss

@@ -1200,7 +1200,7 @@
   font-weight: 300;
 }
 
-.module-verification-notification__button {
+.module-safety-number-notification__button {
   margin-top: 5px;
   display: inline-block;
   cursor: pointer;
@@ -4448,6 +4448,79 @@
   }
 }
 
+// Module: Unsupported Message
+
+.module-unsupported-message {
+  margin-top: 14px;
+  text-align: center;
+}
+
+.module-unsupported-message__icon {
+  height: 24px;
+  width: 24px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 7px;
+
+  @include light-theme {
+    @include color-svg('../images/error.svg', $color-gray-60);
+  }
+
+  @include dark-theme {
+    @include color-svg('../images/error.svg', $color-dark-30);
+  }
+}
+
+.module-unsupported-message__icon--can-process {
+  @include light-theme {
+    @include color-svg('../images/check-circle-outline.svg', $color-gray-60);
+  }
+
+  @include dark-theme {
+    @include color-svg('../images/check-circle-outline.svg', $color-dark-30);
+  }
+}
+
+.module-unsupported-message__text {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.3px;
+  max-width: 396px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include light-theme {
+    color: $color-gray-60;
+  }
+  @include dark-theme {
+    color: $color-dark-30;
+  }
+}
+
+.module-unsupported-message__contact {
+  font-weight: 300;
+}
+
+.module-unsupported-message__button {
+  margin-top: 5px;
+  display: inline-block;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 18px;
+  padding: 12px;
+  border-radius: 4px;
+
+  @include light-theme {
+    color: $color-signal-blue;
+    background-color: $color-light-02;
+  }
+  @include dark-theme {
+    color: $color-signal-blue;
+    background-color: $color-gray-75;
+  }
+}
+
 // Third-party module: react-contextmenu
 
 .react-contextmenu {

stylesheets/_theme_dark.scss

@@ -1023,7 +1023,7 @@ body.dark-theme {
     color: $color-dark-30;
   }
 
-  .module-verification-notification__button {
+  .module-safety-number-notification__button {
     color: $color-signal-blue;
     background-color: $color-gray-75;
   }

ts/components/conversation/SafetyNumberNotification.md

@@ -1,6 +1,6 @@
 ### In group conversation
 
-```js
+```jsx
 <util.ConversationContext theme={util.theme}>
   <SafetyNumberNotification
     i18n={util.i18n}
@@ -13,7 +13,7 @@
 
 ### In one-on-one conversation
 
-```js
+```jsx
 <util.ConversationContext theme={util.theme}>
   <SafetyNumberNotification
     i18n={util.i18n}

ts/components/conversation/SafetyNumberNotification.tsx

@@ -50,7 +50,7 @@ export class SafetyNumberNotification extends React.Component<Props> {
                   name={contact.name}
                   profileName={contact.profileName}
                   phoneNumber={contact.phoneNumber}
-                  module="module-verification-notification__contact"
+                  module="module-safety-number-notification__contact"
                 />
               </span>,
             ]}
@@ -62,7 +62,7 @@ export class SafetyNumberNotification extends React.Component<Props> {
           onClick={() => {
             showIdentity(contact.id);
           }}
-          className="module-verification-notification__button"
+          className="module-safety-number-notification__button"
         >
           {i18n('verifyNewNumber')}
         </div>

ts/components/conversation/UnsupportedMessage.md

@@ -0,0 +1,69 @@
+### From someone in your contacts
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <UnsupportedMessage
+    i18n={util.i18n}
+    contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
+    downloadNewVersion={() => console.log('downloadNewVersion')}
+  />
+</util.ConversationContext>
+```
+
+### After you upgrade
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <UnsupportedMessage
+    i18n={util.i18n}
+    canProcessNow={true}
+    contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
+    downloadNewVersion={() => console.log('downloadNewVersion')}
+  />
+</util.ConversationContext>
+```
+
+### No name, just profile
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <UnsupportedMessage
+    i18n={util.i18n}
+    contact={{ phoneNumber: '(202) 500-1000', profileName: 'Mr. Fire' }}
+    downloadNewVersion={() => console.log('downloadNewVersion')}
+  />
+</util.ConversationContext>
+```
+
+### From yourself
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <UnsupportedMessage
+    i18n={util.i18n}
+    contact={{
+      isMe: true,
+      phoneNumber: '(202) 500-1000',
+      profileName: 'Mr. Fire',
+    }}
+    downloadNewVersion={() => console.log('downloadNewVersion')}
+  />
+</util.ConversationContext>
+```
+
+### From yourself, after you upgrade
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <UnsupportedMessage
+    i18n={util.i18n}
+    canProcessNow={true}
+    contact={{
+      isMe: true,
+      phoneNumber: '(202) 500-1000',
+      profileName: 'Mr. Fire',
+    }}
+    downloadNewVersion={() => console.log('downloadNewVersion')}
+  />
+</util.ConversationContext>
+```

ts/components/conversation/UnsupportedMessage.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { ContactName } from './ContactName';
+import { Intl } from '../Intl';
+import { LocalizerType } from '../../types/Util';
+
+interface ContactType {
+  id: string;
+  phoneNumber: string;
+  profileName?: string;
+  name?: string;
+  isMe: boolean;
+}
+
+export type PropsData = {
+  canProcessNow: boolean;
+  contact: ContactType;
+};
+
+type PropsHousekeeping = {
+  i18n: LocalizerType;
+};
+
+export type PropsActions = {
+  downloadNewVersion: () => unknown;
+};
+
+type Props = PropsData & PropsHousekeeping & PropsActions;
+
+export class UnsupportedMessage extends React.Component<Props> {
+  public render() {
+    const { canProcessNow, contact, i18n, downloadNewVersion } = this.props;
+    const { isMe } = contact;
+
+    const otherStringId = canProcessNow
+      ? 'Message--unsupported-message-ask-to-resend'
+      : 'Message--unsupported-message';
+    const meStringId = canProcessNow
+      ? 'Message--from-me-unsupported-message-ask-to-resend'
+      : 'Message--from-me-unsupported-message';
+    const stringId = isMe ? meStringId : otherStringId;
+
+    return (
+      <div className="module-unsupported-message">
+        <div
+          className={classNames(
+            'module-unsupported-message__icon',
+            canProcessNow
+              ? 'module-unsupported-message__icon--can-process'
+              : null
+          )}
+        />
+        <div className="module-unsupported-message__text">
+          <Intl
+            id={stringId}
+            components={[
+              <span
+                key="external-1"
+                className="module-unsupported-message__contact"
+              >
+                <ContactName
+                  i18n={i18n}
+                  name={contact.name}
+                  profileName={contact.profileName}
+                  phoneNumber={contact.phoneNumber}
+                  module="module-unsupported-message__contact"
+                />
+              </span>,
+            ]}
+            i18n={i18n}
+          />
+        </div>
+        {canProcessNow ? null : (
+          <div
+            role="button"
+            onClick={() => {
+              downloadNewVersion();
+            }}
+            className="module-unsupported-message__button"
+          >
+            {i18n('Message--update-signal')}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

ts/util/lint/exceptions.json

@@ -872,7 +872,7 @@
     "rule": "jQuery-append(",
     "path": "js/views/message_view.js",
     "line": "      this.$el.append(this.childView.el);",
-    "lineNumber": 139,
+    "lineNumber": 144,
     "reasonCategory": "usageTrusted",
     "updated": "2018-09-19T18:13:29.628Z",
     "reasonDetail": "Interacting with already-existing DOM nodes"