From 6423ed8fb51fd0e0eb3745526fe07f7f6bc17a40 Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Tue, 11 Oct 2022 11:24:11 +0300
Subject: [PATCH] ref(ui-components) Use new Dialog component (#12351)

Convert some files to TS
---
 react/features/base/dialog/middleware.web.ts  | 10 +++++-
 .../base/ui/components/web/ClickableIcon.tsx  |  4 ++-
 .../base/ui/components/web/Dialog.tsx         |  8 ++++-
 ...log.js => AbstractGrantModeratorDialog.ts} | 36 ++++++++-----------
 ...=> AbstractKickRemoteParticipantDialog.ts} | 27 +++++---------
 ...atorDialog.js => GrantModeratorDialog.tsx} | 16 ++++-----
 ...log.js => KickRemoteParticipantDialog.tsx} | 18 ++++------
 ... => MuteRemoteParticipantsVideoDialog.tsx} | 16 ++++-----
 .../components/VideoQualityDialog.web.js      |  9 +++--
 .../components/UploadImageButton.tsx          |  1 -
 .../components/VirtualBackgroundDialog.tsx    | 32 ++++++++---------
 .../components/VirtualBackgroundPreview.tsx   |  1 -
 12 files changed, 79 insertions(+), 99 deletions(-)
 rename react/features/video-menu/components/{AbstractGrantModeratorDialog.js => AbstractGrantModeratorDialog.ts} (69%)
 rename react/features/video-menu/components/{AbstractKickRemoteParticipantDialog.js => AbstractKickRemoteParticipantDialog.ts} (71%)
 rename react/features/video-menu/components/web/{GrantModeratorDialog.js => GrantModeratorDialog.tsx} (63%)
 rename react/features/video-menu/components/web/{KickRemoteParticipantDialog.js => KickRemoteParticipantDialog.tsx} (59%)
 rename react/features/video-menu/components/web/{MuteRemoteParticipantsVideoDialog.js => MuteRemoteParticipantsVideoDialog.tsx} (75%)

diff --git a/react/features/base/dialog/middleware.web.ts b/react/features/base/dialog/middleware.web.ts
index 1ea7bf202..c5a23881b 100644
--- a/react/features/base/dialog/middleware.web.ts
+++ b/react/features/base/dialog/middleware.web.ts
@@ -21,8 +21,14 @@ import SecurityDialog from '../../security/components/security-dialog/web/Securi
 import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
 import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
 import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
+import GrantModeratorDialog from '../../video-menu/components/web/GrantModeratorDialog';
+import KickRemoteParticipantDialog from '../../video-menu/components/web/KickRemoteParticipantDialog';
 import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
 import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
+import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
+// @ts-ignore
+import VideoQualityDialog from '../../video-quality/components/VideoQualityDialog.web';
+import VirtualBackgroundDialog from '../../virtual-background/components/VirtualBackgroundDialog';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { OPEN_DIALOG } from './actionTypes';
@@ -33,7 +39,9 @@ import { OPEN_DIALOG } from './actionTypes';
 const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
     FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
     StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
-    SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog ];
+    SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
+    GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
+    VirtualBackgroundDialog ];
 
 // This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
 const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);
diff --git a/react/features/base/ui/components/web/ClickableIcon.tsx b/react/features/base/ui/components/web/ClickableIcon.tsx
index 8dde79d1c..79a426296 100644
--- a/react/features/base/ui/components/web/ClickableIcon.tsx
+++ b/react/features/base/ui/components/web/ClickableIcon.tsx
@@ -8,6 +8,7 @@ import Icon from '../../../icons/components/Icon';
 interface IProps {
     accessibilityLabel: string;
     icon: Function;
+    id?: string;
     onClick: () => void;
 }
 
