chore: Show datasets when search input is empty (#12391)

superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx

@@ -81,19 +81,24 @@ describe('ChangeDatasourceModal', () => {
   });
 
   it('fetches datasources', async () => {
-    expect(fetchMock.calls(/api\/v1\/dataset/)).toHaveLength(6);
+    expect(fetchMock.calls(/api\/v1\/dataset/)).toHaveLength(3);
   });
 
   it('renders confirmation message', async () => {
+    await waitForComponentToPaint(wrapper, 1000);
+
     act(() => {
       wrapper.find('[data-test="datasource-link"]').at(0).props().onClick();
     });
+
     await waitForComponentToPaint(wrapper);
 
     expect(wrapper.find('.proceed-btn')).toExist();
   });
 
   it('changes the datasource', async () => {
+    await waitForComponentToPaint(wrapper, 1000);
+
     act(() => {
       wrapper.find('[data-test="datasource-link"]').at(0).props().onClick();
     });

superset-frontend/src/common/components/Modal/Modal.tsx

@@ -41,11 +41,13 @@ interface ModalProps {
   centered?: boolean;
   footer?: React.ReactNode;
   wrapProps?: object;
+  height?: string;
 }
 
 interface StyledModalProps extends SupersetThemeProps {
   maxWidth?: string;
   responsive?: boolean;
+  height?: string;
 }
 
 export const StyledModal = styled(BaseModal)<StyledModalProps>`
@@ -87,6 +89,7 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
   .ant-modal-body {
     padding: ${({ theme }) => theme.gridUnit * 4}px;
     overflow: auto;
+    ${({ height }) => height && `height: ${height};`}
   }
 
   .ant-modal-footer {

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -25,7 +25,7 @@ import React, {
 } from 'react';
 import { Alert, FormControl, FormControlProps } from 'react-bootstrap';
 import { SupersetClient, t, styled } from '@superset-ui/core';
-import TableView from 'src/components/TableView';
+import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import StyledModal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import { useListViewResource } from 'src/views/CRUD/hooks';
@@ -120,9 +120,9 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
 
   useDebouncedEffect(
     () => {
-      if (filter) {
-        fetchData({
-          ...emptyRequest,
+      fetchData({
+        ...emptyRequest,
+        ...(filter && {
           filters: [
             {
               id: 'table_name',
@@ -130,8 +130,8 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
               value: filter,
             },
           ],
-        });
-      }
+        }),
+      });
     },
     1000,
     [filter],
@@ -142,9 +142,6 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
       if (searchRef && searchRef.current) {
         searchRef.current.focus();
       }
-
-      // Fetch initial datasets for tableview
-      await fetchData(emptyRequest);
     };
 
     if (show) {
@@ -224,6 +221,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
       onHide={onHide}
       responsive
       title={t('Change Dataset')}
+      height="350px"
       footer={
         <>
           {confirmChange && (
@@ -268,6 +266,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
                 data={renderTableView()}
                 pageSize={20}
                 className="table-condensed"
+                emptyWrapperType={EmptyWrapperType.Small}
               />
             )}
           </>