Merge pull request #390 from devtron-labs/feat/silver-surfer

eshankvaish · web-flow · commit 875d451e3ea0 · 2024-11-08T13:33:36.000+05:30
feat: silver surfer
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.2-beta-8",
+    "version": "0.6.0-patch-1-beta-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
@@ -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 && (
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
@@ -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.
      */
diff --git a/src/Shared/types.ts b/src/Shared/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

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "0.6.2-beta-8",`
	`3`	`+ "version": "0.6.0-patch-1-beta-12",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -120,6 +120,7 @@ export enum Nodes {`
`120`	`120`	`Namespace = 'Namespace',`
`121`	`121`	`Overview = 'Overview',`
`122`	`122`	`MonitoringDashboard = 'MonitoringDashboard',`
	`123`	`+ UpgradeCluster = 'UpgradeCluster',`
`123`	`124`	`}`
`124`	`125`
`125`	`126`	// 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