From 11ae867ce3b186fd9060bd97ae0d98ecd87e93f5 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Fri, 22 Dec 2023 14:35:17 +0500
Subject: [PATCH] [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
---
 .../group_profile_and_settings.test.tsx.snap  |  6 +-
 .../group_details/group_profile.tsx           | 84 +++++++++----------
 2 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile_and_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile_and_settings.test.tsx.snap
index 5baf64c7a0..43e9053c33 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile_and_settings.test.tsx.snap
+++ b/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]}
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx
index 89ff89db95..9ac54c9e76 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx
+++ b/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> {
-    render = () => {
-        const {
-            name,
-            title,
-            titleDefault,
-            customID,
-            isDisabled,
-            showAtMention,
-            onChange,
-        } = this.props;
-
-        return (
-            <div
-                className='group-profile form-horizontal'
-                id={customID}
-            >
-                <div className='group-profile-field form-group mb-0'>
-                    <label className='control-label col-sm-4'>
-                        <FormattedMessage
-                            id={title}
-                            defaultMessage={titleDefault}
+const GroupProfile = ({
+    name,
+    title,
+    titleDefault,
+    customID,
+    isDisabled,
+    showAtMention,
+    onChange,
+}: Props) => (
+    <div
+        className='group-profile form-horizontal'
+        id={customID}
+    >
+        <div className='group-profile-field form-group mb-0'>
+            <label className='control-label col-sm-4'>
+                <FormattedMessage
+                    id={title}
+                    defaultMessage={titleDefault}
+                />
+            </label>
+            <div className='col-sm-8'>
+                <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);