Display default status emoji if only message is entered

app/assets/javascripts/pages/profiles/show/index.js

@@ -3,15 +3,22 @@ import createFlash from '~/flash';
 import GfmAutoComplete from '~/gfm_auto_complete';
 import EmojiMenu from './emoji_menu';
+const defaultStatusEmoji = 'speech_balloon';
+
 document.addEventListener('DOMContentLoaded', () => {
   const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu';
   const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector);
   const statusEmojiField = document.getElementById('js-status-emoji-field');
   const statusMessageField = document.getElementById('js-status-message-field');
-  const findNoEmojiPlaceholder = () => document.getElementById('js-no-emoji-placeholder');
+  const toggleNoEmojiPlaceholder = (isVisible) => {
+    const placeholderElement = document.getElementById('js-no-emoji-placeholder');
+    placeholderElement.classList.toggle('hidden', !isVisible);
+  };
+
+  const findStatusEmoji = () => toggleEmojiMenuButton.querySelector('gl-emoji');
   const removeStatusEmoji = () => {
-    const statusEmoji = toggleEmojiMenuButton.querySelector('gl-emoji');
+    const statusEmoji = findStatusEmoji();
     if (statusEmoji) {
       statusEmoji.remove();
     }
@@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const selectEmojiCallback = (emoji, emojiTag) => {
     statusEmojiField.value = emoji;
-    findNoEmojiPlaceholder().classList.add('hidden');
+    toggleNoEmojiPlaceholder(false);
     removeStatusEmoji();
     toggleEmojiMenuButton.innerHTML += emojiTag;
   };
@@ -29,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
     statusEmojiField.value = '';
     statusMessageField.value = '';
     removeStatusEmoji();
-    findNoEmojiPlaceholder().classList.remove('hidden');
+    toggleNoEmojiPlaceholder(true);
   });
   const emojiAutocomplete = new GfmAutoComplete();
@@ -44,6 +51,23 @@ document.addEventListener('DOMContentLoaded', () => {
         selectEmojiCallback,
       );
       emojiMenu.bindEvents();
+
+      const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
+      statusMessageField.addEventListener('input', () => {
+        const hasStatusMessage = statusMessageField.value.trim() !== '';
+        const statusEmoji = findStatusEmoji();
+        if (hasStatusMessage && statusEmoji) {
+          return;
+        }
+
+        if (hasStatusMessage) {
+          toggleNoEmojiPlaceholder(false);
+          toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
+        } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
+          toggleNoEmojiPlaceholder(true);
+          removeStatusEmoji();
+        }
+      });
     })
     .catch(() => createFlash('Failed to load emoji list!'));
 });

changelogs/unreleased/winh-default-status-emoji.yml

+---
+title: Display default status emoji if only message is entered
+merge_request: 21330
+author:
+type: changed

spec/features/profiles/user_edit_profile_spec.rb

@@ -130,5 +130,15 @@ describe 'User edit profile' do
       visit user_path(user)
       expect(page).not_to have_selector '.cover-status'
     end
+
+    it 'displays a default emoji if only message is entered' do
+      message = 'a status without emoji'
+      visit(profile_path)
+      fill_in 'js-status-message-field', with: message
+
+      within('.js-toggle-emoji-menu') do
+        expect(page).to have_emoji('speech_balloon')
+      end
+    end
   end
 end