Filter owners select by text input (#9337)

* filter owners select by text input

* use rison

* fix backend owners filter logic

* use fullname, not username on owners inputs

* fix some tests

* fixing tests

* deterministic tests

* appease linter

* add back search by username

* more comprehensive filter test

* add clarifying text

* formatting...

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -28,7 +28,8 @@ import {
 } from 'react-bootstrap';
 // @ts-ignore
 import Dialog from 'react-bootstrap-dialog';
-import Select from 'react-select';
+import { Async as SelectAsync, Option } from 'react-select';
+import rison from 'rison';
 import { t } from '@superset-ui/translation';
 import { SupersetClient, Json } from '@superset-ui/connection';
 import Chart from 'src/types/Chart';
@@ -70,7 +71,6 @@ export default function PropertiesModalWrapper({
 function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
   const [submitting, setSubmitting] = useState(false);
   const errorDialog = useRef<any>(null);
-  const [ownerOptions, setOwnerOptions] = useState(null);
 
   // values of form inputs
   const [name, setName] = useState(slice.slice_name || '');
@@ -78,7 +78,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
   const [cacheTimeout, setCacheTimeout] = useState(
     slice.cache_timeout != null ? slice.cache_timeout : '',
   );
-  const [owners, setOwners] = useState<any[] | null>(null);
+  const [owners, setOwners] = useState<Option[] | null>(null);
 
   function showError({ error, statusText }: any) {
     errorDialog.current.show({
@@ -90,7 +90,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
     });
   }
 
-  async function fetchOwners() {
+  async function fetchChartData() {
     try {
       const response = await SupersetClient.get({
         endpoint: `/api/v1/chart/${slice.slice_id}`,
@@ -99,7 +99,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
       setOwners(
         chart.owners.map((owner: any) => ({
           value: owner.id,
-          label: owner.username,
+          label: `${owner.first_name} ${owner.last_name}`,
         })),
       );
     } catch (response) {
@@ -110,34 +110,41 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
 
   // get the owners of this slice
   useEffect(() => {
-    fetchOwners();
+    fetchChartData();
   }, []);
 
-  // get the list of users who can own a chart
-  useEffect(() => {
-    SupersetClient.get({
-      endpoint: `/api/v1/chart/related/owners`,
-    }).then(res => {
-      const { result } = res.json as Json;
-      setOwnerOptions(
-        result.map((item: any) => ({
+  const loadOptions = (input = '') => {
+    const query = rison.encode({ filter: input });
+    return SupersetClient.get({
+      endpoint: `/api/v1/chart/related/owners?q=${query}`,
+    }).then(
+      response => {
+        const { result } = response.json as Json;
+        const options = result.map((item: any) => ({
           value: item.value,
           label: item.text,
-        })),
-      );
-    });
-  }, []);
+        }));
+        return { options };
+      },
+      badResponse => {
+        getClientErrorObject(badResponse).then(showError);
+        return { options: [] };
+      },
+    );
+  };
 
   const onSubmit = async (event: React.FormEvent) => {
     event.stopPropagation();
     event.preventDefault();
     setSubmitting(true);
-    const payload = {
+    const payload: { [key: string]: any } = {
       slice_name: name || null,
       description: description || null,
       cache_timeout: cacheTimeout || null,
-      owners: owners!.map(o => o.value),
     };
+    if (owners) {
+      payload.owners = owners.map(o => o.value);
+    }
     try {
       const res = await SupersetClient.put({
         endpoint: `/api/v1/chart/${slice.slice_id}`,
@@ -229,17 +236,19 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
               <label className="control-label" htmlFor="owners">
                 {t('Owners')}
               </label>
-              <Select
-                name="owners"
+              <SelectAsync
                 multi
-                isLoading={!ownerOptions}
-                value={owners}
-                options={ownerOptions || []}
+                name="owners"
+                value={owners || []}
+                loadOptions={loadOptions}
                 onChange={setOwners}
-                disabled={!owners || !ownerOptions}
+                disabled={!owners}
+                filterOption={() => true} // options are filtered at the api
               />
               <p className="help-block">
-                {t('A list of users who can alter the chart')}
+                {t(
+                  'A list of users who can alter the chart. Searchable by name or username.',
+                )}
               </p>
             </FormGroup>
           </Col>