Rename "Add new data source" to "Connect data" (#73688)

* DS Picker: Rename "Add new data source" to "Connect data"

* DS Picker: Center empty list CTA

docs/sources/dashboards/build-dashboards/create-dashboard/index.md

@@ -38,7 +38,7 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
 
    - Select one of your existing data sources.
    - Select one of the Grafana's [built-in special data sources]({{< relref "../../../datasources/#special-data-sources" >}}).
-   - Click **Configure a new data source** to set up a new one (Admins only).
+   - Click **Connect data** to set up a new one (Admins only).
 
    {{< figure class="float-right"  src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}}
 

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

@@ -19,11 +19,11 @@ export function AddNewDataSourceButton({ variant, onClick }: AddNewDataSourceBut
       variant={variant || 'primary'}
       href={newDataSourceURL}
       disabled={!hasCreateRights}
-      tooltip={!hasCreateRights ? 'You do not have permission to configure new data sources' : undefined}
+      tooltip={!hasCreateRights ? 'You do not have permission to add a new connection' : undefined}
       onClick={onClick}
       target="_blank"
     >
-      Configure a new data source
+      Connect data
     </LinkButton>
   );
 }

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

@@ -281,7 +281,7 @@ describe('DataSourceDropdown', () => {
 
       await user.keyboard('foobarbaz'); //Search for a DS that should not exist
 
-      expect(await screen.findByText('Configure a new data source')).toBeInTheDocument();
+      expect(await screen.findByText('Connect data')).toBeInTheDocument();
     });
 
     it('should call onChange with the default query when add csv is clicked', async () => {

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

@@ -95,7 +95,7 @@ describe('DataSourceDropdown', () => {
       await user.click(searchBox!);
       await user.keyboard('foobarbaz'); //Search for a DS that should not exist
 
-      expect(screen.queryAllByText('Configure a new data source')).toHaveLength(2);
+      expect(screen.queryAllByText('Connect data')).toHaveLength(2);
     });
 
     it('only displays the file drop area when the the ff is enabled', async () => {

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

@@ -167,6 +167,7 @@ export function DataSourceModal({
         />
         <CustomScrollbar>
           <DataSourceList
+            className={styles.dataSourceList}
             onChange={onChangeDataSource}
             current={current}
             onClickEmptyStateCTA={() =>
@@ -211,7 +212,7 @@ export function DataSourceModal({
           )}
         </div>
         <div className={styles.newDSSection}>
-          <span className={styles.newDSDescription}>Open a new tab and configure a data source</span>
+          <span className={styles.newDSDescription}>Open a new tab and configure a new connection</span>
           <AddNewDataSourceButton
             variant="secondary"
             onClick={() => {
@@ -265,6 +266,10 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
         overflow-y: auto;
       }
     `,
+    dataSourceList: css`
+      flex: 1 1;
+      height: 100%;
+    }`,
     rightColumn: css`
       display: flex;
       flex-direction: column;