ref(ui-components) Update some dialogs to use the new component (#12288)

Improve Dialog component to auto close on cancel or on submit
Change logic to determine whether a dialog is using the new component
Convert some files to TS

react/features/base/ui/components/web/DialogContainer.tsx

@@ -2,7 +2,6 @@ import { ModalTransition } from '@atlaskit/modal-dialog';
 import React, { Component, ComponentType } from 'react';
 
 import { IState } from '../../../../app/types';
-import KeyboardShortcutsDialog from '../../../../keyboard-shortcuts/components/web/KeyboardShortcutsDialog';
 import { ReactionEmojiProps } from '../../../../reactions/constants';
 import { connect } from '../../../redux/functions';
 
@@ -20,6 +19,11 @@ interface Props {
      */
     _componentProps: Object;
 
+    /**
+     * Whether the dialog is using the new component.
+     */
+    _isNewDialog: boolean;
+
     /**
      * Array of reactions to be displayed.
      */
@@ -31,53 +35,12 @@ interface Props {
     _reducedUI: boolean;
 }
 
-// This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
-const isNewDialog = (component: any) => {
-    const list = [ KeyboardShortcutsDialog ];
-
-    return Boolean(list.find(comp => comp === component));
-};
-
-// Needed for the transition to our component.
-type State = {
-    isNewDialog: boolean;
-};
-
 /**
  * Implements a DialogContainer responsible for showing all dialogs. Necessary
  * for supporting @atlaskit's modal animations.
  *
  */
-class DialogContainer extends Component<Props, State> {
-
-    /**
-     * Initializes a new {@code DialogContainer} instance.
-     *
-     * @param {Props} props - The React {@code Component} props to initialize
-     * the new {@code DialogContainer} instance with.
-     */
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            isNewDialog: false
-        };
-    }
-
-    /**
-     * Check which Dialog container to render.
-     * Needed during transition from atlaskit.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidUpdate(prevProps: Props) {
-        if (this.props._component && prevProps._component !== this.props._component) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-                isNewDialog: isNewDialog(this.props._component)
-            });
-        }
-    }
+class DialogContainer extends Component<Props> {
 
     /**
      * Returns the dialog to be displayed.
@@ -104,7 +67,7 @@ class DialogContainer extends Component<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        return this.state.isNewDialog ? (
+        return this.props._isNewDialog ? (
             <DialogTransition>
                 {this._renderDialogContent()}
             </DialogTransition>
@@ -131,6 +94,7 @@ function mapStateToProps(state: IState) {
     return {
         _component: stateFeaturesBaseDialog.component,
         _componentProps: stateFeaturesBaseDialog.componentProps,
+        _isNewDialog: stateFeaturesBaseDialog.isNewDialog,
         _reducedUI: reducedUI
     };
 }