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>

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

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];

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'

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';

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();
+    });
 });

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
+            {filter.length === 0 && (
-                isFiltering={filter.length > 0}
+                <EmojiPickerCategories
-                active={activeCategory}
+                    isFiltering={filter.length > 0}
-                categories={categories}
+                    active={activeCategory}
-                onClick={handleCategoryClick}
+                    categories={categories}
-                onKeyDown={handleKeyboardEmojiNavigation}
+                    onClick={handleCategoryClick}
-                focusOnSearchInput={focusOnSearchInput}
+                    onKeyDown={handleKeyboardEmojiNavigation}
-            />
+                    focusOnSearchInput={focusOnSearchInput}
-            {areSearchResultsEmpty ? (
-                <NoResultsIndicator
-                    variant={NoResultsVariant.Search}
-                    titleValues={{channelName: `${filter}`}}
                 />
+            )}
+            {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}

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;