From 94f7f7c584df3302ae035a1cbf6951dd47dc66af Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Tue, 3 Oct 2023 18:28:15 +0200 Subject: [PATCH] Reexport LongTextTooltip component from PF --- package-lock.json | 22 +-- packages/components/package.json | 2 +- .../LongTextTooltip/LongTextTooltip.test.js | 46 ----- .../src/LongTextTooltip/LongTextTooltip.tsx | 31 +-- .../LongTextTooltip.test.js.snap | 182 ------------------ 5 files changed, 18 insertions(+), 265 deletions(-) delete mode 100644 packages/components/src/LongTextTooltip/LongTextTooltip.test.js delete mode 100644 packages/components/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.js.snap diff --git a/package-lock.json b/package-lock.json index e6de6da7af..9bfde3f305 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7999,9 +7999,9 @@ } }, "node_modules/@patternfly/react-component-groups": { - "version": "1.0.17", - "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-1.0.17.tgz", - "integrity": "sha512-SeTnlmEyk9q/TxnLs2WCNuEhpD9iKdgArW+OnW6O/rm/VDtPAeJ7O+SYT0JeZDqtNzMvAb9D02GE06k+5urchQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-1.2.0.tgz", + "integrity": "sha512-k8PyqtalQyt8HJzpUhWfapSYEVHZt7Gv0fBp9LBVbHFjs8yZ3nJ2f8zIgCHYmlmqXkodTx6Wv8h1Zm8ty3FnnA==", "dependencies": { "@patternfly/react-core": "^5.0.0", "@patternfly/react-icons": "^5.0.0", @@ -42000,10 +42000,10 @@ }, "packages/components": { "name": "@redhat-cloud-services/frontend-components", - "version": "4.0.9", + "version": "4.0.10", "license": "Apache-2.0", "dependencies": { - "@patternfly/react-component-groups": "^1.0.17", + "@patternfly/react-component-groups": "^1.2.0", "@redhat-cloud-services/frontend-components-utilities": "^4.0.0", "@redhat-cloud-services/types": "^0.0.24", "@scalprum/core": "^0.5.1", @@ -42727,7 +42727,7 @@ }, "packages/notifications": { "name": "@redhat-cloud-services/frontend-components-notifications", - "version": "4.0.3", + "version": "4.0.4", "license": "Apache-2.0", "dependencies": { "@redhat-cloud-services/frontend-components": "^4.0.9", @@ -43239,7 +43239,7 @@ }, "packages/types": { "name": "@redhat-cloud-services/types", - "version": "1.0.0", + "version": "1.0.2", "license": "Apache-2.0", "devDependencies": { "@patternfly/quickstarts": "^5.0.0", @@ -49142,9 +49142,9 @@ } }, "@patternfly/react-component-groups": { - "version": "1.0.17", - "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-1.0.17.tgz", - "integrity": "sha512-SeTnlmEyk9q/TxnLs2WCNuEhpD9iKdgArW+OnW6O/rm/VDtPAeJ7O+SYT0JeZDqtNzMvAb9D02GE06k+5urchQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-1.2.0.tgz", + "integrity": "sha512-k8PyqtalQyt8HJzpUhWfapSYEVHZt7Gv0fBp9LBVbHFjs8yZ3nJ2f8zIgCHYmlmqXkodTx6Wv8h1Zm8ty3FnnA==", "requires": { "@patternfly/react-core": "^5.0.0", "@patternfly/react-icons": "^5.0.0", @@ -49316,7 +49316,7 @@ "requires": { "@cypress/webpack-dev-server": "^1.8.4", "@patternfly/patternfly": "^5.0.0", - "@patternfly/react-component-groups": "^1.0.17", + "@patternfly/react-component-groups": "^1.2.0", "@redhat-cloud-services/frontend-components-config-utilities": "^3.0.0", "@redhat-cloud-services/frontend-components-utilities": "^4.0.0", "@redhat-cloud-services/types": "^0.0.24", diff --git a/packages/components/package.json b/packages/components/package.json index 253af6f639..fbbe4915ca 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -49,7 +49,7 @@ "dependencies": { "@redhat-cloud-services/frontend-components-utilities": "^4.0.0", "@redhat-cloud-services/types": "^0.0.24", - "@patternfly/react-component-groups": "^1.0.17", + "@patternfly/react-component-groups": "^1.2.0", "@scalprum/core": "^0.5.1", "@scalprum/react-core": "^0.5.1", "sanitize-html": "^2.7.2" diff --git a/packages/components/src/LongTextTooltip/LongTextTooltip.test.js b/packages/components/src/LongTextTooltip/LongTextTooltip.test.js deleted file mode 100644 index 49d1ed113b..0000000000 --- a/packages/components/src/LongTextTooltip/LongTextTooltip.test.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; -import LongTextTooltip from './LongTextTooltip'; - -describe('LongTextTooltip component', () => { - it('should render', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render content', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render content with maxLength', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render content with maxLength shorter than content', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render tooltip in a different spot', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render tooltip in a different spot', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render tooltip in a different spot', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); - - it('should render content tooltip in a different spot with different width', () => { - const wrapper = mount(); - expect(toJson(wrapper)).toMatchSnapshot(); - }); -}); diff --git a/packages/components/src/LongTextTooltip/LongTextTooltip.tsx b/packages/components/src/LongTextTooltip/LongTextTooltip.tsx index ba5ca1caf1..79a47cdf94 100644 --- a/packages/components/src/LongTextTooltip/LongTextTooltip.tsx +++ b/packages/components/src/LongTextTooltip/LongTextTooltip.tsx @@ -1,29 +1,10 @@ -import { Tooltip, TooltipPosition, TooltipProps } from '@patternfly/react-core'; import React from 'react'; +import LongTextTooltipPF, { LongTextTooltipProps } from '@patternfly/react-component-groups/dist/dynamic/LongTextTooltip'; -export interface LongTextTooltipProps extends Omit { - content?: string; - maxLength?: number; - tooltipPosition?: TooltipPosition; - tooltipMaxWidth?: string; -} - -const LongTextTooltip: React.FC = ({ - content = '', - maxLength = Infinity, - tooltipMaxWidth = '50vw', - tooltipPosition = TooltipPosition.top, - ...rest -}) => { - const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str); - - return content.length > maxLength ? ( - {content}} {...rest}> -
{truncate(content, maxLength)}
- - ) : ( - {content} - ); -}; +/** + * @deprecated Do not use deprecated LongTextTooltip import, the component has been moved to @patternfly/react-component-groups + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const LongTextTooltip: React.FunctionComponent = (props) => ; export default LongTextTooltip; diff --git a/packages/components/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.js.snap b/packages/components/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.js.snap deleted file mode 100644 index 2e0360152f..0000000000 --- a/packages/components/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.js.snap +++ /dev/null @@ -1,182 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LongTextTooltip component should render 1`] = ` - - - -`; - -exports[`LongTextTooltip component should render content 1`] = ` - - - Lorem Impsum - - -`; - -exports[`LongTextTooltip component should render content tooltip in a different spot with different width 1`] = ` - - - Lorem Impsum - - -`; - -exports[`LongTextTooltip component should render content with maxLength 1`] = ` - - - Lorem Impsum - - -`; - -exports[`LongTextTooltip component should render content with maxLength shorter than content 1`] = ` - - - Lorem Impsum - - } - maxWidth="50vw" - position="top" - > - - - -
- Lorem Impsum -
- - - } - popperRef={ - { - "current": null, - } - } - positionModifiers={ - { - "bottom": "pf-m-bottom", - "bottom-end": "pf-m-bottom-right", - "bottom-start": "pf-m-bottom-left", - "left": "pf-m-left", - "left-end": "pf-m-left-bottom", - "left-start": "pf-m-left-top", - "right": "pf-m-right", - "right-end": "pf-m-right-bottom", - "right-start": "pf-m-right-top", - "top": "pf-m-top", - "top-end": "pf-m-top-right", - "top-start": "pf-m-top-left", - } - } - trigger={ -
- … -
- } - zIndex={9999} - > -
-
- … -
-
- - - -`; - -exports[`LongTextTooltip component should render tooltip in a different spot 1`] = ` - - - Lorem Impsum - - -`; - -exports[`LongTextTooltip component should render tooltip in a different spot 2`] = ` - - - Lorem Impsum - - -`; - -exports[`LongTextTooltip component should render tooltip in a different spot 3`] = ` - - - Lorem Impsum - - -`;