From e9a8bc8b2e9a2fc1fe67b7092af25620b43cdffa Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 15 Jun 2023 11:50:27 -0400
Subject: [PATCH] [v10.0.x] DS Picker: Support width and hide label (#70180)

DS Picker: Support `width` and `hideTextValue` (#70074)

(cherry picked from commit 5b97670f11bc81d9ba5eead237af4b6204bbd3d8)

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
---
 .../datasources/components/picker/DataSourceDropdown.tsx    | 6 +++---
 public/app/features/datasources/components/picker/types.ts  | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
index f6b96e79f39..3ea10beef02 100644
--- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
@@ -31,7 +31,7 @@ const INTERACTION_ITEM = {
 };
 
 export function DataSourceDropdown(props: DataSourceDropdownProps) {
-  const { current, onChange, ...restProps } = props;
+  const { current, onChange, hideTextValue, width, ...restProps } = props;
 
   const [isOpen, setOpen] = useState(false);
   const [inputHasFocus, setInputHasFocus] = useState(false);
@@ -107,7 +107,7 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
   const styles = useStyles2(getStylesDropdown);
 
   return (
-    <div className={styles.container} data-testid={selectors.components.DataSourcePicker.container}>
+    <div className={styles.container} data-testid={selectors.components.DataSourcePicker.container} style={{ width }}>
       {/* This clickable div is just extending the clickable area on the input element to include the prefix and suffix. */}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div className={styles.trigger} onClick={openDropdown}>
@@ -122,7 +122,7 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
             )
           }
           suffix={<Icon name={isOpen ? 'search' : 'angle-down'} />}
-          placeholder={dataSourceLabel(currentDataSourceInstanceSettings)}
+          placeholder={hideTextValue ? '' : dataSourceLabel(currentDataSourceInstanceSettings)}
           onClick={openDropdown}
           onFocus={() => {
             setInputHasFocus(true);
diff --git a/public/app/features/datasources/components/picker/types.ts b/public/app/features/datasources/components/picker/types.ts
index 0358f227b41..562026ecc84 100644
--- a/public/app/features/datasources/components/picker/types.ts
+++ b/public/app/features/datasources/components/picker/types.ts
@@ -12,6 +12,8 @@ export interface DataSourceDropdownProps {
   fileUploadOptions?: DropzoneOptions;
   onClickAddCSV?: () => void;
   recentlyUsed?: string[];
+  hideTextValue?: boolean;
+  width?: number;
 }
 
 export interface PickerContentProps extends DataSourceDropdownProps {