Change how the modal stack is handled

app/javascript/mastodon/actions/modal.ts

@@ -9,7 +9,6 @@ export type ModalType = keyof typeof MODAL_COMPONENTS;
 interface OpenModalPayload {
   modalType: ModalType;
   modalProps: ModalProps;
-  previousModalProps?: ModalProps;
 }
 export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
 

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -262,11 +262,6 @@ const Preview: React.FC<{
   }
 };
 
-interface RestoreProps {
-  previousDescription: string;
-  previousPosition: FocalPoint;
-}
-
 interface Props {
   mediaId: string;
   onClose: () => void;
@@ -275,15 +270,14 @@ interface Props {
 interface ConfirmationMessage {
   message: string;
   confirm: string;
-  props?: RestoreProps;
 }
 
 export interface ModalRef {
   getCloseConfirmationMessage: () => null | ConfirmationMessage;
 }
 
-export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
-  ({ mediaId, previousDescription, previousPosition, onClose }, ref) => {
+export const AltTextModal = forwardRef<ModalRef, Props>(
+  ({ mediaId, onClose }, ref) => {
     const intl = useIntl();
     const dispatch = useAppDispatch();
     const media = useAppSelector((state) =>
@@ -302,18 +296,15 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
     const focusY =
       (media?.getIn(['meta', 'focus', 'y'], 0) as number | undefined) ?? 0;
     const [description, setDescription] = useState(
-      previousDescription ??
         (media?.get('description') as string | undefined) ??
         '',
     );
     const [position, setPosition] = useState<FocalPoint>(
-      previousPosition ?? [focusX / 2 + 0.5, focusY / -2 + 0.5],
+      [focusX / 2 + 0.5, focusY / -2 + 0.5],
     );
     const [isDetecting, setIsDetecting] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
-    const dirtyRef = useRef(
-      previousDescription || previousPosition ? true : false,
-    );
+    const dirtyRef = useRef(false);
     const type = media?.get('type') as string;
     const valid = length(description) <= MAX_LENGTH;
 

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

@@ -3,6 +3,8 @@ import { PureComponent } from 'react';
 
 import { Helmet } from 'react-helmet';
 
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
 import Base from 'mastodon/components/modal_root';
 import { AltTextModal } from 'mastodon/features/alt_text_modal';
 import {
@@ -78,8 +80,7 @@ export const MODAL_COMPONENTS = {
 export default class ModalRoot extends PureComponent {
 
   static propTypes = {
-    type: PropTypes.string,
-    props: PropTypes.object,
+    modals: ImmutablePropTypes.list.isRequired,
     onClose: PropTypes.func.isRequired,
     ignoreFocus: PropTypes.bool,
   };
@@ -89,7 +90,7 @@ export default class ModalRoot extends PureComponent {
   };
 
   getSnapshotBeforeUpdate () {
-    return { visible: !!this.props.type };
+    return { visible: !!this.props.modals.get([0, 'type']) };
   }
 
   componentDidUpdate (prevProps, prevState, { visible }) {
@@ -129,25 +130,19 @@ export default class ModalRoot extends PureComponent {
   };
 
   render () {
-    const { type, props, ignoreFocus } = this.props;
+    const { modals, ignoreFocus } = this.props;
     const { backgroundColor } = this.state;
-    const visible = !!type;
+    const visible = !modals.isEmpty();
 
     return (
       <Base backgroundColor={backgroundColor} onClose={this.handleClose} ignoreFocus={ignoreFocus}>
-        {visible && (
-          <>
-            <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
-              {(SpecificComponent) => {
-                return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />;
-              }}
-            </BundleContainer>
-
-            <Helmet>
-              <meta name='robots' content='noindex' />
-            </Helmet>
-          </>
-        )}
+        {visible && modals.toArray().map((modal, index) => (
+          <BundleContainer key={modal.modalKey} fetchComponent={MODAL_COMPONENTS[modal.modalType]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
+            {(SpecificComponent) => {
+              return <SpecificComponent {...modal.modalProps} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={index === 0 ? this.setModalRef : null} />;
+            }}
+          </BundleContainer>
+        ))}
       </Base>
     );
   }

app/javascript/mastodon/features/ui/containers/modal_container.js

@@ -1,14 +1,12 @@
+import { List as ImmutableList } from 'immutable';
 import { connect } from 'react-redux';
 
 import { openModal, closeModal } from '../../../actions/modal';
 import ModalRoot from '../components/modal_root';
 
-const defaultProps = {};
-
 const mapStateToProps = state => ({
   ignoreFocus: state.getIn(['modal', 'ignoreFocus']),
-  type: state.getIn(['modal', 'stack', 0, 'modalType'], null),
-  props: state.getIn(['modal', 'stack', 0, 'modalProps'], defaultProps),
+  modals: state.getIn(['modal', 'stack'], ImmutableList()),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -16,7 +14,6 @@ const mapDispatchToProps = dispatch => ({
     if (confirmationMessage) {
       dispatch(
         openModal({
-          previousModalProps: confirmationMessage.props,
           modalType: 'CONFIRM',
           modalProps: {
             message: confirmationMessage.message,

app/javascript/mastodon/reducers/modal.ts

@@ -5,16 +5,19 @@ import { timelineDelete } from 'mastodon/actions/timelines_typed';
 
 import type { ModalType } from '../actions/modal';
 import { openModal, closeModal } from '../actions/modal';
+import { uuid } from '../uuid';
 
 export type ModalProps = Record<string, unknown>;
 interface Modal {
   modalType: ModalType;
   modalProps: ModalProps;
+  modalKey: string;
 }
 
 const Modal = ImmutableRecord<Modal>({
   modalType: 'ACTIONS',
   modalProps: ImmutableRecord({})(),
+  modalKey: '',
 });
 
 interface ModalState {
@@ -52,35 +55,11 @@ const pushModal = (
   state: State,
   modalType: ModalType,
   modalProps: ModalProps,
-  previousModalProps?: ModalProps,
 ): State => {
   return state.withMutations((record) => {
     record.set('ignoreFocus', false);
     record.update('stack', (stack) => {
-      let tmp = stack;
-
-      // With this option, we update the previously opened modal, so that when the
-      // current (new) modal is closed, the previous modal is re-opened with different
-      // props. Specifically, this is useful for the confirmation modal.
-      if (previousModalProps) {
-        const previousModal = tmp.first() as Modal | undefined;
-
-        if (previousModal) {
-          tmp = tmp.shift().unshift(
-            Modal({
-              modalType: previousModal.modalType,
-              modalProps: {
-                ...previousModal.modalProps,
-                ...previousModalProps,
-              },
-            }),
-          );
-        }
-      }
-
-      tmp = tmp.unshift(Modal({ modalType, modalProps }));
-
-      return tmp;
+      return stack.unshift(Modal({ modalType, modalProps, modalKey: uuid() }));
     });
   });
 };
@@ -91,7 +70,6 @@ export const modalReducer: Reducer<State> = (state = initialState, action) => {
       state,
       action.payload.modalType,
       action.payload.modalProps,
-      action.payload.previousModalProps,
     );
   else if (closeModal.match(action)) return popModal(state, action.payload);
   // TODO: type those actions