From 701bcd83f37a9ed83bb0ead10bf3363fcc0c3b6b Mon Sep 17 00:00:00 2001
From: Andriy <andriy.urbanas@grafana.com>
Date: Thu, 8 Aug 2024 13:11:18 +0200
Subject: [PATCH] feat: Auth: enable customizing label and placeholder for
 user/password inputs (#128)

---
 CHANGELOG.md                                     |  4 ++++
 package.json                                     |  2 +-
 .../Auth/auth-method/BasicAuth.test.tsx          | 13 +++++++++++++
 src/ConfigEditor/Auth/auth-method/BasicAuth.tsx  | 16 ++++++++++++----
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0848147..7fbc0e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## v1.8.0
+
+- Auth: add ability to customize labels and placeholders for user/password fields
+
 ## v1.7.13
 
 - Switched from "react-beautiful-dnd" to "@hello-pangea/dnd"
diff --git a/package.json b/package.json
index 81f44f3..29cfeb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grafana/experimental",
-  "version": "1.7.13",
+  "version": "1.8.0",
   "description": "Experimental Grafana components and APIs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx b/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
index 2fdf3b8..0855c84 100644
--- a/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
+++ b/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
@@ -83,4 +83,17 @@ describe('<BasicAuth />', () => {
     expect(screen.getByPlaceholderText('User')).toBeDisabled();
     expect(screen.getByPlaceholderText('Password')).toBeDisabled();
   });
+
+  it('should render custom username and password labels and placeholders', () => {
+    const props = getProps({
+      userLabel: 'user-test-label',
+      userPlaceholder: 'user-test-placeholder',
+      passwordLabel: 'pwd-test-label',
+      passwordPlaceholder: 'pwd-test-placeholder',
+    });
+    render(<BasicAuth {...props} />);
+
+    expect(screen.getByLabelText('user-test-label *')).toHaveAttribute('placeholder', 'user-test-placeholder');
+    expect(screen.getByLabelText('pwd-test-label *')).toHaveAttribute('placeholder', 'pwd-test-placeholder');
+  });
 });
diff --git a/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx b/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
index 18eb578..9efec46 100644
--- a/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
+++ b/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
@@ -6,8 +6,12 @@ import { useCommonStyles } from '../styles';
 export type Props = {
   user?: string;
   passwordConfigured: boolean;
+  userLabel?: string;
   userTooltip?: PopoverContent;
+  userPlaceholder?: string;
+  passwordLabel?: string;
   passwordTooltip?: PopoverContent;
+  passwordPlaceholder?: string;
   onUserChange: (user: string) => void;
   onPasswordChange: (password: string) => void;
   onPasswordReset: () => void;
@@ -17,8 +21,12 @@ export type Props = {
 export const BasicAuth: React.FC<Props> = ({
   user,
   passwordConfigured,
+  userLabel = 'User',
   userTooltip = 'The username of the data source account',
+  userPlaceholder = 'User',
+  passwordLabel = 'Password',
   passwordTooltip = 'The password of the data source account',
+  passwordPlaceholder = 'Password',
   onUserChange,
   onPasswordChange,
   onPasswordReset,
@@ -34,7 +42,7 @@ export const BasicAuth: React.FC<Props> = ({
     <>
       <InlineField
         className={commonStyles.inlineFieldNoMarginRight}
-        label="User"
+        label={userLabel}
         labelWidth={24}
         tooltip={userTooltip}
         required
@@ -45,7 +53,7 @@ export const BasicAuth: React.FC<Props> = ({
       >
         <Input
           id="basic-auth-user-input"
-          placeholder="User"
+          placeholder={userPlaceholder}
           value={user}
           onChange={(e) => onUserChange(e.currentTarget.value)}
           required
@@ -57,7 +65,7 @@ export const BasicAuth: React.FC<Props> = ({
           commonStyles.inlineFieldWithSecret,
           styles.lastInlineField
         )}
-        label="Password"
+        label={passwordLabel}
         labelWidth={24}
         tooltip={passwordTooltip}
         required
@@ -70,7 +78,7 @@ export const BasicAuth: React.FC<Props> = ({
           id="basic-auth-password-input"
           isConfigured={passwordConfigured}
           onReset={readOnly ? () => {} : onPasswordReset}
-          placeholder="Password"
+          placeholder={passwordPlaceholder}
           onChange={(e) => onPasswordChange(e.currentTarget.value)}
           required
         />