dev: Refactor tooltips and other small things

Author: rsanteri

package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.2",
     "react-router-dom": "^5.2.0",
-    "react-tooltip": "^4.2.17",
+    "react-tooltip": "5.28.0",
     "react-virtualized": "^9.22.5",
     "reconnecting-websocket": "^4.4.0",
     "spacetime": "^7.4.7",

src/components/DAG/components/DAGContent.tsx

@@ -191,8 +191,7 @@ const DocstringTooltip: React.FC<{ stepName: string; docs: string }> = ({ stepNa
   return (
     <>
       <StepInfoMarker
-        data-tip
-        data-for={stepName}
+        data-tooltip-id={stepName}
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();

src/components/FilterInput/AutoCompleteFilter.tsx

@@ -60,7 +60,7 @@ const AutoCompleteFilter: React.FC<Props> = ({
               ),
           )}
 
-          {autoCompleteResult.data
+          {(!inputValue ? [] : autoCompleteResult.data)
             .filter((item) => !selected.includes(item.value))
             .map((item) => (
               <FilterOptionRow key={item.value} onClick={() => props.onSelect(item.value)} selected={false}>

src/components/Table/index.tsx

@@ -124,7 +124,7 @@ interface HeaderColumnProps {
   currentOrder: string;
   onSort: (ord: string) => void;
   sortable: boolean;
-  maxWidth?: string;
+  width?: string;
   alignment?: 'left' | 'right' | 'center';
 }
 
@@ -134,7 +134,7 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
   currentOrder,
   sortable = true,
   onSort,
-  maxWidth,
+  width,
   alignment = 'left',
   ...rest
 }) => {
@@ -147,14 +147,7 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
       onClick={() => (sortable ? onSort(queryKey) : null)}
       {...rest}
       clickable={sortable}
-      style={
-        maxWidth
-          ? {
-              maxWidth: maxWidth + (maxWidth.indexOf('%') > -1 ? '' : 'px'),
-              // width: maxWidth + (maxWidth.indexOf('%') > -1 ? '' : 'px'),
-            }
-          : {}
-      }
+      style={width ? { width } : {}}
     >
       <HeaderColumnWrapper alignment={alignment}>
         {label}

src/components/Text/index.tsx

@@ -25,3 +25,9 @@ export const ForceNoBreakText = styled.span`
 export const ForceNoWrapText = styled.span`
   white-space: nowrap;
 `;
+
+export const NoWrapOverflowText = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

src/components/Tooltip/index.tsx

@@ -1,25 +1,24 @@
 import React from 'react';
-import ReactTooltip, { TooltipProps } from 'react-tooltip';
+import { Tooltip as ReactTooltip, ITooltip } from 'react-tooltip';
 import styled from 'styled-components';
 
 //
 // Component
 // Basically custom styles wrapper for react-tooltip. Use by giving the trigger component data-tip and data-for=[name]
 // attributes and then giving id=[name] for Tooltip component. eg:
 //
-// <button data-tip data-for="my-tooltip">This has tooltip</button>
+// <button data-tooltip-content data-tooltip-id="my-tooltip">This has tooltip</button>
 // <Tooltip id="my-tooltip">Tooltip content</Tooltip>
 //
 
-const Tooltip: React.FC<TooltipProps> = ({ children, ...props }) => {
+const Tooltip: React.FC<ITooltip> = ({ children, ...props }) => {
   return (
     <CustomTooltip>
       <ReactTooltip
         className="custom-tooltip"
         delayHide={250}
         delayShow={25}
         place="bottom"
-        effect="solid"
         arrowColor="transparent"
         {...props}
       >
@@ -44,6 +43,7 @@ const CustomTooltip = styled.div`
     border-radius: var(--radius-primary);
     white-space: pre;
     pointer-events: auto;
+    z-index: 9999;
 
     &::before {
       display: none;

src/components/Trigger/TriggeredByBadge.tsx

@@ -11,47 +11,49 @@ type TriggerBadgeInfo =
   | { type: 'trigger'; data: TriggerEventsValue[] };
 
 type Props = {
-  id: number;
   content: TriggerBadgeInfo;
 };
 
-const TriggeredByBadge: React.FC<Props> = ({ id, content }) => {
-  const tooltipId = `trigger-tooltip-${id}`;
-
-  if (content.type === 'user') {
-    return (
-      <>
-        <Badge badgeType="user" data-tip data-for={tooltipId}>
-          {content.data}
-        </Badge>
-        <Tooltip id={tooltipId} place="bottom">
-          <div>{content.data}</div>
-        </Tooltip>
-      </>
-    );
+const TriggeredByBadge: React.FC<Props> = ({ content }) => {
+  if (!content.data) {
+    return;
   }
 
+  const badges =
+    content.type === 'user'
+      ? [
+          {
+            type: 'user' as const,
+            name: content.data,
+          },
+        ]
+      : content.data.map((item) => ({ type: item.type, name: item.name }));
+
+  const tooltipProps = {
+    'data-tooltip-content': badges.map((item) => item.name).join(', '),
+    'data-tooltip-id': 'triggered-by-tooltip',
+  };
+
   return (
     <Badges>
-      {content.data.slice(0, 1).map((item) => (
-        <Badge key={item.name} badgeType={item.type} data-tip data-for={tooltipId}>
+      {badges.slice(0, 1).map((item) => (
+        <Badge key={item.name} badgeType={item.type} {...tooltipProps}>
           {item.name}
         </Badge>
       ))}
-      {content.data.length > 1 && (
-        <Badge badgeType="event" data-tip data-for={tooltipId}>
-          +{content.data.length - 1}
+      {badges.length > 1 && (
+        <Badge badgeType="event" {...tooltipProps}>
+          +{badges.length - 1}
         </Badge>
       )}
-      <Tooltip id={tooltipId} place="bottom">
-        {content.data.map((item) => (
-          <div key={item.name}>{item.name}</div>
-        ))}
-      </Tooltip>
     </Badges>
   );
 };
 
+export const TriggeredByTooltip = () => {
+  return <Tooltip id="triggered-by-tooltip" place="left" />;
+};
+
 const Badges = styled.div`
   display: flex;
   flex-wrap: nowrap;

src/components/Trigger/index.tsx

@@ -44,7 +44,7 @@ const Trigger: React.FC<Props> = ({ triggerEventsValue, className, showToolTip =
   const tooltipId = `label-tooltip-${id}`;
 
   return (
-    <TriggerLine key={id} data-tip data-for={tooltipId} className={className}>
+    <TriggerLine key={id} data-tooltip-id={tooltipId} className={className}>
       {link ? (
         <TriggerLink to={link}>
           <StyledIcon name="arrow" linkToRun={linkToRun} />

src/pages/Home/Content/Tooltips.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TagTooltip } from '@pages/Home/ResultGroup/Cells/TagCell';
+import Tooltip from '@components/Tooltip';
+import { TriggeredByTooltip } from '@components/Trigger/TriggeredByBadge';
+
+const HomeTooltips: React.FC<{
+  updateListValue: (key: string, value: string) => void;
+}> = ({ updateListValue }) => {
+  return (
+    <>
+      <TagTooltip updateListValue={updateListValue} />
+      <TriggeredByTooltip />
+      <Tooltip id="general-table-tooltip" />
+    </>
+  );
+};
+
+export default HomeTooltips;

src/pages/Home/Content/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { APIError, AsyncStatus, Run as IRun } from '@/types';
 import AutoLoadTrigger from '@pages/Home/Content/AutoLoadTrigger';
+import HomeTooltips from '@pages/Home/Content/Tooltips';
 import ResultGroup from '@pages/Home/ResultGroup';
 import GenericError, { APIErrorRenderer } from '@components/GenericError';
 import Spinner from '@components/Spinner';
@@ -64,7 +65,7 @@ const HomeContentArea: React.FC<Props> = ({
           <GenericError icon="searchNotFound" message={t('error.no-results')} />
         </ItemRow>
       )}
-      {/* TODO */}
+
       <BigLoader visible={showLoader && resultAmount > 0}>
         <Spinner md />
       </BigLoader>
@@ -82,6 +83,8 @@ const HomeContentArea: React.FC<Props> = ({
         }}
         resultAmount={resultAmount}
       />
+
+      <HomeTooltips updateListValue={updateListValue} />
     </Content>
   );
 };

src/pages/Home/ResultGroup/Cells/ExpandToggle.tsx

@@ -18,7 +18,7 @@ const ExpandToggle: React.FC<ExpandToggleProps> = (props) => {
 
 const ToggleContainer = styled.div`
   position: absolute;
-  left: -1.5rem;
+  left: var(--expand-toggle-left);
   top: 0;
   height: 100%;
   display: flex;

src/pages/Home/ResultGroup/Cells/TagCell.tsx

@@ -9,7 +9,6 @@ import Tooltip from '@components/Tooltip';
 //
 
 type ResultGroupTagsProps = {
-  id: string;
   tags: string[];
   updateListValue: (key: string, value: string) => void;
 };
@@ -18,9 +17,12 @@ type ResultGroupTagsProps = {
 // Component
 //
 
-const ResultGroupTags: React.FC<ResultGroupTagsProps> = ({ id, tags, updateListValue }) => {
+const ResultGroupTags: React.FC<ResultGroupTagsProps> = ({ tags, updateListValue }) => {
   const sortedTags = tags.sort((a, b) => a.localeCompare(b));
-  const tooltipId = `tag-tooltip-${id}`;
+  const tooltipProps = {
+    'data-tooltip-content': JSON.stringify(sortedTags),
+    'data-tooltip-id': 'tag-tooltip',
+  };
 
   return (
     <TagsCell
@@ -35,28 +37,46 @@ const ResultGroupTags: React.FC<ResultGroupTagsProps> = ({ id, tags, updateListV
           </Tag>
         ))}
 
-        {sortedTags.length > 1 && (
-          <Tag data-tip data-for={tooltipId}>
-            +{sortedTags.length - 1}
-          </Tag>
-        )}
+        {sortedTags.length > 1 && <Tag {...tooltipProps}>+{sortedTags.length - 1}</Tag>}
       </TagContainer>
 
-      <TagContainerSmallScreen data-tip data-for={tooltipId}>
+      <TagContainerSmallScreen {...tooltipProps}>
         <Icon name="tag" size="sm" />
       </TagContainerSmallScreen>
-      <Tooltip id={tooltipId} place="bottom">
-        {sortedTags.map((tag, index) => (
-          <span key={tag}>
-            <TagInTooltip onClick={() => updateListValue('_tags', tag)}>{tag}</TagInTooltip>
-            {index !== sortedTags.length - 1 && ', '}
-          </span>
-        ))}
-      </Tooltip>
     </TagsCell>
   );
 };
 
+export const TagTooltip: React.FC<{ updateListValue: (key: string, value: string) => void }> = ({
+  updateListValue,
+}) => {
+  return (
+    <Tooltip
+      id="tag-tooltip"
+      place="left"
+      clickable={true}
+      render={(data) => {
+        if (!data.content) return;
+        const tags = JSON.parse(data.content || '');
+        if (!Array.isArray(tags) || tags.length === 0) {
+          return;
+        }
+
+        return (
+          <>
+            {tags.map((tag, index) => (
+              <span key={tag}>
+                <TagInTooltip onClick={() => updateListValue('_tags', tag)}>{tag}</TagInTooltip>
+                {index !== tags.length - 1 && ', '}
+              </span>
+            ))}
+          </>
+        );
+      }}
+    />
+  );
+};
+
 //
 // Styles
 //

src/pages/Home/ResultGroup/Cells/TriggeredByCell.tsx

@@ -39,7 +39,6 @@ const TriggeredByCell: React.FC<Props> = ({ run }) => {
     <TD>
       {status !== 'Loading' && (
         <TriggeredByBadge
-          id={run.run_number}
           content={
             hasTrigger ? { type: 'trigger', data: triggerEventsValue } : { type: 'user', data: getUsername(run) }
           }

src/pages/Home/ResultGroup/Cells/index.tsx

@@ -9,6 +9,7 @@ import ResultGroupTags from '@pages/Home/ResultGroup/Cells/TagCell';
 import TriggeredByCell from '@pages/Home/ResultGroup/Cells/TriggeredByCell';
 import AutoUpdating from '@components/AutoUpdating';
 import { TD } from '@components/Table';
+import { NoWrapOverflowText } from '@components/Text';
 import { getRunDuration, getTagOfType } from '@utils/run';
 
 //
@@ -36,11 +37,13 @@ const ResultGroupCells: React.FC<ResultGroupCellsProps> = React.memo(
         {/* FLOW ID */}
         {params._group !== 'flow_id' && (
           <TDWithLink link={link}>
-            <div>{r.flow_id}</div>
+            <NoWrapOverflowText>{r.flow_id}</NoWrapOverflowText>
           </TDWithLink>
         )}
         {/* PROJECT */}
-        <TDWithLink link={link}>{projectString(r)}</TDWithLink>
+        <TDWithLink link={link}>
+          <NoWrapOverflowText>{projectString(r)}</NoWrapOverflowText>
+        </TDWithLink>
         {/* STARTED AT */}
         <DateTimeCell date={new Date(r.ts_epoch)} link={link} />
         {/* DURATION */}
@@ -55,7 +58,7 @@ const ResultGroupCells: React.FC<ResultGroupCellsProps> = React.memo(
         <TriggeredByCell run={r} />
         {/* USER TAGS */}
         {(r.tags || []).length > 0 ? (
-          <ResultGroupTags id={r.run_number.toString()} tags={r.tags || []} updateListValue={updateListValue} />
+          <ResultGroupTags tags={r.tags || []} updateListValue={updateListValue} />
         ) : (
           <TDWithLink link={link}></TDWithLink>
         )}