From 4119033fd341430817600181c4d8cbd01b87d0be Mon Sep 17 00:00:00 2001
From: gjou-tlnd <58977230+gjou-tlnd@users.noreply.github.com>
Date: Wed, 11 May 2022 17:45:59 +0200
Subject: [PATCH] chore(datagrid): Rewrite QualityIndicator in typescript
(#4003)
* chore(datagrid): Boot rtl config & continue ts migration
* review
---
.changeset/great-eagles-reply.md | 6 ++++
.eslintignore | 2 ++
packages/datagrid/jest.config.js | 6 ++++
packages/datagrid/jest.setup.js | 2 ++
.../components/DataGrid/DataGrid.component.js | 4 +--
.../QualityIndicator.component.js | 35 -------------------
.../QualityIndicator.component.tsx | 34 ++++++++++++++++++
.../DefaultCellRenderer/QualityIndicator.scss | 4 +--
...ator.test.js => QualityIndicator.test.tsx} | 10 +++---
.../DefaultCellRenderer.test.js.snap | 2 +-
.../QualityIndicator.test.js.snap | 10 ------
.../PinHeaderRenderer.component.tsx | 18 ----------
.../PinHeaderRenderer.test.js | 12 -------
.../PinHeaderRenderer.test.js.snap | 12 -------
.../DefaultPinHeaderRenderer/index.ts | 6 ----
.../PinHeaderRenderer.component.tsx | 15 ++++++++
.../PinHeaderRenderer.scss | 0
.../PinHeaderRenderer.test.tsx | 17 +++++++++
.../src/components/PinHeaderRenderer/index.ts | 1 +
packages/datagrid/src/constant.js | 3 --
.../src/constants/datagrid.constants.ts | 24 ++++---------
packages/datagrid/src/constants/index.ts | 24 ++-----------
packages/datagrid/src/{index.js => index.ts} | 8 ++---
packages/datagrid/src/translate.js | 12 -------
packages/datagrid/src/types/index.ts | 12 +++++++
25 files changed, 117 insertions(+), 162 deletions(-)
create mode 100644 .changeset/great-eagles-reply.md
create mode 100644 packages/datagrid/jest.config.js
create mode 100644 packages/datagrid/jest.setup.js
delete mode 100644 packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.js
create mode 100644 packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.tsx
rename packages/datagrid/src/components/DefaultCellRenderer/{QualityIndicator.test.js => QualityIndicator.test.tsx} (53%)
delete mode 100644 packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/QualityIndicator.test.js.snap
delete mode 100644 packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.component.tsx
delete mode 100644 packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.test.js
delete mode 100644 packages/datagrid/src/components/DefaultPinHeaderRenderer/__snapshots__/PinHeaderRenderer.test.js.snap
delete mode 100644 packages/datagrid/src/components/DefaultPinHeaderRenderer/index.ts
create mode 100644 packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.component.tsx
rename packages/datagrid/src/components/{DefaultPinHeaderRenderer => PinHeaderRenderer}/PinHeaderRenderer.scss (100%)
create mode 100644 packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.test.tsx
create mode 100644 packages/datagrid/src/components/PinHeaderRenderer/index.ts
delete mode 100644 packages/datagrid/src/constant.js
rename packages/datagrid/src/{index.js => index.ts} (51%)
delete mode 100644 packages/datagrid/src/translate.js
create mode 100644 packages/datagrid/src/types/index.ts
diff --git a/.changeset/great-eagles-reply.md b/.changeset/great-eagles-reply.md
new file mode 100644
index 00000000000..ddbeb8028f0
--- /dev/null
+++ b/.changeset/great-eagles-reply.md
@@ -0,0 +1,6 @@
+---
+'@talend/react-datagrid': minor
+---
+
+- Boot rtl config
+- Rewrite QualityIndicator in typescript
diff --git a/.eslintignore b/.eslintignore
index e196aa3b041..a0fb26cf3fe 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,3 +10,5 @@ node_modules
**/*.stories.js
packages/design-tokens/supernova-exporter
+**/jest.setup.js
+**/jest.config.js
diff --git a/packages/datagrid/jest.config.js b/packages/datagrid/jest.config.js
new file mode 100644
index 00000000000..d444920c111
--- /dev/null
+++ b/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'],
+};
diff --git a/packages/datagrid/jest.setup.js b/packages/datagrid/jest.setup.js
new file mode 100644
index 00000000000..2ce0d641a5e
--- /dev/null
+++ b/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');
diff --git a/packages/datagrid/src/components/DataGrid/DataGrid.component.js b/packages/datagrid/src/components/DataGrid/DataGrid.component.js
index b779285a12b..0b37b8e1530 100644
--- a/packages/datagrid/src/components/DataGrid/DataGrid.component.js
+++ b/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';
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.js b/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.js
deleted file mode 100644
index 126fbbe8f84..00000000000
--- a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-
-import I18N_DOMAIN_DATAGRID from '../../constant';
-
-import { QUALITY_INVALID_KEY, QUALITY_EMPTY_KEY, QUALITY_VALID_KEY } from '../../constants';
-
-import theme from './QualityIndicator.scss';
-
-function QualityIndicator(props) {
- const { t } = useTranslation(I18N_DOMAIN_DATAGRID);
-
- if (props.qualityIndex !== QUALITY_INVALID_KEY) {
- return null;
- }
-
- return (
-
- );
-}
-QualityIndicator.propTypes = {
- qualityIndex: PropTypes.oneOf([QUALITY_INVALID_KEY, QUALITY_EMPTY_KEY, QUALITY_VALID_KEY]),
-};
-QualityIndicator.theme = theme;
-
-export default QualityIndicator;
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.tsx b/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.component.tsx
new file mode 100644
index 00000000000..5007899f794
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default QualityIndicator;
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.scss b/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.scss
index 858f902e44a..357bc269199 100644
--- a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.scss
+++ b/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;
}
}
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.js b/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.tsx
similarity index 53%
rename from packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.js
rename to packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.tsx
index 043e166e1f7..fa885643dae 100644
--- a/packages/datagrid/src/components/DefaultCellRenderer/QualityIndicator.test.js
+++ b/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();
+ render();
- 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();
+ render();
- expect(wrapper.getElement()).toMatchSnapshot();
+ expect(screen.queryByTitle('Invalid value')).not.toBeInTheDocument();
});
});
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/DefaultCellRenderer.test.js.snap b/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/DefaultCellRenderer.test.js.snap
index e3d3851d13d..04461df6856 100644
--- a/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/DefaultCellRenderer.test.js.snap
+++ b/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`
-
diff --git a/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/QualityIndicator.test.js.snap b/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/QualityIndicator.test.js.snap
deleted file mode 100644
index e1486d2a76d..00000000000
--- a/packages/datagrid/src/components/DefaultCellRenderer/__snapshots__/QualityIndicator.test.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`#QualityIndicator should not render when quality index is different of QUALITY_INVALID_KEY 1`] = `null`;
-
-exports[`#QualityIndicator should render when quality index is QUALITY_INVALID_KEY 1`] = `
-
-`;
diff --git a/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.component.tsx b/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.component.tsx
deleted file mode 100644
index 0f417f351d7..00000000000
--- a/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.component.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { ButtonIcon } from '@talend/design-system';
-import classNames from 'classnames';
-import theme from './PinHeaderRenderer.scss';
-
-export const PIN_HEADER_RENDERER_COMPONENT = 'pinHeaderRenderer';
-
-export type DefaultPinHeaderRendererProps = Omit[0], 'size' | 'icon'>;
-
-export default function DefaultPinHeaderRenderer(
- props: DefaultPinHeaderRendererProps,
-): JSX.Element {
- return (
-
-
-
- );
-}
diff --git a/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.test.js b/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.test.js
deleted file mode 100644
index 3409af74092..00000000000
--- a/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.test.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import DefaultPinHeaderRenderer from './PinHeaderRenderer.component';
-
-describe('#DefaultBooleanCellRenderer', () => {
- it('should render DefaultBooleanCellRenderer', () => {
- const wrapper = shallow();
-
- expect(wrapper.getElement()).toMatchSnapshot();
- });
-});
diff --git a/packages/datagrid/src/components/DefaultPinHeaderRenderer/__snapshots__/PinHeaderRenderer.test.js.snap b/packages/datagrid/src/components/DefaultPinHeaderRenderer/__snapshots__/PinHeaderRenderer.test.js.snap
deleted file mode 100644
index f7f1a143bfd..00000000000
--- a/packages/datagrid/src/components/DefaultPinHeaderRenderer/__snapshots__/PinHeaderRenderer.test.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`#DefaultBooleanCellRenderer should render DefaultBooleanCellRenderer 1`] = `
-
-
-
-`;
diff --git a/packages/datagrid/src/components/DefaultPinHeaderRenderer/index.ts b/packages/datagrid/src/components/DefaultPinHeaderRenderer/index.ts
deleted file mode 100644
index f07d904440b..00000000000
--- a/packages/datagrid/src/components/DefaultPinHeaderRenderer/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import DefaultPinHeaderRenderer, {
- PIN_HEADER_RENDERER_COMPONENT,
-} from './PinHeaderRenderer.component';
-
-export { PIN_HEADER_RENDERER_COMPONENT };
-export default DefaultPinHeaderRenderer;
diff --git a/packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.component.tsx b/packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.component.tsx
new file mode 100644
index 00000000000..2608e75bd07
--- /dev/null
+++ b/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[0], 'size' | 'icon'>;
+
+export default function PinHeaderRenderer(props: PinHeaderRendererProps): JSX.Element {
+ return (
+
+
+
+ );
+}
diff --git a/packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.scss b/packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.scss
similarity index 100%
rename from packages/datagrid/src/components/DefaultPinHeaderRenderer/PinHeaderRenderer.scss
rename to packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.scss
diff --git a/packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.test.tsx b/packages/datagrid/src/components/PinHeaderRenderer/PinHeaderRenderer.test.tsx
new file mode 100644
index 00000000000..a866576f69f
--- /dev/null
+++ b/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(My menu);
+
+ fireEvent.mouseEnter(screen.getByRole('button'));
+ expect(screen.getByRole('tooltip')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button'));
+ expect(onClick).toHaveBeenCalled();
+ });
+});
diff --git a/packages/datagrid/src/components/PinHeaderRenderer/index.ts b/packages/datagrid/src/components/PinHeaderRenderer/index.ts
new file mode 100644
index 00000000000..05865836acf
--- /dev/null
+++ b/packages/datagrid/src/components/PinHeaderRenderer/index.ts
@@ -0,0 +1 @@
+export { default, PIN_HEADER_RENDERER_COMPONENT } from './PinHeaderRenderer.component';
diff --git a/packages/datagrid/src/constant.js b/packages/datagrid/src/constant.js
deleted file mode 100644
index f7d63c70507..00000000000
--- a/packages/datagrid/src/constant.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const I18N_DOMAIN_DATAGRID = 'tui-datagrid';
-
-export default I18N_DOMAIN_DATAGRID;
diff --git a/packages/datagrid/src/constants/datagrid.constants.ts b/packages/datagrid/src/constants/datagrid.constants.ts
index 2ba8c9ad39c..9244853d4bb 100644
--- a/packages/datagrid/src/constants/datagrid.constants.ts
+++ b/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;
diff --git a/packages/datagrid/src/constants/index.ts b/packages/datagrid/src/constants/index.ts
index 29b024c45e3..c035b03cbea 100644
--- a/packages/datagrid/src/constants/index.ts
+++ b/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';
diff --git a/packages/datagrid/src/index.js b/packages/datagrid/src/index.ts
similarity index 51%
rename from packages/datagrid/src/index.js
rename to packages/datagrid/src/index.ts
index 5008a522055..9d7ebe3c461 100644
--- a/packages/datagrid/src/index.js
+++ b/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,
+});
diff --git a/packages/datagrid/src/translate.js b/packages/datagrid/src/translate.js
deleted file mode 100644
index 1b26195e0c4..00000000000
--- a/packages/datagrid/src/translate.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import i18next from 'i18next';
-import { setI18n, getI18n } from 'react-i18next';
-
-export default function getDefaultT() {
- return getI18n().t.bind(getI18n());
-}
-
-if (!getI18n()) {
- // eslint-disable-next-line no-console
- console.warn('@talend/react-datagrid used without i18n host.');
- setI18n(i18next.createInstance({}, () => {}));
-}
diff --git a/packages/datagrid/src/types/index.ts b/packages/datagrid/src/types/index.ts
new file mode 100644
index 00000000000..21d36814dc9
--- /dev/null
+++ b/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;
+}