[MM-60068] Convert ./components/emoji/emoji_page.tsx from Class Component to Function Component (#27915)

* fix: convert component to function component

* add test for 'emoji_page'

* fix: moved lists outside the component and updated dependencies in useEffect

* fix: fix lint for 'emoji_page' test file

webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmojiPage should render without crashing 1`] = `
+<div
+  className="backstage-content emoji-list"
+>
+  <div
+    className="backstage-header"
+  >
+    <h1>
+      <MemoizedFormattedMessage
+        defaultMessage="Custom Emoji"
+        id="emoji_list.header"
+      />
+    </h1>
+    <Memo(AnyTeamPermissionGate)
+      permissions={
+        Array [
+          "create_emojis",
+        ]
+      }
+    >
+      <Link
+        className="add-link"
+        to="/team/emoji/add"
+      >
+        <button
+          className="btn btn-primary"
+          type="button"
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="Add Custom Emoji"
+            id="emoji_list.add"
+          />
+        </button>
+      </Link>
+    </Memo(AnyTeamPermissionGate)>
+  </div>
+  <Connect(injectIntl(EmojiList))
+    scrollToTop={[MockFunction]}
+  />
+</div>
+`;

webapp/channels/src/components/emoji/emoji_page.test.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ShallowWrapper} from 'enzyme';
+import {shallow} from 'enzyme';
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
+
+import AnyTeamPermissionGate from 'components/permissions_gates/any_team_permission_gate';
+
+import EmojiList from './emoji_list';
+import EmojiPage from './emoji_page';
+
+jest.mock('utils/utils', () => ({
+    localizeMessage: jest.fn().mockReturnValue('Custom Emoji'),
+    resetTheme: jest.fn(),
+    applyTheme: jest.fn(),
+}));
+
+describe('EmojiPage', () => {
+    const mockLoadRolesIfNeeded = jest.fn();
+    const mockScrollToTop = jest.fn();
+    const mockCurrentTheme = {} as Theme;
+
+    const defaultProps = {
+        teamName: 'team',
+        teamDisplayName: 'Team Display Name',
+        siteName: 'Site Name',
+        scrollToTop: mockScrollToTop,
+        currentTheme: mockCurrentTheme,
+        actions: {
+            loadRolesIfNeeded: mockLoadRolesIfNeeded,
+        },
+    };
+
+    it('should render without crashing', () => {
+        const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render the emoji list and the add button with permission', () => {
+        const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper.find(EmojiList).exists()).toBe(true);
+        expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
+        expect(wrapper.find(Link).prop('to')).toBe('/team/emoji/add');
+    });
+
+    it('should not render the add button if permission is not granted', () => {
+        const wrapper: ShallowWrapper = shallow(
+            <EmojiPage {...defaultProps}/>,
+        ).setProps({teamName: '', actions: {loadRolesIfNeeded: mockLoadRolesIfNeeded}});
+        expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
+        expect(wrapper.find(Link).exists()).toBe(true); // Update this to match your permission setup
+    });
+
+    it('should render EmojiList component', () => {
+        const wrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper.find(EmojiList).exists()).toBe(true);
+    });
+});

webapp/channels/src/components/emoji/emoji_page.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import Permissions from 'mattermost-redux/constants/permissions';
@@ -25,34 +25,37 @@ type Props = {
     };
 }
 
-export default class EmojiPage extends React.PureComponent<Props> {
+const CREATE_EMOJIS_PERMISSIONS = [Permissions.CREATE_EMOJIS];
-    static defaultProps = {
+const ROLES = ['system_admin', 'team_admin', 'system_user', 'team_user'];
-        teamName: '',
-        teamDisplayName: '',
-        siteName: '',
-    };
 
-    componentDidMount() {
+export default function EmojiPage({
-        this.updateTitle();
+    teamDisplayName = '',
-        this.props.actions.loadRolesIfNeeded(['system_admin', 'team_admin', 'system_user', 'team_user']);
+    teamName = '',
+    siteName = '',
+    scrollToTop,
+    currentTheme,
+    actions,
+}: Props) {
+    const intl = useIntl();
+
+    useEffect(() => {
+        updateTitle();
+        actions.loadRolesIfNeeded(ROLES);
         Utils.resetTheme();
-    }
 
-    componentWillUnmount() {
+        return () => {
-        Utils.applyTheme(this.props.currentTheme);
+            Utils.applyTheme(currentTheme);
-    }
+        };
+    }, []);
 
-    updateTitle = () => {
+    useEffect(() => {
-        document.title = Utils.localizeMessage('custom_emoji.header', 'Custom Emoji') + ' - ' + this.props.teamDisplayName + ' ' + this.props.siteName;
+        updateTitle();
+    }, [siteName]);
+
+    const updateTitle = () => {
+        document.title = intl.formatMessage({id: 'custom_emoji.header', defaultMessage: 'Custom Emoji'}) + ' - ' + teamDisplayName + ' ' + siteName;
     };
 
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.siteName !== prevProps.siteName) {
-            this.updateTitle();
-        }
-    }
-
-    render() {
     return (
         <div className='backstage-content emoji-list'>
             <div className='backstage-header'>
@@ -62,10 +65,10 @@ export default class EmojiPage extends React.PureComponent<Props> {
                         defaultMessage='Custom Emoji'
                     />
                 </h1>
-                    <AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
+                <AnyTeamPermissionGate permissions={CREATE_EMOJIS_PERMISSIONS}>
                     <Link
                         className='add-link'
-                            to={'/' + this.props.teamName + '/emoji/add'}
+                        to={'/' + teamName + '/emoji/add'}
                     >
                         <button
                             type='button'
@@ -79,8 +82,7 @@ export default class EmojiPage extends React.PureComponent<Props> {
                     </Link>
                 </AnyTeamPermissionGate>
             </div>
-                <EmojiList scrollToTop={this.props.scrollToTop}/>
+            <EmojiList scrollToTop={scrollToTop}/>
         </div>
     );
-    }
 }