feat: Auth: enable customizing label and placeholder for user/passwor…

…d inputs (#128)

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"

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",

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');
+  });
 });

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
         />