Tidying up dialog calls for bio with correct autofocus

- Removed only showing bio in modal, now showing both always
- Changed how the modal is called with parameters to focus on bio if clicked

refs https://github.com/TryGhost/Team/issues/1716

apps/comments-ui/src/components/Form.js

@@ -302,26 +302,13 @@ const Form = (props) => {
         editor.commands.focus();
     };
 
-    const handleAddBoth = (event) => {
+    const handleShowDialog = (event, options) => {
         event.preventDefault();
         setPreventClosing(true);
 
         dispatchAction('openPopup', {
             type: 'addDetailsDialog',
-            callback: () => {
-                editor?.commands.focus();
-                setPreventClosing(false);
-            }
-        });
-    };
-
-    const handleAddBio = (event) => {
-        event.preventDefault();
-        setPreventClosing(true);
-
-        dispatchAction('openPopup', {
-            type: 'addDetailsDialog',
-            bioOnly: true,
+            bioAutofocus: options.bioAutofocus ?? false,
             callback: () => {
                 editor?.commands.focus();
                 setPreventClosing(false);
@@ -422,9 +409,21 @@ const Form = (props) => {
                                 leaveFrom="opacity-100"
                                 leaveTo="opacity-0"
                             >
-                                <button className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] hover:text-black dark:text-[rgba(255,255,255,0.85)]" onClick={handleAddBoth}>{memberName ? memberName : 'Anonymous'}</button>
-                                <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
-                                    <button className="transition duration-150 hover:text-neutral-500" onClick={memberBio ? handleAddBoth : handleAddBio}>{memberBio ? memberBio : 'Add your bio'}</button>
+                                <button
+                                    className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] dark:text-[rgba(255,255,255,0.85)]"
+                                    onClick={(event) => {
+                                        handleShowDialog(event, {
+                                            bioAutofocus: false
+                                        });
+                                    }}>{memberName ? memberName : 'Anonymous'}</button>
+                                <div className="flex items-baseline">
+                                    <button
+                                        className={`transition duration-150 font-sans text-[14px] tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
+                                        onClick={(event) => {
+                                            handleShowDialog(event, {
+                                                bioAutofocus: true
+                                            });
+                                        }}>{memberBio ? memberBio : 'Add your bio'}</button>
                                 </div>
                             </Transition>
                         </div>

apps/comments-ui/src/components/modals/AddDetailsDialog.js

@@ -26,8 +26,6 @@ const AddNameDialog = (props) => {
     };
 
     const submit = async () => {
-        // When it's both name and bio
-        if (!props.bioOnly) {
         if (name.trim() !== '') {
             await dispatchAction('updateMember', {
                 name,
@@ -39,23 +37,15 @@ const AddNameDialog = (props) => {
             setName('');
             inputNameRef.current?.focus();
         }
-        // When it's only bio
-        } else {
-            await dispatchAction('updateMember', {
-                bio
-            });
-
-            close(true);
-        }
     };
 
     // using <input autofocus> breaks transitions in browsers. So we need to use a timer
     useEffect(() => {
         const timer = setTimeout(() => {
-            if (!props.bioOnly) {
-                inputNameRef.current?.focus();
-            } else {
+            if (props.bioAutofocus) {
                 inputBioRef.current?.focus();
+            } else {
+                inputNameRef.current?.focus();
             }  
         }, 200);
 
@@ -69,8 +59,6 @@ const AddNameDialog = (props) => {
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comments</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
             <section className="mt-8 text-left">
-                {!props.bioOnly &&
-                    <>
                 <div className="flex flex-row mb-2 justify-between">
                     <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
                     <Transition
@@ -104,8 +92,6 @@ const AddNameDialog = (props) => {
                     }}
                     maxLength="64"
                 />
-                    </>
-                }
                 <div className="flex flex-row mt-4 mb-2 justify-between">
                     <label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
                     <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>