fix: command bar cluster list

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.6-alpha-35",
+    "version": "1.20.6-pre-38",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -178,6 +178,7 @@ export const ROUTES = {
     PATCH: 'patch',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',
+    CLUSTER_MIN: 'cluster/min',
     API_RESOURCE: 'k8s/api-resources',
     GVK: 'gvk',
     NAMESPACE: 'env/namespace',

src/Common/Tooltip/Tooltip.tsx

@@ -16,6 +16,8 @@
 
 import { cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { followCursor } from 'tippy.js'
 
 import { useIsTextTruncated } from '@Common/Hooks'
 
@@ -31,6 +33,7 @@ const Tooltip = ({
     showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
     wordBreak = true,
     children: child,
+    plugins = [],
     ...rest
 }: TooltipProps) => {
     const { isTextTruncated, handleMouseEnterEvent } = useIsTextTruncated()
@@ -48,6 +51,7 @@ const Tooltip = ({
             {...rest}
             {...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
             className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break' : ''} dc__mxw-200 ${rest.className ?? ''}`}
+            plugins={[...plugins, followCursor]}
         >
             {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>

src/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -96,11 +96,11 @@ const BulkSelection = forwardRef<HTMLLabelElement, BulkSelectionProps>(
                     <Checkbox
                         ref={forwardedRef}
                         isChecked={isChecked}
-                        onChange={noop}
+                        onChange={shouldWrapActionMenu ? noop : onSinglePageSelectAll}
                         rootClassName="icon-dim-20 m-0"
                         value={checkboxValue}
                         disabled={disabled}
-                        onClick={!shouldWrapActionMenu ? onSinglePageSelectAll : null}
+                        onClick={noop}
                         // Ideally should be disabled but was giving issue with cursor
                     />
 

src/Shared/Components/Charts/constants.ts

@@ -146,6 +146,19 @@ export const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>> =
         Gray800: '#202124',
         Gray900: '#1a1a1a',
         Gray950: '#0d0d0d',
+
+        // Sunset Orange
+        SunsetOrange50: '#FFF3ED',
+        SunsetOrange100: '#FFE7D4',
+        SunsetOrange200: '#FFCAA8',
+        SunsetOrange300: '#FFAE80',
+        SunsetOrange400: '#FF905A',
+        SunsetOrange500: '#FF7C43',
+        SunsetOrange600: '#F5572A',
+        SunsetOrange700: '#D22E10',
+        SunsetOrange800: '#A81F0D',
+        SunsetOrange900: '#7E1C10',
+        SunsetOrange950: '#411311',
     },
     [AppThemeType.dark]: {
         // Sky Blue - Adjusted for dark theme
@@ -290,6 +303,19 @@ export const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>> =
         Gray800: '#f1f3f4',
         Gray900: '#f7f8f9',
         Gray950: '#f9fafb',
+
+        // Sunset Orange - Adjusted for dark theme
+        SunsetOrange50: '#2F1D1E',
+        SunsetOrange100: '#53301F',
+        SunsetOrange200: '#794421',
+        SunsetOrange300: '#9C5623',
+        SunsetOrange400: '#C36A25',
+        SunsetOrange500: '#E87D27',
+        SunsetOrange600: '#EC9345',
+        SunsetOrange700: '#F1A862',
+        SunsetOrange800: '#F4BD7F',
+        SunsetOrange900: '#F8D29C',
+        SunsetOrange950: '#FDE9BC',
     },
 } as const
 

src/Shared/Components/Charts/types.ts

@@ -19,6 +19,7 @@ export type ColorTokensType =
     | 'GoldenYellow'
     | 'CharcoalGray'
     | 'Gray'
+    | 'SunsetOrange'
 export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
 
 export type ChartColorKey = `${ColorTokensType}${VariantsType}`

src/Shared/Helpers.tsx

@@ -738,15 +738,17 @@ export const YAMLtoJSON = (yamlString: string) => {
     }
 }
 
-export const formatNumberToCurrency = (value: number, currency: string): string => {
+export const formatNumberToCurrency = (value: number, currency: string, minimumFractionDigits?: number): string => {
+    const precision = minimumFractionDigits ?? 2
     try {
         const data = new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency,
+            minimumFractionDigits: precision,
         }).format(value)
 
         return data
     } catch {
-        return value.toFixed(2)
+        return value.toFixed(precision)
     }
 }

src/Shared/Services/common.service.ts

@@ -17,7 +17,13 @@
 import { AppConfigProps, GetTemplateAPIRouteType } from '@Pages/index'
 
 import { get, getUrlWithSearchParams, post, ROUTES } from '../../Common'
-import { ClusterMinDTO, ClusterType, getTemplateAPIRoute, stringComparatorBySortOrder } from '..'
+import {
+    AllClusterListMinItemDTO,
+    ClusterMinDTO,
+    ClusterType,
+    getTemplateAPIRoute,
+    stringComparatorBySortOrder,
+} from '..'
 import { EnvironmentDataValuesDTO, GetPolicyApiUrlProps, GetResourceApiUrlProps } from './types'
 
 export const getResourceApiUrl = <T>({ baseUrl, kind, version, suffix, queryParams }: GetResourceApiUrlProps<T>) =>
@@ -57,3 +63,11 @@ export const getClusterOptions = async (): Promise<ClusterType[]> => {
         }))
         .sort((a, b) => stringComparatorBySortOrder(a.name, b.name))
 }
+
+export const getAllClusterListMin = async (signal: AbortSignal) => {
+    const response = await get<AllClusterListMinItemDTO[]>(ROUTES.CLUSTER_MIN, {
+        signal,
+    })
+
+    return response
+}

src/Shared/Services/types.ts

@@ -16,7 +16,7 @@
 
 import { MainContext } from '@Shared/Providers'
 
-import { getUrlWithSearchParams } from '../../Common'
+import { ClusterDetailDTO, getUrlWithSearchParams } from '../../Common'
 import { PolicyKindType, ResourceKindType, ResourceVersionType } from '../types'
 
 export interface BaseAppMetaData {
@@ -69,3 +69,7 @@ export interface ClusterMinDTO {
     isVirtualCluster: boolean
     isProd: boolean
 }
+
+export type AllClusterListMinItemDTO = Pick<ClusterDetailDTO, 'id' | 'cluster_name' | 'isVirtualCluster' | 'isProd'> & {
+    costModuleConfig: Pick<ClusterDetailDTO['costModuleConfig'], 'enabled' | 'installationStatus'>
+}