From 4e95dbf0e5b8f73e9308305831ed63adf64eaa09 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 25 Apr 2017 09:15:15 -0700
Subject: [PATCH] fix(device-selection): do not create a dropdown menu if
 disabled

AtlasKit DropdownMenu cannot be disabled, unlike Single Select.
The result is the isDisabled prop was not being honored. The
workaround is returning only the trigger element for the dropdown
and styling it to look like the dropdown is disabled. The text
for disabled device selection was changed along the way to fit
into the trigger.
---
 .../device-selection/_device-selection.scss   |  6 +++++
 lang/main.json                                |  3 +--
 .../components/DeviceSelector.js              | 24 ++++++++++++-------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss
index 128975bf5..ab1428856 100644
--- a/css/modals/device-selection/_device-selection.scss
+++ b/css/modals/device-selection/_device-selection.scss
@@ -36,6 +36,12 @@
                 background-color: rgba(9,30,66,.08);
             }
         }
+        .device-selector-trigger-disabled {
+            .device-selector-trigger {
+                color: #a5adba;
+                cursor: default;
+            }
+        }
 
         .device-selector-trigger-text {
             overflow: hidden;
diff --git a/lang/main.json b/lang/main.json
index 6ef74e6c3..2ce2bb640 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -149,7 +149,6 @@
         "selectAudioOutput": "Audio output",
         "followMe": "Everyone follows me",
         "noDevice": "None",
-        "noPermission": "Permission to use device is not granted",
         "cameraAndMic": "Camera and microphone",
         "moderator": "MODERATOR",
         "password": "SET PASSWORD",
@@ -423,7 +422,7 @@
     "deviceSelection": {
         "currentlyVideoMuted": "Video is currently muted",
         "deviceSettings": "Device settings",
-        "noOtherDevices": "No other devices available",
+        "noPermission": "Permission not granted",
         "selectADevice": "Select a device",
         "testAudio": "Test sound"
     },
diff --git a/react/features/device-selection/components/DeviceSelector.js b/react/features/device-selection/components/DeviceSelector.js
index c82df9f2b..4b5263ece 100644
--- a/react/features/device-selection/components/DeviceSelector.js
+++ b/react/features/device-selection/components/DeviceSelector.js
@@ -138,13 +138,15 @@ class DeviceSelector extends Component {
     }
 
     /**
-     * Creates a AKDropdownMenu Component using passed in props and options.
+     * Creates a AKDropdownMenu Component using passed in props and options. If
+     * the dropdown needs to be disabled, then only the AKDropdownMenu trigger
+     * element is returned to simulate a disabled state.
      *
      * @param {Object} options - Additional configuration for display.
      * @param {Object} options.defaultSelected - The option that should be set
      * as currently chosen.
-     * @param {boolean} options.isDisabled - If true, AKDropdownMenu will not
-     * open on click.
+     * @param {boolean} options.isDisabled - If true, only the AKDropdownMenu
+     * trigger component will be returned to simulate a disabled dropdown.
      * @param {Array} options.items - All the selectable options to display.
      * @param {string} options.placeholder - The translation key to display when
      * no selection has been made.
@@ -155,16 +157,22 @@ class DeviceSelector extends Component {
         const triggerText
             = (options.defaultSelected && options.defaultSelected.content)
                 || options.placeholder;
+        const trigger = this._createDropdownTrigger(triggerText);
+
+        if (options.isDisabled) {
+            return (
+                <div className = 'device-selector-trigger-disabled'>
+                    { trigger }
+                </div>
+            );
+        }
 
         return (
             <AKDropdownMenu
-                { ...(options.isDisabled && { isOpen: !options.isDisabled }) }
                 items = { [ { items: options.items || [] } ] }
-                noMatchesFound
-                    = { this.props.t('deviceSelection.noOtherDevices') }
                 onItemActivated = { this._onSelect }
                 shouldFitContainer = { true }>
-                { this._createDropdownTrigger(triggerText) }
+                { trigger }
             </AKDropdownMenu>
         );
     }
@@ -208,7 +216,7 @@ class DeviceSelector extends Component {
     _renderNoPermission() {
         return this._createDropdown({
             isDisabled: true,
-            placeholder: this.props.t('settings.noPermission')
+            placeholder: this.props.t('deviceSelection.noPermission')
         });
     }
 }