add search to pulse slack recipient picker (#8454)

* add search to pulse slack recipient picker

* rm unnecessary brackets

* add fuzzy search and pin attachment for Select

* allow searchFuzzy and searcCaseInsensitive combo

frontend/src/metabase/components/Select.jsx

@@ -36,8 +36,11 @@ class BrowserSelect extends Component {
     children: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
     value: PropTypes.any,
+
     searchProp: PropTypes.string,
     searchCaseInsensitive: PropTypes.bool,
+    searchFuzzy: PropTypes.bool,
+
     isInitiallyOpen: PropTypes.bool,
     placeholder: PropTypes.string,
     // NOTE - @kdoh
@@ -58,6 +61,7 @@ class BrowserSelect extends Component {
     height: 320,
     rowHeight: 40,
     multiple: false,
+    searchFuzzy: true,
   };
 
   isSelected(otherValue) {
@@ -80,6 +84,7 @@ class BrowserSelect extends Component {
       onChange,
       searchProp,
       searchCaseInsensitive,
+      searchFuzzy,
       isInitiallyOpen,
       placeholder,
       triggerElement,
@@ -98,15 +103,20 @@ class BrowserSelect extends Component {
       selectedNames = [placeholder];
     }
 
-    const { inputValue } = this.state;
+    let { inputValue } = this.state;
     let filter = () => true;
     if (searchProp && inputValue) {
       filter = child => {
         let childValue = String(child.props[searchProp] || "");
         if (!inputValue) {
           return false;
-        } else if (searchCaseInsensitive) {
-          return childValue.toLowerCase().startsWith(inputValue.toLowerCase());
+        }
+        if (searchCaseInsensitive) {
+          childValue = childValue.toLowerCase();
+          inputValue = inputValue.toLowerCase();
+        }
+        if (searchFuzzy) {
+          return childValue.indexOf(inputValue) >= 0;
         } else {
           return childValue.startsWith(inputValue);
         }
@@ -144,6 +154,11 @@ class BrowserSelect extends Component {
             </SelectButton>
           )
         }
+        pinInitialAttachment={
+          // keep the popover from jumping around one its been opened,
+          // this can happen when filtering items via search
+          true
+        }
         triggerClasses={className}
         verticalAttachments={["top", "bottom"]}
         isInitiallyOpen={isInitiallyOpen}

frontend/src/metabase/pulse/components/PulseEditChannels.jsx

@@ -9,7 +9,7 @@ import RecipientPicker from "./RecipientPicker.jsx";
 
 import SchedulePicker from "metabase/components/SchedulePicker.jsx";
 import ActionButton from "metabase/components/ActionButton.jsx";
-import Select from "metabase/components/Select.jsx";
+import Select, { Option } from "metabase/components/Select.jsx";
 import Toggle from "metabase/components/Toggle.jsx";
 import Icon from "metabase/components/Icon.jsx";
 import ChannelSetupMessage from "metabase/components/ChannelSetupMessage";
@@ -158,19 +158,24 @@ export default class PulseEditChannels extends Component {
             <span className="h4 text-bold mr1">{field.displayName}</span>
             {field.type === "select" ? (
               <Select
-                className="h4 text-bold bg-white"
+                className="h4 text-bold bg-white inline-block"
                 value={channel.details && channel.details[field.name]}
-                options={field.options}
-                optionNameFn={o => o}
-                optionValueFn={o => o}
+                placeholder={t`Pick a user or channel...`}
+                searchProp="name"
                 // Address #5799 where `details` object is missing for some reason
                 onChange={o =>
                   this.onChannelPropertyChange(index, "details", {
                     ...channel.details,
-                    [field.name]: o,
+                    [field.name]: o.target.value,
                   })
                 }
-              />
+              >
+                {field.options.map(option => (
+                  <Option name={option} value={option}>
+                    {option}
+                  </Option>
+                ))}
+              </Select>
             ) : null}
           </div>
         ))}