Profile editing: Custom fields (deleting, editing) (#38066)

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -13,23 +13,26 @@ export interface BaseConfirmationModalProps {
   onClose: () => void;
 }
 
+interface ConfirmationModalProps {
+  title: React.ReactNode;
+  titleId?: string;
+  message?: React.ReactNode;
+  confirm: React.ReactNode;
+  cancel?: React.ReactNode;
+  secondary?: React.ReactNode;
+  onSecondary?: () => void;
+  onConfirm: () => void;
+  noCloseOnConfirm?: boolean;
+  extraContent?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  updating?: boolean;
+  disabled?: boolean;
+  noFocusButton?: boolean;
+}
+
 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;
-    noCloseOnConfirm?: boolean;
-    extraContent?: React.ReactNode;
-    children?: React.ReactNode;
-    updating?: boolean;
-    disabled?: boolean;
-    noFocusButton?: boolean;
-  } & BaseConfirmationModalProps
+  ConfirmationModalProps & BaseConfirmationModalProps
 > = ({
   title,
   titleId,
@@ -42,6 +45,7 @@ export const ConfirmationModal: React.FC<
   onSecondary,
   extraContent,
   children,
+  className,
   updating,
   disabled,
   noCloseOnConfirm = false,
@@ -62,7 +66,7 @@ export const ConfirmationModal: React.FC<
 
   return (
     <ModalShell>
-      <ModalShellBody>
+      <ModalShellBody className={className}>
         <h1 id={titleId}>{title}</h1>
         {message && <p>{message}</p>}
 

app/javascript/mastodon/features/ui/components/dialog_modal.tsx

@@ -15,11 +15,10 @@ interface DialogModalProps {
   title: ReactNode;
   onClose: () => void;
   description?: ReactNode;
-  formClassName?: string;
+  wrapperClassName?: string;
   children?: ReactNode;
   noCancelButton?: boolean;
-  onSave?: () => void;
-  saveLabel?: ReactNode;
+  buttons?: ReactNode;
 }
 
 export const DialogModal: FC<DialogModalProps> = ({
@@ -27,16 +26,13 @@ export const DialogModal: FC<DialogModalProps> = ({
   title,
   onClose,
   description,
-  formClassName,
+  wrapperClassName,
   children,
   noCancelButton = false,
-  onSave,
-  saveLabel,
+  buttons,
 }) => {
   const intl = useIntl();
 
-  const showButtons = !noCancelButton || onSave;
-
   return (
     <div className={classNames('modal-root__modal dialog-modal', className)}>
       <div className='dialog-modal__header'>
@@ -61,13 +57,16 @@ export const DialogModal: FC<DialogModalProps> = ({
           </div>
         )}
         <div
-          className={classNames('dialog-modal__content__form', formClassName)}
+          className={classNames(
+            'dialog-modal__content__form',
+            wrapperClassName,
+          )}
         >
           {children}
         </div>
       </div>
 
-      {showButtons && (
+      {(buttons || !noCancelButton) && (
         <div className='dialog-modal__content__actions'>
           {!noCancelButton && (
             <Button onClick={onClose} secondary>
@@ -77,16 +76,7 @@ export const DialogModal: FC<DialogModalProps> = ({
               />
             </Button>
           )}
-          {onSave && (
-            <Button onClick={onClose}>
-              {saveLabel ?? (
-                <FormattedMessage
-                  id='confirmation_modal.cancel'
-                  defaultMessage='Cancel'
-                />
-              )}
-            </Button>
-          )}
+          {buttons}
         </div>
       )}
     </div>

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -94,11 +94,20 @@ export const MODAL_COMPONENTS = {
   'COMPOSE_PRIVACY': () => Promise.resolve({ default: VisibilityModal }),
   'ACCOUNT_NOTE': () => import('@/mastodon/features/account_timeline/modals/note_modal').then(module => ({ default: module.AccountNoteModal })),
   'ACCOUNT_FIELD_OVERFLOW': () => import('@/mastodon/features/account_timeline/modals/field_modal').then(module => ({ default: module.AccountFieldModal })),
-  'ACCOUNT_EDIT_NAME': () => import('@/mastodon/features/account_edit/components/name_modal').then(module => ({ default: module.NameModal })),
-  'ACCOUNT_EDIT_BIO': () => import('@/mastodon/features/account_edit/components/bio_modal').then(module => ({ default: module.BioModal })),
-  'ACCOUNT_EDIT_PROFILE_DISPLAY': () => import('@/mastodon/features/account_edit/components/profile_display_modal').then(module => ({ default: module.ProfileDisplayModal })),
+  'ACCOUNT_EDIT_NAME': accountEditModal('NameModal'),
+  'ACCOUNT_EDIT_BIO': accountEditModal('BioModal'),
+  'ACCOUNT_EDIT_PROFILE_DISPLAY': accountEditModal('ProfileDisplayModal'),
+  'ACCOUNT_EDIT_VERIFY_LINKS': accountEditModal('VerifiedModal'),
+  'ACCOUNT_EDIT_FIELD_EDIT': accountEditModal('EditFieldModal'),
+  'ACCOUNT_EDIT_FIELD_DELETE': accountEditModal('DeleteFieldModal'),
+  'ACCOUNT_EDIT_FIELDS_REORDER': accountEditModal('ReorderFieldsModal'),
 };
 
+/** @arg {keyof import('@/mastodon/features/account_edit/modals')} type */
+function accountEditModal(type) {
+  return () => import('@/mastodon/features/account_edit/modals').then(module => ({ default: module[type] }));
+}
+
 export default class ModalRoot extends PureComponent {
 
   static propTypes = {