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
This commit is contained in:
Ivan Ortega Alba 2023-08-28 11:54:51 +02:00 committed by GitHub
parent 6c7b46ed1d
commit 7543a28ae2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 6 deletions

View File

@ -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 your existing data sources.
- Select one of the Grafana's [built-in special data sources]({{< relref "../../../datasources/#special-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" >}} {{< figure class="float-right" src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}}

View File

@ -19,11 +19,11 @@ export function AddNewDataSourceButton({ variant, onClick }: AddNewDataSourceBut
variant={variant || 'primary'} variant={variant || 'primary'}
href={newDataSourceURL} href={newDataSourceURL}
disabled={!hasCreateRights} 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} onClick={onClick}
target="_blank" target="_blank"
> >
Configure a new data source Connect data
</LinkButton> </LinkButton>
); );
} }

View File

@ -281,7 +281,7 @@ describe('DataSourceDropdown', () => {
await user.keyboard('foobarbaz'); //Search for a DS that should not exist 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 () => { it('should call onChange with the default query when add csv is clicked', async () => {

View File

@ -95,7 +95,7 @@ describe('DataSourceDropdown', () => {
await user.click(searchBox!); await user.click(searchBox!);
await user.keyboard('foobarbaz'); //Search for a DS that should not exist 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 () => { it('only displays the file drop area when the the ff is enabled', async () => {

View File

@ -167,6 +167,7 @@ export function DataSourceModal({
/> />
<CustomScrollbar> <CustomScrollbar>
<DataSourceList <DataSourceList
className={styles.dataSourceList}
onChange={onChangeDataSource} onChange={onChangeDataSource}
current={current} current={current}
onClickEmptyStateCTA={() => onClickEmptyStateCTA={() =>
@ -211,7 +212,7 @@ export function DataSourceModal({
)} )}
</div> </div>
<div className={styles.newDSSection}> <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 <AddNewDataSourceButton
variant="secondary" variant="secondary"
onClick={() => { onClick={() => {
@ -265,6 +266,10 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
overflow-y: auto; overflow-y: auto;
} }
`, `,
dataSourceList: css`
flex: 1 1;
height: 100%;
}`,
rightColumn: css` rightColumn: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;