From dd5d20314a45d7bbe344fb40f90dfd54cbc957b5 Mon Sep 17 00:00:00 2001
From: Taylor Smock <tsmock@meta.com>
Date: Thu, 13 Apr 2023 06:34:48 -0600
Subject: [PATCH] Fix forwardRef warnings

* `Sign Up` button
* comment boxes
* actionsForm.js (mostly buttons)

Signed-off-by: Taylor Smock <tsmock@meta.com>
---
 .../src/components/comments/commentInput.js   | 38 +++++++++----------
 frontend/src/components/deleteModal/index.js  |  4 +-
 frontend/src/components/header/index.js       | 23 +++++++----
 .../src/components/projectEdit/actionsForm.js | 28 ++++++++------
 4 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/comments/commentInput.js b/frontend/src/components/comments/commentInput.js
index 839ba179f2..fbff6ac44c 100644
--- a/frontend/src/components/comments/commentInput.js
+++ b/frontend/src/components/comments/commentInput.js
@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import MDEditor from '@uiw/react-md-editor';
 import Tribute from 'tributejs';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useDropzone } from 'react-dropzone';
 
 import 'tributejs/tribute.css';
@@ -109,26 +109,22 @@ export const CommentInputField = ({
         </div>
       )}
       <div className={`${isShowPreview ? 'dn' : ''} bg-white`} data-color-mode="light">
-        <FormattedMessage {...placeholderMsg}>
-          {(val) => (
-            <MDEditor
-              ref={textareaRef}
-              preview="edit"
-              commands={Object.keys(iconConfig).map((key) => iconConfig[key])}
-              extraCommands={[]}
-              height={200}
-              value={comment}
-              onChange={setComment}
-              textareaProps={{
-                ...getInputProps(),
-                spellCheck: 'true',
-                placeholder: val,
-                ...markdownTextareaProps,
-              }}
-              defaultTabEnable
-            />
-          )}
-        </FormattedMessage>
+        <MDEditor
+          ref={textareaRef}
+          preview="edit"
+          commands={Object.keys(iconConfig).map((key) => iconConfig[key])}
+          extraCommands={[]}
+          height={200}
+          value={comment}
+          onChange={setComment}
+          textareaProps={{
+            ...getInputProps(),
+            spellCheck: 'true',
+            placeholder: useIntl().formatMessage(placeholderMsg),
+            ...markdownTextareaProps,
+          }}
+          defaultTabEnable
+        />
         <input
           type="file"
           id="image_picker"
diff --git a/frontend/src/components/deleteModal/index.js b/frontend/src/components/deleteModal/index.js
index 403a30a763..7bc6ac3d4a 100644
--- a/frontend/src/components/deleteModal/index.js
+++ b/frontend/src/components/deleteModal/index.js
@@ -10,6 +10,8 @@ import { DeleteButton } from '../teamsAndOrgs/management';
 import { Button } from '../button';
 import { AlertIcon } from '../svgIcons';
 
+const DeleteTrigger = React.forwardRef((props, ref) => <DeleteButton {...props} />);
+
 export function DeleteModal({ id, name, type, className }: Object) {
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
@@ -35,7 +37,7 @@ export function DeleteModal({ id, name, type, className }: Object) {
 
   return (
     <Popup
-      trigger={<DeleteButton className={`${className || ''} dib ml3`} />}
+      trigger={<DeleteTrigger className={`${className || ''} dib ml3`} />}
       modal
       closeOnDocumentClick
       onClose={() => {
diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
index 65ab1872f5..57a4400cdc 100644
--- a/frontend/src/components/header/index.js
+++ b/frontend/src/components/header/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useRef } from 'react';
+import React, { Fragment, useRef, forwardRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import Popup from 'reactjs-popup';
@@ -208,6 +208,19 @@ const UserDisplay = ({ username }) => {
   );
 };
 
+const SignupTrigger = forwardRef((props, ref) => {
+  const { signUpStyle, alternativeSignUpText, ...remainingProps } = props;
+  return (
+    <Button className={signUpStyle} {...remainingProps}>
+      {alternativeSignUpText ? (
+        <FormattedMessage {...messages.createAccount} />
+      ) : (
+        <FormattedMessage {...messages.signUp} />
+      )}
+    </Button>
+  );
+});
+
 export const AuthButtons = ({
   logInStyle,
   signUpStyle,
@@ -227,13 +240,7 @@ export const AuthButtons = ({
       </Button>
       <Popup
         trigger={
-          <Button className={signUpStyle}>
-            {alternativeSignUpText ? (
-              <FormattedMessage {...messages.createAccount} />
-            ) : (
-              <FormattedMessage {...messages.signUp} />
-            )}
-          </Button>
+          <SignupTrigger signUpStyle={signUpStyle} alternativeSignUpText={alternativeSignUpText} />
         }
         modal
         closeOnDocumentClick
diff --git a/frontend/src/components/projectEdit/actionsForm.js b/frontend/src/components/projectEdit/actionsForm.js
index 4f5dd745e1..7eb1d44934 100644
--- a/frontend/src/components/projectEdit/actionsForm.js
+++ b/frontend/src/components/projectEdit/actionsForm.js
@@ -491,6 +491,10 @@ const TransferProject = ({ projectId, orgId }: Object) => {
   );
 };
 
+const FormattedButtonTrigger = React.forwardRef((props, ref) => (
+  <Button {...props}>{props.children}</Button>
+));
+
 export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
   const navigate = useNavigate();
 
@@ -502,9 +506,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </label>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.messageContributors} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick
@@ -528,9 +532,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </p>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.mapAll} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick
@@ -539,9 +543,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </Popup>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.invalidateAll} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick
@@ -550,9 +554,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </Popup>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.validateAllTasks} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick
@@ -576,9 +580,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </p>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.resetAllButton} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick
@@ -587,9 +591,9 @@ export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
         </Popup>
         <Popup
           trigger={
-            <Button className={styleClasses.actionClass}>
+            <FormattedButtonTrigger className={styleClasses.actionClass}>
               <FormattedMessage {...messages.resetBadImageryButton} />
-            </Button>
+            </FormattedButtonTrigger>
           }
           modal
           closeOnDocumentClick