Add description text on providers selector

frontend/src/Settings/Providers/components.tsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from "react";
 import { Button, Col, Container, Row } from "react-bootstrap";
+import { components } from "react-select";
+import { SelectComponents } from "react-select/src/components";
 import {
   BaseModal,
   Selector,
@@ -215,6 +217,23 @@ export const ProviderModal: FunctionComponent = () => {
     );
   }, [info]);
 
+  const selectorComponents = useMemo<
+    Partial<SelectComponents<ProviderInfo, false>>
+  >(
+    () => ({
+      Option: ({ data, ...other }) => {
+        const { label, value } = data as SelectorOption<ProviderInfo>;
+        return (
+          <components.Option data={data} {...other}>
+            {label}
+            <p className="small m-0 text-muted">{value.description}</p>
+          </components.Option>
+        );
+      },
+    }),
+    []
+  );
+
   return (
     <BaseModal title="Provider" footer={footer} modalKey={ModalKey}>
       <StagedChangesContext.Provider value={[staged, setChange]}>
@@ -222,6 +241,7 @@ export const ProviderModal: FunctionComponent = () => {
           <Row>
             <Col>
               <Selector
+                components={selectorComponents}
                 disabled={payload !== null}
                 options={options}
                 value={info}

frontend/src/components/inputs/Selector.tsx

@@ -1,6 +1,7 @@
 import { isArray } from "lodash";
 import React, { useCallback, useMemo } from "react";
 import ReactSelect from "react-select";
+import { SelectComponents } from "react-select/src/components";
 import "./selector.scss";
 
 export interface SelectorProps<T, M extends boolean> {
@@ -15,6 +16,7 @@ export interface SelectorProps<T, M extends boolean> {
   label?: (item: T) => string;
   defaultValue?: SelectorValueType<T, M>;
   value?: SelectorValueType<T, M>;
+  components?: Partial<SelectComponents<T, M>>;
 }
 
 export function Selector<T = string, M extends boolean = false>(
@@ -31,6 +33,7 @@ export function Selector<T = string, M extends boolean = false>(
     multiple,
     onChange,
     defaultValue,
+    components,
     value,
   } = props;
 
@@ -83,6 +86,7 @@ export function Selector<T = string, M extends boolean = false>(
       isClearable={clearable}
       isDisabled={disabled}
       options={options}
+      components={components}
       className={`custom-selector w-100 ${className ?? ""}`}
       classNamePrefix="selector"
       onChange={(v) => {