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.

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;

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"
     },

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')
         });
     }
 }