fix(TDOPS-5409/forms): Link render below Password/Text field (#4962)

* fix(TDOPS-5409/forms): link under password field * chore: update changeset * fix: remove debug from test
Talend · Oct 27, 2023 · 77826b0 · 77826b0
1 parent 3f9c8a7
commit 77826b0
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 11 deletions.
diff --git a/.changeset/twelve-games-provide.md b/.changeset/twelve-games-provide.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': patch
+---
+
+TDOPS-5409 - fix Link render below Password/Text field
diff --git a/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx b/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx
@@ -47,5 +47,14 @@ export const Password = () => (
 			readOnly
 			defaultValue="TalendPassword2012"
 		/>
+		<Form.Password
+			name="password"
+			label="Password with link"
+			defaultValue="TalendPassword2012"
+			link={{
+				href: 'https://talend.com/reset/password',
+				children: 'Need help to log in?',
+			}}
+		/>
 	</StackVertical>
 );
diff --git a/packages/forms/src/UIForm/fields/Text/PasswordWidget/index.js b/packages/forms/src/UIForm/fields/Text/PasswordWidget/index.js
diff --git a/packages/forms/src/UIForm/fields/Text/Text.component.js b/packages/forms/src/UIForm/fields/Text/Text.component.js
@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import PropTypes from 'prop-types';
-import { get, omit } from 'lodash';
-import { Link } from '@talend/design-system';
+import get from 'lodash/get';
+import { Form } from '@talend/design-system';
 import FieldTemplate from '../FieldTemplate';
 import { generateDescriptionId, generateErrorId } from '../../Message/generateId';
-import PasswordWidget from './PasswordWidget';
 
 import { convertValue, extractDataAttributes } from '../../utils/properties';
 
@@ -63,12 +62,12 @@ export default function Text(props) {
 			valueIsUpdating={valueIsUpdating}
 		>
 			{type === 'password' ? (
-				<PasswordWidget
+				<Form.Password
 					{...fieldProps}
 					aria-invalid={!isValid}
 					aria-required={get(schema, 'required')}
 					aria-describedby={`${descriptionId} ${errorId}`}
-					link={link && <Link {...omit(link, ['label'])}> {link.label} </Link>}
+					link={link}
 				/>
 			) : (
 				<input

diff --git a/packages/forms/src/UIForm/fields/Text/Text.component.test.js b/packages/forms/src/UIForm/fields/Text/Text.component.test.js
@@ -232,7 +232,7 @@ describe('Text field', () => {
 		expect(screen.getByLabelText('My input title')).toHaveAttribute('autoComplete', 'off');
 	});
 
-	it('should pass labelProps to FieldTemplate', () => {
+	it('should pass labelProps to Text field', () => {
 		// given
 		const labelProps = { className: 'hello' };
 		const props = {
@@ -249,4 +249,33 @@ describe('Text field', () => {
 		// then
 		expect(screen.getByText('My input title')).toHaveClass('hello');
 	});
+
+	it('should pass link props and password type to Text field', () => {
+		// given
+		const link = {
+			href: 'https://talend.com',
+			title: 'Helps to reset your password',
+			children: 'Need help to log in?',
+			'aria-label': 'Need help to log in?',
+		};
+
+		const props = {
+			...defaultProps,
+			schema: {
+				autoFocus: true,
+				placeholder: 'Enter your password',
+				required: true,
+				title: 'Password',
+				type: 'password',
+				link,
+			},
+		};
+
+		// when
+		render(<Text {...props} />);
+
+		// then
+		expect(screen.getByTitle(link.title)).toHaveTextContent(link.children);
+		expect(screen.getByTestId('link.icon.external')).toBeVisible();
+	});
 });
diff --git a/packages/forms/stories/json/fields/core-text.json b/packages/forms/stories/json/fields/core-text.json
@@ -52,8 +52,9 @@
       "type": "password",
       "link": {
         "href": "https://talend.com",
-        "label": "Forget?",
-        "aria-label": "Need help to log in?"
+        "title": "Forget?",
+        "aria-label": "Need help to log in?",
+        "children": "Need help to log in?"
       }
     }
   ],