feat: add intelligenceConfig in main context

package.json

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

src/Common/Types.ts

@@ -1071,16 +1071,6 @@ 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
-}
-
 export interface GlobalVariableDTO {
     name: string
     format: VariableTypeFormat
@@ -1129,4 +1119,4 @@ export interface AppMeta {
 export interface EnvAppsMetaDTO {
     appCount: number
     apps: AppMeta[]
-}
+}

src/Shared/Components/Icon/Icon.tsx

@@ -108,6 +108,8 @@ import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTata1mg } from '@IconsV2/ic-tata1mg.svg'
 import { ReactComponent as ICTerminalFill } from '@IconsV2/ic-terminal-fill.svg'
+import { ReactComponent as ICThumbDown } from '@IconsV2/ic-thumb-down.svg'
+import { ReactComponent as ICThumbUp } from '@IconsV2/ic-thumb-up.svg'
 import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
 import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg'
 import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg'
@@ -229,6 +231,8 @@ export const iconMap = {
     'ic-suspended': ICSuspended,
     'ic-tata1mg': ICTata1mg,
     'ic-terminal-fill': ICTerminalFill,
+    'ic-thumb-down': ICThumbDown,
+    'ic-thumb-up': ICThumbUp,
     'ic-timeout-dash': ICTimeoutDash,
     'ic-timer': ICTimer,
     'ic-travclan': ICTravclan,

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -28,7 +28,15 @@ import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils'
 import './TabGroup.scss'
 
 const MotionLayoutUnderline = ({ layoutId }: { layoutId: string }) => (
-    <motion.div layout="position" layoutId={layoutId} className="underline bcb-5" />
+    <motion.div
+        layout="position"
+        transformTemplate={(_, generatedTransform) =>
+            // Replace the y value in translate3d(x, y, z) with 0px to omit y axis transitions
+            generatedTransform.replace(/translate3d\(([^,]+),\s*[^,]+,\s*([^)]+)\)/, 'translate3d($1, 0px, $2)')
+        }
+        layoutId={layoutId}
+        className="underline bcb-5 w-100 dc__position-abs"
+    />
 )
 
 const Tab = ({
@@ -59,7 +67,6 @@ const Tab = ({
 
     const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
         hideTopPadding,
-        isTabActive,
     })[size]
 
     const onClickHandler = (

src/Shared/Components/TabGroup/TabGroup.scss

@@ -34,9 +34,10 @@
         @include svg-styles(var(--N700));
 
         .underline {
-            height: 2px;
+            height: 2px !important;
             border-top-left-radius: 2px;
             border-top-right-radius: 2px;
+            bottom: -1px;
         }
 
         &--active {

src/Shared/Components/TabGroup/TabGroup.utils.ts

@@ -21,8 +21,7 @@ import { TabGroupProps } from './TabGroup.types'
 
 export const getClassNameBySizeMap = ({
     hideTopPadding,
-    isTabActive,
-}: Pick<TabGroupProps, 'hideTopPadding'> & { isTabActive: boolean }): Record<
+}: Pick<TabGroupProps, 'hideTopPadding'>): Record<
     TabGroupProps['size'],
     {
         tabClassName: string
@@ -31,17 +30,17 @@ export const getClassNameBySizeMap = ({
     }
 > => ({
     [ComponentSizeType.medium]: {
-        tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} ${isTabActive ? 'pb-3' : 'pb-5'}`,
+        tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} pb-5`,
         iconClassName: 'icon-dim-14',
         badgeClassName: 'fs-11 lh-18 tab-group__tab__badge--medium',
     },
     [ComponentSizeType.large]: {
-        tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} ${isTabActive ? 'pb-5' : 'pb-7'}`,
+        tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} pb-7`,
         iconClassName: 'icon-dim-16',
         badgeClassName: 'fs-12 lh-20',
     },
     [ComponentSizeType.xl]: {
-        tabClassName: `min-w-200 fs-13 ${!hideTopPadding ? 'pt-10' : ''} ${isTabActive ? 'pb-7' : 'pb-9'}`,
+        tabClassName: `min-w-200 fs-13 ${!hideTopPadding ? 'pt-10' : ''} pb-9`,
         iconClassName: 'icon-dim-16',
         badgeClassName: 'fs-12 lh-20',
     },

src/Shared/Helpers.tsx

@@ -790,19 +790,31 @@ export const getTimeDifference = ({
         return fallbackString
     }
 
-    const seconds = moment(endTime).diff(moment(startTime), 'seconds')
-    const minutes = moment(endTime).diff(moment(startTime), 'minutes')
-    const hours = moment(endTime).diff(moment(startTime), 'hours')
-
-    if (seconds < 60) {
-        return `${seconds}s`
+    const start = moment(startTime)
+    const end = moment(endTime)
+    if (!start.isValid() || !end.isValid()) {
+        return fallbackString
     }
-    if (minutes < 60) {
-        return `${minutes}m ${seconds % 60}s`
+
+    const diff = Math.abs(end.diff(start))
+    const duration = moment.duration(diff)
+
+    const units = [
+        { label: 'd', value: duration.days() },
+        { label: 'h', value: duration.hours() },
+        { label: 'm', value: duration.minutes() },
+        { label: 's', value: duration.seconds() },
+    ]
+
+    // Filter out zero values and take the first two non-zero units
+    const nonZeroUnits = units.filter((unit) => unit.value > 0).slice(0, 2)
+
+    // If all units are zero, show "0s"
+    if (nonZeroUnits.length === 0) {
+        return '0s'
     }
-    const leftOverMinutes = minutes - hours * 60
-    const leftOverSeconds = seconds - minutes * 60
-    return `${hours}h ${leftOverMinutes}m ${leftOverSeconds}s`
+
+    return nonZeroUnits.map((unit) => `${unit.value}${unit.label}`).join(' ')
 }
 
 export const getFileNameFromHeaders = (headers: Headers) =>

src/Shared/Providers/types.ts

@@ -18,7 +18,7 @@ import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react'
 
 import { SERVER_MODE } from '../../Common'
 import { ServerInfo } from '../Components/Header/types'
-import { DevtronLicenseInfo, LicenseInfoDialogType } from '..'
+import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType } from '..'
 
 export interface MainContext {
     serverMode: SERVER_MODE
@@ -66,6 +66,8 @@ export interface MainContext {
     licenseData: DevtronLicenseInfo
     setLicenseData: Dispatch<SetStateAction<DevtronLicenseInfo>>
     canFetchHelmAppStatus: boolean
+    intelligenceConfig: IntelligenceConfig
+    setIntelligenceConfig: Dispatch<SetStateAction<IntelligenceConfig>>
 }
 
 export interface MainContextProviderProps {

src/Shared/types.ts

@@ -1152,3 +1152,10 @@ export enum RegistryCredentialsType {
     USERNAME_PASSWORD = 'username_password',
     ANONYMOUS = 'anonymous',
 }
+
+export interface IntelligenceConfig {
+    clusterId: number
+    metadata: Record<string, string>
+    prompt: string
+    analyticsCategory: string
+}

src/index.ts

@@ -155,6 +155,7 @@ export interface customEnv {
      */
     FEATURE_APPLICATION_TEMPLATES_ENABLE?: boolean
     GATEKEEPER_URL?: string
+    FEATURE_AI_INTEGRATION_ENABLE?: boolean
 }
 declare global {
     interface Window {