feat: Add toast for successful table or schema refreshes in Sqllab (#…

…18169)

* save

* add use redux to test

* update test for db selector

* add condition for refresh only

superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx

@@ -169,14 +169,14 @@ beforeEach(() => {
 
 test('Should render', async () => {
   const props = createProps();
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
   expect(await screen.findByTestId('DatabaseSelector')).toBeInTheDocument();
 });
 
 test('Refresh should work', async () => {
   const props = createProps();
 
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
 
   const select = screen.getByRole('combobox', {
     name: 'Select schema or type schema name',
@@ -211,7 +211,7 @@ test('Refresh should work', async () => {
 
 test('Should database select display options', async () => {
   const props = createProps();
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
     name: 'Select database or type database name',
   });
@@ -222,7 +222,7 @@ test('Should database select display options', async () => {
 
 test('Should schema select display options', async () => {
   const props = createProps();
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
     name: 'Select schema or type schema name',
   });
@@ -238,7 +238,7 @@ test('Should schema select display options', async () => {
 
 test('Sends the correct db when changing the database', async () => {
   const props = createProps();
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
     name: 'Select database or type database name',
   });
@@ -259,7 +259,7 @@ test('Sends the correct db when changing the database', async () => {
 
 test('Sends the correct schema when changing the schema', async () => {
   const props = createProps();
-  render(<DatabaseSelector {...props} />);
+  render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
     name: 'Select schema or type schema name',
   });

superset-frontend/src/components/DatabaseSelector/index.tsx

@@ -23,6 +23,7 @@ import { Select } from 'src/components';
 import Label from 'src/components/Label';
 import { FormLabel } from 'src/components/Form';
 import RefreshLabel from 'src/components/RefreshLabel';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
 
 const DatabaseSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -144,7 +145,7 @@ export default function DatabaseSelector({
     schema ? { label: schema, value: schema } : undefined,
   );
   const [refresh, setRefresh] = useState(0);
-
+  const { addSuccessToast } = useToasts();
   const loadDatabases = useMemo(
     () =>
       async (
@@ -224,6 +225,7 @@ export default function DatabaseSelector({
           }
           setSchemaOptions(options);
           setLoadingSchemas(false);
+          if (refresh > 0) addSuccessToast('List refreshed');
         })
         .catch(() => {
           setLoadingSchemas(false);

superset-frontend/src/components/TableSelector/TableSelector.test.tsx

@@ -52,7 +52,7 @@ beforeAll(() => {
 
 test('renders with default props', async () => {
   const props = createProps();
-  render(<TableSelector {...props} />);
+  render(<TableSelector {...props} />, { useRedux: true });
   const databaseSelect = screen.getByRole('combobox', {
     name: 'Select database or type database name',
   });
@@ -71,7 +71,7 @@ test('renders with default props', async () => {
 
 test('renders table options', async () => {
   const props = createProps();
-  render(<TableSelector {...props} />);
+  render(<TableSelector {...props} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
     name: 'Select table or type table name',
   });
@@ -86,7 +86,7 @@ test('renders table options', async () => {
 
 test('renders disabled without schema', async () => {
   const props = createProps();
-  render(<TableSelector {...props} schema={undefined} />);
+  render(<TableSelector {...props} schema={undefined} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
     name: 'Select table or type table name',
   });

superset-frontend/src/components/TableSelector/index.tsx

@@ -33,6 +33,7 @@ import DatabaseSelector, {
 import RefreshLabel from 'src/components/RefreshLabel';
 import CertifiedBadge from 'src/components/CertifiedBadge';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
 
 const TableSelectorWrapper = styled.div`
   ${({ theme }) => `
@@ -167,6 +168,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   const [previousRefresh, setPreviousRefresh] = useState(0);
   const [loadingTables, setLoadingTables] = useState(false);
   const [tableOptions, setTableOptions] = useState<TableOption[]>([]);
+  const { addSuccessToast } = useToasts();
 
   useEffect(() => {
     // reset selections
@@ -212,6 +214,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           setTableOptions(options);
           setCurrentTable(currentTable);
           setLoadingTables(false);
+          if (forceRefresh) addSuccessToast('List updated');
         })
         .catch(e => {
           setLoadingTables(false);