fix: review comments

Author: Elessar1802

src/Common/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import './styles.scss'
 const Tooltip = ({
     shortcutKeyCombo,
     alwaysShowTippyOnHover,
-    // NOTE: if alwaysShowTippyOnHover is being passed by user don't apply truncation logic at all
+    // NOTE: if alwaysShowTippyOnHover or shortcutKeyCombo are being passed by user don't apply truncation logic at all
     showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
     wordBreak = true,
     children: child,

src/Common/Tooltip/types.ts

@@ -27,6 +27,7 @@ type BaseTooltipProps =
            * @default false
            */
           shortcutKeyCombo?: never
+          content: TippyProps['content']
       }
     | {
           /**
@@ -44,6 +45,7 @@ type BaseTooltipProps =
            * @default false
            */
           shortcutKeyCombo?: never
+          content: TippyProps['content']
       }
     | {
           /**
@@ -55,11 +57,12 @@ type BaseTooltipProps =
            * If showOnTruncate is defined this prop doesn't work
            * @default false
            */
-          alwaysShowTippyOnHover?: never
+          alwaysShowTippyOnHover?: boolean
           /**
            * If true, use the common styling for shortcuts
            * @default true
            */
+          content?: never
           shortcutKeyCombo?: {
               text: string
               combo: SupportedKeyboardKeysType[]

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

@@ -154,14 +154,15 @@ const Button = ({
             }
         }
 
-        if (!tooltipProps.shortcutKeyCombo) {
-            return {
-                alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
-                ...(tooltipProps as Omit<TooltipProps, 'shortcutKeyCombo' | 'showOnTruncate'>),
-            }
+        if (Object.hasOwn(tooltipProps, 'shortcutKeyCombo') && 'shortcutKeyCombo' in tooltipProps) {
+            return tooltipProps
         }
 
-        return tooltipProps
+        return {
+            // TODO: using some typing somersaults here, clean it up later
+            alwaysShowTippyOnHover: showTooltip && !!(tooltipProps as Required<Pick<TooltipProps, 'content'>>)?.content,
+            ...(tooltipProps as Required<Pick<TooltipProps, 'content'>>),
+        }
     }
 
     return (

src/Shared/Components/Button/types.ts

@@ -94,7 +94,10 @@ export type ButtonProps = (
               /**
                * Props for tooltip
                */
-              tooltipProps: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate'>
+              // TODO: using some typing somersaults here, clean it up later
+              tooltipProps:
+                  | Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo'>
+                  | Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'content'>
           }
         | {
               showTooltip?: never

src/Shared/Components/CICDHistory/History.components.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import Tippy from '@tippyjs/react'
 import { useCallback, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { withShortcut, IWithShortcut } from 'react-keybind'
@@ -102,7 +101,7 @@ export const LogResizeButton = withShortcut(
 
 export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
     <div style={style} className="dc__element-scroller flex column top br-4">
-        <Tippy className="default-tt" arrow={false} content="Scroll to Top" placement="left">
+        <Tooltip content="Scroll to Top" placement="left">
             <button
                 className="flex"
                 disabled={!scrollToTop}
@@ -112,8 +111,8 @@ export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType):
             >
                 <DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
             </button>
-        </Tippy>
-        <Tippy className="default-tt" arrow={false} content="Scroll to Bottom" placement="left">
+        </Tooltip>
+        <Tooltip content="Scroll to Bottom" placement="left">
             <button
                 className="flex"
                 disabled={!scrollToBottom}
@@ -123,7 +122,7 @@ export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType):
             >
                 <DropDownIcon className="rotate" />
             </button>
-        </Tippy>
+        </Tooltip>
     </div>
 )
 

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -191,6 +191,7 @@ const LogsRenderer = ({
     const { searchKey, handleSearch } = useUrlFilters()
 
     const areAllStagesExpanded = useMemo(() => stageList.every((item) => item.isOpen), [stageList])
+    const shortcutTippyText = areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages'
 
     const areStagesAvailable =
         (window._env_.FEATURE_STEP_WISE_LOGS_ENABLE && streamDataList[0]?.startsWith(LOGS_STAGE_IDENTIFIER)) || false
@@ -454,18 +455,17 @@ const LogsRenderer = ({
                             />
                             <Tooltip
                                 shortcutKeyCombo={{
-                                    text: areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages',
+                                    text: shortcutTippyText,
                                     combo: ['E'] as const,
                                 }}
                                 className="dc__mxw-500"
                                 placement="left"
                             >
                                 <button
                                     type="button"
-                                    className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2 pointer"
+                                    className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
                                     onClick={handleToggleOpenAllStages}
-                                    aria-label="Expand all stages"
-                                    data-toggle-state={areAllStagesExpanded}
+                                    aria-label={shortcutTippyText}
                                 >
                                     {areAllStagesExpanded ? (
                                         <ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />

src/Shared/Components/CICDHistory/types.tsx

@@ -47,7 +47,15 @@ export enum FetchIdDataStatus {
 }
 
 export interface LogResizeButtonType {
+    /**
+     * If given, that shortcut combo will be bound to the button
+     * @default null
+     */
     shortcutCombo?: SupportedKeyboardKeysType[]
+    /**
+     * If true, only show the button when location.pathname contains '/logs'
+     * @default true
+     */
     showOnlyWhenPathIncludesLogs?: boolean
     fullScreenView: boolean
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>