Merge branch 'kubecon-2024' into feat/rb-sync-cluster

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.0-patch-1-beta-10",
+    "version": "0.6.0-patch-1-beta-13",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
 import { DraggableWrapperProps, DraggablePositionVariant } from './types'
 import { useWindowSize } from '../Hooks'
@@ -71,6 +71,12 @@ export default function DraggableWrapper({
                 const y = baseY - nodeRefHeight - boundaryGap
                 return { x, y }
             }
+            case DraggablePositionVariant.SCREEN_BOTTOM_RIGHT: {
+                const x = windowSize.width - parentRect.left - nodeRefWidth - boundaryGap
+                const y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap
+
+                return { x, y }
+            }
             // Add more cases for other variants if needed
             default: {
                 // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.

src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -19,6 +19,7 @@ import { HTMLAttributes, ReactNode, RefObject } from 'react'
 export enum DraggablePositionVariant {
     PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
     SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
+    SCREEN_BOTTOM_RIGHT = 'SCREEN_BOTTOM_RIGHT',
     // Can add more based on requirement
 }
 

src/Common/DraggableWrapper/types.ts

@@ -17,7 +17,7 @@
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DOMPurify from 'dompurify'
 import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
-import { compare as compareJSON, applyPatch } from 'fast-json-patch'
+import { compare as compareJSON, applyPatch, unescapePathComponent } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -595,7 +595,7 @@ const buildObjectFromPathTokens = (index: number, tokens: string[], value: any)
     const isKeyNumber = !Number.isNaN(numberKey)
     return isKeyNumber
         ? [...Array(numberKey).fill(null), buildObjectFromPathTokens(index + 1, tokens, value)]
-        : { [key]: buildObjectFromPathTokens(index + 1, tokens, value) }
+        : { [unescapePathComponent(key)]: buildObjectFromPathTokens(index + 1, tokens, value) }
 }
 
 /**
@@ -644,10 +644,7 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
     })
 
 export const convertJSONPointerToJSONPath = (pointer: string) =>
-    pointer
-        .replace(/\/([\*0-9]+)\//g, '[$1].')
-        .replace(/\//g, '.')
-        .replace(/\./, '$.')
+    unescapePathComponent(pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.'))
 
 export const flatMapOfJSONPaths = (
     paths: string[],

src/Common/Helper.tsx

@@ -993,3 +993,13 @@ export interface EnvironmentHelmResult {
 }
 
 export type EnvironmentListHelmResponse = ResponseType<EnvironmentListHelmResult[]>
+
+export interface WidgetEventDetails {
+    message: string
+    namespace: string
+    object: string
+    source: string
+    count: number
+    age: string
+    lastSeen: string
+}

src/Common/Types.ts

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import Tippy, { TippyProps } from '@tippyjs/react'
 import { ConditionalWrap } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
 import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg'
 
 import { Collapse } from '../Collapse'
@@ -31,7 +32,9 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                 className="icon-dim-20 fcn-6 dc__no-shrink cursor rotate"
                                 style={{ ['--rotateBy' as string]: isExpanded ? '0deg' : '-90deg' }}
                             />
-                            <span className="flex-grow-1 dc__align-left dc__truncate">{header}</span>
+                            <Tooltip content={header} placement="right">
+                                <span className="flex-grow-1 dc__align-left dc__truncate">{header}</span>
+                            </Tooltip>
                         </button>
                         {headerIconConfig && (
                             <ConditionalWrap
@@ -60,7 +63,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                     </span>
                                 </div>
                             ) : (
-                                items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
+                                items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick, isActive }) => (
                                     <NavLink
                                         key={title}
                                         to={href}
@@ -72,15 +75,20 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                             }
                                             onClick?.(e)
                                         }}
+                                        isActive={isActive}
                                     >
                                         <div className="flexbox-col flex-grow-1 mw-none">
-                                            <span
-                                                className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
-                                            >
-                                                {title}
-                                            </span>
+                                            <Tooltip content={title} placement="right">
+                                                <span
+                                                    className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
+                                                >
+                                                    {title}
+                                                </span>
+                                            </Tooltip>
                                             {subtitle && (
-                                                <span className="dc__truncate fw-4 lh-1-5 cn-7">{subtitle}</span>
+                                                <Tooltip content={subtitle} placement="right">
+                                                    <span className="dc__truncate fw-4 lh-1-5 cn-7">{subtitle}</span>
+                                                </Tooltip>
                                             )}
                                         </div>
                                         {iconConfig && (

src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { TippyProps } from '@tippyjs/react'
+import { NavLinkProps } from 'react-router-dom'
 
-export interface CollapsibleListItem {
+export interface CollapsibleListItem extends Pick<NavLinkProps, 'isActive'> {
     /**
      * The title of the list item.
      */

src/Shared/Components/CollapsibleList/CollapsibleList.types.ts

@@ -120,6 +120,7 @@ export enum Nodes {
     Namespace = 'Namespace',
     Overview = 'Overview',
     MonitoringDashboard = 'MonitoringDashboard',
+    UpgradeCluster = 'UpgradeCluster',
 }
 
 // FIXME: This should be `typeof Nodes[keyof typeof Nodes]` instead since the key and values are not the same. Same to be removed from duplications in dashboard