fix(TDOPS-5510/inlineEdit): add data attributes from props (#5166)

* fix(TDOPS-5510/inlineEdit): add data attributes from props * fix(TDOPS-5510/inlineEdit): add data attributes from props * fix(TDOPS-5510/inlineEdit): add data attributes from props * fix(TDOPS-5510/inlineEdit): add data attributes from props
Talend · Feb 7, 2024 · 52563ff · 52563ff
1 parent e034360
commit 52563ff
Show file tree

Hide file tree

Showing 18 changed files with 81 additions and 41 deletions.
diff --git a/.changeset/fast-seahorses-protect.md b/.changeset/fast-seahorses-protect.md
@@ -0,0 +1,8 @@
+---
+'@talend/react-faceted-search': patch
+'@talend/design-system': patch
+'@talend/react-components': patch
+'@talend/utils': patch
+---
+
+fix(TDOPS-5510/inlineEdit): add data attributes from props
diff --git a/packages/components/src/EditableText/InlineForm.component.js b/packages/components/src/EditableText/InlineForm.component.js
@@ -3,6 +3,8 @@ import { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
+import { getDataAttrFromProps } from '@talend/utils';
+
 import { Action } from '../Actions';
 import FocusManager from '../FocusManager';
 import getDefaultT from '../translate';
@@ -142,6 +144,7 @@ class InlineForm extends Component {
 							disabled={notFilled}
 							hideLabel
 							data-feature={feature && `${feature}.submit`}
+							{...getDataAttrFromProps(this.props)}
 						/>
 					</div>
 				</form>

diff --git a/packages/components/src/EditableText/InlineForm.component.test.js b/packages/components/src/EditableText/InlineForm.component.test.js
@@ -100,4 +100,14 @@ describe('InlineForm', () => {
 		const input = screen.getByRole('textbox');
 		expect(input).toHaveAttribute('placeholder', placeholder);
 	});
+	it('should add data attributes to submit', () => {
+		const props = {
+			...defaultProps,
+			required: false,
+			'data-tracking': 'test-tracker',
+		};
+		render(<InlineForm {...props} />);
+		const submit = screen.getAllByRole('button')[1];
+		expect(submit).toHaveAttribute('data-tracking', props['data-tracking']);
+	});
 });
diff --git a/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx b/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx
@@ -10,6 +10,7 @@ jest.mock('@talend/utils', () => {
 	return {
 		// we need stable but different uuid (is fixed to 42 by current mock)
 		randomUUID: () => `mocked-uuid-${i++}`,
+		getDataAttrFromProps: () => ({ 'data-tracking': 'test-tracker' }),
 	};
 });
 

diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
@@ -14,6 +14,8 @@ import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { DataAttributes } from 'src/types';
 
+import { getDataAttrFromProps } from '@talend/utils';
+
 import { useId } from '../../../useId';
 import { ButtonIcon } from '../../ButtonIcon';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants';
@@ -253,6 +255,7 @@ const InlineEditingPrimitive = forwardRef(
 										icon="check-filled"
 										data-test={`${dataTest ? `${dataTest}.` : ''}inlineediting.button.submit`}
 										data-testid={`${dataTestId ? `${dataTestId}.` : ''}inlineediting.button.submit`}
+										{...getDataAttrFromProps(rest)}
 										size="XS"
 									>
 										{t('INLINE_EDITING_SUBMIT', 'Submit')}

diff --git a/...ages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap b/...ages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
@@ -77,6 +77,7 @@ exports[`InlineEditing should render a11y html 1`] = `
             class="theme-clickable theme-buttonIcon theme-size_XS"
             data-test="inlineediting.button.submit"
             data-testid="inlineediting.button.submit"
+            data-tracking="test-tracker"
             tabindex="0"
             type="button"
           >

diff --git a/...ges/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js b/...ges/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js
@@ -13,9 +13,10 @@ import {
 	SkeletonHeading,
 	StackVertical,
 } from '@talend/design-system';
+import { getDataAttrFromProps } from '@talend/utils';
 
 import { I18N_DOMAIN_FACETED_SEARCH } from '../../../constants';
-import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getApplyDataFeature } from '../../../helpers/usage.helpers';
 
 import styles from './BadgeCheckboxes.module.scss';
 
@@ -164,7 +165,7 @@ const BadgeCheckboxesForm = ({
 						data-feature={applyDataFeature}
 						type="submit"
 						disabled={rest.isLoading}
-						{...getDataAttributesFrom(rest)}
+						{...getDataAttrFromProps(rest)}
 					>
 						{t('APPLY', { defaultValue: 'Apply' })}
 					</ButtonPrimary>

diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js
@@ -5,8 +5,9 @@ import PropTypes from 'prop-types';
 
 import { ButtonPrimary, Form } from '@talend/design-system';
 import { DatePicker } from '@talend/react-components';
+import { getDataAttrFromProps } from '@talend/utils';
 
-import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getApplyDataFeature } from '../../../helpers/usage.helpers';
 
 import styles from './BadgeDate.module.scss';
 
@@ -39,7 +40,7 @@ const BadgeDateForm = ({ id, onChange, onSubmit, value, feature, t, ...rest }) =
 				<ButtonPrimary
 					data-feature={applyDataFeature}
 					type="submit"
-					{...getDataAttributesFrom(rest)}
+					{...getDataAttrFromProps(rest)}
 				>
 					{t('APPLY', { defaultValue: 'Apply' })}
 				</ButtonPrimary>

diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js
@@ -13,8 +13,7 @@ import {
 	SkeletonHeading,
 	StackVertical,
 } from '@talend/design-system';
-
-import { getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getDataAttrFromProps } from '@talend/utils';
 
 import styles from './BadgeMenu.module.scss';
 
@@ -119,7 +118,7 @@ const BadgeMenuForm = ({
 						{showSelectedToggleLabel}
 					</ButtonTertiary>
 				)}
-				<ButtonPrimary type="submit" disabled={rest.isLoading} {...getDataAttributesFrom(rest)}>
+				<ButtonPrimary type="submit" disabled={rest.isLoading} {...getDataAttrFromProps(rest)}>
 					{t('APPLY', { defaultValue: 'Apply' })}
 				</ButtonPrimary>
 			</Form.Buttons>

diff --git a/packages/faceted-search/src/components/Badges/BadgeNumber/BadgeNumberForm.component.js b/packages/faceted-search/src/components/Badges/BadgeNumber/BadgeNumberForm.component.js
@@ -3,8 +3,9 @@ import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { ButtonPrimary, Form } from '@talend/design-system';
+import { getDataAttrFromProps } from '@talend/utils';
 
-import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getApplyDataFeature } from '../../../helpers/usage.helpers';
 
 const BadgeNumberForm = ({ id, onChange, onSubmit, value, feature, t, ...rest }) => {
 	const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]);
@@ -22,7 +23,7 @@ const BadgeNumberForm = ({ id, onChange, onSubmit, value, feature, t, ...rest })
 				<ButtonPrimary
 					type="submit"
 					data-feature={applyDataFeature}
-					{...getDataAttributesFrom(rest)}
+					{...getDataAttrFromProps(rest)}
 				>
 					{t('APPLY', { defaultValue: 'Apply' })}
 				</ButtonPrimary>

diff --git a/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.js b/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.js
@@ -13,8 +13,7 @@ import {
 	StackVertical,
 } from '@talend/design-system';
 import { InputDateTimeRangePicker } from '@talend/react-components/lib/DateTimePickers';
-
-import { getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getDataAttrFromProps } from '@talend/utils';
 
 function getPeriodOptions(t) {
 	return [
@@ -101,7 +100,7 @@ const BadgePeriodForm = ({ id, onChange, onSubmit, t, value, ...rest }) => {
 								onClick={event => onSelectOption(rowItem, event)}
 								data-testid={`badge-period-form-item-${rowItem.id}`}
 								data-test={`badge-period-form-item-${rowItem.id}`}
-								{...getDataAttributesFrom(rowItem)}
+								{...getDataAttrFromProps(rowItem)}
 							>
 								{rowItem.id === 'CUSTOM' ? (
 									<StackHorizontal gap="0" align="center" justify="spaceBetween">
@@ -123,7 +122,7 @@ const BadgePeriodForm = ({ id, onChange, onSubmit, t, value, ...rest }) => {
 							data-testid="badge-period-form-custom-button"
 							icon="chevron-left"
 							onClick={goBack}
-							{...getDataAttributesFrom(rest)}
+							{...getDataAttrFromProps(rest)}
 						>
 							{t('CUSTOM', { defaultValue: 'Custom' })}
 						</ButtonTertiary>
@@ -142,15 +141,15 @@ const BadgePeriodForm = ({ id, onChange, onSubmit, t, value, ...rest }) => {
 							id="reset-button"
 							disabled={rest.isLoading}
 							onClick={resetRange}
-							{...getDataAttributesFrom(rest)}
+							{...getDataAttrFromProps(rest)}
 						>
 							{t('RESET', { defaultValue: 'Reset' })}
 						</ButtonTertiary>
 						<ButtonPrimary
 							id="apply-button"
 							type="submit"
 							disabled={rest.isLoading || !!value?.errorMessage}
-							{...getDataAttributesFrom(rest)}
+							{...getDataAttrFromProps(rest)}
 						>
 							{t('APPLY', { defaultValue: 'Apply' })}
 						</ButtonPrimary>

diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js
@@ -6,8 +6,9 @@ import PropTypes from 'prop-types';
 import { ButtonPrimary, Form, InlineMessageDestructive } from '@talend/design-system';
 import Icon from '@talend/react-components/lib/Icon';
 import Slider from '@talend/react-components/lib/Slider';
+import { getDataAttrFromProps } from '@talend/utils';
 
-import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getApplyDataFeature } from '../../../helpers/usage.helpers';
 
 import styles from './BadgeSlider.module.scss';
 
@@ -140,7 +141,7 @@ const BadgeSliderForm = ({
 					type="submit"
 					data-feature={applyDataFeature}
 					disabled={!!error}
-					{...getDataAttributesFrom(rest)}
+					{...getDataAttrFromProps(rest)}
 				>
 					{t('APPLY', { defaultValue: 'Apply' })}
 				</ButtonPrimary>

diff --git a/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js b/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js
@@ -3,8 +3,9 @@ import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { ButtonPrimary, Form } from '@talend/design-system';
+import { getDataAttrFromProps } from '@talend/utils';
 
-import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
+import { getApplyDataFeature } from '../../../helpers/usage.helpers';
 
 const BadgeTextForm = ({
 	id,
@@ -39,7 +40,7 @@ const BadgeTextForm = ({
 				<ButtonPrimary
 					type="submit"
 					data-feature={applyDataFeature}
-					{...getDataAttributesFrom(rest)}
+					{...getDataAttrFromProps(rest)}
 				>
 					{t('APPLY', { defaultValue: 'Apply' })}
 				</ButtonPrimary>

diff --git a/packages/faceted-search/src/helpers/usage.helpers.js b/packages/faceted-search/src/helpers/usage.helpers.js
@@ -1,12 +1,6 @@
-import { pick } from 'lodash';
 import { USAGE_TRACKING_TAGS } from '../constants';
 
 export const getApplyDataFeature = feature => {
 	const formatedFeature = feature.toLowerCase().replace(' ', '_');
 	return USAGE_TRACKING_TAGS.BADGE_ADD.replace('#{badgeName}', formatedFeature);
 };
-
-export const getDataAttributesFrom = props => {
-	const dataAttributesKeys = Object.keys(props).filter(objectKey => objectKey.startsWith('data-'));
-	return pick(props, dataAttributesKeys);
-};
diff --git a/packages/faceted-search/src/helpers/usage.helpers.test.js b/packages/faceted-search/src/helpers/usage.helpers.test.js
@@ -1,23 +1,9 @@
-import { getApplyDataFeature, getDataAttributesFrom } from './usage.helpers';
+import { getApplyDataFeature } from './usage.helpers';
 
 describe('helpers/usage', () => {
 	it('should format an apply button data-feature based on formatedKey', () => {
 		expect(getApplyDataFeature('name')).toEqual('filter.name.add');
 		expect(getApplyDataFeature('Connection type')).toEqual('filter.connection_type.add');
 		expect(getApplyDataFeature('UPPERCASE LABEL')).toEqual('filter.uppercase_label.add');
 	});
-
-	it('should get only data attributes from props', () => {
-		const props = {
-			key: 'a',
-			id: 'b',
-			other: 'c',
-			'data-test': 'd',
-			'data-feature': 'e',
-		};
-		expect(getDataAttributesFrom(props)).toEqual({
-			'data-test': 'd',
-			'data-feature': 'e',
-		});
-	});
 });
diff --git a/packages/utils/src/getDataAttrFromProps.test.ts b/packages/utils/src/getDataAttrFromProps.test.ts
@@ -0,0 +1,17 @@
+import getDataAttrFromProps from './getDataAttrFromProps';
+
+describe('getDataAttrFromProps tests', () => {
+	it('should get only data attributes from props', () => {
+		const props = {
+			key: 'a',
+			id: 'b',
+			other: 'c',
+			'data-test': 'd',
+			'data-feature': 'e',
+		};
+		expect(getDataAttrFromProps(props)).toEqual({
+			'data-test': 'd',
+			'data-feature': 'e',
+		});
+	});
+});
diff --git a/packages/utils/src/getDataAttrFromProps.ts b/packages/utils/src/getDataAttrFromProps.ts
@@ -0,0 +1,13 @@
+import { pick } from 'lodash';
+
+/**
+ * get data attributes from props
+ * @param {object} props
+ * @returns {object}
+ */
+export default function getDataAttrFromProps(props: object) {
+	const dataAttributesKeys: string[] = Object.keys(props).filter(objectKey =>
+		objectKey.startsWith('data-'),
+	);
+	return pick(props, dataAttributesKeys);
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -1,6 +1,7 @@
 import * as date from './date';
 import * as filters from './filters';
+import getDataAttrFromProps from './getDataAttrFromProps';
 import { randomUUID } from './uuid';
 import validation from './validation';
 
-export { date, validation, randomUUID, filters };
+export { date, validation, randomUUID, filters, getDataAttrFromProps };