From 1a12faaaaeca21162e85186dfb38d08fce16c6c0 Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Mon, 16 Oct 2023 20:30:06 +0500
Subject: [PATCH] GH-24784 Convert
 ./components/common/site_name_and_description.tsx to Function Component
 (#24809)

* fix: convert ./components/common/site_name_and_description.tsx to function component

* update: code style changes

* fix: refactor code

* fix: update failing snapshots

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../common/site_name_and_description.tsx      | 58 +++++++------------
 .../__snapshots__/create_team.test.tsx.snap   |  2 +-
 .../__snapshots__/select_team.test.tsx.snap   | 14 ++---
 3 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/webapp/channels/src/components/common/site_name_and_description.tsx b/webapp/channels/src/components/common/site_name_and_description.tsx
index 5f08f02065..05c9a83bbd 100644
--- a/webapp/channels/src/components/common/site_name_and_description.tsx
+++ b/webapp/channels/src/components/common/site_name_and_description.tsx
@@ -6,41 +6,27 @@ import {FormattedMessage} from 'react-intl';
 
 type Props = {
     customDescriptionText?: string;
-    siteName: string;
-}
+    siteName: string | undefined;
+};
+const SiteNameAndDescription = ({customDescriptionText, siteName = 'Mattermost'}: Props) => {
+    const description = customDescriptionText || (
+        <FormattedMessage
+            id='web.root.signup_info'
+            defaultMessage='All team communication in one place, searchable and accessible anywhere'
+        />
+    );
 
-export default class SiteNameAndDescription extends React.PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        siteName: 'Mattermost',
-    };
+    return (
+        <>
+            <h1 id='site_name'>{siteName}</h1>
+            <h3
+                id='site_description'
+                className='color--light'
+            >
+                {description}
+            </h3>
+        </>
+    );
+};
 
-    public render(): JSX.Element {
-        const {
-            customDescriptionText,
-            siteName,
-        } = this.props;
-        let description = null;
-        if (customDescriptionText) {
-            description = customDescriptionText;
-        } else {
-            description = (
-                <FormattedMessage
-                    id='web.root.signup_info'
-                    defaultMessage='All team communication in one place, searchable and accessible anywhere'
-                />
-            );
-        }
-
-        return (
-            <React.Fragment>
-                <h1 id='site_name'>{siteName}</h1>
-                <h3
-                    id='site_description'
-                    className='color--light'
-                >
-                    {description}
-                </h3>
-            </React.Fragment>
-        );
-    }
-}
+export default React.memo(SiteNameAndDescription);
diff --git a/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap b/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
index 0ff60d22c7..4828af644d 100644
--- a/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
+++ b/webapp/channels/src/components/create_team/__snapshots__/create_team.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`component/create_team should match snapshot default 1`] = `
     <div
       className="signup-team__container"
     >
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         customDescriptionText=""
         siteName=""
       />
diff --git a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
index 71819747a2..bc603267a9 100644
--- a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
+++ b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -129,7 +129,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on create team
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -214,7 +214,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -302,7 +302,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <LoadingScreen />
@@ -378,7 +378,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -511,7 +511,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div
@@ -602,7 +602,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         className="signup-team-logo"
         src={null}
       />
-      <SiteNameAndDescription
+      <Memo(SiteNameAndDescription)
         siteName="Mattermost"
       />
       <div