Merge branch 'fix/expand-all-logs' of github.com:devtron-labs/devtron-fe-common-lib into feat/fullscreen-terminal

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.5-beta-4",
+    "version": "0.3.6-beta-6",
     "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

@@ -15,6 +15,7 @@
  */
 
 import Tippy from '@tippyjs/react'
+import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
 import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
 import { StatusConstants, YET_TO_RUN } from './constants'
 import { AppStatusType } from './types'
@@ -52,7 +53,11 @@ export default function AppStatus({
 
     const renderIcon = () => {
         if (iconClass) {
-            return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
+            return iconClass === 'failed' || iconClass === 'error' ? (
+                <ICErrorCross className="icon-dim-16 dc__no-shrink ic-error-cross-red" />
+            ) : (
+                <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
+            )
         }
         if (isVirtualEnv) {
             return (

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

@@ -0,0 +1,16 @@
+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>
+        <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,
+    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/AppStatus/AppStatus.tsx

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

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,16 @@
 import { TippyProps } from '@tippyjs/react'
 
+const isMacOS = navigator.userAgent.toUpperCase().includes('MAC')
+
+export const KEYBOARD_KEYS_MAP = {
+    Control: isMacOS ? '⌘' : 'Ctrl',
+    Shift: '⇧',
+    F: 'F',
+    E: 'E',
+} as const
+
+export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP
+
 type BaseTooltipProps =
     | {
           /**
@@ -12,6 +23,11 @@ type BaseTooltipProps =
            * @default false
            */
           alwaysShowTippyOnHover?: never
+          /**
+           * If true, use the common styling for shortcuts
+           * @default false
+           */
+          shortcutKeyCombo?: never
       }
     | {
           /**
@@ -21,9 +37,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: SupportedKeyboardKeysType[]
+          }
       }
 
 export type TooltipProps = BaseTooltipProps &