fix(explore): Restore missing dataset states (#22693)

superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx

@@ -18,10 +18,11 @@
  */
 
 import React from 'react';
-import { render, screen, act, waitFor } from 'spec/helpers/testing-library';
+import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import { DatasourceType, JsonObject, SupersetClient } from '@superset-ui/core';
-import fetchMock from 'fetch-mock';
+import { render, screen, act, waitFor } from 'spec/helpers/testing-library';
+import { fallbackExploreInitialData } from 'src/explore/fixtures';
 import DatasourceControl from '.';
 
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
@@ -395,3 +396,30 @@ test('should not set the temporal column', async () => {
     );
   });
 });
+
+test('should show missing params state', () => {
+  const props = createProps({ datasource: fallbackExploreInitialData.dataset });
+  render(<DatasourceControl {...props} />, { useRedux: true });
+  expect(screen.getByText(/missing dataset/i)).toBeVisible();
+  expect(screen.getByText(/missing url parameters/i)).toBeVisible();
+  expect(
+    screen.getByText(
+      /the url is missing the dataset_id or slice_id parameters\./i,
+    ),
+  ).toBeVisible();
+});
+
+test('should show missing dataset state', () => {
+  // @ts-ignore
+  delete window.location;
+  // @ts-ignore
+  window.location = { search: '?slice_id=152' };
+  const props = createProps({ datasource: fallbackExploreInitialData.dataset });
+  render(<DatasourceControl {...props} />, { useRedux: true });
+  expect(screen.getAllByText(/missing dataset/i)).toHaveLength(2);
+  expect(
+    screen.getByText(
+      /the dataset linked to this chart may have been deleted\./i,
+    ),
+  ).toBeVisible();
+});

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

@@ -267,11 +267,12 @@ class DatasourceControl extends React.PureComponent {
       showSaveDatasetModal,
     } = this.state;
     const { datasource, onChange, theme } = this.props;
-    const isMissingDatasource = datasource?.id == null;
+    const isMissingDatasource = !datasource?.id;
     let isMissingParams = false;
     if (isMissingDatasource) {
       const datasourceId = getUrlParam(URL_PARAMS.datasourceId);
       const sliceId = getUrlParam(URL_PARAMS.sliceId);
+
       if (!datasourceId && !sliceId) {
         isMissingParams = true;
       }
@@ -288,7 +289,7 @@ class DatasourceControl extends React.PureComponent {
 
     const defaultDatasourceMenu = (
       <Menu onClick={this.handleMenuItemClick}>
-        {this.props.isEditable && (
+        {this.props.isEditable && !isMissingDatasource && (
           <Menu.Item
             key={EDIT_DATASET}
             data-test="edit-dataset"
@@ -308,7 +309,7 @@ class DatasourceControl extends React.PureComponent {
           </Menu.Item>
         )}
         <Menu.Item key={CHANGE_DATASET}>{t('Swap dataset')}</Menu.Item>
-        {datasource && canAccessSqlLab && (
+        {!isMissingDatasource && canAccessSqlLab && (
           <Menu.Item key={VIEW_IN_SQL_LAB}>{t('View in SQL Lab')}</Menu.Item>
         )}
       </Menu>
@@ -358,7 +359,10 @@ class DatasourceControl extends React.PureComponent {
       }
     }
 
-    const titleText = getDatasourceTitle(datasource);
+    const titleText = isMissingDatasource
+      ? t('Missing dataset')
+      : getDatasourceTitle(datasource);
+
     const tooltip = titleText;
 
     return (