Improve DS Advance Picker to give user context about the built in DS and CTA (#68203)

* Add description to DS built-in list of items

* Open the new DS view in a new tab

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

@@ -25,6 +25,7 @@ export function AddNewDataSourceButton({ variant, onClick }: AddNewDataSourceBut
       disabled={!hasCreateRights}
       tooltip={!hasCreateRights ? 'You do not have permission to configure new data sources' : undefined}
       onClick={onClick}
+      target="_blank"
     >
       Configure a new data source
     </LinkButton>

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
+
+import { useDatasources } from '../../hooks';
+
+import { DataSourceCard } from './DataSourceCard';
+
+const CUSTOM_DESCRIPTIONS_BY_UID: Record<string, string> = {
+  grafana: 'Discover visualizations using mock data',
+  '-- Mixed --': 'Use multiple data sources',
+  '-- Dashboard --': 'Reuse query results from other visualizations',
+};
+
+interface BuiltInDataSourceListProps {
+  className?: string;
+  current: DataSourceRef | string | null | undefined;
+  onChange: (ds: DataSourceInstanceSettings) => void;
+}
+
+export function BuiltInDataSourceList({ className, current, onChange }: BuiltInDataSourceListProps) {
+  const grafanaDataSources = useDatasources({ mixed: true, dashboard: true, filter: (ds) => !!ds.meta.builtIn });
+
+  return (
+    <div className={className}>
+      {grafanaDataSources.map((ds) => {
+        return (
+          <DataSourceCard
+            key={ds.id}
+            ds={ds}
+            description={CUSTOM_DESCRIPTIONS_BY_UID[ds.uid]}
+            selected={current === ds.id}
+            onClick={() => onChange(ds)}
+          />
+        );
+      })}
+    </div>
+  );
+}

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

@@ -8,9 +8,10 @@ interface DataSourceCardProps {
   ds: DataSourceInstanceSettings;
   onClick: () => void;
   selected: boolean;
+  description?: string;
 }
 
-export function DataSourceCard({ ds, onClick, selected, ...htmlProps }: DataSourceCardProps) {
+export function DataSourceCard({ ds, onClick, selected, description, ...htmlProps }: DataSourceCardProps) {
   const styles = useStyles2(getStyles);
 
   return (
@@ -24,7 +25,7 @@ export function DataSourceCard({ ds, onClick, selected, ...htmlProps }: DataSour
         <div className={styles.headingContent}>
           <span className={styles.name}>{ds.name}</span>
           <span className={styles.separator}>|</span>
-          <small className={styles.type}>{ds.meta.name}</small>
+          <small className={styles.type}>{description || ds.meta.name}</small>
         </div>
       </Card.Heading>
       <Card.Figure className={styles.logo}>

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

@@ -17,6 +17,7 @@ import {
 import * as DFImport from 'app/features/dataframe-import';
 
 import { AddNewDataSourceButton } from './AddNewDataSourceButton';
+import { BuiltInDataSourceList } from './BuiltInDataSourceList';
 import { DataSourceList } from './DataSourceList';
 import { matchDataSourceWithSearch } from './utils';
 
@@ -116,11 +117,8 @@ export function DataSourceModal({
       </div>
       <div className={styles.rightColumn}>
         <div className={styles.builtInDataSources}>
-          <DataSourceList
+          <BuiltInDataSourceList
             className={styles.builtInDataSourceList}
-            filter={(ds) => !!ds.meta.builtIn}
-            dashboard
-            mixed
             onChange={onChangeDataSource}
             current={current}
           />
@@ -147,7 +145,8 @@ export function DataSourceModal({
             </FileDropzone>
           )}
         </div>
-        <div className={styles.dsCTAs}>
+        <div className={styles.newDSSection}>
+          <span className={styles.newDSDescription}>Open a new tab and configure a data source</span>
           <AddNewDataSourceButton
             variant="secondary"
             onClick={() => {
@@ -228,11 +227,19 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
     builtInDataSourceList: css`
       margin-bottom: ${theme.spacing(4)};
     `,
-    dsCTAs: css`
+    newDSSection: css`
       display: flex;
       flex-direction: row;
       width: 100%;
-      justify-content: flex-end;
+      justify-content: space-between;
+      align-items: center;
+    `,
+    newDSDescription: css`
+      flex: 1 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      color: ${theme.colors.text.secondary};
 
       ${theme.breakpoints.down('md')} {
         padding-bottom: ${theme.spacing(3)};