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 ()?

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;

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"

webapp/channels/src/components/threading/common/button/button.tsx

@@ -18,18 +18,22 @@ type Props = {
 
 type Attrs = Exclude<ButtonHTMLAttributes<HTMLButtonElement>, Props>
 
-function Button({
+const Button = React.forwardRef<HTMLButtonElement, Props & Attrs>((
-    prepend,
+    {
-    append,
+        prepend,
-    children,
+        append,
-    isActive,
+        children,
-    hasDot,
+        isActive,
-    marginTop,
+        hasDot,
-    allowTextOverflow = false,
+        marginTop,
-    ...attrs
+        allowTextOverflow = false,
-}: Props & Attrs) {
+        ...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);

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)>
 `;