feat: add support for shortcut key combo tooltip as prop

Author: Elessar1802

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -0,0 +1,16 @@
+import { TooltipProps } from './types'
+
+const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutKeyCombo']) => (
+    <div className="flexbox dc__gap-8 px-8 py-4 flex-wrap">
+        <span className="lh-18 fs-12 fw-4 cn-0">{text}</span>
+        <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
+            {combo.map((key) => (
+                <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                    {key}
+                </span>
+            ))}
+        </div>
+    </div>
+)
+
+export default ShortcutKeyComboTooltipContent

src/Common/Tooltip/Tooltip.tsx

@@ -1,11 +1,14 @@
 import { useState, cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
+import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
+import './styles.scss'
 
 const Tooltip = ({
+    shortcutKeyCombo,
     alwaysShowTippyOnHover,
     // NOTE: if alwaysShowTippyOnHover is being passed by user don't apply truncation logic at all
-    showOnTruncate = alwaysShowTippyOnHover === undefined,
+    showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
     wordBreak = true,
     children: child,
     ...rest
@@ -22,14 +25,17 @@ const Tooltip = ({
         }
     }
 
-    return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
+    return (!showOnTruncate || !isTextTruncated) && !alwaysShowTippyOnHover && !shortcutKeyCombo ? (
         cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     ) : (
         <TippyJS
             arrow={false}
             placement="top"
+            // NOTE: setting the default maxWidth to empty string so that we can override using css
+            maxWidth=""
             {...rest}
-            className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
+            {...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
+            className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className ?? ''}`}
         >
             {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>

src/Common/Tooltip/styles.scss

@@ -0,0 +1,19 @@
+.tippy-box.shortcut-keys__tippy {
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: var(--N900);
+
+    & > .tippy-content {
+        padding: 0;
+    }
+
+    & .shortcut-keys__chip {
+        border-radius: 4px;
+        border: 0.5px solid rgba(255, 255, 255, 0.20);
+        background: var(--N800);
+        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.20);
+        padding: 0 2px;
+        min-width: 16px;
+        max-width: 250px;
+    }
+}

src/Common/Tooltip/types.ts

@@ -12,6 +12,11 @@ type BaseTooltipProps =
            * @default false
            */
           alwaysShowTippyOnHover?: never
+          /**
+           * If true, use the common styling for shortcuts
+           * @default false
+           */
+          shortcutKeyCombo?: never
       }
     | {
           /**
@@ -21,9 +26,34 @@ type BaseTooltipProps =
           showOnTruncate?: never
           /**
            * If true, wrap with tippy irrespective of other options
-           * @default false
+           * @default true
            */
           alwaysShowTippyOnHover?: boolean
+          /**
+           * If true, use the common styling for shortcuts
+           * @default false
+           */
+          shortcutKeyCombo?: never
+      }
+    | {
+          /**
+           * If true, show tippy on truncate
+           * @default false
+           */
+          showOnTruncate?: never
+          /**
+           * If showOnTruncate is defined this prop doesn't work
+           * @default false
+           */
+          alwaysShowTippyOnHover?: never
+          /**
+           * If true, use the common styling for shortcuts
+           * @default true
+           */
+          shortcutKeyCombo?: {
+              text: string
+              combo: string[]
+          }
       }
 
 export type TooltipProps = BaseTooltipProps &

src/Shared/Components/Button/Button.component.tsx

@@ -154,10 +154,14 @@ const Button = ({
             }
         }
 
-        return {
-            alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
-            ...tooltipProps,
+        if (!tooltipProps.shortcutKeyCombo) {
+            return {
+                alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
+                ...(tooltipProps as Omit<TooltipProps, 'shortcutKeyCombo' | 'showOnTruncate'>),
+            }
         }
+
+        return tooltipProps
     }
 
     return (

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -31,6 +31,7 @@ import {
     SearchBar,
     useUrlFilters,
     stopPropagation,
+    Tooltip,
 } from '../../../Common'
 import LogStageAccordion from './LogStageAccordion'
 import {
@@ -441,18 +442,27 @@ export const LogsRenderer = ({
                                 initialSearchText={searchKey}
                                 size={ComponentSizeType.large}
                             />
-                            <button
-                                type="button"
-                                className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
-                                onClick={handleToggleOpenAllStages}
-                                aria-label="Expand all stages"
+                            <Tooltip
+                                shortcutKeyCombo={{
+                                    text: areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages',
+                                    combo: ['Ctrl / ⌘', '⇧', 'F'],
+                                }}
+                                className="dc__mxw-500"
+                                placement="left"
                             >
-                                {areAllStagesExpanded ? (
-                                    <ICExpandAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
-                                ) : (
-                                    <ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
-                                )}
-                            </button>
+                                <button
+                                    type="button"
+                                    className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
+                                    onClick={handleToggleOpenAllStages}
+                                    aria-label="Expand all stages"
+                                >
+                                    {areAllStagesExpanded ? (
+                                        <ICExpandAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
+                                    ) : (
+                                        <ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
+                                    )}
+                                </button>
+                            </Tooltip>
                         </div>
                     </div>