From b844a9f06b41f45d8035799ab1d122ea3090d6c4 Mon Sep 17 00:00:00 2001
From: mmoanis <mohamed_moanis@outlook.com>
Date: Sat, 24 Nov 2018 12:50:09 +0100
Subject: [PATCH] Abstract the DialogWithTabs title so it can be reused with
 other components

---
 .../base/dialog/components/DialogWithTabs.web.js | 16 +++++++++++++---
 react/features/settings/DeviceSelectionPopup.js  |  4 +++-
 .../settings/components/web/SettingsDialog.js    |  4 +++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/react/features/base/dialog/components/DialogWithTabs.web.js b/react/features/base/dialog/components/DialogWithTabs.web.js
index a9e62cb6a..bc422c4a8 100644
--- a/react/features/base/dialog/components/DialogWithTabs.web.js
+++ b/react/features/base/dialog/components/DialogWithTabs.web.js
@@ -18,6 +18,11 @@ export type Props = {
      */
     closeDialog: Function,
 
+    /**
+     * Css class name that will be added to the dialog.
+     */
+    cssClassName: string,
+
     /**
      * Which settings tab should be initially displayed. If not defined then
      * the first tab will be displayed.
@@ -44,7 +49,12 @@ export type Props = {
     /**
      * Information about the tabs that will be rendered.
      */
-    tabs: Array<Object>
+    tabs: Array<Object>,
+
+    /**
+     * Key to use for showing a title.
+     */
+    titleKey: string
 
 };
 
@@ -102,8 +112,8 @@ class DialogWithTabs extends Component<Props, State> {
                     = { this.props.disableBlanketClickDismiss }
                 onCancel = { onCancel }
                 onSubmit = { this._onSubmit }
-                titleKey = 'settings.title'>
-                <div className = 'settings-dialog'>
+                titleKey = { this.props.titleKey } >
+                <div className = { this.props.cssClassName } >
                     { this._renderTabs() }
                 </div>
             </StatelessDialog>
diff --git a/react/features/settings/DeviceSelectionPopup.js b/react/features/settings/DeviceSelectionPopup.js
index 29f61b084..6c947bfcf 100644
--- a/react/features/settings/DeviceSelectionPopup.js
+++ b/react/features/settings/DeviceSelectionPopup.js
@@ -262,13 +262,15 @@ export default class DeviceSelectionPopup {
                 <AtlasKitThemeProvider mode = 'dark'>
                     <DialogWithTabs
                         closeDialog = { this.close }
+                        cssClassName = 'settings-dialog'
                         onSubmit = { onSubmit }
                         tabs = { [ {
                             component: DeviceSelection,
                             label: 'settings.devices',
                             props: this._dialogProps,
                             submit: this._onSubmit
-                        } ] } />
+                        } ] }
+                        titleKey = 'settings.title' />
                 </AtlasKitThemeProvider>
             </I18nextProvider>,
             document.getElementById('react'));
diff --git a/react/features/settings/components/web/SettingsDialog.js b/react/features/settings/components/web/SettingsDialog.js
index 853b9a467..402159bfa 100644
--- a/react/features/settings/components/web/SettingsDialog.js
+++ b/react/features/settings/components/web/SettingsDialog.js
@@ -91,11 +91,13 @@ class SettingsDialog extends Component<Props> {
         return (
             <DialogWithTabs
                 closeDialog = { this._closeDialog }
+                cssClassName = 'settings-dialog'
                 defaultTab = {
                     defaultTabIdx === -1 ? undefined : defaultTabIdx
                 }
                 onSubmit = { onSubmit }
-                tabs = { tabs } />
+                tabs = { tabs }
+                titleKey = 'settings.title' />
         );
     }