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

                 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

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

     }
 
     /**
-     * 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.
         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>
         );
     }
     _renderNoPermission() {
         return this._createDropdown({
             isDisabled: true,
-            placeholder: this.props.t('settings.noPermission')
+            placeholder: this.props.t('deviceSelection.noPermission')
         });
     }
 }