Prompt DS modal when the user adds the first panel to a dashboard (#66911)

* Prompt DS modal when the user adds the first panel to a dashboard

* Rename state prop and use toggle

* Change modal size

* Avoid flickering for dashboard modal when changing number of results

* When editing panel 1, only display when new dashboard

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -8,6 +8,7 @@ import { usePopper } from 'react-popper';
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { DataSourceJsonData } from '@grafana/schema';
 import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
+import config from 'app/core/config';
 
 import { DataSourceList } from './DataSourceList';
 import { DataSourceLogo, DataSourceLogoPlaceHolder } from './DataSourceLogo';
@@ -157,7 +158,7 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
       </div>
 
       <div className={styles.footer}>
-        {onClickAddCSV && (
+        {onClickAddCSV && config.featureToggles.editPanelCSVDragAndDrop && (
           <Button variant="secondary" size="sm" onClick={clickAddCSVCallback}>
             Add csv or spreadsheet
           </Button>

public/app/features/datasources/components/picker/DataSourceModal.tsx

@@ -43,10 +43,10 @@ export function DataSourceModal({
       closeOnBackdropClick={true}
       isOpen={true}
       className={styles.modal}
+      contentClassName={styles.modalContent}
       onClickBackdrop={onDismiss}
       onDismiss={onDismiss}
     >
-      <div className={styles.modalContent}>
       <div className={styles.leftColumn}>
         <Input
           className={styles.searchInput}
@@ -60,8 +60,7 @@ export function DataSourceModal({
             dashboard={false}
             mixed={false}
             variables
-              // FIXME: Filter out the grafana data source in a hacky way
-              filter={(ds) => ds.name.toLowerCase().includes(search.toLowerCase()) && ds.name !== '-- Grafana --'}
+            filter={(ds) => ds.name.includes(search) && !ds.meta.builtIn}
             onChange={onChange}
             current={current}
           />
@@ -102,7 +101,6 @@ export function DataSourceModal({
           </LinkButton>
         </div>
       </div>
-      </div>
     </Modal>
   );
 }
@@ -112,12 +110,12 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
     modal: css`
       width: 80%;
       height: 80%;
+      max-width: 1200px;
+      max-height: 900px;
     `,
     modalContent: css`
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
-      align-items: stretch;
       height: 100%;
     `,
     leftColumn: css`
@@ -133,7 +131,6 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       flex-direction: column;
       width: 50%;
       height: 100%;
-      padding: ${theme.spacing(1)};
       justify-items: space-evenly;
       align-items: stretch;
       padding-left: ${theme.spacing(1)};

public/app/features/query/components/QueryGroup.tsx

@@ -15,13 +15,14 @@ import {
   PanelData,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { getDataSourceSrv, locationService } from '@grafana/runtime';
 import { Button, CustomScrollbar, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import config from 'app/core/config';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { addQuery, queryIsEmpty } from 'app/core/utils/query';
 import * as DFImport from 'app/features/dataframe-import';
+import { DataSourceModal } from 'app/features/datasources/components/picker/DataSourceModal';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
@@ -51,6 +52,7 @@ interface State {
   isLoadingHelp: boolean;
   isPickerOpen: boolean;
   isAddingMixed: boolean;
+  isDataSourceModalOpen: boolean;
   data: PanelData;
   isHelpOpen: boolean;
   defaultDataSource?: DataSourceApi;
@@ -69,6 +71,7 @@ export class QueryGroup extends PureComponent<Props, State> {
   querySubscription: Unsubscribable | null = null;
 
   state: State = {
+    isDataSourceModalOpen: false,
     isLoadingHelp: false,
     helpContent: null,
     isPickerOpen: false,
@@ -116,6 +119,11 @@ export class QueryGroup extends PureComponent<Props, State> {
           dataSource: { ...options.dataSource },
           savedQueryUid: options.savedQueryUid,
         },
+        // TODO: Detect the first panel added into a new dashboard better.
+        // This is flaky in case the UID is generated differently
+        isDataSourceModalOpen:
+          locationService.getLocation().pathname === '/dashboard/new' &&
+          locationService.getSearchObject().editPanel === '1',
       });
     } catch (error) {
       console.log('failed to load data source', error);
@@ -213,24 +221,7 @@ export class QueryGroup extends PureComponent<Props, State> {
           <InlineFormLabel htmlFor="data-source-picker" width={'auto'}>
             Data source
           </InlineFormLabel>
-          <div className={styles.dataSourceRowItem}>
-            <DataSourcePicker
-              onChange={this.onChangeDataSource}
-              current={options.dataSource}
-              metrics={true}
-              mixed={true}
-              dashboard={true}
-              variables={true}
-              enableFileUpload={config.featureToggles.editPanelCSVDragAndDrop}
-              fileUploadOptions={{
-                onDrop: this.onFileDrop,
-                maxSize: DFImport.maxFileSize,
-                multiple: false,
-                accept: DFImport.acceptedFiles,
-              }}
-              onClickAddCSV={this.onClickAddCSV}
-            />
-          </div>
+          <div className={styles.dataSourceRowItem}>{this.renderDataSourcePickerWithPrompt()}</div>
           {dataSource && (
             <>
               <div className={styles.dataSourceRowItem}>
@@ -290,6 +281,42 @@ export class QueryGroup extends PureComponent<Props, State> {
     );
   };
 
+  renderDataSourcePickerWithPrompt = () => {
+    const { isDataSourceModalOpen } = this.state;
+
+    const commonProps = {
+      enableFileUpload: config.featureToggles.editPanelCSVDragAndDrop,
+      fileUploadOptions: {
+        onDrop: this.onFileDrop,
+        maxSize: DFImport.maxFileSize,
+        multiple: false,
+        accept: DFImport.acceptedFiles,
+      },
+      current: this.props.options.dataSource,
+      onChange: (ds: DataSourceInstanceSettings) => {
+        this.onChangeDataSource(ds);
+        this.setState({ isDataSourceModalOpen: false });
+      },
+    };
+    const onDismiss = () => this.setState({ isDataSourceModalOpen: false });
+
+    return (
+      <>
+        {isDataSourceModalOpen && config.featureToggles.advancedDataSourcePicker && (
+          <DataSourceModal {...commonProps} onDismiss={onDismiss}></DataSourceModal>
+        )}
+        <DataSourcePicker
+          {...commonProps}
+          metrics={true}
+          mixed={true}
+          dashboard={true}
+          variables={true}
+          onClickAddCSV={this.onClickAddCSV}
+        />
+      </>
+    );
+  };
+
   onAddMixedQuery = (datasource: any) => {
     this.onAddQuery({ datasource: datasource.name });
     this.setState({ isAddingMixed: false });