[Glitch] Profile editing: Name and bio

Port ed4787c1b1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -19,20 +19,23 @@ const messages = defineMessages({
 export const ConfirmationModal: React.FC<
   {
     title: React.ReactNode;
+    titleId?: string;
     message?: React.ReactNode;
     confirm: React.ReactNode;
     cancel?: React.ReactNode;
     secondary?: React.ReactNode;
     onSecondary?: () => void;
     onConfirm: () => void;
-    closeWhenConfirm?: boolean;
+    noCloseOnConfirm?: boolean;
     extraContent?: React.ReactNode;
+    children?: React.ReactNode;
     updating?: boolean;
     disabled?: boolean;
     noFocusButton?: boolean;
   } & BaseConfirmationModalProps
 > = ({
   title,
+  titleId,
   message,
   confirm,
   cancel,
@@ -40,19 +43,20 @@ export const ConfirmationModal: React.FC<
   onConfirm,
   secondary,
   onSecondary,
-  closeWhenConfirm = true,
   extraContent,
+  children,
   updating,
   disabled,
+  noCloseOnConfirm = false,
   noFocusButton = false,
 }) => {
   const handleClick = useCallback(() => {
-    if (closeWhenConfirm) {
+    if (!noCloseOnConfirm) {
       onClose();
     }
 
     onConfirm();
-  }, [onClose, onConfirm, closeWhenConfirm]);
+  }, [onClose, onConfirm, noCloseOnConfirm]);
 
   const handleSecondary = useCallback(() => {
     onClose();
@@ -63,10 +67,10 @@ export const ConfirmationModal: React.FC<
     <div className='modal-root__modal safety-action-modal'>
       <div className='safety-action-modal__top'>
         <div className='safety-action-modal__confirmation'>
-          <h1>{title}</h1>
+          <h1 id={titleId}>{title}</h1>
           {message && <p>{message}</p>}
 
-          {extraContent}
+          {extraContent ?? children}
         </div>
       </div>
 

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts

@@ -1,3 +1,4 @@
+export type { BaseConfirmationModalProps } from './confirmation_modal';
 export { ConfirmationModal } from './confirmation_modal';
 export { ConfirmDeleteStatusModal } from './delete_status';
 export { ConfirmDeleteListModal } from './delete_list';

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/quiet_post_quote_info.tsx

@@ -33,7 +33,7 @@ const messages = defineMessages({
 /**
  * [1] Since we only want this modal to have two buttons – "Don't ask again" and
  * "Got it" – , we have to use the `onClose` handler to handle the "Don't ask again"
- * functionality. Because of this, we need to set `closeWhenConfirm` to false and
+ * functionality. Because of this, we need to set `noCloseOnConfirm` to true and
  * close the modal manually.
  * This prevents the modal from being dismissed permanently when just confirming.
  */
@@ -65,13 +65,13 @@ export const QuietPostQuoteInfoModal: React.FC<{ status: Status }> = ({
 
   return (
     <ConfirmationModal
-      closeWhenConfirm={false} // [1]
       title={intl.formatMessage(messages.title)}
       message={intl.formatMessage(messages.message)}
       confirm={intl.formatMessage(messages.got_it)}
       cancel={intl.formatMessage(messages.dismiss)}
       onConfirm={confirm}
       onClose={dismiss}
+      noCloseOnConfirm
     />
   );
 };

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -96,6 +96,8 @@ export const MODAL_COMPONENTS = {
   'ANNUAL_REPORT': AnnualReportModal,
   'COMPOSE_PRIVACY': () => Promise.resolve({ default: VisibilityModal }),
   'ACCOUNT_NOTE': () => import('@/flavours/glitch/features/account_timeline/modals/note_modal').then(module => ({ default: module.AccountNoteModal })),
+  'ACCOUNT_EDIT_NAME': () => import('@/flavours/glitch/features/account_edit/components/name_modal').then(module => ({ default: module.NameModal })),
+  'ACCOUNT_EDIT_BIO': () => import('@/flavours/glitch/features/account_edit/components/bio_modal').then(module => ({ default: module.BioModal })),
 };
 
 export default class ModalRoot extends PureComponent {