Merge pull request #308 from devtron-labs/feat/expand-all-logs

feat: add a button to expand all log accordions in build history logs

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.12",
+    "version": "0.3.13",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -87,6 +87,7 @@
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
+        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },

package.json

@@ -548,3 +548,6 @@ export const VULNERABILITIES_SORT_PRIORITY = {
     low: 4,
     unknown: 5,
 }
+
+// TODO: might not work need to verify
+export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')

src/Assets/Icon/ic-collapse-all.svg

@@ -0,0 +1,18 @@
+import { KEYBOARD_KEYS_MAP, 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>
+        {!!combo?.length && (
+            <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">
+                        {KEYBOARD_KEYS_MAP[key]}
+                    </span>
+                ))}
+            </div>
+        )}
+    </div>
+)
+
+export default ShortcutKeyComboTooltipContent

src/Assets/Icon/ic-expand-all.svg

@@ -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,
+    // 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,
     ...rest
@@ -22,17 +25,24 @@ const Tooltip = ({
         }
     }
 
-    return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
-        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
-    ) : (
+    const showTooltipWhenShortcutKeyComboProvided =
+        !!shortcutKeyCombo && (alwaysShowTippyOnHover === undefined || alwaysShowTippyOnHover)
+    const showTooltipOnTruncate = showOnTruncate && isTextTruncated
+
+    return showTooltipOnTruncate || showTooltipWhenShortcutKeyComboProvided || alwaysShowTippyOnHover ? (
         <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>
+    ) : (
+        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     )
 }
 

src/Common/Constants.ts

@@ -1,2 +1,3 @@
 export { default as Tooltip } from './Tooltip'
+export type { SupportedKeyboardKeysType } from './types'
 export { TOOLTIP_CONTENTS } from './constants'

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -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/Tooltip.tsx

@@ -1,5 +1,15 @@
+import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 import { TippyProps } from '@tippyjs/react'
 
+export const KEYBOARD_KEYS_MAP = {
+    Control: IS_PLATFORM_MAC_OS ? '⌘' : 'Ctrl',
+    Shift: '⇧',
+    F: 'F',
+    E: 'E',
+} as const
+
+export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP
+
 type BaseTooltipProps =
     | {
           /**
@@ -12,6 +22,12 @@ type BaseTooltipProps =
            * @default false
            */
           alwaysShowTippyOnHover?: never
+          /**
+           * If true, use the common styling for shortcuts
+           * @default undefined
+           */
+          shortcutKeyCombo?: never
+          content: TippyProps['content']
       }
     | {
           /**
@@ -21,9 +37,36 @@ type BaseTooltipProps =
           showOnTruncate?: never
           /**
            * If true, wrap with tippy irrespective of other options
+           * @default true
+           */
+          alwaysShowTippyOnHover: boolean
+          /**
+           * If true, use the common styling for shortcuts
+           * @default undefined
+           */
+          shortcutKeyCombo?: never
+          content: TippyProps['content']
+      }
+    | {
+          /**
+           * If true, show tippy on truncate
+           * @default false
+           */
+          showOnTruncate?: never
+          /**
+           * If showOnTruncate is defined this prop doesn't work
            * @default false
            */
           alwaysShowTippyOnHover?: boolean
+          /**
+           * If true, use the common styling for shortcuts
+           * @default undefined
+           */
+          shortcutKeyCombo: {
+              text: string
+              combo: SupportedKeyboardKeysType[]
+          }
+          content?: never
       }
 
 export type TooltipProps = BaseTooltipProps &

src/Common/Tooltip/index.ts

@@ -154,9 +154,14 @@ const Button = ({
             }
         }
 
+        if (Object.hasOwn(tooltipProps, 'shortcutKeyCombo') && 'shortcutKeyCombo' in tooltipProps) {
+            return tooltipProps
+        }
+
         return {
-            alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
-            ...tooltipProps,
+            // 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'>>),
         }
     }
 

src/Common/Tooltip/styles.scss

@@ -94,7 +94,11 @@ 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'> &
+                        Required<Pick<TooltipProps, 'shortcutKeyCombo'>>)
           }
         | {
               showTooltip?: never