[MM-56294] Convert ./components/admin_console/group_settings/group_details/group_profile.tsx from Class Component to Function Component (#25766)

* [MM-56294] Convert `./components/admin_console/group_settings/group_details/group_profile.tsx` from Class Component to Function Component

* refactor: update snapshots

webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile_and_settings.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
   titleDefault="Group Profile"
   titleId="admin.group_settings.group_detail.groupProfileTitle"
 >
-  <GroupProfile
+  <Memo(GroupProfile)
     customID="groupDisplayName"
     isDisabled={true}
     name="GroupProfileAndSettings"
@@ -49,7 +49,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
   titleDefault="Group Profile"
   titleId="admin.group_settings.group_detail.groupProfileTitle"
 >
-  <GroupProfile
+  <Memo(GroupProfile)
     customID="groupDisplayName"
     isDisabled={true}
     name="GroupProfileAndSettings"
@@ -77,7 +77,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfileAndSe
       />
     </div>
   </div>
-  <GroupProfile
+  <Memo(GroupProfile)
     customID="groupMention"
     name="GroupProfileAndSettings"
     onChange={[MockFunction]}

webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import MentionsIcon from 'components/widgets/icons/mentions_icon';
@@ -16,49 +16,45 @@ type Props = {
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
-export default class GroupProfile extends React.PureComponent<Props> {
+const GroupProfile = ({
-    render = () => {
+    name,
-        const {
+    title,
-            name,
+    titleDefault,
-            title,
+    customID,
-            titleDefault,
+    isDisabled,
-            customID,
+    showAtMention,
-            isDisabled,
+    onChange,
-            showAtMention,
+}: Props) => (
-            onChange,
+    <div
-        } = this.props;
+        className='group-profile form-horizontal'
-
+        id={customID}
-        return (
+    >
-            <div
+        <div className='group-profile-field form-group mb-0'>
-                className='group-profile form-horizontal'
+            <label className='control-label col-sm-4'>
-                id={customID}
+                <FormattedMessage
-            >
+                    id={title}
-                <div className='group-profile-field form-group mb-0'>
+                    defaultMessage={titleDefault}
-                    <label className='control-label col-sm-4'>
+                />
-                        <FormattedMessage
+            </label>
-                            id={title}
+            <div className='col-sm-8'>
-                            defaultMessage={titleDefault}
+                <div className='icon-over-input'>
+                    {showAtMention && (
+                        <MentionsIcon
+                            className='icon icon__mentions'
+                            aria-hidden='true'
                         />
-                    </label>
+                    )}
-                    <div className='col-sm-8'>
-                        <div className='icon-over-input'>
-                            {showAtMention && (
-                                <MentionsIcon
-                                    className='icon icon__mentions'
-                                    aria-hidden='true'
-                                />
-                            )}
-                        </div>
-                        <input
-                            type='text'
-                            className='form-control group-at-mention-input'
-                            value={name}
-                            disabled={isDisabled}
-                            onChange={onChange}
-                        />
-                    </div>
                 </div>
+                <input
+                    type='text'
+                    className='form-control group-at-mention-input'
+                    value={name}
+                    disabled={isDisabled}
+                    onChange={onChange}
+                />
             </div>
-        );
+        </div>
-    };
+    </div>
-}
+);
+
+export default memo(GroupProfile);