Add hover tooltip for truncated text and restore streams description column. (#26826)

* Display tooltip on hover for truncated text.

* Improve styling of tooltip component.

* Show description cell again by default in streams overview.

* Adding changelog.

* Fix failing test.

Author: linuspahl

changelog/unreleased/pr-26826.toml

@@ -0,0 +1,4 @@
+type = "c"
+message = "Stream titles in the streams overview no longer include the description text underneath; descriptions are shown in their own column again."
+
+pulls = ["26826"]

graylog2-web-interface/src/components/common/TextOverflowEllipsis.tsx

@@ -15,8 +15,12 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
+import { useRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
 
+import Tooltip from 'components/common/Tooltip';
+import useElementDimensions from 'hooks/useElementDimensions';
+
 const Wrapper = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -33,11 +37,26 @@ type Props = {
 /**
  * Component that signals text overflow to users by using an ellipsis.
  * The parent component needs a concrete width.
+ * Shows the full text in a tooltip on hover when it is actually truncated.
+ * A `titleOverride` is always shown on hover, since it usually surfaces additional
+ * information rather than just the untruncated version of the visible text.
  */
-const TextOverflowEllipsis = ({ children, titleOverride = undefined, className = undefined }: Props) => (
-  <Wrapper title={titleOverride || children} className={className}>
-    {children}
-  </Wrapper>
-);
+const TextOverflowEllipsis = ({ children, titleOverride = undefined, className = undefined }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { width } = useElementDimensions(ref);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useLayoutEffect(() => {
+    setIsTruncated(!!ref.current && ref.current.scrollWidth > ref.current.clientWidth);
+  }, [children, width]);
+
+  return (
+    <Tooltip label={titleOverride || children} disabled={titleOverride === undefined && !isTruncated} multiline maw={400}>
+      <Wrapper ref={ref} className={className}>
+        {children}
+      </Wrapper>
+    </Tooltip>
+  );
+};
 
 export default TextOverflowEllipsis;

graylog2-web-interface/src/components/common/Tooltip.tsx

@@ -18,6 +18,8 @@ import * as React from 'react';
 import { Tooltip as MantineTooltip } from '@mantine/core';
 import { useTheme } from 'styled-components';
 
+import { COLOR_SCHEME_LIGHT } from 'theme/constants';
+
 type Props = React.ComponentProps<typeof MantineTooltip>;
 
 const Tooltip = ({ ...props }: Props) => {
@@ -27,7 +29,10 @@ const Tooltip = ({ ...props }: Props) => {
       backgroundColor: theme.colors.global.contentBackground,
       color: theme.colors.text.primary,
       fontWeight: 400,
-      fontSize: theme.fonts.size.root,
+      fontSize: theme.fonts.size.small,
+      padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
+      borderRadius: '6px',
+      boxShadow: `0 2px 8px rgb(0 0 0 / ${theme.mode === COLOR_SCHEME_LIGHT ? '10%' : '40%'})`,
     },
   });
 

graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts

@@ -49,6 +49,7 @@ const getStreamTableElements = (
 
   const defaultCols = [
     'title',
+    'description',
     'index_set_title',
     'rules',
     ...(isPipelineColumnPermitted ? ['pipelines'] : []),

graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx

@@ -53,7 +53,6 @@ const attributes = [
     id: 'description',
     title: 'Description',
     sortable: true,
-    hidden: true,
   },
 ];
 

graylog2-web-interface/src/components/streams/StreamsOverview/cells/TitleCell.tsx

@@ -15,10 +15,10 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import Routes from 'routing/Routes';
-import { Link, Text } from 'components/common';
+import { Link } from 'components/common';
 import type { Stream } from 'logic/streams/types';
 import { Label } from 'components/bootstrap';
 
@@ -30,12 +30,6 @@ const DefaultLabel = styled(Label)`
   vertical-align: inherit;
 `;
 
-const StyledText = styled(Text)(
-  ({ theme }) => css`
-    color: ${theme.colors.text.secondary};
-  `,
-);
-
 const TitleCell = ({ stream }: Props) => (
   <>
     <Link to={Routes.stream_search(stream.id)}>{stream.title}</Link>
@@ -44,7 +38,6 @@ const TitleCell = ({ stream }: Props) => (
         Default
       </DefaultLabel>
     )}
-    <StyledText>{stream.description}</StyledText>
   </>
 );
 

graylog2-web-interface/src/views/components/widgets/TimerangeInfo.test.tsx

@@ -36,6 +36,12 @@ import OriginalTimerangeInfo from './TimerangeInfo';
 
 jest.mock('views/hooks/useView');
 jest.mock('views/hooks/useGlobalOverride');
+jest.mock('components/common/Tooltip', () => ({ children, label }: { children: React.ReactNode; label: React.ReactNode }) => (
+  <>
+    {children}
+    <div data-testid="tooltip-label">{label}</div>
+  </>
+));
 
 const defaultSearchResult = {
   execution: {
@@ -104,7 +110,9 @@ describe('TimerangeInfo', () => {
     const relativeWidget = widget.toBuilder().timerange({ type: 'relative', range: 3000 }).build();
     render(<TimerangeInfo widget={relativeWidget} activeQuery="active-query-id" widgetId="widget-id" />);
 
-    expect(screen.getByTitle('2021-04-26T14:32:48.000+02:00 - 2021-04-26T16:32:48.000+02:00')).toBeInTheDocument();
+    expect(screen.getByTestId('tooltip-label')).toHaveTextContent(
+      '2021-04-26T14:32:48.000+02:00 - 2021-04-26T16:32:48.000+02:00',
+    );
   });
 
   it('should display a relative timerange', () => {