SQL Datasources: Reinstate SQL data source behavior around database selection when default configured databases already exist

docs/sources/datasources/mssql/query-editor/index.md

@@ -87,12 +87,12 @@ Code mode supports autocompletion of tables, columns, SQL keywords, standard SQL
 
 In **Builder mode**, you can build queries using a visual interface.
 
-### Select a dataset and table
+### Dataset and table selection
 
-In the **Dataset** dropdown, select the MS SQL database to query.
+In the **Dataset** dropdown, select the MSSQL database to query. Grafana populates the dropdown with all databases that the user can access.
+Once you select a database, Grafana populates the dropdown with all available tables.
 
-Grafana populates the dropdown with the databases that the configured user can access.
-When you select a dataset, Grafana populates the **Table** dropdown with available tables.
+**Note:** If a default database has been configured through the Data Source Configuration page (or through a provisioning configuration file), the user will only be able to use that single preconfigured database for querying.
 
 ### Select columns and aggregation functions (SELECT)
 

docs/sources/datasources/mysql/_index.md

@@ -183,6 +183,8 @@ The response from MySQL can be formatted as either a table or as a time series.
 In the dataset dropdown, choose the MySQL database to query. The dropdown is be populated with the databases that the user has access to.
 When the dataset is selected, the table dropdown is populated with the tables that are available.
 
+**Note:** If a default database has been configured through the Data Source Configuration page (or through a provisioning configuration file), the user will only be able to use that single preconfigured database for querying.
+
 ### Columns and Aggregation functions (SELECT)
 
 Using the dropdown, select a column to include in the data. You can also specify an optional aggregation function.

docs/sources/datasources/postgres/_index.md

@@ -88,18 +88,18 @@ Make sure the user does not get any unwanted privileges from the public role.
 
 ## Query builder
 
-{{< figure src="/static/img/docs/v92/postgresql_query_builder.png" class="docs-image--no-shadow" caption="PostgreSQL query builder" >}}
+{{< figure src="/static/img/docs/screenshot-postgres-query-editor.png" class="docs-image--no-shadow" caption="PostgreSQL query builder" >}}
 
 The PostgreSQL query builder is available when editing a panel using a PostgreSQL data source. The built query can be run by pressing the `Run query` button in the top right corner of the editor.
 
 ### Format
 
 The response from PostgreSQL can be formatted as either a table or as a time series. To use the time series format one of the columns must be named `time`.
 
-### Dataset and Table selection
+### Dataset and table selection
 
-In the dataset dropdown, choose the PostgreSQL database to query. The dropdown is be populated with the databases that the user has access to.
-When the dataset is selected, the table dropdown is populated with the tables that are available.
+The dataset dropdown will be populated with the configured database to which the user has access.
+The table dropdown is populated with the tables that are available within that database.
 
 ### Columns and Aggregation functions (SELECT)
 

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -63,6 +63,7 @@ Some stable features are enabled by default. You can disable a stable feature by
 | `enableElasticsearchBackendQuerying` | Enable the processing of queries and responses in the Elasticsearch data source through backend                                                                                              |
 | `faroDatasourceSelector`             | Enable the data source selector within the Frontend Apps section of the Frontend Observability                                                                                               |
 | `enableDatagridEditing`              | Enables the edit functionality in the datagrid panel                                                                                                                                         |
+| `sqlDatasourceDatabaseSelection`     | Enables previous SQL data source dataset dropdown behavior                                                                                                                                   |
 
 ## Alpha feature toggles
 

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -97,5 +97,6 @@ export interface FeatureToggles {
   opensearchDetectVersion?: boolean;
   faroDatasourceSelector?: boolean;
   enableDatagridEditing?: boolean;
+  sqlDatasourceDatabaseSelection?: boolean;
   extraThemes?: boolean;
 }

pkg/api/frontendsettings.go

@@ -365,6 +365,16 @@ func (hs *HTTPServer) getFSDataSources(c *contextmodel.ReqContext, availablePlug
 			}
 		}
 
