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

* implemented tooltip for view fields

* console.log

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>
   );
 };

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;