Mm 62677 - modal focus management - find channels modal (#29957)

* MM-62312 - modal focus management; revamp quick switch channel modal!

* get quick switch test working

* configure the generic modal to accept refs to focus within and onhide to the origin element

* apply pr feedback, get modal element get autofocus, use id instead of ref

* update more direct channels modal to use generic modal

* fix unit tests and snapshots

* fix unit tests

* fix modal margin top to fit in smaller screens

* fix e2e test

* remove unnecesary onexited extra call

* fix e2e tests

* set correct label

* fix snapshots

* create helper function for sending custom focus event

* migrate quick switch modal to use new approach to focus

* migrate more direct channels modal to new approach

* fix snapshots

* fix types

* fix modal closing behavior

* fix snapshots

* fix cypress tests

* remove only

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/platform/components/src/generic_modal/generic_modal.scss

@@ -24,7 +24,7 @@
             }
         }
 
-        p#genericModalSubheading {
+        div#genericModalSubheading {
             font-size: 12px;
             margin-block: 10px;
         }

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -11,6 +11,8 @@ import './generic_modal.scss';
 export type Props = {
     className?: string;
     onExited: () => void;
+    onEntered?: () => void;
+    onHide?: () => void;
     modalHeaderText?: React.ReactNode;
     modalSubheaderText?: React.ReactNode;
     show?: boolean;
@@ -52,7 +54,6 @@ type State = {
     show: boolean;
     isFocalTrapActive: boolean;
 }
-
 export class GenericModal extends React.PureComponent<Props, State> {
     static defaultProps: Partial<Props> = {
         show: true,
@@ -73,8 +74,15 @@ export class GenericModal extends React.PureComponent<Props, State> {
         };
     }
 
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.show !== this.props.show) {
+            this.setState({show: Boolean(this.props.show)});
+        }
+    }
+
     onHide = () => {
         this.setState({show: false});
+        this.props.onHide?.();
     };
 
     handleCancel = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -102,7 +110,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
             if (event.nativeEvent.isComposing) {
                 return;
             }
-            if (this.props.autoCloseOnConfirmButton) {
+            if (this.props.handleConfirm && this.props.autoCloseOnConfirmButton) {
                 this.onHide();
             }
             if (this.props.handleEnterKeyPress) {
@@ -199,6 +207,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
                 backdropClassName={this.props.backdropClassName}
                 container={this.props.container}
                 keyboard={this.props.keyboardEscape}
+                onEntered={this.props.onEntered}
             >
                 <div
                     onKeyDown={this.onEnterKeyDown}
@@ -206,23 +215,24 @@ export class GenericModal extends React.PureComponent<Props, State> {
                     className='GenericModal__wrapper-enter-key-press-catcher'
                 >
                     <Modal.Header closeButton={true}>
-                        <div className='GenericModal__header__text_container'>
+                        <div
+                            className='GenericModal__header__text_container'
+                        >
                             {this.props.compassDesign && (
                                 <>
                                     {headerText}
                                     {this.props.headerInput}
                                 </>
                             )}
-
                             {
                                 this.props.modalSubheaderText &&
                                 <div className='modal-subheading-container'>
-                                    <p
+                                    <div
                                         id='genericModalSubheading'
                                         className='modal-subheading'
                                     >
                                         {this.props.modalSubheaderText}
-                                    </p>
+                                    </div>
                                 </div>
                             }
                         </div>