Device manager - updated dropdown style in filtered device list (PSG-689) (#9226)

* add FilterDropdown wrapper on Dropdown for filter styles

* test and fix strict errors

* fix comment

src/components/views/elements/Dropdown.tsx

@@ -68,7 +68,7 @@ class MenuOption extends React.Component<IMenuOptionProps> {
     }
 }
 
-interface IProps {
+export interface DropdownProps {
     id: string;
     // ARIA label
     label: string;
@@ -108,13 +108,13 @@ interface IState {
  * but somewhat simpler as react-select is 79KB of minified
  * javascript.
  */
-export default class Dropdown extends React.Component<IProps, IState> {
+export default class Dropdown extends React.Component<DropdownProps, IState> {
     private readonly buttonRef = createRef<HTMLDivElement>();
     private dropdownRootElement: HTMLDivElement = null;
     private ignoreEvent: MouseEvent = null;
     private childrenByKey: Record<string, ReactNode> = {};
 
-    constructor(props: IProps) {
+    constructor(props: DropdownProps) {
         super(props);
 
         this.reindexChildren(this.props.children);

src/components/views/elements/FilterDropdown.tsx

@@ -0,0 +1,86 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon as CheckmarkIcon } from '../../../../res/img/element-icons/roomlist/checkmark.svg';
+import Dropdown, { DropdownProps } from './Dropdown';
+
+export type FilterDropdownOption<FilterKeysType extends string> = {
+    id: FilterKeysType;
+    label: string;
+    description?: string;
+};
+type FilterDropdownProps<FilterKeysType extends string> = Omit<DropdownProps, 'children'> & {
+    value: FilterKeysType;
+    options: FilterDropdownOption<FilterKeysType>[];
+    // A label displayed before the selected value
+    // in the dropdown input
+    selectedLabel?: string;
+};
+
+const getSelectedFilterOptionComponent = <FilterKeysType extends string>(
+    options: FilterDropdownOption<FilterKeysType>[], selectedLabel?: string,
+) => (filterKey: FilterKeysType) => {
+        const option = options.find(({ id }) => id === filterKey);
+        if (!option) {
+            return null;
+        }
+        if (selectedLabel) {
+            return `${selectedLabel}: ${option.label}`;
+        }
+        return option.label;
+    };
+
+/**
+ * Dropdown styled for list filtering
+ */
+export const FilterDropdown = <FilterKeysType extends string = string>(
+    {
+        value,
+        options,
+        selectedLabel,
+        className,
+        ...restProps
+    }: FilterDropdownProps<FilterKeysType>,
+): React.ReactElement<FilterDropdownProps<FilterKeysType>> => {
+    return <Dropdown
+        {...restProps}
+        value={value}
+        className={classNames('mx_FilterDropdown', className)}
+        getShortOption={getSelectedFilterOptionComponent<FilterKeysType>(options, selectedLabel)}
+    >
+        { options.map(({ id, label, description }) =>
+            <div
+                className='mx_FilterDropdown_option'
+                data-testid={`filter-option-${id}`}
+                key={id}
+            >
+                { id === value && <CheckmarkIcon className='mx_FilterDropdown_optionSelectedIcon' /> }
+                <span className='mx_FilterDropdown_optionLabel'>
+                    { label }
+                </span>
+                {
+                    !!description
+                    && <span
+                        className='mx_FilterDropdown_optionDescription'
+                    >{ description }</span>
+                }
+            </div>,
+        ) }
+    </Dropdown>;
+};