Feat: Add tooltips on new column menu (#1893)

* implemented tooltip for view fields * console.log
2023-10-06 14:34:39 +05:30
parent 2ff35083fb
commit 53021dc64f
11 changed files with 132 additions and 27 deletions
--- a/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
+++ b/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
@ -43,6 +43,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
      },
      isVisible: true,
      buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'The company name.',
      basePathToShowPage: '/companies/',
    } satisfies ColumnDefinition<FieldChipMetadata>,
    {
@ -58,6 +59,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
      },
      isVisible: true,
      buttonIcon: IconPencil,
+      infoTooltipContent:
+        'The company website URL. We use this url to fetch the company icon.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
    {
      key: 'accountOwner',
@ -71,6 +74,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        relationType: Entity.User,
      },
      isVisible: true,
+      infoTooltipContent:
+        'Your team member responsible for managing the company account.',
    } satisfies ColumnDefinition<FieldRelationMetadata>,
    {
      key: 'createdAt',
@ -83,6 +88,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        fieldName: 'createdAt',
      },
      isVisible: true,
+      infoTooltipContent: "Date when the company's record was created.",
    } satisfies ColumnDefinition<FieldDateMetadata>,
    {
      key: 'employees',
@ -97,6 +103,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        placeHolder: 'Employees',
      },
      isVisible: true,
+      infoTooltipContent: 'Number of employees in the company.',
    } satisfies ColumnDefinition<FieldNumberMetadata>,
    {
      key: 'linkedin',
@ -111,6 +118,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
      },
      isVisible: true,
      buttonIcon: IconPencil,
+      infoTooltipContent: 'The company Linkedin account.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
    {
      key: 'address',
@ -124,6 +132,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        placeHolder: 'Address', // Hack: Fake character to prevent password-manager from filling the field
      },
      isVisible: true,
+      infoTooltipContent: 'The company address.',
    } satisfies ColumnDefinition<FieldTextMetadata>,
    {
      key: 'idealCustomerProfile',
@ -136,6 +145,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        fieldName: 'idealCustomerProfile',
      },
      isVisible: false,
+      infoTooltipContent:
+        'Ideal Customer Profile:  Indicates whether the company is the most suitable and valuable customer for you.',
    } satisfies ColumnDefinition<FieldBooleanMetadata>,
    {
      key: 'annualRecurringRevenue',
@ -148,6 +159,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
        fieldName: 'annualRecurringRevenue',
        placeHolder: 'ARR',
      },
+      infoTooltipContent:
+        'Annual Recurring Revenue: The actual or estimated annual revenue of the company.',
    } satisfies ColumnDefinition<FieldMoneyMetadata>,
    {
      key: 'xUrl',
@ -162,5 +175,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
      },
      isVisible: false,
      buttonIcon: IconPencil,
+      infoTooltipContent: 'The company Twitter account.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
  ];
--- a/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx
+++ b/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx
@ -42,6 +42,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        entityType: Entity.Person,
      },
      buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'Contact’s first and last name.',
      basePathToShowPage: '/person/',
    } satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
    {
@ -56,6 +57,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        placeHolder: 'Email', // Hack: Fake character to prevent password-manager from filling the field
      },
      buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Email.',
    } satisfies ColumnDefinition<FieldEmailMetadata>,
    {
      key: 'company',
@ -68,6 +70,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        fieldName: 'company',
        relationType: Entity.Company,
      },
+      infoTooltipContent: 'Contact’s company.',
    } satisfies ColumnDefinition<FieldRelationMetadata>,
    {
      key: 'phone',
@ -81,6 +84,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        placeHolder: 'Phone', // Hack: Fake character to prevent password-manager from filling the field
      },
      buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s phone number.',
    } satisfies ColumnDefinition<FieldPhoneMetadata>,
    {
      key: 'createdAt',
@ -92,6 +96,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
      metadata: {
        fieldName: 'createdAt',
      },
+      infoTooltipContent: 'Date when the contact was added.',
    } satisfies ColumnDefinition<FieldDateMetadata>,
    {
      key: 'city',
@ -104,6 +109,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        fieldName: 'city',
        placeHolder: 'City', // Hack: Fake character to prevent password-manager from filling the field
      },