+		// Update `jsonData.database` for outdated provisioned SQL datasources created WITHOUT the `jsonData` object in their configuaration.
+		// In these cases, the `Database` value is defined (if at all) on the root level of the provisioning config object.
+		// This is done for easier warning/error checking on the front end.
+		if (ds.Type == datasources.DS_MSSQL) || (ds.Type == datasources.DS_MYSQL) || (ds.Type == datasources.DS_POSTGRES) {
+			// Only update if the value isn't already assigned.
+			if dsDTO.JSONData["database"] == nil || dsDTO.JSONData["database"] == "" {
+				dsDTO.JSONData["database"] = ds.Database
+			}
+		}
+
 		if (ds.Type == datasources.DS_INFLUXDB) || (ds.Type == datasources.DS_ES) {
 			dsDTO.Database = ds.Database
 		}

pkg/services/featuremgmt/registry.go

@@ -532,6 +532,13 @@ var (
 			State:        FeatureStateBeta,
 			Owner:        grafanaBiSquad,
 		},
+		{
+			Name:         "sqlDatasourceDatabaseSelection",
+			Description:  "Enables previous SQL data source dataset dropdown behavior",
+			FrontendOnly: true,
+			State:        FeatureStateBeta,
+			Owner:        grafanaBiSquad,
+		},
 		{
 			Name:         "extraThemes",
 			Description:  "Enables extra themes",

pkg/services/featuremgmt/toggles_gen.csv

@@ -78,4 +78,5 @@ advancedDataSourcePicker,stable,@grafana/dashboards-squad,false,false,false,true
 opensearchDetectVersion,alpha,@grafana/aws-plugins,false,false,false,true
 faroDatasourceSelector,beta,@grafana/app-o11y,false,false,false,true
 enableDatagridEditing,beta,@grafana/grafana-bi-squad,false,false,false,true
+sqlDatasourceDatabaseSelection,beta,@grafana/grafana-bi-squad,false,false,false,true
 extraThemes,alpha,@grafana/user-essentials,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -323,6 +323,10 @@ const (
 	// Enables the edit functionality in the datagrid panel
 	FlagEnableDatagridEditing = "enableDatagridEditing"
 
+	// FlagSqlDatasourceDatabaseSelection
+	// Enables previous SQL data source dataset dropdown behavior
+	FlagSqlDatasourceDatabaseSelection = "sqlDatasourceDatabaseSelection"
+
 	// FlagExtraThemes
 	// Enables extra themes
 	FlagExtraThemes = "extraThemes"

public/app/features/plugins/sql/components/DatasetSelector.tsx

@@ -1,52 +1,61 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useAsync } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
 import { DB, ResourceSelectorProps, toOption } from '../types';
 
-interface DatasetSelectorProps extends ResourceSelectorProps {
+import { isSqlDatasourceDatabaseSelectionFeatureFlagEnabled } from './QueryEditorFeatureFlag.utils';
+
+export interface DatasetSelectorProps extends ResourceSelectorProps {
   db: DB;
-  value: string | null;
-  applyDefault?: boolean;
-  disabled?: boolean;
+  dataset: string | undefined;
+  preconfiguredDataset: string;
+  isPostgresInstance: boolean | undefined;
   onChange: (v: SelectableValue) => void;
+  hasConfigIssue?: boolean;
 }
 
-export const DatasetSelector = ({ db, value, onChange, disabled, className, applyDefault }: DatasetSelectorProps) => {
+export const DatasetSelector = ({
+  dataset,
+  db,
+  isPostgresInstance,
+  onChange,
+  preconfiguredDataset,
+  hasConfigIssue,
+}: DatasetSelectorProps) => {
+  /* 
+    The behavior of this component - for MSSQL and MySQL datasources - is based on whether the user chose to create a datasource
+    with or without a default database (preconfiguredDataset). If the user configured a default database, this selector
+    should only allow that single preconfigured database option to be selected. If the user chose to NOT assign/configure a default database,
+    then the user should be able to use this component to choose between multiple databases available to the datasource.
+    NOTE: Postgres is NOT configured to be able to connect WITHOUT a default database, so if the datasource is Postgres (isPostgresInstance),
+    this component will become disabled.
+  */
+  // `hasPreconfigCondition` is true if either 1) the sql datasource has a preconfigured default database,
+  // OR if 2) the datasource is Postgres, in which case this component should be disabled by default.
+  const hasPreconfigCondition = !!preconfiguredDataset || isPostgresInstance;
+
   const state = useAsync(async () => {
+    if (isSqlDatasourceDatabaseSelectionFeatureFlagEnabled()) {
+      // If a default database is already configured for a MSSQL or MySQL data source, OR the data source is Postgres, no need to fetch other databases.
+      if (hasPreconfigCondition) {
+        return [toOption(preconfiguredDataset)];
+      }
+    }
+
     const datasets = await db.datasets();
     return datasets.map(toOption);
   }, []);
 
-  useEffect(() => {
-    if (!applyDefault) {
-      return;
-    }
-    // Set default dataset when values are fetched
-    if (!value) {
-      if (state.value && state.value[0]) {
-        onChange(state.value[0]);
-      }
-    } else {
-      if (state.value && state.value.find((v) => v.value === value) === undefined) {
-        // if value is set and newly fetched values does not contain selected value
-        if (state.value.length > 0) {
-          onChange(state.value[0]);
-        }
-      }
-    }
-  }, [state.value, value, applyDefault, onChange]);
-
   return (
     <Select
-      className={className}
       aria-label="Dataset selector"
-      value={value}
+      value={dataset}
       options={state.value}
       onChange={onChange}
-      disabled={disabled}
+      disabled={hasConfigIssue || state.loading}
       isLoading={state.loading}
       menuShouldPortal={true}
     />

public/app/features/plugins/sql/components/QueryEditor.tsx

@@ -3,23 +3,40 @@ import { useAsync } from 'react-use';
 
 import { QueryEditorProps } from '@grafana/data';
 import { EditorMode, Space } from '@grafana/experimental';
+import { Alert } from '@grafana/ui';
 
 import { SqlDatasource } from '../datasource/SqlDatasource';
 import { applyQueryDefaults } from '../defaults';
 import { SQLQuery, QueryRowFilter, SQLOptions } from '../types';
 import { haveColumns } from '../utils/sql.utils';
 
+import { isSqlDatasourceDatabaseSelectionFeatureFlagEnabled } from './QueryEditorFeatureFlag.utils';
 import { QueryHeader, QueryHeaderProps } from './QueryHeader';
 import { RawEditor } from './query-editor-raw/RawEditor';
 import { VisualEditor } from './visual-query-builder/VisualEditor';
 
-interface Props extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
-  queryHeaderProps?: Pick<QueryHeaderProps, 'isDatasetSelectorHidden'>;
+export interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
+  queryHeaderProps?: Pick<QueryHeaderProps, 'isPostgresInstance'>;
 }
 
-export function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, queryHeaderProps }: Props) {
+export function SqlQueryEditor({
+  datasource,
+  query,
+  onChange,
+  onRunQuery,
+  range,
+  queryHeaderProps,
+}: SqlQueryEditorProps) {
+  console.log(query, 'query');
+  console.log(datasource, 'datasource');
+  const [hasDatabaseConfigIssue, setHasDatabaseConfigIssue] = useState<boolean>(false);
+  const [hasNoPostgresDefaultDatabaseConfig, setHasNoPostgresDefaultDatabaseConfig] = useState<boolean>(false);
+
   const [isQueryRunnable, setIsQueryRunnable] = useState(true);
   const db = datasource.getDB();
+
+  const { preconfiguredDatabase } = datasource;
+  const isPostgresInstance = !!queryHeaderProps?.isPostgresInstance;
   const { loading, error } = useAsync(async () => {
     return () => {
       if (datasource.getDB(datasource.id).init !== undefined) {
@@ -28,6 +45,30 @@ export function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range,
     };
   }, [datasource]);
 
+  useEffect(() => {
+    if (isSqlDatasourceDatabaseSelectionFeatureFlagEnabled()) {
+      /*
+        If there is a preconfigured database (either through the provisioning config file, or the Data Source Configuration component),
+        AND there is also a previously-chosen dataset via the dataset selector dropdown, AND those 2 values DON'T match,
+        that means either 1) the preconfigured database changed/updated (updated either through provisioning or the GUI),
+        OR 2) there WASN'T a preconfigred database before, but there IS now (updated either through provisioning or the GUI).
+        In either case, we need to throw a warning to alert the user that something has changed.
+      */
+      if (!!preconfiguredDatabase && !!query.dataset && query.dataset !== preconfiguredDatabase) {
+        setHasDatabaseConfigIssue(true);
+      }
+
+      /*
+        If the data source is Postgres (Postgres data source Query Editors are passed a default prop `isPostgresInstance = true`),
+        then here test for a preconfigured database (either through provisioning or the GUI). Postgres REQUIRES a default database,
+        so throw the appropriate warning if none exists.
+      */
+      if (isPostgresInstance && !preconfiguredDatabase) {
+        setHasNoPostgresDefaultDatabaseConfig(true);
+      }
+    }
+  }, [datasource, isPostgresInstance, preconfiguredDatabase, query]);
+
   const queryWithDefaults = applyQueryDefaults(query);
   const [queryRowFilter, setQueryRowFilter] = useState<QueryRowFilter>({
     filter: !!queryWithDefaults.sql?.whereString,
@@ -72,21 +113,64 @@ export function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range,
     onChange(q);
   };
 
+  const resetQuery = () => {
+    const updatedQuery = {
+      ...query,
+      dataset: preconfiguredDatabase,
+      table: undefined,
+      sql: undefined,
+      rawSql: '',
+    };
+    onChange(updatedQuery);
+  };
+
   if (loading || error) {
     return null;
   }
 
   return (
     <>
+      {hasDatabaseConfigIssue && (
+        <Alert
+          severity="warning"
+          title="Default datasource update"
+          elevated={true}
+          onRemove={() => {
+            // Remove the warning, and reset state with the new database.
+            setHasDatabaseConfigIssue(false);
+            resetQuery();
+          }}
+          buttonContent="Update Database"
+        >
+          <span>
+            Your default database configuration has been modified. The previous database {<code>{query.dataset}</code>}{' '}
+            is no longer available, and has been updated to {<code>{preconfiguredDatabase}</code>}. Make note of the
+            query you have built before clicking <code>Update Database</code>. Clicking <code>Update Database</code>{' '}
+            will clear your previous query parameters.
+          </span>
+        </Alert>
+      )}
+
+      {hasNoPostgresDefaultDatabaseConfig && (
+        <Alert severity="error" title="Default datasource error" elevated={true}>
+          You do not currently have a default database configured for this data source. Postgres requires a default
+          database with which to connect. Please configure one through the Data Sources Configuration page, or if you
+          are using a provisioning file, update that configuration file with a default database.
+        </Alert>
+      )}
+
       <QueryHeader
         db={db}
+        preconfiguredDataset={preconfiguredDatabase}
         onChange={onQueryHeaderChange}
         onRunQuery={onRunQuery}
         onQueryRowChange={setQueryRowFilter}
         queryRowFilter={queryRowFilter}
         query={queryWithDefaults}
         isQueryRunnable={isQueryRunnable}
-        {...queryHeaderProps}
+        isPostgresInstance={isPostgresInstance}
+        // This will disable any downstream children buttons/dropdowns until the error/warning is handled.
+        hasConfigIssue={hasDatabaseConfigIssue || hasNoPostgresDefaultDatabaseConfig}
       />
 
       <Space v={0.5} />

public/app/features/plugins/sql/components/QueryEditorFeatureFlag.utils.ts

@@ -0,0 +1,5 @@
+import { config } from '@grafana/runtime';
+
+export const isSqlDatasourceDatabaseSelectionFeatureFlagEnabled = () => {
+  return !!config.featureToggles.sqlDatasourceDatabaseSelection;
+};