feat(buttons-actions): add tooltip (#402)

Qovery · Dec 1, 2022 · 3619658 · 3619658
1 parent 2c904ad
commit 3619658
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 7 deletions.
diff --git a/...shared/console-shared/src/lib/application-buttons-actions/application-buttons-actions.tsx b/...shared/console-shared/src/lib/application-buttons-actions/application-buttons-actions.tsx
@@ -211,16 +211,19 @@ export function ApplicationButtonsActions(props: ApplicationButtonsActionsProps)
 
   const buttonActionsDefault: ButtonIconActionElementProps[] = [
     {
+      triggerTooltip: 'Manage deployment',
       iconLeft: <Icon name={IconAwesomeEnum.PLAY} className="px-0.5" />,
       iconRight: <Icon name={IconAwesomeEnum.ANGLE_DOWN} className="px-0.5" />,
       menusClassName: 'border-r border-r-element-light-lighter-500',
       menus: buttonStatusActions,
     },
     {
+      triggerTooltip: 'Logs',
       iconLeft: <Icon name={IconAwesomeEnum.SCROLL} className="px-0.5" />,
       onClick: () => navigate(APPLICATION_LOGS_URL(organizationId, projectId, environmentId, application.id)),
     },
     {
+      triggerTooltip: 'Other actions',
       iconLeft: <Icon name={IconAwesomeEnum.ELLIPSIS_V} className="px-0.5" />,
       menus: [
         {

diff --git a/libs/shared/console-shared/src/lib/database-buttons-actions/database-buttons-actions.tsx b/libs/shared/console-shared/src/lib/database-buttons-actions/database-buttons-actions.tsx
@@ -135,12 +135,14 @@ export function DatabaseButtonsActions(props: DatabaseButtonsActionsProps) {
 
   const buttonActionsDefault: ButtonIconActionElementProps[] = [
     {
+      triggerTooltip: 'Manage deployment',
       iconLeft: <Icon name={IconAwesomeEnum.PLAY} className="px-0.5" />,
       iconRight: <Icon name={IconAwesomeEnum.ANGLE_DOWN} className="px-0.5" />,
       menusClassName: 'border-r border-r-element-light-lighter-500',
       menus: buttonStatusActions,
     },
     {
+      triggerTooltip: 'Other actions',
       iconLeft: <Icon name={IconAwesomeEnum.ELLIPSIS_V} className="px-0.5" />,
       menus: [
         {

diff --git a/...shared/console-shared/src/lib/environment-buttons-actions/environment-buttons-actions.tsx b/...shared/console-shared/src/lib/environment-buttons-actions/environment-buttons-actions.tsx
@@ -214,6 +214,7 @@ export function EnvironmentButtonsActions(props: EnvironmentButtonsActionsProps)
     ...(hasServices
       ? [
           {
+            triggerTooltip: 'Manage deployment',
             iconLeft: <Icon name={IconAwesomeEnum.PLAY} className="px-0.5" />,
             iconRight: <Icon name={IconAwesomeEnum.ANGLE_DOWN} className="px-0.5" />,
             menusClassName: 'border-r border-r-element-light-lighter-500',
@@ -222,10 +223,12 @@ export function EnvironmentButtonsActions(props: EnvironmentButtonsActionsProps)
         ]
       : []),
     {
+      triggerTooltip: 'Logs',
       iconLeft: <Icon name={IconAwesomeEnum.SCROLL} className="px-0.5" />,
       onClick: () => navigate(DEPLOYMENT_LOGS_URL(organizationId, projectId, environment.id)),
     },
     {
+      triggerTooltip: 'Other actions',
       iconLeft: <Icon name="icon-solid-ellipsis-vertical" />,
       menus: [
         {

diff --git a/...ents/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx b/...ents/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Menu, MenuAlign, MenuData } from '../../../menu/menu'
+import Tooltip from '../../../tooltip/tooltip'
 
 export interface ButtonIconActionElementProps {
+  triggerTooltip?: string
   iconLeft?: React.ReactNode
   iconRight?: React.ReactNode
   onClick?: () => void
@@ -13,6 +15,7 @@ export interface ButtonIconActionElementProps {
 
 export function ButtonIconActionElement(props: ButtonIconActionElementProps) {
   const {
+    triggerTooltip,
     iconLeft,
     iconRight,
     onClick,
@@ -24,6 +27,20 @@ export function ButtonIconActionElement(props: ButtonIconActionElementProps) {
 
   const [open, setOpen] = useState(false)
 
+  const tooltipWrapper = (content: React.ReactNode, withRightBorder = false) => {
+    if (triggerTooltip) {
+      return (
+        <Tooltip content={triggerTooltip} delayDuration={100}>
+          <span className={`flex ${withRightBorder ? 'border-r border-r-element-light-lighter-500' : ''}`}>
+            {content}
+          </span>
+        </Tooltip>
+      )
+    } else {
+      return content
+    }
+  }
+
   if (menus) {
     return (
       <Menu
@@ -41,14 +58,20 @@ export function ButtonIconActionElement(props: ButtonIconActionElementProps) {
             {iconRight}
           </div>
         }
+        triggerTooltip={triggerTooltip}
       />
     )
   } else {
     return (
-      <div data-testid="element" className="btn-icon-action__element" onClick={onClick}>
-        {iconLeft}
-        {iconRight}
-      </div>
+      <>
+        {tooltipWrapper(
+          <div data-testid="element" className="btn-icon-action__element" onClick={onClick}>
+            {iconLeft}
+            {iconRight}
+          </div>,
+          true
+        )}
+      </>
     )
   }
 }

diff --git a/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.stories.tsx b/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.stories.tsx
@@ -13,6 +13,7 @@ export const Primary = Template.bind({})
 Primary.args = {
   actions: [
     {
+      triggerTooltip: 'More actions',
       iconLeft: <Icon name="icon-solid-ellipsis-v" />,
       menus: [
         {

diff --git a/libs/shared/ui/src/lib/components/menu/menu.tsx b/libs/shared/ui/src/lib/components/menu/menu.tsx
@@ -1,5 +1,6 @@
 import { ControlledMenu, MenuCloseEvent } from '@szhsin/react-menu'
 import React, { useEffect, useRef, useState } from 'react'
+import Tooltip from '../tooltip/tooltip'
 import MenuGroup from './menu-group/menu-group'
 import { MenuItemProps } from './menu-item/menu-item'
 
@@ -18,6 +19,7 @@ export enum MenuAlign {
 
 export type MenuData = {
   items: MenuItemProps[]
+  label?: string
   title?: string
   button?: string
   buttonLink?: string
@@ -26,11 +28,12 @@ export type MenuData = {
 
 export interface MenuProps {
   trigger: React.ReactElement
+  menus: MenuData
   children?: React.ReactNode
   direction?: MenuDirection
   open?: boolean
   arrowAlign?: MenuAlign
-  menus: MenuData
+  triggerTooltip?: string
   className?: string
   header?: React.ReactNode
   onClose?: (e: MenuCloseEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => void
@@ -56,6 +59,7 @@ export function Menu(props: MenuProps) {
     paddingMenuY = 12,
     onOpen,
     isFilter,
+    triggerTooltip,
   } = props
 
   const ref = useRef(null)
@@ -120,7 +124,13 @@ export function Menu(props: MenuProps) {
         ref={ref}
         onMouseDown={() => handleClick(null)}
       >
-        {trigger}
+        {!triggerTooltip ? (
+          trigger
+        ) : (
+          <Tooltip content={triggerTooltip} delayDuration={100}>
+            <span>{trigger}</span>
+          </Tooltip>
+        )}
       </div>
       <ControlledMenu
         state={isOpen ? 'open' : 'closed'}