Fix data source picker width issue (#33720)

* Fix data source picker width issue

* Use theme.spacing

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -125,14 +125,14 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
         <h3 className="page-heading">HTTP</h3>
         <div className="gf-form-group">
           <div className="gf-form">
-            <FormField label="URL" labelWidth={11} tooltip={urlTooltip} inputEl={urlInput} />
+            <FormField label="URL" labelWidth={13} tooltip={urlTooltip} inputEl={urlInput} />
           </div>
 
           {showAccessOptions && (
             <>
               <div className="gf-form-inline">
                 <div className="gf-form">
-                  <FormField label="Access" labelWidth={11} inputWidth={20} inputEl={accessSelect} />
+                  <FormField label="Access" labelWidth={13} inputWidth={20} inputEl={accessSelect} />
                 </div>
                 <div className="gf-form">
                   <label
@@ -151,13 +151,14 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
             <div className="gf-form-group">
               <div className="gf-form">
                 <InlineFormLabel
-                  width={11}
+                  width={13}
                   tooltip="Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source."
                 >
                   Whitelisted Cookies
                 </InlineFormLabel>
                 <TagsInput
                   tags={dataSourceConfig.jsonData.keepCookies}
+                  width={40}
                   onChange={(cookies) =>
                     onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
                   }
@@ -166,7 +167,8 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
               <div className="gf-form">
                 <FormField
                   label="Timeout"
-                  labelWidth={11}
+                  labelWidth={13}
+                  inputWidth={20}
                   tooltip="HTTP request timeout in seconds"
                   value={dataSourceConfig.jsonData.timeout}
                   onChange={(event) => {

packages/grafana-ui/src/components/TagsInput/TagsInput.tsx

@@ -1,8 +1,8 @@
 import React, { ChangeEvent, KeyboardEvent, FC, useState } from 'react';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { Button } from '../Button';
 import { TagItem } from './TagItem';
-import { useStyles } from '../../themes/ThemeContext';
+import { useStyles, useTheme2 } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';
 import { Input } from '../Input/Input';
 
@@ -10,11 +10,13 @@ export interface Props {
   placeholder?: string;
   tags?: string[];
   onChange: (tags: string[]) => void;
+  width?: number;
 }
 
-export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)', tags = [], onChange }) => {
+export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)', tags = [], onChange, width }) => {
   const [newTagName, setNewName] = useState('');
   const styles = useStyles(getStyles);
+  const theme = useTheme2();
 
   const onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     setNewName(event.target.value);
@@ -39,27 +41,26 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
   };
 
   return (
-    <div className={styles.wrapper}>
+    <div className={cx(styles.wrapper, width ? css({ width: theme.spacing(width) }) : '')}>
-      <div className={styles.tags}>
+      <div className={tags?.length ? styles.tags : undefined}>
         {tags?.map((tag: string, index: number) => {
           return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />;
         })}
       </div>
-      <div>
+
-        <Input
+      <Input
-          placeholder={placeholder}
+        placeholder={placeholder}
-          onChange={onNameChange}
+        onChange={onNameChange}
-          value={newTagName}
+        value={newTagName}
-          onKeyUp={onKeyboardAdd}
+        onKeyUp={onKeyboardAdd}
-          suffix={
+        suffix={
-            newTagName.length > 0 && (
+          newTagName.length > 0 && (
-              <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
+            <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
-                Add
+              Add
-              </Button>
+            </Button>
-            )
+          )
-          }
+        }
-        />
+      />
-      </div>
     </div>
   );
 };

public/app/core/components/TraceToLogsSettings.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import {
   DataSourceJsonData,
   DataSourcePluginOptionsEditorProps,
@@ -5,8 +6,7 @@ import {
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
-import { InlineFormLabel, TagsInput, useStyles } from '@grafana/ui';
+import { InlineField, InlineFieldRow, TagsInput, useStyles } from '@grafana/ui';
-import { css } from '@emotion/css';
 import React from 'react';
 
 export interface TraceToLogsOptions {
@@ -24,43 +24,49 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
   const styles = useStyles(getStyles);
 
   return (
-    <>
+    <div className={css({ width: '100%' })}>
       <h3 className="page-heading">Trace to logs</h3>
 
       <div className={styles.infoText}>
         Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log.
       </div>
 
-      <div className="gf-form">
+      <InlineFieldRow>
-        <InlineFormLabel tooltip="The data source the trace is going to navigate to">Data source</InlineFormLabel>
+        <InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
-        <DataSourcePicker
+          <DataSourcePicker
-          pluginId="loki"
+            pluginId="loki"
-          current={options.jsonData.tracesToLogs?.datasourceUid}
+            current={options.jsonData.tracesToLogs?.datasourceUid}
-          noDefault={true}
+            noDefault={true}
-          onChange={(ds) =>
+            width={40}
-            updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
+            onChange={(ds) =>
-              datasourceUid: ds.uid,
+              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
-              tags: options.jsonData.tracesToLogs?.tags,
+                datasourceUid: ds.uid,
-            })
+                tags: options.jsonData.tracesToLogs?.tags,
-          }
+              })
-        />
+            }
-      </div>
+          />
+        </InlineField>
+      </InlineFieldRow>
 
-      <div className="gf-form">
+      <InlineFieldRow>
-        <InlineFormLabel tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'">
+        <InlineField
-          Tags
+          tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'"
-        </InlineFormLabel>
+          label="Tags"
-        <TagsInput
+          labelWidth={26}
-          tags={options.jsonData.tracesToLogs?.tags}
+        >
-          onChange={(tags) =>
+          <TagsInput
-            updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
+            tags={options.jsonData.tracesToLogs?.tags}
-              datasourceUid: options.jsonData.tracesToLogs?.datasourceUid,
+            width={40}
-              tags: tags,
+            onChange={(tags) =>
-            })
+              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
-          }
+                datasourceUid: options.jsonData.tracesToLogs?.datasourceUid,
-        />
+                tags: tags,
-      </div>
+              })
-    </>
+            }
+          />
+        </InlineField>
+      </InlineFieldRow>
+    </div>
   );
 }
 

public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx

@@ -43,6 +43,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
             tracing={true}
             current={value.datasourceUid}
             noDefault={true}
+            width={40}
             onChange={(ds) =>
               onChange({
                 datasourceUid: ds.uid,