fix: Explore "Change Dataset" UX Enhancements (#12006)

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -20,25 +20,53 @@ import React, {
   FunctionComponent,
   useState,
   useRef,
-  useMemo,
   useEffect,
+  useCallback,
 } from 'react';
 import { Alert, FormControl, FormControlProps } from 'react-bootstrap';
-import { SupersetClient, t } from '@superset-ui/core';
+import { SupersetClient, t, styled } from '@superset-ui/core';
 import TableView from 'src/components/TableView';
-import Modal from 'src/common/components/Modal';
+import StyledModal from 'src/common/components/Modal';
+import Button from 'src/components/Button';
+import { useListViewResource } from 'src/views/CRUD/hooks';
+import Dataset from 'src/types/Dataset';
+import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { getClientErrorObject } from '../utils/getClientErrorObject';
 import Loading from '../components/Loading';
 import withToasts from '../messageToasts/enhancers/withToasts';
 
+const CONFIRM_WARNING_MESSAGE = t(
+  'Warning! Changing the dataset may break the chart if the metadata (columns/metrics) does not exist in the target dataset',
+);
+
+interface Datasource {
+  type: string;
+  id: number;
+  uid: string;
+}
+
 interface ChangeDatasourceModalProps {
   addDangerToast: (msg: string) => void;
-  onChange: (id: number) => void;
+  addSuccessToast: (msg: string) => void;
+  onChange: (uid: string) => void;
   onDatasourceSave: (datasource: object, errors?: Array<any>) => {};
   onHide: () => void;
   show: boolean;
 }
 
+const ConfirmModalStyled = styled.div`
+  .btn-container {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0px 15px;
+    margin: 10px 0 0 0;
+  }
+
+  .confirm-modal-container {
+    margin: 9px;
+  }
+`;
+
 const TABLE_COLUMNS = [
   'name',
   'type',
@@ -47,86 +75,78 @@ const TABLE_COLUMNS = [
   'creator',
 ].map(col => ({ accessor: col, Header: col }));
 
-const TABLE_FILTERABLE = ['rawName', 'type', 'schema', 'connection', 'creator'];
 const CHANGE_WARNING_MSG = t(
   'Changing the dataset may break the chart if the chart relies ' +
     'on columns or metadata that does not exist in the target dataset',
 );
 
+const emptyRequest = {
+  pageIndex: 0,
+  pageSize: 20,
+  filters: [],
+  sortBy: [{ id: 'changed_on_delta_humanized' }],
+};
+
 const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
   addDangerToast,
+  addSuccessToast,
   onChange,
   onDatasourceSave,
   onHide,
   show,
 }) => {
-  const [datasources, setDatasources] = useState<any>(null);
   const [filter, setFilter] = useState<any>(undefined);
-  const [loading, setLoading] = useState(true);
+  const [confirmChange, setConfirmChange] = useState(false);
+  const [confirmedDataset, setConfirmedDataset] = useState<Datasource>();
   let searchRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    const selectDatasource = (datasource: any) => {
-      SupersetClient.get({
-        endpoint: `/datasource/get/${datasource.type}/${datasource.id}`,
-      })
-        .then(({ json }) => {
-          onDatasourceSave(json);
-          onChange(datasource.uid);
-        })
-        .catch(response => {
-          getClientErrorObject(response).then(
-            ({ error, message }: { error: any; message: string }) => {
-              const errorMessage = error
-                ? error.error || error.statusText || error
-                : message;
-              addDangerToast(errorMessage);
-            },
-          );
-        });
-      onHide();
-    };
+  const {
+    state: { loading, resourceCollection },
+    fetchData,
+  } = useListViewResource<Dataset>('dataset', t('dataset'), addDangerToast);
 
-    const onEnterModal = () => {
+  const selectDatasource = useCallback((datasource: Datasource) => {
+    setConfirmChange(true);
+    setConfirmedDataset(datasource);
+  }, []);
+
+  useDebouncedEffect(() => {
+    if (filter) {
+      fetchData({
+        ...emptyRequest,
+        filters: [
+          {
+            id: 'table_name',
+            operator: 'ct',
+            value: filter,
+          },
+        ],
+      });
+    }
+  }, 1000);
+
+  useEffect(() => {
+    const onEnterModal = async () => {
       if (searchRef && searchRef.current) {
         searchRef.current.focus();
       }
-      if (!datasources) {
-        SupersetClient.get({
-          endpoint: '/superset/datasources/',
-        })
-          .then(({ json }) => {
-            const data = json.map((ds: any) => ({
-              rawName: ds.name,
-              connection: ds.connection,
-              schema: ds.schema,
-              name: (
-                <a
-                  href="#"
-                  onClick={() => selectDatasource(ds)}
-                  className="datasource-link"
-                >
-                  {ds.name}
-                </a>
-              ),
-              type: ds.type,
-            }));
-            setLoading(false);
-            setDatasources(data);
-          })
-          .catch(response => {
-            setLoading(false);
-            getClientErrorObject(response).then(({ error }: any) => {
-              addDangerToast(error.error || error.statusText || error);
-            });
-          });
-      }
+
+      // Fetch initial datasets for tableview
+      await fetchData(emptyRequest);
     };
 
     if (show) {
       onEnterModal();
     }
-  }, [addDangerToast, datasources, onChange, onDatasourceSave, onHide, show]);
+  }, [
+    addDangerToast,
+    fetchData,
+    onChange,
+    onDatasourceSave,
+    onHide,
+    selectDatasource,
+    show,
+  ]);
 
   const setSearchRef = (ref: any) => {
     searchRef = ref;
@@ -135,21 +155,58 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
   const changeSearch = (
     event: React.FormEvent<FormControl & FormControlProps>,
   ) => {
-    setFilter((event.currentTarget?.value as string) ?? '');
+    const searchValue = (event.currentTarget?.value as string) ?? '';
+    setFilter(searchValue);
   };
 
-  const data = useMemo(
-    () =>
-      filter && datasources
-        ? datasources.filter((datasource: any) =>
-            TABLE_FILTERABLE.some(field => datasource[field]?.includes(filter)),
-          )
-        : datasources,
-    [datasources, filter],
-  );
+  const handleChangeConfirm = () => {
+    SupersetClient.get({
+      endpoint: `/datasource/get/${confirmedDataset?.type}/${confirmedDataset?.id}`,
+    })
+      .then(({ json }) => {
+        onDatasourceSave(json);
+        onChange(`${confirmedDataset?.id}__table`);
+      })
+      .catch(response => {
+        getClientErrorObject(response).then(
+          ({ error, message }: { error: any; message: string }) => {
+            const errorMessage = error
+              ? error.error || error.statusText || error
+              : message;
+            addDangerToast(errorMessage);
+          },
+        );
+      });
+    onHide();
+    addSuccessToast('Successfully changed datasource!');
+  };
+
+  const handlerCancelConfirm = () => {
+    setConfirmChange(false);
+  };
+
+  const renderTableView = () => {
+    const data = resourceCollection.map((ds: any) => ({
+      rawName: ds.table_name,
+      connection: ds.database.database_name,
+      schema: ds.schema,
+      name: (
+        <a
+          href="#"
+          onClick={() => selectDatasource({ type: 'table', ...ds })}
+          className="datasource-link"
+        >
+          {ds.table_name}
+        </a>
+      ),
+      type: ds.kind,
+    }));
+
+    return data;
+  };
 
   return (
-    <Modal
+    <StyledModal
       show={show}
       onHide={onHide}
       responsive
@@ -157,32 +214,53 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
       hideFooter
     >
       <>
-        <Alert bsStyle="warning">
-          <strong>{t('Warning!')}</strong> {CHANGE_WARNING_MSG}
-        </Alert>
-        <div>
-          <FormControl
-            inputRef={ref => {
-              setSearchRef(ref);
-            }}
-            type="text"
-            bsSize="sm"
-            value={filter}
-            placeholder={t('Search / Filter')}
-            onChange={changeSearch}
-          />
-        </div>
-        {loading && <Loading />}
-        {datasources && (
-          <TableView
-            columns={TABLE_COLUMNS}
-            data={data}
-            pageSize={20}
-            className="table-condensed"
-          />
+        {!confirmChange && (
+          <>
+            <Alert bsStyle="warning">
+              <strong>{t('Warning!')}</strong> {CHANGE_WARNING_MSG}
+            </Alert>
+            <div>
+              <FormControl
+                inputRef={ref => {
+                  setSearchRef(ref);
+                }}
+                type="text"
+                bsSize="sm"
+                value={filter}
+                placeholder={t('Search / Filter')}
+                onChange={changeSearch}
+              />
+            </div>
+            {loading && <Loading />}
+            {!loading && (
+              <TableView
+                columns={TABLE_COLUMNS}
+                data={renderTableView()}
+                pageSize={20}
+                className="table-condensed"
+              />
+            )}
+          </>
+        )}
+        {confirmChange && (
+          <ConfirmModalStyled>
+            <div className="confirm-modal-container">
+              {CONFIRM_WARNING_MESSAGE}
+              <div className="btn-container">
+                <Button onClick={handlerCancelConfirm}>Cancel</Button>
+                <Button
+                  className="proceed-btn"
+                  buttonStyle="primary"
+                  onClick={handleChangeConfirm}
+                >
+                  Proceed
+                </Button>
+              </div>
+            </div>
+          </ConfirmModalStyled>
         )}
       </>
-    </Modal>
+    </StyledModal>
   );
 };