) => {
+ const { title, subtitle, strikeThrough, iconConfig } = item
+ return (
+ <>
+
+
+ {title}
+
+ {subtitle && {subtitle}}
+
+ {iconConfig && (
+
+
+
+ )}
+
+ )
+ }
+
+ const getButtonTabItem = (item: CollapsibleListItem<'button'>) => {
+ const { title, isActive, onClick } = item
+ return (
+
+ )
+ }
+
+ const getNavLinkTabItem = (item: CollapsibleListItem<'navLink'>) => {
+ const { title, href, onClick } = item
+ return (
+ {
+ // Prevent navigation to the same page
+ if (href === pathname) {
+ e.preventDefault()
+ }
+ onClick?.(e)
+ }}
+ >
+ {getTabContent(item)}
+
+ )
+ }
+
return (
{config.map(({ id, header, headerIconConfig, items, noItemsText, isExpanded }) => (
@@ -60,42 +131,11 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
) : (
- items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
- {
- // Prevent navigation to the same page
- if (href === pathname) {
- e.preventDefault()
- }
- onClick?.(e)
- }}
- >
-
-
- {title}
-
- {subtitle && (
- {subtitle}
- )}
-
- {iconConfig && (
-
-
-
- )}
-
- ))
+ items.map((item) =>
+ tabType === 'button'
+ ? getButtonTabItem(item as CollapsibleListItem<'button'>)
+ : getNavLinkTabItem(item as CollapsibleListItem<'navLink'>),
+ )
)}
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
index e67b599ff..e3f35d492 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
@@ -1,7 +1,35 @@
import React from 'react'
import { TippyProps } from '@tippyjs/react'
-export interface CollapsibleListItem {
+interface ButtonTab {
+ /**
+ * Is tab active ( for button tab )
+ */
+ isActive: boolean
+ /**
+ * The callback function to handle click events on the button.
+ */
+ onClick?: (e: React.MouseEvent) => void
+ href?: never
+}
+
+interface NavLinkTab {
+ /**
+ * The URL of the nav link.
+ */
+ href: string
+ /**
+ * The callback function to handle click events on the nav link.
+ */
+ onClick?: (e: React.MouseEvent) => void
+ isActive?: never
+}
+
+export type TabOptions = 'button' | 'navLink'
+
+type ConditionalTabType = TabType extends 'button' ? ButtonTab : NavLinkTab
+
+export type CollapsibleListItem = ConditionalTabType & {
/**
* The title of the list item.
*/
@@ -31,17 +59,9 @@ export interface CollapsibleListItem {
*/
tooltipProps?: TippyProps
}
- /**
- * The URL of the nav link.
- */
- href?: string
- /**
- * The callback function to handle click events on the nav link.
- */
- onClick?: (e: React.MouseEvent) => void
}
-export interface CollapsibleListConfig {
+export interface CollapsibleListConfig {
/**
* The unique identifier for the collapsible list.
*/
@@ -79,18 +99,22 @@ export interface CollapsibleListConfig {
/**
* An array of items to be displayed in the collapsible list.
*/
- items: CollapsibleListItem[]
+ items: CollapsibleListItem[]
/**
* Boolean indicating whether the list is expanded or not.
*/
isExpanded?: boolean
}
-export interface CollapsibleListProps {
+export interface CollapsibleListProps {
/**
* An array of collapsible list configurations.
*/
- config: CollapsibleListConfig[]
+ config: CollapsibleListConfig[]
+ /**
+ * Type of tab list: button or navLink
+ */
+ tabType: TabType
/**
* Function to handle the collapse button click event.
*
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index f23f7d9c8..a3c5b3519 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -52,13 +52,14 @@ export type DeploymentConfigDiffSelectPickerProps =
selectPickerProps: SelectPickerProps
}
-export interface DeploymentConfigDiffNavigationItem extends Pick {
+export interface DeploymentConfigDiffNavigationItem
+ extends Pick, 'href' | 'title' | 'onClick'> {
Icon?: React.FunctionComponent>
diffState: DeploymentConfigListItem['diffState']
}
export interface DeploymentConfigDiffNavigationCollapsibleItem
- extends Pick {
+ extends Pick, 'id' | 'header' | 'noItemsText'> {
items: DeploymentConfigDiffNavigationItem[]
}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index 1211a2901..9028e8ae3 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -39,28 +39,30 @@ export const DeploymentConfigDiffNavigation = ({
}, [collapsibleNavList])
/** Collapsible List Config. */
- const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
- ...resListItem,
- isExpanded: expandedIds[resListItem.id],
- items: items.map(({ diffState, ...resItem }) => ({
- ...resItem,
- strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
- ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
- ? {
- iconConfig: {
- Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
- tooltipProps: {
- content: showDetailedDiffState
- ? diffStateTooltipTextMap[diffState]
- : diffStateTooltipTextMap.hasDiff,
- arrow: false,
- placement: 'right' as const,
+ const collapsibleListConfig = collapsibleNavList.map>(
+ ({ items, ...resListItem }) => ({
+ ...resListItem,
+ isExpanded: expandedIds[resListItem.id],
+ items: items.map['items'][0]>(({ diffState, ...resItem }) => ({
+ ...resItem,
+ strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
+ ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
+ ? {
+ iconConfig: {
+ Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
+ tooltipProps: {
+ content: showDetailedDiffState
+ ? diffStateTooltipTextMap[diffState]
+ : diffStateTooltipTextMap.hasDiff,
+ arrow: false,
+ placement: 'right' as const,
+ },
},
- },
- }
- : {}),
- })),
- }))
+ }
+ : {}),
+ })),
+ }),
+ )
// METHODS
/** Handles collapse button click. */
@@ -145,7 +147,7 @@ export const DeploymentConfigDiffNavigation = ({
)
})}
-
+
{navHelpText && (
diff --git a/src/Shared/Store/IndexStore.tsx b/src/Shared/Store/IndexStore.tsx
index 8a46e59a9..376345129 100644
--- a/src/Shared/Store/IndexStore.tsx
+++ b/src/Shared/Store/IndexStore.tsx
@@ -17,6 +17,7 @@
/* eslint-disable eqeqeq */
/* eslint-disable array-callback-return */
import { BehaviorSubject } from 'rxjs'
+import { NodeFilters } from '@Shared/Components'
import { AppDetails, AppType, EnvDetails, EnvType, Node, Nodes, PodMetaData, iNode } from '../types'
const _appDetailsSubject: BehaviorSubject = new BehaviorSubject({} as AppDetails)
@@ -43,6 +44,10 @@ const publishFilteredNodes = () => {
return true
}
+ if (_nodeFilter.filterType.toLowerCase() === NodeFilters.drifted && _node.hasDrift) {
+ return true
+ }
+
return false
})
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
index 7ec58c71f..42082ea2e 100644
--- a/src/Shared/types.ts
+++ b/src/Shared/types.ts
@@ -140,6 +140,7 @@ export interface Node {
port: number
canBeHibernated: boolean
isHibernated: boolean
+ hasDrift?: boolean
}
// eslint-disable-next-line no-use-before-define
diff --git a/src/index.ts b/src/index.ts
index 57d0183d5..63ee96403 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -76,6 +76,7 @@ export interface customEnv {
SYSTEM_CONTROLLER_LISTING_TIMEOUT?: number
FEATURE_STEP_WISE_LOGS_ENABLE?: boolean
FEATURE_IMAGE_PROMOTION_ENABLE?: boolean
+ FEATURE_CONFIG_DRIFT_ENABLE: boolean
}
declare global {
interface Window {