chore(datagrid): Rewrite QualityIndicator in typescript (#4003)

* chore(datagrid): Boot rtl config & continue ts migration

* review

.changeset/great-eagles-reply.md

@@ -0,0 +1,6 @@
+---
+'@talend/react-datagrid': minor
+---
+
+- Boot rtl config
+- Rewrite QualityIndicator in typescript

.eslintignore

@@ -10,3 +10,5 @@ node_modules
 
 **/*.stories.js
 packages/design-tokens/supernova-exporter
+**/jest.setup.js
+**/jest.config.js

packages/datagrid/jest.config.js

@@ -0,0 +1,6 @@
+const defaults = require('@talend/scripts-config-jest/jest.config.js');
+
+module.exports = {
+	...defaults,
+	setupFilesAfterEnv: [...defaults.setupFilesAfterEnv, './jest.setup.js'],
+};

packages/datagrid/jest.setup.js

@@ -0,0 +1,2 @@
+// DS is mocked by ui-scripts, preventing us to use testing-library getByLabelText & others selectors
+jest.unmock('@talend/design-system');

packages/datagrid/src/components/DataGrid/DataGrid.component.js

@@ -8,9 +8,7 @@ import 'ag-grid-community/dist/styles/ag-grid.css';
 import { Icon } from '@talend/design-system';
 import DefaultHeaderRenderer, { HEADER_RENDERER_COMPONENT } from '../DefaultHeaderRenderer';
 import DefaultCellRenderer, { CELL_RENDERER_COMPONENT } from '../DefaultCellRenderer';
-import DefaultPinHeaderRenderer, {
-	PIN_HEADER_RENDERER_COMPONENT,
-} from '../DefaultPinHeaderRenderer';
+import DefaultPinHeaderRenderer, { PIN_HEADER_RENDERER_COMPONENT } from '../PinHeaderRenderer';
 import DefaultIntCellRenderer from '../DefaultIntCellRenderer';
 import DefaultRenderer from '../DefaultCellRenderer/DefaultRenderer.component';
 

packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import { QUALITY_INVALID_KEY } from '../../constants';
+
+import theme from './QualityIndicator.scss';
+import { Quality } from '../../types';
+
+export interface QualityIndicatorProps {
+	qualityIndex: keyof Quality;
+}
+
+function QualityIndicator({ qualityIndex }: QualityIndicatorProps): JSX.Element | null {
+	const { t } = useTranslation();
+
+	if (qualityIndex !== QUALITY_INVALID_KEY) {
+		return null;
+	}
+
+	return (
+		<div
+			className={classNames(
+				theme['td-cell-quality-indicator'],
+				// required for hover styling by parent
+				'td-cell-quality-indicator',
+				theme['td-cell-quality-indicator--invalid'],
+			)}
+			title={t('QUALITY_INDICATOR_INVALID_VALUE', 'Invalid value')}
+		/>
+	);
+}
+
+export default QualityIndicator;

packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.scss

@@ -1,4 +1,4 @@
-@use '~@talend/design-tokens/lib/_tokens.scss' as tokens;
+@use '~@talend/design-tokens/lib/tokens.scss';
 
 $td-quality-bar-indicator-width: 0.3rem !default;
 
@@ -9,7 +9,7 @@ $td-quality-bar-indicator-width: 0.3rem !default;
 	width: $td-quality-bar-indicator-width;
 	height: 100%;
 
-	&-invalid {
+	&--invalid {
 		background-color: tokens.$coral-color-charts-danger;
 	}
 }

packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.js → packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import QualityIndicator from './QualityIndicator.component';
 import { QUALITY_INVALID_KEY, QUALITY_VALID_KEY } from '../../constants';
 
 describe('#QualityIndicator', () => {
 	it('should render when quality index is QUALITY_INVALID_KEY', () => {
-		const wrapper = shallow(<QualityIndicator qualityIndex={QUALITY_INVALID_KEY} />);
+		render(<QualityIndicator qualityIndex={QUALITY_INVALID_KEY} />);
 
-		expect(wrapper.getElement()).toMatchSnapshot();
+		expect(screen.getByTitle('Invalid value')).toBeInTheDocument();
 	});
 
 	it('should not render when quality index is different of QUALITY_INVALID_KEY', () => {
-		const wrapper = shallow(<QualityIndicator qualityIndex={QUALITY_VALID_KEY} />);
+		render(<QualityIndicator qualityIndex={QUALITY_VALID_KEY} />);
 
-		expect(wrapper.getElement()).toMatchSnapshot();
+		expect(screen.queryByTitle('Invalid value')).not.toBeInTheDocument();
 	});
 });

packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/DefaultCellRenderer.test.js.snap

@@ -33,7 +33,7 @@ exports[`#DefaultCellRenderer should render the default cell on loading state 1`
 <div
   className="theme-td-cell td-cell"
 >
-  <SkeletonParagraph
+  <ForwardRef
     size="M"
   />
 </div>

packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ButtonIcon } from '@talend/design-system';
+import theme from './PinHeaderRenderer.scss';
+
+export const PIN_HEADER_RENDERER_COMPONENT = 'pinHeaderRenderer';
+
+export type PinHeaderRendererProps = Omit<Parameters<typeof ButtonIcon>[0], 'size' | 'icon'>;
+
+export default function PinHeaderRenderer(props: PinHeaderRendererProps): JSX.Element {
+	return (
+		<div className={theme['td-pin-header']}>
+			<ButtonIcon icon="talend-ellipsis" size="S" {...props} />
+		</div>
+	);
+}

packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import DefaultPinHeaderRenderer from './PinHeaderRenderer.component';
+
+describe('PinHeader', () => {
+	it('should render', () => {
+		const onClick = jest.fn();
+		render(<DefaultPinHeaderRenderer onClick={onClick}>My menu</DefaultPinHeaderRenderer>);
+
+		fireEvent.mouseEnter(screen.getByRole('button'));
+		expect(screen.getByRole('tooltip')).toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole('button'));
+		expect(onClick).toHaveBeenCalled();
+	});
+});