@@ -40,7 +41,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
+const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => {
     const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 
@@ -48,6 +49,7 @@ const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
         <button
             aria-label = { accessibilityLabel }
             className = { cx(styles.button, isMobile && 'is-mobile') }
+            id = { id }
             onClick = { onClick }>
             <Icon
                 size = { 24 }
diff --git a/react/features/base/ui/components/web/Dialog.tsx b/react/features/base/ui/components/web/Dialog.tsx
index 347d7452b..5223164e3 100644
--- a/react/features/base/ui/components/web/Dialog.tsx
+++ b/react/features/base/ui/components/web/Dialog.tsx
@@ -150,6 +150,7 @@ const useStyles = makeStyles()((theme: Theme) => {
             boxSizing: 'border-box',
             padding: '0 24px',
             overflowX: 'hidden',
+            minHeight: '40px',
 
             '@media (max-width: 448px)': {
                 height: '100%'
@@ -242,10 +243,15 @@ const Dialog = ({
                 className = { cx(classes.modal, isUnmounting && 'unmount', size, className) }
                 role = 'dialog'>
                 <div className = { classes.header }>
-                    <p className = { classes.title }>{title ?? t(titleKey ?? '')}</p>
+                    <p
+                        className = { classes.title }
+                        id = 'dialog-title'>
+                        {title ?? t(titleKey ?? '')}
+                    </p>
                     <ClickableIcon
                         accessibilityLabel = { t('dialog.close') }
                         icon = { IconClose }
+                        id = 'modal-header-close-button'
                         onClick = { onClose } />
                 </div>
                 <div className = { classes.content }>{children}</div>
diff --git a/react/features/video-menu/components/AbstractGrantModeratorDialog.js b/react/features/video-menu/components/AbstractGrantModeratorDialog.ts
similarity index 69%
rename from react/features/video-menu/components/AbstractGrantModeratorDialog.js
rename to react/features/video-menu/components/AbstractGrantModeratorDialog.ts
index 9318257b6..4df114523 100644
--- a/react/features/video-menu/components/AbstractGrantModeratorDialog.js
+++ b/react/features/video-menu/components/AbstractGrantModeratorDialog.ts
@@ -1,35 +1,29 @@
-// @flow
-
 import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-import {
-    createRemoteVideoMenuButtonEvent,
-    sendAnalytics
-} from '../../analytics';
-import { getParticipantById, grantModerator } from '../../base/participants';
+import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
+import { IState, IStore } from '../../app/types';
+import { grantModerator } from '../../base/participants/actions';
+import { getParticipantById } from '../../base/participants/functions';
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: IStore['dispatch'];
 
     /**
      * The ID of the remote participant to be granted moderator rights.
      */
-    participantID: string,
+    participantID: string;
 
     /**
      * The name of the remote participant to be granted moderator rights.
      */
-    participantName: string,
-
-    /**
-     * Function to translate i18n labels.
-     */
-    t: Function
-};
+    participantName: string;
+}
 
 /**
  * Abstract dialog to confirm granting moderator to a participant.
@@ -47,8 +41,6 @@ export default class AbstractGrantModeratorDialog
         this._onSubmit = this._onSubmit.bind(this);
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Callback for the confirm button.
      *
@@ -73,13 +65,13 @@ export default class AbstractGrantModeratorDialog
 /**
  * Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryoneDialog}'s props.
  *
- * @param {Object} state - The redux state.
+ * @param {IState} state - The redux state.
  * @param {Object} ownProps - The properties explicitly passed to the component.
  * @returns {Props}
  */
-export function abstractMapStateToProps(state: Object, ownProps: Props) {
+export function abstractMapStateToProps(state: IState, ownProps: Props) {
 
     return {
-        participantName: getParticipantById(state, ownProps.participantID).name
+        participantName: getParticipantById(state, ownProps.participantID)?.name
     };
 }
diff --git a/react/features/video-menu/components/AbstractKickRemoteParticipantDialog.js b/react/features/video-menu/components/AbstractKickRemoteParticipantDialog.ts
similarity index 71%
rename from react/features/video-menu/components/AbstractKickRemoteParticipantDialog.js
rename to react/features/video-menu/components/AbstractKickRemoteParticipantDialog.ts
index 9a521fa98..7b0c5a0f8 100644
--- a/react/features/video-menu/components/AbstractKickRemoteParticipantDialog.js
+++ b/react/features/video-menu/components/AbstractKickRemoteParticipantDialog.ts
@@ -1,30 +1,23 @@
-// @flow
-
 import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-import {
-    createRemoteVideoMenuButtonEvent,
-    sendAnalytics
-} from '../../analytics';
-import { kickParticipant } from '../../base/participants';
+import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
+import { IStore } from '../../app/types';
+import { kickParticipant } from '../../base/participants/actions';
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: IStore['dispatch'];
 
     /**
      * The ID of the remote participant to be kicked.
      */
-    participantID: string,
-
-    /**
-     * Function to translate i18n labels.
-     */
-    t: Function
-};
+    participantID: string;
+}
 
 /**
  * Abstract dialog to confirm a remote participant kick action.
@@ -42,8 +35,6 @@ export default class AbstractKickRemoteParticipantDialog
         this._onSubmit = this._onSubmit.bind(this);
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Callback for the confirm button.
      *
diff --git a/react/features/video-menu/components/web/GrantModeratorDialog.js b/react/features/video-menu/components/web/GrantModeratorDialog.tsx
similarity index 63%
rename from react/features/video-menu/components/web/GrantModeratorDialog.js
rename to react/features/video-menu/components/web/GrantModeratorDialog.tsx
index 8f990b9e2..4cde008f7 100644
--- a/react/features/video-menu/components/web/GrantModeratorDialog.js
+++ b/react/features/video-menu/components/web/GrantModeratorDialog.tsx
@@ -1,12 +1,9 @@
-// @flow
-
 import React from 'react';
 
-import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
-import AbstractGrantModeratorDialog
-, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+import AbstractGrantModeratorDialog, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
 
 /**
  * Dialog to confirm a grant moderator action.
@@ -21,10 +18,9 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog {
     render() {
         return (
             <Dialog
-                okKey = 'dialog.Yes'
+                ok = {{ translationKey: 'dialog.Yes' }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.grantModeratorTitle'
-                width = 'small'>
+                titleKey = 'dialog.grantModeratorTitle'>
                 <div>
                     { this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName }) }
                 </div>
diff --git a/react/features/video-menu/components/web/KickRemoteParticipantDialog.js b/react/features/video-menu/components/web/KickRemoteParticipantDialog.tsx
similarity index 59%
rename from react/features/video-menu/components/web/KickRemoteParticipantDialog.js
rename to react/features/video-menu/components/web/KickRemoteParticipantDialog.tsx
index 8b053b4f4..c6795ab66 100644
--- a/react/features/video-menu/components/web/KickRemoteParticipantDialog.js
+++ b/react/features/video-menu/components/web/KickRemoteParticipantDialog.tsx
@@ -1,12 +1,9 @@
-// @flow
-
 import React from 'react';
 
-import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
-import AbstractKickRemoteParticipantDialog
-    from '../AbstractKickRemoteParticipantDialog';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+import AbstractKickRemoteParticipantDialog from '../AbstractKickRemoteParticipantDialog';
 
 /**
  * Dialog to confirm a remote participant kick action.
@@ -21,18 +18,15 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog {
     render() {
         return (
             <Dialog
-                okKey = 'dialog.kickParticipantButton'
+                ok = {{ translationKey: 'dialog.kickParticipantButton' }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.kickParticipantTitle'
-                width = 'small'>
+                titleKey = 'dialog.kickParticipantTitle'>
                 <div>
                     { this.props.t('dialog.kickParticipantDialog') }
                 </div>
             </Dialog>
         );
     }
-
-    _onSubmit: () => boolean;
 }
 
 export default translate(connect()(KickRemoteParticipantDialog));
diff --git a/react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.js b/react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.tsx
similarity index 75%
rename from react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.js
rename to react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.tsx
index d8b3feab3..8caa7927a 100644
--- a/react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.js
+++ b/react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.tsx
@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react';
 
-import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
 import AbstractMuteRemoteParticipantsVideoDialog, {
     abstractMapStateToProps
 } from '../AbstractMuteRemoteParticipantsVideoDialog';
@@ -25,10 +23,9 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
     render() {
         return (
             <Dialog
-                okKey = 'dialog.muteParticipantsVideoButton'
+                ok = {{ translationKey: 'dialog.muteParticipantsVideoButton' }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.muteParticipantsVideoTitle'
-                width = 'small'>
+                titleKey = 'dialog.muteParticipantsVideoTitle'>
                 <div>
                     {this.props.t(this.props.isVideoModerationOn
                         ? 'dialog.muteParticipantsVideoBodyModerationOn'
@@ -38,8 +35,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
             </Dialog>
         );
     }
-
-    _onSubmit: () => boolean;
 }
 
+// @ts-ignore
 export default translate(connect(abstractMapStateToProps)(MuteRemoteParticipantsVideoDialog));
diff --git a/react/features/video-quality/components/VideoQualityDialog.web.js b/react/features/video-quality/components/VideoQualityDialog.web.js
index 5a44b179d..f4b25cf47 100644
--- a/react/features/video-quality/components/VideoQualityDialog.web.js
+++ b/react/features/video-quality/components/VideoQualityDialog.web.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Dialog } from '../../base/dialog';
+import Dialog from '../../base/ui/components/web/Dialog';
 
 import VideoQualitySlider from './VideoQualitySlider.web';
 
@@ -20,10 +20,9 @@ export default class VideoQualityDialog extends Component {
     render() {
         return (
             <Dialog
-                hideCancelButton = { true }
-                submitDisabled = { true }
-                titleKey = 'videoStatus.performanceSettings'
-                width = 'small'>
+                cancel = {{ hidden: true }}
+                ok = {{ hidden: true }}
+                titleKey = 'videoStatus.performanceSettings'>
                 <VideoQualitySlider />
             </Dialog>
         );
diff --git a/react/features/virtual-background/components/UploadImageButton.tsx b/react/features/virtual-background/components/UploadImageButton.tsx
index 381f6937e..e49d0381a 100644
--- a/react/features/virtual-background/components/UploadImageButton.tsx
+++ b/react/features/virtual-background/components/UploadImageButton.tsx
@@ -56,7 +56,6 @@ const useStyles = makeStyles()((theme: Theme) => {
             fontSize: '14px',
             fontWeight: '600',
             lineHeight: '20px',
-            marginLeft: '-10px',
             marginTop: theme.spacing(3),
             marginBottom: theme.spacing(2),
             color: '#669aec',
diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.tsx b/react/features/virtual-background/components/VirtualBackgroundDialog.tsx
index 77fdf85a9..499679cdc 100644
--- a/react/features/virtual-background/components/VirtualBackgroundDialog.tsx
+++ b/react/features/virtual-background/components/VirtualBackgroundDialog.tsx
@@ -10,27 +10,20 @@ import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../app/types';
-// @ts-ignore
-import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config';
-// @ts-ignore
-import { Dialog, hideDialog } from '../../base/dialog';
+import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config/functions.any';
+import { hideDialog } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n/functions';
 import Icon from '../../base/icons/components/Icon';
 import { IconCloseSmall } from '../../base/icons/svg';
-// @ts-ignore
 import { connect } from '../../base/redux/functions';
-// @ts-ignore
-import { updateSettings } from '../../base/settings';
+import { updateSettings } from '../../base/settings/actions';
 // @ts-ignore
 import { Tooltip } from '../../base/tooltip';
-// @ts-ignore
-import { getLocalVideoTrack } from '../../base/tracks';
-// @ts-ignore
+import { getLocalVideoTrack } from '../../base/tracks/functions';
+import Dialog from '../../base/ui/components/web/Dialog';
 import { toggleBackgroundEffect } from '../actions';
 import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
-// @ts-ignore
 import { toDataURL } from '../functions';
-// @ts-ignore
 import logger from '../logger';
 
 import UploadImageButton from './UploadImageButton';
@@ -121,13 +114,15 @@ const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackg
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
+        dialogContainer: {
+            width: 'auto'
+        },
         container: {
             display: 'flex',
             flexDirection: 'column'
         },
         dialog: {
             alignSelf: 'flex-start',
-            marginLeft: '-10px',
             position: 'relative',
             maxHeight: '300px',
             color: 'white',
@@ -459,12 +454,15 @@ function VirtualBackground({
 
     return (
         <Dialog
-            hideCancelButton = { false }
-            okKey = { 'virtualBackground.apply' }
+            className = { classes.dialogContainer }
+            ok = {{
+                disabled: !options || loading || !previewIsLoaded,
+                translationKey: 'virtualBackground.apply'
+            }}
             onCancel = { cancelVirtualBackground }
             onSubmit = { applyVirtualBackground }
-            submitDisabled = { !options || loading || !previewIsLoaded }
-            titleKey = { 'virtualBackground.title' } >
+            size = 'large'
+            titleKey = 'virtualBackground.title' >
             <VirtualBackgroundPreview
                 loadedPreview = { loadedPreviewState }
                 options = { options } />
diff --git a/react/features/virtual-background/components/VirtualBackgroundPreview.tsx b/react/features/virtual-background/components/VirtualBackgroundPreview.tsx
index fd092c1d1..198fb86c2 100644
--- a/react/features/virtual-background/components/VirtualBackgroundPreview.tsx
+++ b/react/features/virtual-background/components/VirtualBackgroundPreview.tsx
@@ -94,7 +94,6 @@ const styles = (theme: Theme) => {
             },
 
             '& .video-background-preview-entry': {
-                marginLeft: '-10px',
                 height: '250px',
                 width: '570px',
                 marginBottom: theme.spacing(2),