From 8b164711a4dde8b8d42cb7b1f800640b04c8b229 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Fri, 14 Feb 2025 16:21:52 -0500
Subject: [PATCH] MM-63138 Fix some console warnings (#30209)

* Fix forwardRef propTypes console error

The console error that was fixed by this is:
"Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?"

* Fix function component ref console error

This fixes the following error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React. forwardRef ()?
---
 .../new_search/search_box_input.tsx           |  6 ++---
 .../__snapshots__/thread_footer.test.tsx.snap | 20 +++++++-------
 .../threading/common/button/button.tsx        | 27 +++++++++++--------
 .../__snapshots__/follow_button.test.tsx.snap |  8 +++---
 4 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/new_search/search_box_input.tsx b/webapp/channels/src/components/new_search/search_box_input.tsx
index 1b0faa6900..92347e5b93 100644
--- a/webapp/channels/src/components/new_search/search_box_input.tsx
+++ b/webapp/channels/src/components/new_search/search_box_input.tsx
@@ -75,7 +75,7 @@ type Props = {
     focus: (newPosition: number) => void;
 }
 
-const SearchInput = ({searchTerms, searchType, setSearchTerms, onKeyDown, focus}: Props, inputRef: React.Ref<HTMLInputElement>) => {
+const SearchInput = forwardRef<HTMLInputElement, Props>(({searchTerms, searchType, setSearchTerms, onKeyDown, focus}, inputRef) => {
     const intl = useIntl();
     let searchPlaceholder = intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'});
 
@@ -131,6 +131,6 @@ const SearchInput = ({searchTerms, searchType, setSearchTerms, onKeyDown, focus}
             )}
         </SearchInputContainer>
     );
-};
+});
 
-export default forwardRef<HTMLInputElement, Props>(SearchInput);
+export default SearchInput;
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index f5a967e52f..a92d4fec15 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`components/threading/channel_threads/thread_footer should match snapsho
       isFollowing={true}
       onClick={[Function]}
     >
-      <Memo(Button)
+      <Button
         className="separated FollowButton"
         disabled={false}
         isActive={true}
@@ -32,7 +32,7 @@ exports[`components/threading/channel_threads/thread_footer should match snapsho
             Following
           </span>
         </button>
-      </Memo(Button)>
+      </Button>
     </Memo(FollowButton)>
   </div>
 </Memo(ThreadFooter)>
@@ -317,7 +317,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
         </WithTooltip>
       </div>
     </Memo(Avatars)>
-    <Memo(Button)
+    <Button
       className="ReplyButton separated"
       onClick={[Function]}
       prepend={
@@ -363,13 +363,13 @@ exports[`components/threading/channel_threads/thread_footer should report total
           </FormattedMessage>
         </span>
       </button>
-    </Memo(Button)>
+    </Button>
     <Memo(FollowButton)
       className="separated"
       isFollowing={true}
       onClick={[Function]}
     >
-      <Memo(Button)
+      <Button
         className="separated FollowButton"
         disabled={false}
         isActive={true}
@@ -386,7 +386,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
             Following
           </span>
         </button>
-      </Memo(Button)>
+      </Button>
     </Memo(FollowButton)>
     <Connect(injectIntl(Timestamp))
       day="numeric"
@@ -828,7 +828,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
         </WithTooltip>
       </div>
     </Memo(Avatars)>
-    <Memo(Button)
+    <Button
       className="ReplyButton separated"
       onClick={[Function]}
       prepend={
@@ -874,13 +874,13 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
           </FormattedMessage>
         </span>
       </button>
-    </Memo(Button)>
+    </Button>
     <Memo(FollowButton)
       className="separated"
       isFollowing={true}
       onClick={[Function]}
     >
-      <Memo(Button)
+      <Button
         className="separated FollowButton"
         disabled={false}
         isActive={true}
@@ -897,7 +897,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
             Following
           </span>
         </button>
-      </Memo(Button)>
+      </Button>
     </Memo(FollowButton)>
     <Connect(injectIntl(Timestamp))
       day="numeric"
diff --git a/webapp/channels/src/components/threading/common/button/button.tsx b/webapp/channels/src/components/threading/common/button/button.tsx
index e59ed6c90f..a21c8c1c43 100644
--- a/webapp/channels/src/components/threading/common/button/button.tsx
+++ b/webapp/channels/src/components/threading/common/button/button.tsx
@@ -18,18 +18,22 @@ type Props = {
 
 type Attrs = Exclude<ButtonHTMLAttributes<HTMLButtonElement>, Props>
 
-function Button({
-    prepend,
-    append,
-    children,
-    isActive,
-    hasDot,
-    marginTop,
-    allowTextOverflow = false,
-    ...attrs
-}: Props & Attrs) {
+const Button = React.forwardRef<HTMLButtonElement, Props & Attrs>((
+    {
+        prepend,
+        append,
+        children,
+        isActive,
+        hasDot,
+        marginTop,
+        allowTextOverflow = false,
+        ...attrs
+    },
+    ref,
+) => {
     return (
         <button
+            ref={ref}
             {...attrs}
             className={classNames('Button Button___transparent', {'is-active': isActive, allowTextOverflow}, attrs.className)}
         >
@@ -49,6 +53,7 @@ function Button({
             )}
         </button>
     );
-}
+});
+Button.displayName = 'Button';
 
 export default memo(Button);
diff --git a/webapp/channels/src/components/threading/common/follow_button/__snapshots__/follow_button.test.tsx.snap b/webapp/channels/src/components/threading/common/follow_button/__snapshots__/follow_button.test.tsx.snap
index 94aeeeb4a8..0b069e27e9 100644
--- a/webapp/channels/src/components/threading/common/follow_button/__snapshots__/follow_button.test.tsx.snap
+++ b/webapp/channels/src/components/threading/common/follow_button/__snapshots__/follow_button.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`components/threading/common/follow_button should say follow 1`] = `
   isFollowing={false}
   onClick={[MockFunction]}
 >
-  <Memo(Button)
+  <Button
     className="FollowButton"
     disabled={false}
     isActive={false}
@@ -22,7 +22,7 @@ exports[`components/threading/common/follow_button should say follow 1`] = `
         Follow
       </span>
     </button>
-  </Memo(Button)>
+  </Button>
 </Memo(FollowButton)>
 `;
 
@@ -30,7 +30,7 @@ exports[`components/threading/common/follow_button should say following 1`] = `
 <Memo(FollowButton)
   isFollowing={true}
 >
-  <Memo(Button)
+  <Button
     className="FollowButton"
     disabled={false}
     isActive={true}
@@ -45,6 +45,6 @@ exports[`components/threading/common/follow_button should say following 1`] = `
         Following
       </span>
     </button>
-  </Memo(Button)>
+  </Button>
 </Memo(FollowButton)>
 `;