feat(explore): allow opening charts with missing dataset (#12705)

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

@@ -26,6 +26,8 @@ import Icon from 'src/components/Icon';
 import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
 import DatasourceModal from 'src/datasource/DatasourceModal';
 import { postForm } from 'src/explore/exploreUtils';
+import Button from 'src/components/Button';
+import ErrorAlert from 'src/components/ErrorMessage/ErrorAlert';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -51,6 +53,9 @@ const Styles = styled.div`
     border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
     padding: ${({ theme }) => 2 * theme.gridUnit}px;
   }
+  .error-alert {
+    margin: ${({ theme }) => 2 * theme.gridUnit}px;
+  }
   .ant-dropdown-trigger {
     margin-left: ${({ theme }) => 2 * theme.gridUnit}px;
     box-shadow: none;
@@ -152,6 +157,7 @@ class DatasourceControl extends React.PureComponent {
   render() {
     const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
     const { datasource, onChange } = this.props;
+    const isMissingDatasource = datasource;
     const datasourceMenu = (
       <Menu onClick={this.handleMenuItemClick}>
         {this.props.isEditable && (
@@ -164,16 +170,22 @@ class DatasourceControl extends React.PureComponent {
       </Menu>
     );
 
-    // eslint-disable-next-line camelcase
     const { health_check_message: healthCheckMessage } = datasource;
 
     return (
       <Styles className="DatasourceControl">
         <div className="data-container">
           <Icon name="dataset-physical" className="dataset-svg" />
-          <Tooltip title={datasource.name}>
-            <span className="title-select">{datasource.name}</span>
-          </Tooltip>
+          {/* Add a tooltip only for long dataset names */}
+          {!isMissingDatasource && datasource.name.length > 25 ? (
+            <Tooltip title={datasource.name}>
+              <span className="title-select">{datasource.name}</span>
+            </Tooltip>
+          ) : (
+            <span title={datasource.name} className="title-select">
+              {datasource.name}
+            </span>
+          )}
           {healthCheckMessage && (
             <Tooltip title={healthCheckMessage}>
               <Icon
@@ -196,6 +208,35 @@ class DatasourceControl extends React.PureComponent {
             </Tooltip>
           </Dropdown>
         </div>
+        {/* missing dataset */}
+        {isMissingDatasource && (
+          <div className="error-alert">
+            <ErrorAlert
+              level="warning"
+              title={t('Missing dataset')}
+              source="explore"
+              subtitle={
+                <>
+                  <p>
+                    {t(
+                      'The dataset linked to this chart may have been deleted.',
+                    )}
+                  </p>
+                  <p>
+                    <Button
+                      buttonStyle="primary"
+                      onClick={() =>
+                        this.handleMenuItemClick({ key: CHANGE_DATASET })
+                      }
+                    >
+                      {t('Change dataset')}
+                    </Button>
+                  </p>
+                </>
+              }
+            />
+          </div>
+        )}
         {showEditDatasourceModal && (
           <DatasourceModal
             datasource={datasource}