From 7d4c51459f4abce8cc23b1dcfb24757e65b18120 Mon Sep 17 00:00:00 2001
From: Andreas Opferkuch <andreas.opferkuch@gmail.com>
Date: Fri, 29 Jan 2021 17:19:15 +0100
Subject: [PATCH] TagsInput: Make placeholder configurable (#30718)

PLUS
- width prop isn't actually used and thus might give users of this component the wrong idea, so I removed it from the type (and in `DataSourceHttpSettings`)
- Added storybook props table
---
 .../components/DataSourceSettings/DataSourceHttpSettings.tsx | 1 -
 packages/grafana-ui/src/components/TagsInput/TagsInput.mdx   | 3 +++
 packages/grafana-ui/src/components/TagsInput/TagsInput.tsx   | 5 +++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 9bec3fe354e..373eb4f9de7 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -160,7 +160,6 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
                 onChange={(cookies) =>
                   onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
                 }
-                width={20}
               />
             </div>
           )}
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
index 409e7814f8b..92d0649a8b4 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
@@ -6,3 +6,6 @@ import { TagsInput } from './TagsInput';
 # TagsInput
 
 A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
+
+### Props
+<Props of={TagsInput} />
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 14dd3a009e3..1025cc18fb8 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -6,8 +6,8 @@ import { Input } from '../Forms/Legacy/Input/Input';
 import { TagItem } from './TagItem';
 
 interface Props {
+  placeholder?: string;
   tags?: string[];
-  width?: number;
 
   onChange: (tags: string[]) => void;
 }
@@ -80,6 +80,7 @@ export class TagsInput extends PureComponent<Props, State> {
   };
 
   render() {
+    const { placeholder = 'Add name' } = this.props;
     const { tags, newTag } = this.state;
 
     const getStyles = stylesFactory(() => ({
@@ -104,7 +105,7 @@ export class TagsInput extends PureComponent<Props, State> {
             `
           )}
         >
-          <Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
+          <Input placeholder={placeholder} onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
           <Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md">
             Add
           </Button>