ref(ui-components) Use new Dialog component (#12306)

Convert some files to TS

css/modals/feedback/_feedback.scss

@@ -46,6 +46,8 @@
 }
 
 .feedback-dialog {
+    margin-bottom: 5px;
+
     .details {
         textarea {
             min-height: 100px;

css/modals/screen-share/_share-audio.scss

@@ -1,3 +1,7 @@
+.share-audio-dialog-container {
+    max-height: none;
+}
+
 .share-audio-dialog {
     .share-audio-animation {
         width: 100%;

react/features/base/dialog/middleware.web.ts

@@ -1,7 +1,21 @@
+/* eslint-disable lines-around-comment */
 import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
 import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
 import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
+// @ts-ignore
+import FeedbackDialog from '../../feedback/components/FeedbackDialog.web';
+import AddPeopleDialog from '../../invite/components/add-people-dialog/web/AddPeopleDialog';
+import PremiumFeatureDialog from '../../jaas/components/web/PremiumFeatureDialog';
 import KeyboardShortcutsDialog from '../../keyboard-shortcuts/components/web/KeyboardShortcutsDialog';
+// @ts-ignore
+import StartLiveStreamDialog from '../../recording/components/LiveStream/web/StartLiveStreamDialog';
+// @ts-ignore
+import StopLiveStreamDialog from '../../recording/components/LiveStream/web/StopLiveStreamDialog';
+// @ts-ignore
+import StartRecordingDialog from '../../recording/components/Recording/web/StartRecordingDialog';
+// @ts-ignore
+import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
+import ShareAudioDialog from '../../screen-share/components/ShareAudioDialog';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { OPEN_DIALOG } from './actionTypes';
@@ -9,7 +23,9 @@ import { OPEN_DIALOG } from './actionTypes';
 // ! IMPORTANT - This whole middleware is only needed for the transition from from @atlaskit dialog to our component.
 // ! It should be removed when the transition is over.
 
-const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog ];
+const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
+    FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
+    StartRecordingDialog, StopRecordingDialog, ShareAudioDialog ];
 
 // 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);

react/features/base/tracks/actions.ts

@@ -313,7 +313,7 @@ export function showNoDataFromSourceVideoError(jitsiTrack: any) {
  *     shareOptions: Object
  * }}
  */
-export function toggleScreensharing(enabled: boolean, audioOnly = false,
+export function toggleScreensharing(enabled: boolean | undefined, audioOnly = false,
         ignoreDidHaveVideo = false, shareOptions = {}) {
     return {
         type: TOGGLE_SCREENSHARING,

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

@@ -177,6 +177,7 @@ interface DialogProps {
         translationKey?: string;
     };
     children?: ReactElement | ReactElement[];
+    className?: string;
     description?: string;
     ok?: {
         disabled?: boolean;
@@ -193,6 +194,7 @@ interface DialogProps {
 const Dialog = ({
     cancel = { translationKey: 'dialog.Cancel' },
     children,
+    className,
     description,
     ok = { translationKey: 'dialog.Ok' },
     onCancel,
@@ -237,7 +239,7 @@ const Dialog = ({
                 aria-describedby = { description }
                 aria-labelledby = { title ?? t(titleKey ?? '') }
                 aria-modal = { true }
-                className = { cx(classes.modal, isUnmounting && 'unmount', size) }
+                className = { cx(classes.modal, isUnmounting && 'unmount', size, className) }
                 role = 'dialog'>
                 <div className = { classes.header }>
                     <p className = { classes.title }>{title ?? t(titleKey ?? '')}</p>
@@ -256,6 +258,7 @@ const Dialog = ({
                     {!ok.hidden && <Button
                         accessibilityLabel = { t(ok.translationKey ?? '') }
                         disabled = { ok.disabled }
+                        id = 'modal-dialog-ok-button'
                         labelKey = { ok.translationKey }
                         onClick = { submit } />}
                 </div>

react/features/feedback/components/FeedbackDialog.web.js

@@ -9,10 +9,10 @@ import {
     createFeedbackOpenEvent,
     sendAnalytics
 } from '../../analytics';
-import { Dialog } from '../../base/dialog';
 import { isMobileBrowser } from '../../base/environment/utils';
 import { translate } from '../../base/i18n';
 import { connect } from '../../base/redux';
+import Dialog from '../../base/ui/components/web/Dialog';
 import Input from '../../base/ui/components/web/Input';
 import { cancelFeedback, submitFeedback } from '../actions';
 
@@ -250,9 +250,10 @@ class FeedbackDialog extends Component<Props, State> {
 
         return (
             <Dialog
-                okKey = 'dialog.Submit'
+                ok = {{
+                    translationKey: 'dialog.Submit'
+                }}
                 onCancel = { this._onCancel }
-                onDialogRef = { this._onScrollTop }
                 onSubmit = { this._onSubmit }
                 titleKey = 'feedback.rateExperience'>
                 <div className = 'feedback-dialog'>

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx

@@ -1,17 +1,24 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import React, { useEffect } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-import { createInviteDialogEvent, sendAnalytics } from '../../../../analytics';
+import { createInviteDialogEvent } from '../../../../analytics/AnalyticsEvents';
-import { getInviteURL } from '../../../../base/connection';
+import { sendAnalytics } from '../../../../analytics/functions';
-import { Dialog } from '../../../../base/dialog';
+import { IState } from '../../../../app/types';
-import { translate } from '../../../../base/i18n';
+import { getInviteURL } from '../../../../base/connection/functions';
+import { translate } from '../../../../base/i18n/functions';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
-import { connect } from '../../../../base/redux';
+import { connect } from '../../../../base/redux/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+// @ts-ignore
 import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
+// @ts-ignore
 import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
+// @ts-ignore
 import { isVpaasMeeting } from '../../../../jaas/functions';
+// @ts-ignore
 import { getActiveSession } from '../../../../recording';
+// @ts-ignore
 import { updateDialInNumbers } from '../../../actions';
 import {
     _getDefaultPhoneNumber,
@@ -21,95 +28,94 @@ import {
     isDialOutEnabled,
     isSharingEnabled,
     sharingFeatures
+    // @ts-ignore
 } from '../../../functions';
 
+// @ts-ignore
 import CopyMeetingLinkSection from './CopyMeetingLinkSection';
 import DialInLimit from './DialInLimit';
+// @ts-ignore
 import DialInSection from './DialInSection';
+// @ts-ignore
 import InviteByEmailSection from './InviteByEmailSection';
+// @ts-ignore
 import InviteContactsSection from './InviteContactsSection';
+// @ts-ignore
 import LiveStreamSection from './LiveStreamSection';
 
-declare var interfaceConfig: Object;
+interface Props extends WithTranslation {
-
-type Props = {
 
     /**
      * The object representing the dialIn feature.
      */
-    _dialIn: Object,
+    _dialIn: any;
-
-    /**
-     * Whether or not embed meeting should be visible.
-     */
-    _embedMeetingVisible: boolean,
 
     /**
      * Whether or not dial in number should be visible.
      */
-    _dialInVisible: boolean,
+    _dialInVisible: boolean;
-
-    /**
-     * Whether or not url sharing button should be visible.
-     */
-    _urlSharingVisible: boolean,
 
     /**
      * Whether or not email sharing features should be visible.
      */
-    _emailSharingVisible: boolean,
+    _emailSharingVisible: boolean;
+
+    /**
+     * Whether or not embed meeting should be visible.
+     */
+    _embedMeetingVisible: boolean;
 
     /**
      * The meeting invitation text.
      */
-    _invitationText: string,
+    _invitationText: string;
 
     /**
      * The custom no new-lines meeting invitation text for iOS default email.
      * Needed because of this mailto: iOS issue: https://developer.apple.com/forums/thread/681023.
      */
-    _invitationTextiOS: string,
+    _invitationTextiOS: string;
 
     /**
      * An alternate app name to be displayed in the email subject.
      */
-    _inviteAppName: ?string,
+    _inviteAppName?: string;
 
     /**
      * Whether or not invite contacts should be visible.
      */
-    _inviteContactsVisible: boolean,
+    _inviteContactsVisible: boolean;
 
     /**
      * The current url of the conference to be copied onto the clipboard.
      */
-    _inviteUrl: string,
+    _inviteUrl: string;
 
     /**
      * Whether or not the current meeting belongs to a JaaS user.
      */
-     _isVpaasMeeting: boolean,
+    _isVpaasMeeting: boolean;
 
     /**
      * The current known URL for a live stream in progress.
      */
-    _liveStreamViewURL: string,
+    _liveStreamViewURL: string;
 
     /**
      * The default phone number.
      */
-    _phoneNumber: ?string,
+    _phoneNumber?: string;
 
     /**
-     * Invoked to obtain translated strings.
+     * Whether or not url sharing button should be visible.
      */
-    t: Function,
+    _urlSharingVisible: boolean;
 
     /**
      * Method to update the dial in numbers.
      */
-    updateNumbers: Function
+    updateNumbers: Function;
-};
+}
 
 /**
  * Invite More component.
@@ -163,11 +169,9 @@ function AddPeopleDialog({
 
     return (
         <Dialog
-            cancelKey = { 'dialog.close' }
+            cancel = {{ hidden: true }}
-            hideCancelButton = { true }
+            ok = {{ hidden: true }}
-            submitDisabled = { true }
+            titleKey = 'addPeople.inviteMorePrompt'>
-            titleKey = 'addPeople.inviteMorePrompt'
-            width = { 'small' }>
             <div className = 'invite-more-dialog'>
                 { _inviteContactsVisible && <InviteContactsSection /> }
                 {_urlSharingVisible ? <CopyMeetingLinkSection url = { _inviteUrl } /> : null}
@@ -207,7 +211,7 @@ function AddPeopleDialog({
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const currentLiveStreamingSession
         = getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
     const { iAmRecorder, inviteAppName } = state['features/base/config'];
@@ -215,7 +219,7 @@ function mapStateToProps(state, ownProps) {
     const dialOutEnabled = isDialOutEnabled(state);
     const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
     const dialIn = state['features/invite'];
-    const phoneNumber = dialIn && dialIn.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
+    const phoneNumber = dialIn?.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
 
     return {
         _dialIn: dialIn,
@@ -233,9 +237,7 @@ function mapStateToProps(state, ownProps) {
         _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
         _inviteUrl: getInviteURL(state),
         _isVpaasMeeting: isVpaasMeeting(state),
-        _liveStreamViewURL:
+        _liveStreamViewURL: currentLiveStreamingSession?.liveStreamViewURL,
-            currentLiveStreamingSession
-                && currentLiveStreamingSession.liveStreamViewURL,
         _phoneNumber: phoneNumber
     };
 }

react/features/jaas/components/web/PremiumFeatureDialog.tsx

@@ -1,11 +1,9 @@
-// @flow
-
 import React, { PureComponent } from 'react';
 
 
-import { Dialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
+import Dialog from '../../../base/ui/components/web/Dialog';
-import { openURLInBrowser } from '../../../base/util';
+import { openURLInBrowser } from '../../../base/util/openURLInBrowser.web';
 import { JAAS_UPGRADE_URL } from '../../constants';
 
 /**
@@ -13,22 +11,19 @@ import { JAAS_UPGRADE_URL } from '../../constants';
  *
  * @returns {React$Element<any>}
  */
-class PremiumFeatureDialog extends PureComponent<*> {
+class PremiumFeatureDialog extends PureComponent<any> {
 
     /**
      * Instantiates a new component.
      *
      * @inheritdoc
      */
-    constructor(props) {
+    constructor(props: any) {
         super(props);
 
         this._onSubmitValue = this._onSubmitValue.bind(this);
     }
 
-
-    _onSubmitValue: () => void;
-
     /**
      * Callback to be invoked when the dialog ok is pressed.
      *
@@ -48,11 +43,10 @@ class PremiumFeatureDialog extends PureComponent<*> {
 
         return (
             <Dialog
-                hideCancelButton = { true }
+                cancel = {{ hidden: true }}
-                okKey = { t('dialog.viewUpgradeOptions') }
+                ok = {{ translationKey: 'dialog.viewUpgradeOptions' }}
                 onSubmit = { this._onSubmitValue }
-                titleKey = { t('dialog.viewUpgradeOptionsTitle') }
+                titleKey = { t('dialog.viewUpgradeOptionsTitle') }>
-                width = { 'small' }>
                 <span>{t('dialog.viewUpgradeOptionsContent')}</span>
             </Dialog>
         );

react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js

@@ -3,9 +3,9 @@
 import Spinner from '@atlaskit/spinner';
 import React from 'react';
 
-import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
+import Dialog from '../../../../base/ui/components/web/Dialog';
 import {
     GOOGLE_API_STATES,
     GoogleSignInButton,
@@ -85,12 +85,10 @@ class StartLiveStreamDialog
 
         return (
             <Dialog
-                cancelKey = 'dialog.Cancel'
+                ok = {{ translationKey: 'dialog.startLiveStreaming' }}
-                okKey = 'dialog.startLiveStreaming'
                 onCancel = { this._onCancel }
                 onSubmit = { this._onSubmit }
-                titleKey = 'liveStreaming.start'
+                titleKey = 'liveStreaming.start'>
-                width = { 'small' }>
                 <div className = 'live-stream-dialog'>
                     { _googleApiApplicationClientID
                         ? this._renderYouTubePanel() : null }

react/features/recording/components/LiveStream/web/StopLiveStreamDialog.js

@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
+import Dialog from '../../../../base/ui/components/web/Dialog';
 import AbstractStopLiveStreamDialog, {
     _mapStateToProps
 } from '../AbstractStopLiveStreamDialog';
@@ -26,10 +26,9 @@ class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
     render() {
         return (
             <Dialog
-                okKey = 'dialog.stopLiveStreaming'
+                ok = {{ translationKey: 'dialog.stopLiveStreaming' }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.liveStreaming'
+                titleKey = 'dialog.liveStreaming'>
-                width = 'small'>
                 { this.props.t('dialog.stopStreamingWarning') }
             </Dialog>
         );

react/features/recording/components/Recording/web/StartRecordingDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
+import Dialog from '../../../../base/ui/components/web/Dialog';
 import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture';
 import { isScreenshotCaptureEnabled } from '../../../../screenshot-capture/functions';
 import { RECORDING_TYPES } from '../../../constants';
@@ -68,11 +68,12 @@ class StartRecordingDialog extends AbstractStartRecordingDialog {
 
         return (
             <Dialog
-                okDisabled = { this.isStartRecordingDisabled() }
+                ok = {{
-                okKey = 'dialog.startRecording'
+                    translationKey: 'dialog.startRecording',
+                    disabled: this.isStartRecordingDisabled()
+                }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.startRecording'
+                titleKey = 'dialog.startRecording'>
-                width = 'small'>
                 <StartRecordingDialogContent
                     fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
                     fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }

react/features/recording/components/Recording/web/StopRecordingDialog.js

@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
+import Dialog from '../../../../base/ui/components/web/Dialog';
 import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture';
 import AbstractStopRecordingDialog, {
     type Props,
@@ -29,10 +29,9 @@ class StopRecordingDialog extends AbstractStopRecordingDialog<Props> {
 
         return (
             <Dialog
-                okKey = 'dialog.confirm'
+                ok = {{ translationKey: 'dialog.confirm' }}
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.recording'
+                titleKey = 'dialog.recording'>
-                width = 'small'>
                 {t(localRecordingVideoStop ? 'recording.localRecordingVideoStop' : 'dialog.stopRecordingWarning') }
             </Dialog>
         );

react/features/screen-share/components/ShareAudioDialog.tsx

@@ -1,20 +1,15 @@
-/* eslint-disable lines-around-comment */
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
-// @ts-ignore
+import { IState } from '../../app/types';
-import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
-import {
+import { updateSettings } from '../../base/settings/actions';
-    shouldHideShareAudioHelper,
+import { shouldHideShareAudioHelper } from '../../base/settings/functions.any';
-    updateSettings
+import { toggleScreensharing } from '../../base/tracks/actions';
-    // @ts-ignore
-} from '../../base/settings';
-// @ts-ignore
-import { toggleScreensharing } from '../../base/tracks';
 import Checkbox from '../../base/ui/components/web/Checkbox';
+import Dialog from '../../base/ui/components/web/Dialog';
 
 /**
  * The type of the React {@code Component} props of {@link ShareAudioDialog}.
@@ -83,11 +78,11 @@ class ShareAudioDialog extends Component<Props> {
 
         return (
             <Dialog
-                hideCancelButton = { false }
+                className = 'share-audio-dialog-container'
-                okKey = { t('dialog.shareAudio') }
+                ok = {{ translationKey: 'dialog.shareAudio' }}
                 onSubmit = { this._onContinue }
-                titleKey = { t('dialog.shareAudioTitle') }
+                size = 'large'
-                width = { 'medium' } >
+                titleKey = { t('dialog.shareAudioTitle') }>
                 <div className = 'share-audio-dialog'>
                     <img
                         className = 'share-audio-animation'
@@ -107,11 +102,11 @@ class ShareAudioDialog extends Component<Props> {
 /**
  * Maps part of the Redux state to the props of this component.
  *
- * @param {Object} state - The Redux state.
+ * @param {IState} state - The Redux state.
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: Object): Partial<Props> {
+function _mapStateToProps(state: IState): Partial<Props> {
 
     return {
         _shouldHideShareAudioHelper: shouldHideShareAudioHelper(state)