+      infoTooltipContent: 'Contact’s city.',
    } satisfies ColumnDefinition<FieldTextMetadata>,
    {
      key: 'jobTitle',
@ -116,6 +122,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        fieldName: 'jobTitle',
        placeHolder: 'Job title',
      },
+      infoTooltipContent: 'Contact’s job title.',
    } satisfies ColumnDefinition<FieldTextMetadata>,
    {
      key: 'linkedin',
@ -129,6 +136,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        placeHolder: 'LinkedIn',
      },
      buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Linkedin account.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
    {
      key: 'x',
@ -142,5 +150,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
        placeHolder: 'X',
      },
      buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Twitter account.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
  ];
--- a/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx
+++ b/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx
@ -27,6 +27,8 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
        fieldName: 'closeDate',
      },
      isVisible: true,
+      infoTooltipContent:
+        'Specified date by which an opportunity must be completed.',
    } satisfies BoardFieldDefinition<FieldDateMetadata>,
    {
      key: 'amount',
@ -39,6 +41,7 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
        placeHolder: '0',
      },
      isVisible: true,
+      infoTooltipContent: 'Potential monetary value of a business opportunity.',
    } satisfies BoardFieldDefinition<FieldNumberMetadata>,
    {
      key: 'probability',
@ -50,6 +53,8 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
        fieldName: 'probability',
      },
      isVisible: true,
+      infoTooltipContent:
+        "Level of certainty in the lead's potential to convert into a success.",
    } satisfies BoardFieldDefinition<FieldProbabilityMetadata>,
    {
      key: 'pointOfContact',
@ -64,5 +69,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
      },
      isVisible: true,
      buttonIcon: IconPencil,
+      infoTooltipContent: 'Primary contact within the company.',
    } satisfies BoardFieldDefinition<FieldRelationMetadata>,
  ];
--- a/front/src/modules/ui/button/components/FloatingIconButton.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButton.tsx
@ -21,17 +21,21 @@ export type FloatingIconButtonProps = {
  disabled?: boolean;
  focus?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isActive?: boolean;
 };

 const StyledButton = styled.button<
  Pick<
    FloatingIconButtonProps,
