Add previously removed LongTextTooltip

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.2.1",
+        "@patternfly/react-component-groups": "^5.0.0-prerelease.5",
         "@scalprum/core": "^0.5.4",
         "@scalprum/react-core": "^0.5.4",
         "sanitize-html": "^2.7.2"

packages/components/src/DownloadButton/__snapshots__/DownloadButton.test.js.snap

@@ -30,7 +30,7 @@ exports[`DownloadButton component API clicking should open dropdown 1`] = `
     data-popper-escaped="true"
     data-popper-placement="bottom-start"
     data-popper-reference-hidden="true"
-    style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
+    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
   >
     <div
       class="pf-v5-c-menu__content"

packages/components/src/LongTextTooltip/LongTextTooltip.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import LongTextTooltip from './LongTextTooltip';
+import { render } from '@testing-library/react';
+import { TooltipPosition } from '@patternfly/react-core/dist/dynamic/components/Tooltip';
+
+describe('LongTextTooltip component', () => {
+  it('should render', () => {
+    expect(render(<LongTextTooltip />)).toMatchSnapshot();
+  });
+
+  it('should render content', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" />)).toMatchSnapshot();
+  });
+
+  it('should render content with maxLength', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" maxLength={50} />)).toMatchSnapshot();
+  });
+
+  it('should render content with maxLength shorter than content', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" maxLength={1} />)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.bottom} />)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.left} />)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.right} />)).toMatchSnapshot();
+  });
+
+  it('should render content tooltip in a different spot with different width', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.left} tooltipMaxWidth="10vw" />)).toMatchSnapshot();
+  });
+});

packages/components/src/LongTextTooltip/LongTextTooltip.tsx

@@ -1,10 +1,35 @@
 import React from 'react';
-import LongTextTooltipPF, { LongTextTooltipProps } from '@patternfly/react-component-groups/dist/dynamic/LongTextTooltip';
+import { Tooltip } from '@patternfly/react-core/dist/dynamic/components/Tooltip';
+import { TooltipPosition } from '@patternfly/react-core/dist/dynamic/components/Tooltip';
+import { TooltipProps } from '@patternfly/react-core/dist/dynamic/components/Tooltip';
+
+export interface LongTextTooltipProps extends Omit<TooltipProps, 'content'> {
+  content?: string;
+  maxLength?: number;
+  tooltipPosition?: TooltipPosition;
+  tooltipMaxWidth?: string;
+}
 
 /**
- * @deprecated Do not use deprecated LongTextTooltip import, the component has been moved to @patternfly/react-component-groups
+ * @deprecated Use official PatternFly Truncate component instead. This component will be removed soon!
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LongTextTooltip: React.FunctionComponent<LongTextTooltipProps> = (props) => <LongTextTooltipPF {...props} />;
+const LongTextTooltip: React.FunctionComponent<LongTextTooltipProps> = ({
+  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 ? (
+    <Tooltip maxWidth={tooltipMaxWidth} position={tooltipPosition} content={<div>{content}</div>} {...rest}>
+      <div>{truncate(content, maxLength)}</div>
+    </Tooltip>
+  ) : (
+    <span>{content}</span>
+  );
+};
 
 export default LongTextTooltip;