packages/datagrid/src/components/PinHeaderRenderer/index.ts

@@ -0,0 +1 @@
+export { default, PIN_HEADER_RENDERER_COMPONENT } from './PinHeaderRenderer.component';

packages/datagrid/src/constants/datagrid.constants.ts

@@ -1,17 +1,7 @@
-const NAMESPACE_INDEX = 'index.';
-const NAMESPACE_DATA = 'data.';
-const COLUMN_INDEX = 'index';
-const QUALITY_KEY = '@talend-quality@';
-const QUALITY_INVALID_KEY = -1;
-const QUALITY_EMPTY_KEY = 0;
-const QUALITY_VALID_KEY = 1;
-
-export {
-	NAMESPACE_INDEX,
-	NAMESPACE_DATA,
-	COLUMN_INDEX,
-	QUALITY_KEY,
-	QUALITY_INVALID_KEY,
-	QUALITY_EMPTY_KEY,
-	QUALITY_VALID_KEY,
-};
+export const NAMESPACE_INDEX = 'index.';
+export const NAMESPACE_DATA = 'data.';
+export const COLUMN_INDEX = 'index';
+export const QUALITY_KEY = '@talend-quality@';
+export const QUALITY_INVALID_KEY = -1;
+export const QUALITY_EMPTY_KEY = 0;
+export const QUALITY_VALID_KEY = 1;

packages/datagrid/src/constants/index.ts

@@ -1,22 +1,2 @@
-import {
-	NAMESPACE_INDEX,
-	NAMESPACE_DATA,
-	COLUMN_INDEX,
-	QUALITY_KEY,
-	QUALITY_INVALID_KEY,
-	QUALITY_EMPTY_KEY,
-	QUALITY_VALID_KEY,
-} from './datagrid.constants';
-import { AVRO_TYPES, LOGICAL_TYPES } from './avro-type.constant';
-
-export {
-	NAMESPACE_INDEX,
-	NAMESPACE_DATA,
-	COLUMN_INDEX,
-	QUALITY_KEY,
-	QUALITY_INVALID_KEY,
-	QUALITY_EMPTY_KEY,
-	QUALITY_VALID_KEY,
-	AVRO_TYPES,
-	LOGICAL_TYPES,
-};
+export * from './datagrid.constants';
+export { AVRO_TYPES, LOGICAL_TYPES } from './avro-type.constant';

packages/datagrid/src/index.js → packages/datagrid/src/index.ts

@@ -1,7 +1,7 @@
 import * as constants from './constants';
 import DataGrid, * as components from './components';
 
-DataGrid.constants = constants;
-DataGrid.components = components;
-
-export default DataGrid;
+export default Object.assign(DataGrid, {
+	constants,
+	components,
+});

packages/datagrid/src/types/index.ts

@@ -0,0 +1,12 @@
+import { QUALITY_EMPTY_KEY, QUALITY_INVALID_KEY, QUALITY_VALID_KEY } from '../constants';
+
+export interface QualityEntry {
+	percentage: number;
+	total: number;
+}
+
+export interface Quality {
+	[QUALITY_INVALID_KEY]: QualityEntry;
+	[QUALITY_EMPTY_KEY]: QualityEntry;
+	[QUALITY_VALID_KEY]: QualityEntry;
+}