-    'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus'
+    'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus' | 'isActive'
  >
 >`
  align-items: center;
  backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isActive }) =>
+    !!isActive
+      ? theme.background.transparent.medium
+      : theme.background.primary};
  border: ${({ focus, theme }) =>
    focus ? `1px solid ${theme.color.blue}` : 'transparent'};
  border-radius: ${({ position, theme }) => {
@ -87,7 +91,8 @@ const StyledButton = styled.button<
  }}

  &:hover {
-    background: ${({ theme }) => theme.background.transparent.lighter};
+    background: ${({ theme, isActive }) =>
+      !!isActive ?? theme.background.transparent.lighter};
  }

  &:active {
@ -110,6 +115,7 @@ export const FloatingIconButton = ({
  disabled = false,
  focus = false,
  onClick,
+  isActive,
 }: FloatingIconButtonProps) => {
  const theme = useTheme();
  return (
@ -122,6 +128,7 @@ export const FloatingIconButton = ({
      className={className}
      position={position}
      onClick={onClick}
+      isActive={isActive}
    >
      {Icon && <Icon size={theme.icon.size.md} />}
    </StyledButton>
--- a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
@ -27,15 +27,17 @@ export type FloatingIconButtonGroupProps = Pick<
  iconButtons: {
    Icon: IconComponent;
    onClick?: (event: MouseEvent<any>) => void;
+    isActive?: boolean;
  }[];
 };

 export const FloatingIconButtonGroup = ({
  iconButtons,
  size,
+  className,
 }: FloatingIconButtonGroupProps) => (
-  <StyledFloatingIconButtonGroupContainer>
-    {iconButtons.map(({ Icon, onClick }, index) => {
+  <StyledFloatingIconButtonGroupContainer className={className}>
+    {iconButtons.map(({ Icon, onClick, isActive }, index) => {
      const position: FloatingIconButtonPosition =
        iconButtons.length === 1
          ? 'standalone'
@ -54,6 +56,7 @@ export const FloatingIconButtonGroup = ({
          onClick={onClick}
          position={position}
          size={size}
+          isActive={isActive}
        />
      );
    })}
--- a/front/src/modules/ui/field/types/FieldDefinition.ts
+++ b/front/src/modules/ui/field/types/FieldDefinition.ts
@ -11,4 +11,5 @@ export type FieldDefinition<T extends FieldMetadata> = {
  metadata: T;
  buttonIcon?: IconComponent;
  basePathToShowPage?: string;
+  infoTooltipContent?: string;
 };
--- a/front/src/modules/ui/menu-item/components/MenuItem.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItem.tsx
@ -20,6 +20,7 @@ export type MenuItemProps = {
  accent?: MenuItemAccent;
  text: string;
  iconButtons?: MenuItemIconButton[];
+  isTooltipOpen?: boolean;
  className?: string;
  testId?: string;
  onClick?: () => void;
@ -30,6 +31,7 @@ export const MenuItem = ({
  accent = 'default',
  text,
  iconButtons,
+  isTooltipOpen,
  className,
  testId,
  onClick,
@ -42,6 +44,7 @@ export const MenuItem = ({
      onClick={onClick}
      className={className}
      accent={accent}
+      isMenuOpen={!!isTooltipOpen}
    >
      <StyledMenuItemLeftContent>
        <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
--- a/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
@ -11,6 +11,7 @@ export type MenuItemDraggableProps = {
  LeftIcon: IconComponent | undefined;
  accent?: MenuItemAccent;
  iconButtons?: MenuItemIconButton[];
+  isTooltipOpen?: boolean;
  onClick?: () => void;
  text: string;
  isDragDisabled?: boolean;
@ -20,6 +21,7 @@ export const MenuItemDraggable = ({
  LeftIcon,
  accent = 'default',
  iconButtons,
+  isTooltipOpen,
  onClick,
  text,
  isDragDisabled = false,
@ -32,17 +34,19 @@ export const MenuItemDraggable = ({
      onClick={onClick}
      accent={accent}
      className={className}
+      isMenuOpen={!!isTooltipOpen}
    >
      <MenuItemLeftContent
        LeftIcon={LeftIcon}
        text={text}
        showGrip={!isDragDisabled}
      />
-      <div className="hoverable-buttons">
-        {showIconButtons && (
-          <FloatingIconButtonGroup iconButtons={iconButtons} />
-        )}
-      </div>
+      {showIconButtons && (
+        <FloatingIconButtonGroup
+          className="hoverable-buttons"
+          iconButtons={iconButtons}
+        />
+      )}
    </StyledHoverableMenuItemBase>
  );
 };
--- a/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
@ -89,9 +89,11 @@ export const StyledMenuItemRightContent = styled.div`
  flex-direction: row;
 `;

-export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
+export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
+  isMenuOpen: boolean;
+}>`
  & .hoverable-buttons {
-    opacity: 0;
+    opacity: ${({ isMenuOpen }) => (isMenuOpen ? 1 : 0)};
    pointer-events: none;
    position: fixed;
    right: ${({ theme }) => theme.spacing(2)};
--- a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
  DropResult,
  OnDragEndResponder,
@ -9,8 +11,12 @@ import { DraggableList } from '@/ui/draggable-list/components/DraggableList';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import { IconMinus, IconPlus } from '@/ui/icon';
+import { IconInfoCircle } from '@/ui/input/constants/icons';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
+import { AppTooltip } from '@/ui/tooltip/AppTooltip';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { isDefined } from '~/utils/isDefined';

 import { ViewFieldForVisibility } from '../types/ViewFieldForVisibility';

@ -33,8 +39,38 @@ export const ViewFieldsVisibilityDropdownSection = ({
    onDragEnd?.(result, provided);
  };

+  const [openToolTipIndex, setOpenToolTipIndex] = useState<number>();
+
+  const handleInfoButtonClick = (index: number) => {
+    if (index === openToolTipIndex) setOpenToolTipIndex(undefined);
+    else setOpenToolTipIndex(index);
+  };
+
  const getIconButtons = (index: number, field: ViewFieldForVisibility) => {
-    if (index !== 0) {
+    const isFirstColumn = isDraggable && index === 0;
+    if (isFirstColumn && field.infoTooltipContent) {
+      return [
+        {
+          Icon: IconInfoCircle,
+          onClick: () => handleInfoButtonClick(index),
+          isActive: openToolTipIndex === index,
+        },
+      ];
+    }
+    if (!isFirstColumn && field.infoTooltipContent) {
+      return [
+        {
+          Icon: IconInfoCircle,
+          onClick: () => handleInfoButtonClick(index),
+          isActive: openToolTipIndex === index,
+        },
+        {
+          Icon: field.isVisible ? IconMinus : IconPlus,
+          onClick: () => onVisibilityChange(field),
+        },
+      ];
+    }
+    if (!isFirstColumn && !field.infoTooltipContent) {
      return [
        {
          Icon: field.isVisible ? IconMinus : IconPlus,
@ -44,11 +80,20 @@ export const ViewFieldsVisibilityDropdownSection = ({
    }
  };

+  const ref = useRef<HTMLDivElement>(null);
+
+  useListenClickOutside({
+    refs: [ref],
+    callback: () => {
+      setOpenToolTipIndex(undefined);
+    },
+  });
+
  return (
-    <>
+    <div ref={ref}>
      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
      <StyledDropdownMenuItemsContainer>
-        {isDraggable && (
+        {isDraggable ? (
          <DraggableList
            onDragEnd={handleOnDrag}
            draggableItems={
@ -64,8 +109,10 @@ export const ViewFieldsVisibilityDropdownSection = ({
                        key={field.key}
                        LeftIcon={field.Icon}
                        iconButtons={getIconButtons(index, field)}
+                        isTooltipOpen={openToolTipIndex === index}
                        text={field.name}
                        isDragDisabled={index === 0}
+                        className={`${title}-draggable-item-tooltip-anchor-${index}`}
                      />
                    }
                  />
@ -73,22 +120,31 @@ export const ViewFieldsVisibilityDropdownSection = ({
              </>
            }
          />
-        )}
-        {!isDraggable &&
-          fields.map((field) => (
+        ) : (
+          fields.map((field, index) => (
            <MenuItem
              key={field.key}
              LeftIcon={field.Icon}
-              iconButtons={[
-                {
-                  Icon: field.isVisible ? IconMinus : IconPlus,
-                  onClick: () => onVisibilityChange(field),
-                },
-              ]}
+              iconButtons={getIconButtons(index, field)}
+              isTooltipOpen={openToolTipIndex === index}
              text={field.name}
+              className={`${title}-fixed-item-tooltip-anchor-${index}`}
            />
-          ))}
+          ))
+        )}
      </StyledDropdownMenuItemsContainer>
-    </>
+      {isDefined(openToolTipIndex) &&
+        createPortal(
+          <AppTooltip
+            anchorSelect={`.${title}-${
+              isDraggable ? 'draggable' : 'fixed'
+            }-item-tooltip-anchor-${openToolTipIndex}`}
+            place="left"
+            content={fields[openToolTipIndex].infoTooltipContent}
+            isOpen={true}
+          />,
+          document.body,
+        )}
+    </div>
  );
 };
--- a/front/src/modules/ui/view-bar/types/ViewFieldForVisibility.ts
+++ b/front/src/modules/ui/view-bar/types/ViewFieldForVisibility.ts
@ -3,7 +3,7 @@ import { FieldMetadata } from '@/ui/field/types/FieldMetadata';

 export type ViewFieldForVisibility = Pick<
  FieldDefinition<FieldMetadata>,
-  'key' | 'name' | 'Icon'
+  'key' | 'name' | 'Icon' | 'infoTooltipContent'
 > & {
  isVisible?: boolean;
  index: number;