From c03f339ecac754a634c68573299af8745aa07a54 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Thu, 27 Mar 2025 11:37:30 -0400
Subject: [PATCH] MM-58521 Hide emoji categories while searching emoji picker
 (#30562)

* hide categories while searching

* add tests and update snapshots

* fix height changes on emoji picker

* fixed off-centered empty state

* fix linter issues in css

* Update webapp/channels/src/components/emoji_picker/constants/index.ts

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
---
 .../__snapshots__/emoji_picker.test.tsx.snap  |  1 +
 .../components/emoji_picker_categories.tsx    |  1 +
 .../emoji_picker_current_results.tsx          |  4 +--
 .../emoji_picker/constants/index.ts           |  1 +
 .../emoji_picker/emoji_picker.test.tsx        | 26 +++++++++++++++
 .../components/emoji_picker/emoji_picker.tsx  | 33 ++++++++++++-------
 .../src/sass/components/_emoticons.scss       |  7 ++++
 7 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
index 1e0d58fb9d..f0809400ee 100644
--- a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
+++ b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
     </div>
     <div
       class="emoji-picker__categories"
+      data-testid="emojiPickerCategories"
       id="emojiPickerCategories"
     >
       <button
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_categories.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_categories.tsx
index cba27aa107..687945f1b3 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_categories.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_categories.tsx
@@ -70,6 +70,7 @@ function EmojiPickerCategories({
             id='emojiPickerCategories'
             className='emoji-picker__categories'
             onKeyDown={handleKeyDown}
+            data-testid='emojiPickerCategories'
         >
             {categoryNames.map((categoryName) => {
                 const category = categories[categoryName];
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx
index 5a52e1483b..7d40d829de 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx
@@ -13,7 +13,7 @@ import type {Emoji, EmojiCategory, CustomEmoji, SystemEmoji} from '@mattermost/t
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import EmojiPickerCategoryOrEmojiRow from 'components/emoji_picker/components/emoji_picker_category_or_emoji_row';
-import {ITEM_HEIGHT, EMOJI_ROWS_OVERSCAN_COUNT, EMOJI_CONTAINER_HEIGHT, CUSTOM_EMOJIS_PER_PAGE, EMOJI_SCROLL_THROTTLE_DELAY} from 'components/emoji_picker/constants';
+import {ITEM_HEIGHT, EMOJI_ROWS_OVERSCAN_COUNT, EMOJI_CONTAINER_HEIGHT, CUSTOM_EMOJIS_PER_PAGE, EMOJI_SCROLL_THROTTLE_DELAY, CATEGORIES_CONTAINER_HEIGHT} from 'components/emoji_picker/constants';
 import type {CategoryOrEmojiRow, EmojiCursor} from 'components/emoji_picker/types';
 import {isCategoryHeaderRow} from 'components/emoji_picker/utils';
 
@@ -89,7 +89,7 @@ const EmojiPickerCurrentResults = forwardRef<InfiniteLoader, Props>(({categoryOr
     return (
         <div
             className='emoji-picker__items'
-            style={{height: EMOJI_CONTAINER_HEIGHT}}
+            style={{height: isFiltering ? EMOJI_CONTAINER_HEIGHT + CATEGORIES_CONTAINER_HEIGHT : EMOJI_CONTAINER_HEIGHT}}
         >
             <div
                 className='emoji-picker__container'
diff --git a/webapp/channels/src/components/emoji_picker/constants/index.ts b/webapp/channels/src/components/emoji_picker/constants/index.ts
index 0f9a200729..3b94d6eb6d 100644
--- a/webapp/channels/src/components/emoji_picker/constants/index.ts
+++ b/webapp/channels/src/components/emoji_picker/constants/index.ts
@@ -128,6 +128,7 @@ export const CATEGORIES: Categories = Emoji.CategoryNames.
 export const EMOJI_PER_ROW = 9; // needs to match variable `$emoji-per-row` in _variables.scss
 export const ITEM_HEIGHT = 36; //as per .emoji-picker__item height in _emoticons.scss
 export const EMOJI_CONTAINER_HEIGHT = 290; // If this changes, the spaceRequiredAbove and spaceRequiredBelow props passed to the EmojiPickerOverlay must be updated
+export const CATEGORIES_CONTAINER_HEIGHT = 36; // height of categories container (28px) + margin (8px)
 
 export const CATEGORY_HEADER_ROW = 'categoryHeaderRow';
 export const EMOJIS_ROW = 'emojisRow';
diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
index 835a20a002..eb3c6fcc9c 100644
--- a/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
+++ b/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
@@ -79,4 +79,30 @@ describe('components/emoji_picker/EmojiPicker', () => {
 
         expect(screen.queryByText('Preview for wave emoji')).not.toBeNull();
     });
+
+    test('Categories should be hidden when filter has text', () => {
+        const props = {
+            ...baseProps,
+            filter: 'smile',
+        };
+
+        renderWithContext(
+            <EmojiPicker {...props}/>,
+        );
+
+        expect(screen.queryByTestId('emojiPickerCategories')).toBeNull();
+    });
+
+    test('Categories should be visible when filter is empty', () => {
+        const props = {
+            ...baseProps,
+            filter: '',
+        };
+
+        renderWithContext(
+            <EmojiPicker {...props}/>,
+        );
+
+        expect(screen.queryByTestId('emojiPickerCategories')).not.toBeNull();
+    });
 });
diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
index bdec803295..8b8f8ce33c 100644
--- a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
+++ b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
@@ -25,6 +25,8 @@ import {
     SEARCH_RESULTS,
     EMOJI_PER_ROW,
     CUSTOM_EMOJI_SEARCH_THROTTLE_TIME_MS,
+    EMOJI_CONTAINER_HEIGHT,
+    CATEGORIES_CONTAINER_HEIGHT,
 } from 'components/emoji_picker/constants';
 import {NavigationDirection} from 'components/emoji_picker/types';
 import type {CategoryOrEmojiRow, Categories, EmojiCursor, EmojiPosition, EmojiRow} from 'components/emoji_picker/types';
@@ -409,19 +411,26 @@ const EmojiPicker = ({
                     onSkinSelected={setUserSkinTone}
                 />
             </div>
-            <EmojiPickerCategories
-                isFiltering={filter.length > 0}
-                active={activeCategory}
-                categories={categories}
-                onClick={handleCategoryClick}
-                onKeyDown={handleKeyboardEmojiNavigation}
-                focusOnSearchInput={focusOnSearchInput}
-            />
-            {areSearchResultsEmpty ? (
-                <NoResultsIndicator
-                    variant={NoResultsVariant.Search}
-                    titleValues={{channelName: `${filter}`}}
+            {filter.length === 0 && (
+                <EmojiPickerCategories
+                    isFiltering={filter.length > 0}
+                    active={activeCategory}
+                    categories={categories}
+                    onClick={handleCategoryClick}
+                    onKeyDown={handleKeyboardEmojiNavigation}
+                    focusOnSearchInput={focusOnSearchInput}
                 />
+            )}
+            {areSearchResultsEmpty ? (
+                <div
+                    className='emoji-picker__items'
+                    style={{height: EMOJI_CONTAINER_HEIGHT + CATEGORIES_CONTAINER_HEIGHT}}
+                >
+                    <NoResultsIndicator
+                        variant={NoResultsVariant.Search}
+                        titleValues={{channelName: `${filter}`}}
+                    />
+                </div>
             ) : (
                 <EmojiPickerCurrentResults
                     ref={infiniteLoaderRef}
diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss
index 149a760f53..6a0b37f9f7 100644
--- a/webapp/channels/src/sass/components/_emoticons.scss
+++ b/webapp/channels/src/sass/components/_emoticons.scss
@@ -485,6 +485,13 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
     overflow-x: hidden;
     overflow-y: auto;
 
+    &:has(.no-results__wrapper) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
+
     &.gif-picker__items {
         display: flex;
         height: 380px;