Merge branch 'main' into feat/doc-utm-source

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-9",
+    "version": "1.14.0-pre-0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types'
 import './styles.scss'
 
 const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
+    hideLegend,
     entities: userEntities = [FALLBACK_ENTITY],
     rootClassName,
     countClassName,
@@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
     const filteredEntities = entities.filter((entity) => !!entity.value)
 
-    const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
+    const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%`
 
     const renderLabel = (label: Entity['label']) =>
         isLoading ? (
@@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         ))
     }
 
-    const renderLegend = () => (
-        <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
-            {renderContent()}
-        </div>
-    )
+    const renderLegend = () => {
+        if (hideLegend) {
+            return null
+        }
+
+        return (
+            <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
+                {renderContent()}
+            </div>
+        )
+    }
 
     const renderBar = () => (
         <motion.div
@@ -112,7 +119,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
                         index === map.length - 1 ? 'dc__right-radius-4' : ''
                     } ${isLoading ? 'shimmer' : ''}`}
-                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
+                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }}
                 />
             ))}
         </motion.div>

src/Assets/IconV2/ic-terminal.svg

@@ -20,13 +20,22 @@ export type Entity = {
     value: number
 }
 
-export interface SegmentedBarChartProps {
-    entities: NonNullable<Entity[]>
+type EntityPropType =
+    | {
+          hideLegend?: false
+          entities: NonNullable<Entity[]>
+      }
+    | {
+          hideLegend: true
+          entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
+      }
+
+export type SegmentedBarChartProps = {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
     isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
     isLoading?: boolean
-}
+} & EntityPropType

src/Assets/IconV2/ic-thermometer.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, FocusEvent } from 'react'
+import { ChangeEvent, FocusEvent, useEffect } from 'react'
 
 import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg'
 import { Checkbox } from '@Common/Checkbox'
@@ -37,6 +37,10 @@ const NodeDrainOptions = ({
         ignoreAllDaemonSets: false,
     }
 
+    useEffect(() => {
+        setNodeDrainOptions(nodeDrainOptions)
+    }, [])
+
     const handleGracePeriodOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setNodeDrainOptions({
             ...nodeDrainOptions,

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -16,6 +16,7 @@
 
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 
+import { TabProps } from '@Shared/Components'
 import { InstallationClusterType } from '@Shared/types'
 
 import { NodeActionRequest } from './ResourceBrowser.Types'
@@ -113,6 +114,11 @@ export interface AdditionalConfirmationModalOptionsProps<T = unknown> {
     children?: ReactElement
 }
 
+export type NodeDetailTabsInfoType = (Pick<TabProps, 'label' | 'icon'> & {
+    id: string
+    renderComponent: () => JSX.Element
+})[]
+
 export interface InstallationClusterStepType {
     lastTransitionTime: string
     lastProbeTime: string

src/Common/SegmentedBarChart/types.ts

@@ -17,7 +17,7 @@
 import { ReactNode } from 'react'
 
 import { APIOptions, DrawerProps } from '@Common/index'
-import { SegmentedBarChartProps } from '@Common/SegmentedBarChart'
+import { Entity } from '@Common/SegmentedBarChart/types'
 
 import { ConfirmationModalProps } from '../ConfirmationModal/types'
 import { getProgressingStateForStatus } from '../Security'
@@ -64,7 +64,7 @@ export interface OperationResultStoreType {
     getResults: (
         sortComparator: (a: BulkOperationResultType, b: BulkOperationResultType) => number,
     ) => BulkOperationResultWithIdType[]
-    getBarChartEntities: () => SegmentedBarChartProps['entities']
+    getBarChartEntities: () => NonNullable<Entity[]>
     getResultsStatusCount: () => Record<BulkOperationResultType['status'], number>
     getSize: () => number
     updateResultStatus: (

src/Pages/ResourceBrowser/NodeDrainOptions.tsx

@@ -131,6 +131,10 @@
 
     .cm-panels-top {
         border-bottom: none;
+
+        &:has(.code-editor__search) {
+            z-index: 0;
+        }
     }
 
     // TOOLTIPS