settings: Add "text" option to emoji_set model.

We no longer have a special UI setting and model
field ("emoji_alt_code") for saying users want text-only
emojis.  We now instead make "text" be a fifth choice
for "emojiset".

Fixes #7406

frontend_tests/node_tests/dispatch.js

@@ -390,12 +390,6 @@ var event_fixtures = {
         setting: true,
     },
 
-    update_display_settings__emoji_alt_code: {
-        type: 'update_display_settings',
-        setting_name: 'emoji_alt_code',
-        setting: true,
-    },
-
     update_display_settings__twenty_four_hour_time: {
         type: 'update_display_settings',
         setting_name: 'twenty_four_hour_time',
@@ -805,11 +799,6 @@ with_overrides(function (override) {
     dispatch(event);
     assert_same(page_params.twenty_four_hour_time, true);
 
-    event = event_fixtures.update_display_settings__emoji_alt_code;
-    page_params.emoji_alt_code = false;
-    dispatch(event);
-    assert_same(page_params.emoji_alt_code, true);
-
 });
 
 with_overrides(function (override) {

frontend_tests/node_tests/reactions.js

@@ -166,7 +166,7 @@ set_global('current_msg_list', {
          count: 1,
          user_ids: [7],
          title: 'Cali reacted with :frown:',
-         emoji_alt_code: undefined,
+         emoji_alt_code: false,
          class: 'message_reaction',
       },
       {
@@ -177,7 +177,7 @@ set_global('current_msg_list', {
          count: 1,
          user_ids: [5],
          title: 'You (click to remove) reacted with :inactive_realm_emoji:',
-         emoji_alt_code: undefined,
+         emoji_alt_code: false,
          is_realm_emoji: true,
          url: 'TBD',
          class: 'message_reaction reacted',
@@ -190,7 +190,7 @@ set_global('current_msg_list', {
          count: 2,
          user_ids: [5, 6],
          title: 'You (click to remove) and Bob van Roberts reacted with :smile:',
-         emoji_alt_code: undefined,
+         emoji_alt_code: false,
          class: 'message_reaction reacted',
       },
    ];

static/js/compose.js

@@ -820,7 +820,7 @@ exports.initialize = function () {
             preview_html = rendered_content;
         }
         $("#preview_content").html(preview_html);
-        if (page_params.emoji_alt_code) {
+        if (page_params.emojiset === "text") {
             $("#preview_content").find(".emoji").replaceWith(function () {
                 var text = $(this).attr("title");
                 return ":" + text + ":";

static/js/message_list_view.js

@@ -433,8 +433,8 @@ MessageListView.prototype = {
             }
 
             // Display emoji (including realm emoji) as text if
-            // page_params.emoji_alt_code is set
+            // page_params.emojiset is 'text'.
-            if (page_params.emoji_alt_code) {
+            if (page_params.emojiset === 'text') {
                 row.find(".emoji").replaceWith(function () {
                     var text = $(this).attr("title");
                     return ":" + text + ":";

static/js/reactions.js

@@ -275,8 +275,8 @@ exports.view.insert_new_reaction = function (opts) {
 
     context.count = 1;
     context.title = new_title;
-    context.emoji_alt_code = page_params.emoji_alt_code;
     context.local_id = exports.get_local_reaction_id(opts);
+    context.emoji_alt_code = (page_params.emojiset === 'text');
 
     if (opts.user_id === page_params.user_id) {
         context.class = "message_reaction reacted";
@@ -406,7 +406,7 @@ exports.get_message_reactions = function (message) {
         reaction.emoji_code = reaction.emoji_code;
         reaction.count = reaction.user_ids.length;
         reaction.title = generate_title(reaction.emoji_name, reaction.user_ids);
-        reaction.emoji_alt_code = page_params.emoji_alt_code;
+        reaction.emoji_alt_code = (page_params.emojiset === 'text');
 
         if (reaction.reaction_type !== 'unicode_emoji') {
             reaction.is_realm_emoji = true;

static/js/server_events_dispatch.js

@@ -278,7 +278,6 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
     case 'update_display_settings':
         var user_display_settings = [
             'default_language',
-            'emoji_alt_code',
             'emojiset',
             'high_contrast_mode',
             'night_mode',
@@ -310,13 +309,6 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
                 $("body").fadeIn(300);
             }, 300);
         }
-        if (event.setting_name === 'emoji_alt_code') {
-            // Rerender the whole message list UI
-            home_msg_list.rerender();
-            if (current_msg_list === message_list.narrowed) {
-                message_list.narrowed.rerender();
-            }
-        }
         if (event.setting_name === 'left_side_userlist') {
             // TODO: Make this change the view immediately rather
             // than requiring a reload or page resize.
@@ -326,6 +318,15 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
             // than requiring a reload or page resize.
         }
         if (event.setting_name === 'emojiset') {
+            if (page_params.emojiset === 'text') {
+                // destroy the spinner and display success message
+                if ($("#display-settings-status").length) {
+                    loading.destroy_indicator($("#emojiset_spinner"));
+                    $("#emojiset_select").val(page_params.emojiset);
+                    ui_report.success(i18n.t("Emojiset changed successfully!!"),
+                                      $('#display-settings-status').expectOne());
+                }
+            } else {
                 var sprite = new Image();
                 sprite.onload = function () {
                     $("#emoji-spritesheet").attr('href', "/static/generated/emoji/" + page_params.emojiset + "_sprite.css");
@@ -338,6 +339,12 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
                 };
                 sprite.src = "/static/generated/emoji/sheet_" + page_params.emojiset + "_32.png";
             }
+            // Rerender the whole message list UI
+            home_msg_list.rerender();
+            if (current_msg_list === message_list.narrowed) {
+                message_list.narrowed.rerender();
+            }
+        }
         if ($("#settings.tab-pane.active").length) {
             settings_display.update_page();
         }

static/js/settings_display.js

@@ -126,30 +126,6 @@ exports.set_up = function () {
         });
     });
 
-    $("#emoji_alt_code").change(function () {
-        var emoji_alt_code = this.checked;
-        var data = {};
-        data.emoji_alt_code = JSON.stringify(emoji_alt_code);
-        var context = {};
-        if (data.emoji_alt_code === "true") {
-            context.text_or_images = i18n.t('text');
-        } else {
-            context.text_or_images = i18n.t('images');
-        }
-
-        channel.patch({
-            url: '/json/settings/display',
-            data: data,
-            success: function () {
-                ui_report.success(i18n.t("Emoji reactions will appear as __text_or_images__!", context),
-                                  $('#display-settings-status').expectOne());
-            },
-            error: function (xhr) {
-                ui_report.error(i18n.t("Error updating emoji appearance setting"), xhr, $('#display-settings-status').expectOne());
-            },
-        });
-    });
-
     $("#twenty_four_hour_time").change(function () {
         var data = {};
         var setting_value = $("#twenty_four_hour_time").is(":checked");
@@ -213,7 +189,6 @@ exports.set_up = function () {
 function _update_page() {
     $("#twenty_four_hour_time").prop('checked', page_params.twenty_four_hour_time);
     $("#left_side_userlist").prop('checked', page_params.left_side_userlist);
-    $("#emoji_alt_code").prop('checked', page_params.emoji_alt_code);
     $("#default_language_name").text(page_params.default_language_name);
 }
 

static/styles/settings.css

@@ -786,6 +786,10 @@ input[type=checkbox].inline-block {
     min-width: initial !important;
 }
 
+.right.show .emoji_alt_code {
+    font-size: 1.2em;
+}
+
 #user-settings-avatar {
     border-radius: 5px;
     box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);

static/templates/settings/display-settings.handlebars

@@ -50,17 +50,6 @@
                 </label>
                 <label for="left_side_userlist" class="inline-block">{{t "User list on left sidebar in narrow windows" }}</label>
             </div>
-
-            <div class="input-group">
-                <label class="checkbox">
-                    <input type="checkbox" name="emoji_alt_code" id="emoji_alt_code"
-                    {{#if page_params.emoji_alt_code}}
-                      checked="checked"
-                    {{/if}} />
-                    <span></span>
-                </label>
-                <label for="emoji_alt_code" class="inline-block">{{t 'Display emoji reactions as text (:heart: instead of <img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2764.png" title=":heart:"/>)' }}</label>
-            </div>
         </div>
 
         <h3 class="light">{{t "Time settings" }}</h3>
@@ -99,12 +88,16 @@
                 {{#each page_params.emojiset_choices }}
                 <label>
                     <input type="radio" class="emojiset_choice" name="emojiset_group" value="{{@key}}" />
-                    <span>{{this}}</span>
+                    <span>{{t this }}</span>
                     <span class="right">
+                        {{#if @last}}
+                        <div class="emoji_alt_code">&nbsp:relaxed:</div>
+                        {{else}}
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f642.png" />
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f44d.png" />
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f680.png" />
                         <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f389.png" />
+                        {{/if}}
                     </span>
                 </label>
                 {{/each}}

zerver/lib/slack_data_to_zulip_data.py

@@ -121,7 +121,6 @@ def users_to_zerver_userprofile(slack_dir: str, realm_id: int, timestamp: Any,
             is_active=not user['deleted'],
             onboarding_steps="[]",
             emojiset="google",
-            emoji_alt_code=False,
             realm=realm_id,
             quota=1073741824,
             # invites_used=0,  # TODO

zerver/migrations/0130_text_choice_in_emojiset.py

@@ -0,0 +1,29 @@
+from django.db import migrations, models
+from django.db.backends.postgresql_psycopg2.schema import DatabaseSchemaEditor
+from django.db.migrations.state import StateApps
+
+# change emojiset to text if emoji_alt_code is true.
+def change_emojiset(apps: StateApps, schema_editor: DatabaseSchemaEditor) -> None:
+    UserProfile = apps.get_model("zerver", "UserProfile")
+    for user in UserProfile.objects.filter(emoji_alt_code=True):
+        user.emojiset = "text"
+        user.save(update_fields=["emojiset"])
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('zerver', '0129_remove_userprofile_autoscroll_forever'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='userprofile',
+            name='emojiset',
+            field=models.CharField(choices=[('google', 'Google'), ('apple', 'Apple'), ('twitter', 'Twitter'), ('emojione', 'EmojiOne'), ('text', 'Plain text')], default='google', max_length=20),
+        ),
+        migrations.RunPython(change_emojiset),
+        migrations.RemoveField(
+            model_name='userprofile',
+            name='emoji_alt_code',
+        ),
+    ]

zerver/models.py

@@ -37,7 +37,7 @@ from django.utils.encoding import force_text
 
 from bitfield import BitField
 from bitfield.types import BitHandler
-from collections import defaultdict
+from collections import defaultdict, OrderedDict
 from datetime import timedelta
 import pylibmc
 import re
@@ -577,7 +577,6 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     # UI vars
     enter_sends = models.NullBooleanField(default=False)  # type: Optional[bool]
     left_side_userlist = models.BooleanField(default=False)  # type: bool
-    emoji_alt_code = models.BooleanField(default=False)  # type: bool
 
     # display settings
     twenty_four_hour_time = models.BooleanField(default=False)  # type: bool
@@ -633,16 +632,17 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     EMOJIONE_EMOJISET   = u'emojione'
     GOOGLE_EMOJISET     = u'google'
     TWITTER_EMOJISET    = u'twitter'
-    EMOJISET_CHOICES    = ((APPLE_EMOJISET, "Apple"),
+    TEXT_EMOJISET       = u'text'
+    EMOJISET_CHOICES    = ((GOOGLE_EMOJISET, "Google"),
+                           (APPLE_EMOJISET, "Apple"),
+                           (TWITTER_EMOJISET, "Twitter"),
                            (EMOJIONE_EMOJISET, "EmojiOne"),
-                           (GOOGLE_EMOJISET, "Google"),
+                           (TEXT_EMOJISET, "Plain text"))
-                           (TWITTER_EMOJISET, "Twitter"))
     emojiset = models.CharField(default=GOOGLE_EMOJISET, choices=EMOJISET_CHOICES, max_length=20)  # type: Text
 
     # Define the types of the various automatically managed properties
     property_types = dict(
         default_language=Text,
-        emoji_alt_code=bool,
         emojiset=Text,
         left_side_userlist=bool,
         timezone=Text,
@@ -718,7 +718,7 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
 
     @staticmethod
     def emojiset_choices() -> Dict[Text, Text]:
-        return {emojiset[0]: force_text(emojiset[1]) for emojiset in UserProfile.EMOJISET_CHOICES}
+        return OrderedDict((emojiset[0], emojiset[1]) for emojiset in UserProfile.EMOJISET_CHOICES)
 
     @staticmethod
     def emails_from_ids(user_ids: Sequence[int]) -> Dict[int, Text]:

zerver/tests/test_home.py

@@ -57,7 +57,6 @@ class HomeTest(ZulipTestCase):
             "default_language_name",
             "development_environment",
             "email",
-            "emoji_alt_code",
             "emojiset",
             "emojiset_choices",
             "enable_desktop_notifications",

zerver/views/user_settings.py

@@ -134,7 +134,6 @@ def update_display_settings_backend(
         night_mode: Optional[bool]=REQ(validator=check_bool, default=None),
         default_language: Optional[bool]=REQ(validator=check_string, default=None),
         left_side_userlist: Optional[bool]=REQ(validator=check_bool, default=None),
-        emoji_alt_code: Optional[bool]=REQ(validator=check_bool, default=None),
         emojiset: Optional[str]=REQ(validator=check_string, default=None),
         timezone: Optional[str]=REQ(validator=check_string, default=None)) -> HttpResponse: