Merge branch 'datasource-header-redesign' of github.com:grafana/grafana into datasource-header-redesign

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -17,7 +17,7 @@ export const Pages = {
     url: '/',
   },
   DataSource: {
-    name: 'Data source settings page name input field',
+    name: 'data-testid Data source settings page name input field',
     nameEditIcon: 'data-testid Data source settings page name edit icon button',
     delete: 'Data source settings page Delete button',
     readOnly: 'Data source settings page read only message',

public/app/features/connections/pages/EditDataSourcePage.tsx

@@ -9,5 +9,5 @@ export function EditDataSourcePage() {
   const params = new URLSearchParams(location.search);
   const pageId = params.get('page');
 
-  return <DataSourceTabPage uid={uid} pageId={pageId} navId="connections-connections-datasources" />;
+  return <DataSourceTabPage uid={uid} pageId={pageId} navId="connections-datasources" />;
 }

public/app/features/datasources/components/EditDataSourceTitle.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { IconButton, AutoSizeInput, useStyles2 } from '@grafana/ui';
+import { IconButton, useStyles2, Input } from '@grafana/ui';
 
 interface Props {
   dataSource: DataSourceSettings;
@@ -60,18 +60,17 @@ export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: P
         </div>
       ) : (
         <div className={styles.datasourceNameInput}>
-          <AutoSizeInput
+          <Input
             id="edit-data-source-name"
             type="text"
-            defaultValue={name}
+            value={name}
             placeholder="Name"
-            onCommitChange={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
-            minWidth={40}
-            maxWidth={80}
+            onChange={(evt: React.FormEvent<HTMLInputElement>) => setName(evt.currentTarget.value)}
+            onBlur={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
             required
             data-testid={selectors.pages.DataSource.name}
             autoFocus={isNameEditable}
-          ></AutoSizeInput>
+          ></Input>
         </div>
       )}
     </div>

public/app/features/datasources/components/useDataSourceInfo.tsx

@@ -21,11 +21,11 @@ export const useDataSourceInfo = (dataSourceInfo: DataSourceInfo): PageInfoItem[
 
   info.push({
     label: (
-      <Tooltip content={'The default data source is preselected in new panels'}>
-        <>
-          Default
-          <Icon className={styles.tooltip} name="exclamation-circle" />
-        </>
+      <Tooltip placement="top" content="The default data source is preselected in new panels." theme="info">
+        <div className="gf-form-help-icon gf-form-help-icon--right-normal">
+          Deault
+          <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
+        </div>
       </Tooltip>
     ),
     value: (