ref(salesforce) Use new Dialog component (#12400)

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

@@ -20,6 +20,7 @@ import StartRecordingDialog from '../../recording/components/Recording/web/Start
 import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
 // @ts-ignore
 import RemoteControlAuthorizationDialog from '../../remote-control/components/RemoteControlAuthorizationDialog';
+import SalesforceLinkDialog from '../../salesforce/components/web/SalesforceLinkDialog';
 import ShareAudioDialog from '../../screen-share/components/ShareAudioDialog';
 import ShareScreenWarningDialog from '../../screen-share/components/ShareScreenWarningDialog';
 import SecurityDialog from '../../security/components/security-dialog/web/SecurityDialog';
@@ -48,7 +49,7 @@ const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNam
     SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
     GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
     VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
-    LogoutDialog ];
+    LogoutDialog, SalesforceLinkDialog ];
 
 // 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/ui/components/web/Dialog.tsx

@@ -173,6 +173,11 @@ const useStyles = makeStyles()((theme: Theme) => {
 });
 
 interface DialogProps {
+    back?: {
+        hidden?: boolean;
+        onClick?: () => void;
+        translationKey?: string;
+    };
     cancel?: {
         hidden?: boolean;
         translationKey?: string;
@@ -181,6 +186,7 @@ interface DialogProps {
     className?: string;
     description?: string;
     disableBackdropClose?: boolean;
+    disableEnter?: boolean;
     hideCloseButton?: boolean;
     ok?: {
         disabled?: boolean;
@@ -195,12 +201,14 @@ interface DialogProps {
 }
 
 const Dialog = ({
+    back = { hidden: true },
     cancel = { translationKey: 'dialog.Cancel' },
     children,
     className,
     description,
     disableBackdropClose,
     hideCloseButton,
+    disableEnter,
     ok = { translationKey: 'dialog.Ok' },
     onCancel,
     onSubmit,
@@ -227,7 +235,7 @@ const Dialog = ({
         if (e.key === 'Escape') {
             onClose();
         }
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !disableEnter) {
             submit();
         }
     }, []);
@@ -269,6 +277,12 @@ const Dialog = ({
                 </div>
                 <div className = { classes.content }>{children}</div>
                 <div className = { classes.footer }>
+                    {!back.hidden && <Button
+                        accessibilityLabel = { t(back.translationKey ?? '') }
+                        labelKey = { back.translationKey }
+                        // eslint-disable-next-line react/jsx-handler-names
+                        onClick = { back.onClick }
+                        type = 'secondary' />}
                     {!cancel.hidden && <Button
                         accessibilityLabel = { t(cancel.translationKey ?? '') }
                         labelKey = { cancel.translationKey }

react/features/salesforce/components/web/SalesforceLinkDialog.tsx

@@ -6,13 +6,12 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-// @ts-ignore
-import { Dialog } from '../../../base/dialog';
 import { hideDialog } from '../../../base/dialog/actions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconSearch } from '../../../base/icons/svg';
 import { getFieldValue } from '../../../base/react/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import Dialog from '../../../base/ui/components/web/Dialog';
 import { NOTES_MAX_LENGTH } from '../../constants';
 // @ts-ignore
 import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
@@ -254,16 +253,19 @@ function SalesforceLinkDialog() {
 
     return (
         <Dialog
+            back = {{
+                hidden: !selectedRecord,
+                onClick: () => setSelectedRecord(null),
+                translationKey: 'dialog.Back'
+            }}
+            cancel = {{ hidden: true }}
             disableEnter = { true }
-            disableFooter = { !selectedRecord }
+            ok = {{
-            height = { 'medium' }
+                translationKey: 'dialog.linkMeeting',
-            okDisabled = { !selectedRecord }
+                hidden: !selectedRecord
-            okKey = 'dialog.linkMeeting'
+            }}
-            /* eslint-disable-next-line react/jsx-no-bind */
-            onDecline = { () => setSelectedRecord(null) }
             onSubmit = { handleSubmit }
-            titleKey = 'dialog.linkMeetingTitle'
+            titleKey = 'dialog.linkMeetingTitle'>
-            width = { 'small' }>
             <div className = { classes.container } >
                 {renderRecordsSearch()}
                 {renderContent()}