{baseTemplateConfiguration?.codeEditorValue?.displayName}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
new file mode 100644
index 000000000..140c8ecb8
--- /dev/null
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -0,0 +1,96 @@
+import { NavLink } from 'react-router-dom'
+
+import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
+import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
+import {
+ DeploymentConfigDiffProps,
+ DeploymentConfigDiffState,
+ diffStateIconMap,
+ diffStateTextColorMap,
+ diffStateTextMap,
+} from '@Shared/Components/DeploymentConfigDiff'
+
+import { History } from '../types'
+import { DeploymentHistoryConfigDiffProps } from './types'
+
+const renderState = (diffState: DeploymentConfigDiffState) => {
+ const Icon = diffStateIconMap[diffState]
+
+ return (
+
+ {Icon && }
+ {diffStateTextMap[diffState]}
+
+ )
+}
+
+export const renderDeploymentHistoryConfig = (
+ config: DeploymentConfigDiffProps['configList'],
+ heading: string,
+ pathname: string,
+ hideDiffState: boolean,
+) => (
+
+ {heading && (
+
+
{heading}
+
+ )}
+ {config.map(({ id, title, name, diffState, pathType }, index) => {
+ const href = `${pathname}/${name ? `${pathType}/${name}` : pathType}`
+
+ return (
+
+
+
+
+ {name || title}
+
+
+ {!hideDiffState && renderState(diffState)}
+
+ )
+ })}
+
+)
+
+export const renderPipelineDeploymentStatusIcon = (status: string) => (
+
+)
+
+export const renderPipelineDeploymentOptionDescription = ({
+ stage,
+ triggeredBy,
+ triggeredByEmail,
+ artifact,
+ renderRunSource,
+ resourceId,
+ runSource,
+}: Pick
&
+ Pick) => (
+
+
+ {stage}
+
+ {artifact && (
+
+
+ {artifact.split(':')[1].slice(-12)}
+
+ )}
+
+ {triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
+
+ {runSource && renderRunSource && renderRunSource(runSource, resourceId === runSource?.id)}
+
- {historicalComponent.childList?.length > 0 ? (
- <>
-
- {DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[historicalComponent.name].DISPLAY_NAME}
-
- {historicalComponent.childList.map((historicalComponentName, childIndex) =>
- getNavLink(
- index,
- historicalComponent.id,
- historicalComponent.name,
- `config-${index}-${childIndex}`,
- historicalComponentName,
- ),
- )}
-
- ) : (
- getNavLink(index, historicalComponent.id, historicalComponent.name, `config-${index}`)
- )}
-
-
- {loader ? (
-
- ) : (
-
-
-
- )}
-
-
- Compare with
-
-
- {deploymentTemplateOption.length > 0 ? (
-
- ) : (
-
-
- {
- DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[
- historyComponent.replace('-', '_').toUpperCase()
- ]?.DISPLAY_NAME
- }
- {historyComponentName ? ` “${historyComponentName}”` : ''} was added in this
- deployment. There is no previous instance to compare with.
-
- }
- >
- No options
-
-
- )}
-
-
-
- Base configuration
-
-
- {baseTemplateTimeStamp && moment(baseTemplateTimeStamp).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
-
-
- {renderGoBackToConfiguration()}
- {renderCompareDeploymentConfig()}
- {renderBaseDeploymentConfig()}
-
- )
-}
-
-export default DeploymentHistoryHeader
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx
deleted file mode 100644
index 3763fd8e1..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useEffect } from 'react'
-import { NavLink, useRouteMatch, useParams } from 'react-router-dom'
-import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
-import { DeploymentHistoryParamsType } from './types'
-import { getDeploymentHistoryList } from '../service'
-import { DeploymentHistorySidebarType } from '../types'
-import { URLS } from '../../../../Common'
-
-const DeploymentHistorySidebar = ({
- deploymentHistoryList,
- setDeploymentHistoryList,
-}: DeploymentHistorySidebarType) => {
- const match = useRouteMatch()
- const { appId, pipelineId, triggerId } = useParams()
- useEffect(() => {
- if (!deploymentHistoryList) {
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
- getDeploymentHistoryList(appId, pipelineId, triggerId).then((response) => {
- setDeploymentHistoryList(response.result)
- })
- }
- }, [deploymentHistoryList])
-
- const getNavLink = (componentId: number, componentName: string, key: string, childComponentName?: string) => {
- const currentComponent = DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[componentName]
- const childComponentDetail = childComponentName ? `/${childComponentName}` : ''
- const configURL = `${match.url.split(URLS.DEPLOYMENT_HISTORY_CONFIGURATIONS)[0]}${
- URLS.DEPLOYMENT_HISTORY_CONFIGURATIONS
- }/${currentComponent.VALUE}/${componentId}${childComponentDetail}`
- return (
-
-
- {currentComponent.DISPLAY_NAME + childComponentDetail}
-
-
- )
- }
-
- return (
-
- {deploymentHistoryList?.map((historicalComponent, index) =>
- historicalComponent.childList?.length > 0
- ? historicalComponent.childList.map((historicalComponentName, childIndex) =>
- getNavLink(
- historicalComponent.id,
- historicalComponent.name,
- `config-${index}-${childIndex}`,
- historicalComponentName,
- ),
- )
- : getNavLink(historicalComponent.id, historicalComponent.name, `config-${index}`),
- )}
-
- )
-}
-
-export default DeploymentHistorySidebar
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx
deleted file mode 100644
index 94dcac337..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default as DeploymentHistoryDetailedView } from './DeploymentHistoryDetailedView'
-export { default as DeploymentHistoryConfigList } from './DeploymentHistoryConfigList.component'
-export { default as DeploymentHistoryDiffView } from './DeploymentHistoryDiffView'
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx
deleted file mode 100644
index 74879b908..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { OptionType } from '../../../../Common'
-import { DeploymentTemplateList, RunSourceType, RenderRunSourceType } from '../types'
-
-export interface DeploymentHistoryParamsType {
- appId: string
- pipelineId?: string
- historyComponent?: string
- baseConfigurationId?: string
- historyComponentName?: string
- envId?: string
- triggerId?: string
-}
-
-export interface CompareViewDeploymentType extends RenderRunSourceType {
- setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
- resourceId?: number
-}
-
-export interface DeploymentTemplateOptions extends OptionType {
- author: string
- status: string
- runSource?: RunSourceType
-}
-
-export interface CompareWithBaseConfiguration extends RenderRunSourceType {
- selectedDeploymentTemplate: DeploymentTemplateOptions
- setSelectedDeploymentTemplate: (selected) => void
- setFullScreenView: React.Dispatch>
- setLoader: React.Dispatch>
- setPreviousConfigAvailable: React.Dispatch>
- resourceId?: number
-}
-
-export interface TemplateConfiguration {
- setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
-}
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
index 87fc4953b..790799ea2 100644
--- a/src/Shared/Components/CICDHistory/TriggerOutput.tsx
+++ b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -66,7 +66,7 @@ import { GitTriggers } from '../../types'
import warn from '../../../Assets/Icon/ic-warning.svg'
import LogsRenderer from './LogsRenderer'
import DeploymentDetailSteps from './DeploymentDetailSteps'
-import { DeploymentHistoryDetailedView, DeploymentHistoryConfigList } from './DeploymentHistoryDiff'
+import { DeploymentHistoryConfigDiff } from './DeploymentHistoryConfigDiff'
import { GitChanges, Scroller } from './History.components'
import Artifacts from './Artifacts'
import { statusColor as colorMap, EMPTY_STATE_STATUS, PULSATING_STATUS_MAP } from '../../constants'
@@ -297,7 +297,7 @@ const StartDetails = ({
return (
-
+
Start
@@ -488,8 +488,6 @@ const HistoryLogs: React.FC
= ({
triggerDetails,
loading,
setFullScreenView,
- deploymentHistoryList,
- setDeploymentHistoryList,
deploymentAppType,
isBlobStorageConfigured,
userApprovalMetadata,
@@ -509,6 +507,8 @@ const HistoryLogs: React.FC = ({
scrollToTop,
scrollToBottom,
fullScreenView,
+ appName,
+ triggerHistory,
}) => {
const { path } = useRouteMatch()
const { appId, pipelineId, triggerId, envId } = useParams<{
@@ -528,7 +528,7 @@ const HistoryLogs: React.FC = ({
const CDBuildReportUrl = `app/cd-pipeline/workflow/download/${appId}/${envId}/${pipelineId}/${triggerId}`
return (
-
+
{loading ? (
) : (
@@ -591,24 +591,17 @@ const HistoryLogs: React.FC
= ({
/>
{triggerDetails.stage === 'DEPLOY' && (
-
-
+
-
- )}
- {triggerDetails.stage === 'DEPLOY' && (
-
-
)}
@@ -662,8 +655,6 @@ const TriggerOutput = ({
triggerHistory,
setTriggerHistory,
setFullScreenView,
- setDeploymentHistoryList,
- deploymentHistoryList,
deploymentAppType,
isBlobStorageConfigured,
appReleaseTags,
@@ -683,6 +674,7 @@ const TriggerOutput = ({
scrollToTop,
scrollToBottom,
renderTargetConfigInfo,
+ appName,
}: TriggerOutputProps) => {
const { appId, triggerId, envId, pipelineId } = useParams<{
appId: string
@@ -913,8 +905,6 @@ const TriggerOutput = ({
userApprovalMetadata={triggerDetailsResult?.result?.userApprovalMetadata}
triggeredByEmail={triggerDetailsResult?.result?.triggeredByEmail}
setFullScreenView={setFullScreenView}
- setDeploymentHistoryList={setDeploymentHistoryList}
- deploymentHistoryList={deploymentHistoryList}
deploymentAppType={deploymentAppType}
isBlobStorageConfigured={isBlobStorageConfigured}
artifactId={triggerDetailsResult?.result?.artifactId}
@@ -932,6 +922,8 @@ const TriggerOutput = ({
scrollToTop={scrollToTop}
scrollToBottom={scrollToBottom}
fullScreenView={fullScreenView}
+ appName={appName}
+ triggerHistory={triggerHistory}
/>
)
diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
index 2080de484..b552804ca 100644
--- a/src/Shared/Components/CICDHistory/cicdHistory.scss
+++ b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -116,6 +116,16 @@
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 1px;
+ height: 100%;
+ left: calc(50% - 1px);
+ background: var(--N200);
+ }
}
.historical-diff__left {
diff --git a/src/Shared/Components/CICDHistory/index.tsx b/src/Shared/Components/CICDHistory/index.tsx
index 0940f1876..002bcd92f 100644
--- a/src/Shared/Components/CICDHistory/index.tsx
+++ b/src/Shared/Components/CICDHistory/index.tsx
@@ -27,6 +27,6 @@ export * from './History.components'
export * from './utils'
export * from './TriggerOutput'
export { default as LogsRenderer } from './LogsRenderer'
-export * from './DeploymentHistoryDiff'
+export * from './DeploymentHistoryConfigDiff'
export * from './CiPipelineSourceConfig'
export * from './StatusFilterButtonComponent'
diff --git a/src/Shared/Components/CICDHistory/service.tsx b/src/Shared/Components/CICDHistory/service.tsx
index 437e67ae9..2763c2eb1 100644
--- a/src/Shared/Components/CICDHistory/service.tsx
+++ b/src/Shared/Components/CICDHistory/service.tsx
@@ -197,8 +197,11 @@ export const prepareConfigMapAndSecretData = (
let typeValue = 'Environment Variable'
if (rawData.type === 'volume') {
typeValue = 'Data Volume'
- if (rawData.mountPath) {
- secretValues['mountPath'] = { displayName: 'Volume mount path', value: rawData.mountPath }
+ if (rawData.mountPath || rawData.defaultMountPath) {
+ secretValues['mountPath'] = {
+ displayName: 'Volume mount path',
+ value: rawData.mountPath || rawData.defaultMountPath,
+ }
}
if (rawData.subPath) {
secretValues['subPath'] = { displayName: 'Set SubPath', value: 'Yes' }
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index 4ef8ce948..329a763f4 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -388,14 +388,13 @@ export interface TriggerOutputProps extends RenderRunSourceType, Pick
setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
deploymentAppType: DeploymentAppTypes
isBlobStorageConfigured: boolean
appReleaseTags: string[]
tagsEditable: boolean
hideImageTaggingHardDelete: boolean
fetchIdData: FetchIdDataStatus
+ appName: string
selectedEnvironmentName?: string
renderCIListHeader?: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
renderDeploymentApprovalInfo?: (userApprovalMetadata: UserApprovalMetadataType) => JSX.Element
@@ -418,8 +417,6 @@ export interface HistoryLogsProps
| 'scrollToTop'
| 'scrollToBottom'
| 'setFullScreenView'
- | 'deploymentHistoryList'
- | 'setDeploymentHistoryList'
| 'deploymentAppType'
| 'isBlobStorageConfigured'
| 'appReleaseTags'
@@ -431,6 +428,8 @@ export interface HistoryLogsProps
| 'renderCIListHeader'
| 'renderVirtualHistoryArtifacts'
| 'fullScreenView'
+ | 'appName'
+ | 'triggerHistory'
> {
triggerDetails: History
loading: boolean
@@ -489,8 +488,11 @@ export interface DeploymentTemplateHistoryType {
isUnpublished?: boolean
isDeleteDraft?: boolean
rootClassName?: string
- comparisonBodyClassName?: string
- sortOrder?: SortingOrder
+ codeEditorKey?: React.Key
+ sortingConfig?: {
+ sortBy: string
+ sortOrder: SortingOrder
+ }
}
export interface DeploymentHistoryDetailRes extends ResponseType {
result?: DeploymentHistoryDetail
diff --git a/src/Shared/Components/Collapse/Collapse.tsx b/src/Shared/Components/Collapse/Collapse.tsx
index 26e9b8768..273dd55a3 100644
--- a/src/Shared/Components/Collapse/Collapse.tsx
+++ b/src/Shared/Components/Collapse/Collapse.tsx
@@ -1,6 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
import { CollapseProps } from './types'
-export const Collapse = ({ expand, children }: CollapseProps) => (
- // TODO: removed animation because of miscalculations (broken with auto editor height)
- {expand ? children : null}
-)
+/**
+ * Collapse component for smoothly expanding or collapsing its content.
+ * Dynamically calculates the content height and applies smooth transitions.
+ * It also supports a callback when the transition ends.
+ */
+export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
+ // Reference to the content container to calculate its height
+ const contentRef = useRef(null)
+
+ // State to store the dynamic height of the content; initially set to 0 if collapsed
+ const [contentHeight, setContentHeight] = useState(!expand ? 0 : null)
+
+ /**
+ * Effect to observe changes in the content size when expanded and recalculate the height.
+ * Uses a ResizeObserver to handle dynamic content size changes.
+ */
+ useEffect(() => {
+ if (!contentHeight || !expand || !contentRef.current) {
+ return null
+ }
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ // Update the height when content size changes
+ setContentHeight(entries[0].contentRect.height)
+ })
+
+ // Observe the content container for resizing
+ resizeObserver.observe(contentRef.current)
+
+ // Clean up the observer when the component unmounts or content changes
+ return () => {
+ resizeObserver.disconnect()
+ }
+ }, [contentHeight, expand])
+
+ /**
+ * Effect to handle the initial setting of content height during expansion or collapse.
+ * Sets height to the content's full height when expanded, or 0 when collapsed.
+ */
+ useEffect(() => {
+ if (expand) {
+ // Set the content height when expanded
+ setContentHeight(contentRef.current?.getBoundingClientRect().height)
+ } else {
+ // Collapse content by setting the height to 0
+ setContentHeight(0)
+ }
+ }, [expand])
+
+ return (
+
+ {/* The container that holds the collapsible content */}
+
{children}
+
) : (
- items.map(({ title, href, iconConfig, subtitle, onClick }) => (
+ items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
-
+
{title}
{subtitle && (
@@ -88,7 +90,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
>
)}
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
index be4944f82..e67b599ff 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
@@ -10,6 +10,10 @@ export interface CollapsibleListItem {
* The subtitle of the list item.
*/
subtitle?: string
+ /**
+ * If true, the title will be rendered with line-through.
+ */
+ strikeThrough?: boolean
/**
* Configuration for the icon.
*/
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
index 7c48506d8..d1989c32e 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -11,10 +11,14 @@ export const DeploymentConfigDiff = ({
goBackURL,
navHeading,
navHelpText,
+ isNavHelpTextShowingError,
tabConfig,
+ showDetailedDiffState,
+ hideDiffState,
+ renderedInDrawer,
...resProps
}: DeploymentConfigDiffProps) => (
-
+
+
-
)
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts
new file mode 100644
index 000000000..590cdaf86
--- /dev/null
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts
@@ -0,0 +1,35 @@
+import { FunctionComponent, SVGProps } from 'react'
+
+import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg'
+import { ReactComponent as ICDiffFileAdded } from '@Icons/ic-diff-file-added.svg'
+import { ReactComponent as ICDiffFileRemoved } from '@Icons/ic-diff-file-removed.svg'
+
+import { DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+
+export const diffStateTextMap: Record
= {
+ hasDiff: 'Has difference',
+ added: 'Added',
+ deleted: 'Deleted',
+ noDiff: 'No change',
+}
+
+export const diffStateIconMap: Record>> = {
+ hasDiff: ICDiffFileUpdated,
+ added: ICDiffFileAdded,
+ deleted: ICDiffFileRemoved,
+ noDiff: null,
+}
+
+export const diffStateTooltipTextMap: Record = {
+ hasDiff: 'File has difference',
+ added: 'File has been added',
+ deleted: 'File has been deleted',
+ noDiff: null,
+}
+
+export const diffStateTextColorMap: Record = {
+ hasDiff: 'cy-7',
+ added: 'cg-5',
+ deleted: 'cr-5',
+ noDiff: 'cn-7',
+}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
index 9e0859448..e5f8a18d5 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
@@ -3,6 +3,10 @@
grid-template-columns: 255px 1fr;
height: 100%;
+ &--drawer {
+ grid-template-columns: 220px 1fr;
+ }
+
&__accordion {
scroll-margin-top: 12px;
}
@@ -18,8 +22,7 @@
}
&__main-content {
- height: calc(100vh - 122px);
- overflow: auto;
+ flex-grow: 1;
&__heading {
display: grid;
@@ -27,10 +30,6 @@
grid-template-columns: calc(50% - 15px) calc(50% - 15px);
grid-template-rows: auto;
}
-
- &__comparison {
- margin: 16px 0 0;
- }
}
& .react-monaco-editor-container {
@@ -39,7 +38,7 @@
&__tab-list {
label {
- flex-grow: 1
+ flex-grow: 1;
}
.radio__item-label {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index 9064785a4..2c6c78f64 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -13,6 +13,13 @@ import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
import { SelectPickerProps } from '../SelectPicker'
import { CollapseProps } from '../Collapse'
+export enum DeploymentConfigDiffState {
+ NO_DIFF = 'noDiff',
+ HAS_DIFF = 'hasDiff',
+ ADDED = 'added',
+ DELETED = 'deleted',
+}
+
export interface DeploymentConfigType {
list: DeploymentHistoryDetail
heading: React.ReactNode
@@ -21,10 +28,13 @@ export interface DeploymentConfigType {
export interface DeploymentConfigListItem {
id: string
title: string
+ name?: string
+ pathType: EnvResourceType
primaryConfig: DeploymentConfigType
secondaryConfig: DeploymentConfigType
- hasDiff?: boolean
- isDeploymentTemplate?: boolean
+ diffState: DeploymentConfigDiffState
+ singleView?: boolean
+ groupHeader?: string
}
export type DeploymentConfigDiffSelectPickerProps =
@@ -42,7 +52,7 @@ export type DeploymentConfigDiffSelectPickerProps =
}
export interface DeploymentConfigDiffNavigationItem extends Pick {
- hasDiff?: boolean
+ diffState: DeploymentConfigListItem['diffState']
}
export interface DeploymentConfigDiffNavigationCollapsibleItem
@@ -55,14 +65,19 @@ export interface DeploymentConfigDiffProps {
errorConfig?: {
error: boolean
code: number
+ message?: string
+ redirectURL?: string
reload: () => void
}
configList: DeploymentConfigListItem[]
+ showDetailedDiffState?: boolean
+ hideDiffState?: boolean
headerText?: string
scrollIntoViewId?: string
selectorsConfig: {
primaryConfig: DeploymentConfigDiffSelectPickerProps[]
secondaryConfig: DeploymentConfigDiffSelectPickerProps[]
+ hideDivider?: boolean
}
sortingConfig?: {
sortBy: string
@@ -74,17 +89,32 @@ export interface DeploymentConfigDiffProps {
goBackURL?: string
navHeading: string
navHelpText?: string
+ isNavHelpTextShowingError?: boolean
tabConfig?: {
tabs: string[]
activeTab: string
onClick: (tab: string) => void
}
+ scopeVariablesConfig?: {
+ convertVariables: boolean
+ onConvertVariablesClick: () => void
+ }
+ renderedInDrawer?: boolean
}
export interface DeploymentConfigDiffNavigationProps
extends Pick<
DeploymentConfigDiffProps,
- 'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
+ | 'isLoading'
+ | 'navList'
+ | 'collapsibleNavList'
+ | 'goBackURL'
+ | 'navHeading'
+ | 'navHelpText'
+ | 'isNavHelpTextShowingError'
+ | 'tabConfig'
+ | 'showDetailedDiffState'
+ | 'hideDiffState'
> {}
export interface DeploymentConfigDiffMainProps
@@ -97,16 +127,20 @@ export interface DeploymentConfigDiffMainProps
| 'scrollIntoViewId'
| 'selectorsConfig'
| 'sortingConfig'
+ | 'scopeVariablesConfig'
+ | 'showDetailedDiffState'
+ | 'hideDiffState'
> {}
-export interface DeploymentConfigDiffAccordionProps extends Pick {
- id: string
- title: string
- children: React.ReactNode
- hasDiff?: boolean
- isExpanded?: boolean
- onClick?: (e: React.MouseEvent) => void
-}
+export type DeploymentConfigDiffAccordionProps = Pick &
+ Pick & {
+ id: string
+ title: string
+ children: React.ReactNode
+ diffState: DeploymentConfigDiffState
+ isExpanded?: boolean
+ onClick?: (e: React.MouseEvent) => void
+ }
export type DiffHeadingDataType = DeploymentTemplate extends true
? DeploymentTemplateDTO
@@ -116,13 +150,12 @@ export type AppEnvDeploymentConfigListParams = (IsManifestView e
? {
currentList: ManifestTemplateDTO
compareList: ManifestTemplateDTO
- sortOrder?: never
}
: {
currentList: AppEnvDeploymentConfigDTO
compareList: AppEnvDeploymentConfigDTO
- sortOrder?: SortingOrder
}) & {
getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
isManifestView?: IsManifestView
+ convertVariables?: boolean
}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index f4845458a..a498d9671 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -1,17 +1,18 @@
import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
import { ReactComponent as ICEditFile } from '@Icons/ic-edit-file.svg'
-import { stringComparatorBySortOrder, yamlComparatorBySortOrder } from '@Shared/Helpers'
+import { stringComparatorBySortOrder } from '@Shared/Helpers'
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '@Shared/constants'
-import { YAMLStringify } from '@Common/Helper'
-import { SortingOrder } from '@Common/Constants'
import {
DeploymentConfigDiffProps,
+ DeploymentConfigDiffState,
+ DeploymentHistoryDetail,
DeploymentHistorySingleValue,
AppEnvDeploymentConfigListParams,
DiffHeadingDataType,
prepareHistoryData,
} from '@Shared/Components'
+import { deepEqual } from '@Common/Helper'
import {
ConfigMapSecretDataConfigDatumDTO,
@@ -21,10 +22,23 @@ import {
DraftState,
EnvResourceType,
ManifestTemplateDTO,
+ PipelineConfigDataDTO,
TemplateListDTO,
TemplateListType,
} from '../../Services/app.types'
+export const getDeploymentTemplateData = (data: DeploymentTemplateDTO) => {
+ const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
+
+ return (
+ parsedDraftData?.envOverrideValues ||
+ parsedDraftData?.valuesOverride ||
+ parsedDraftData?.defaultAppOverride ||
+ data?.data ||
+ null
+ )
+}
+
/**
* Retrieves the draft data from the given configuration data object.
*
@@ -243,6 +257,32 @@ const getCodeEditorData = (
return { compareToCodeEditorData, compareWithCodeEditorData }
}
+/**
+ * Compares two values and returns the appropriate deployment configuration difference state.
+ *
+ * @param compareToValue - The original value to compare.
+ * @param compareWithValue - The new value to compare against the original.
+ * @returns `DeploymentConfigDiffState` enum value indicating the difference between the two values
+ */
+const getDiffState = (compareToValue: DeploymentHistoryDetail, compareWithValue: DeploymentHistoryDetail) => {
+ const isCompareToPresent = !!compareToValue.codeEditorValue.value
+ const isCompareWithPresent = !!compareWithValue.codeEditorValue.value
+
+ if (!isCompareToPresent && isCompareWithPresent) {
+ return DeploymentConfigDiffState.DELETED
+ }
+
+ if (isCompareToPresent && !isCompareWithPresent) {
+ return DeploymentConfigDiffState.ADDED
+ }
+
+ if (!deepEqual(compareToValue, compareWithValue)) {
+ return DeploymentConfigDiffState.HAS_DIFF
+ }
+
+ return DeploymentConfigDiffState.NO_DIFF
+}
+
/**
* Prepares the data for displaying the diff view between two configuration items.
*
@@ -289,37 +329,27 @@ const getDiffViewData = (
type === ConfigResourceType.Secret && !compareWithIsAdmin,
)
- // Check if there is a difference between the compareTo and compareWith data
- const hasDiff = compareWithCodeEditorData.value !== compareToCodeEditorData.value
-
// Return the combined diff data
return {
compareToDiff,
compareWithDiff,
- hasDiff,
+ diffState: getDiffState(compareToDiff, compareWithDiff),
}
}
-const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null, sortOrder: SortingOrder) => {
- const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
- const _data =
- parsedDraftData?.envOverrideValues ||
- parsedDraftData?.valuesOverride ||
- parsedDraftData?.defaultAppOverride ||
- data?.data ||
- null
-
+const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null) => {
+ const _data = getDeploymentTemplateData(data)
const codeEditorValue = {
displayName: 'data',
- value: _data
- ? YAMLStringify(_data, {
- sortMapEntries: (a, b) => yamlComparatorBySortOrder(a, b, sortOrder),
- }) ?? ''
- : '',
+ value: _data ? JSON.stringify(_data) : '',
}
const diffViewData = prepareHistoryData(
- { codeEditorValue },
+ {
+ ...(data || {}),
+ isAppMetricsEnabled: data ? data.isAppMetricsEnabled || false : null,
+ codeEditorValue,
+ },
DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP.DEPLOYMENT_TEMPLATE.VALUE,
)
@@ -340,6 +370,20 @@ const getManifestDiffViewData = (data: ManifestTemplateDTO) => {
return diffViewData
}
+const getPipelineConfigDiffViewData = (data: PipelineConfigDataDTO) => {
+ const codeEditorValue = {
+ displayName: 'data',
+ value: data?.data ? JSON.stringify(data.data) : '',
+ }
+
+ const diffViewData = prepareHistoryData(
+ { ...(data || {}), strategy: data?.Strategy, codeEditorValue },
+ DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP.PIPELINE_STRATEGY.VALUE,
+ )
+
+ return diffViewData
+}
+
const getDiffHeading = (
data: DiffHeadingDataType,
deploymentTemplate?: DeploymentTemplate,
@@ -396,20 +440,50 @@ const getDiffHeading = (
)
}
+const getConfigMapSecretResolvedValues = (configMapSecretData: ConfigMapSecretDataDTO, convertVariables: boolean) => {
+ const resolvedData: ConfigMapSecretDataConfigDatumDTO[] =
+ ((convertVariables && JSON.parse(configMapSecretData?.resolvedValue || null)) || configMapSecretData?.data)
+ ?.configData || []
+
+ const data =
+ (convertVariables &&
+ resolvedData.map((item, index) => {
+ if (configMapSecretData.data.configData[index].draftMetadata) {
+ const resolvedDraftData =
+ configMapSecretData.data.configData[index].draftMetadata.draftResolvedValue ||
+ configMapSecretData.data.configData[index].draftMetadata.data
+
+ return {
+ ...configMapSecretData.data.configData[index],
+ draftMetadata: {
+ ...configMapSecretData.data.configData[index].draftMetadata,
+ data: resolvedDraftData,
+ },
+ }
+ }
+
+ return item
+ })) ||
+ resolvedData
+
+ return data
+}
+
const getConfigMapSecretData = (
compareToList: ConfigMapSecretDataDTO,
compareWithList: ConfigMapSecretDataDTO,
resourceType: ConfigResourceType,
compareToIsAdmin: boolean,
compareWithIsAdmin: boolean,
+ convertVariables: boolean,
) => {
const combinedList = mergeConfigDataArraysByName(
- compareToList?.data.configData || [],
- compareWithList?.data.configData || [],
+ getConfigMapSecretResolvedValues(compareToList, convertVariables),
+ getConfigMapSecretResolvedValues(compareWithList, convertVariables),
)
- const deploymentConfig = combinedList.map(([currentItem, compareItem]) => {
- const { compareToDiff, compareWithDiff, hasDiff } = getDiffViewData(
+ const deploymentConfig: DeploymentConfigDiffProps['configList'] = combinedList.map(([currentItem, compareItem]) => {
+ const { compareToDiff, compareWithDiff, diffState } = getDiffViewData(
currentItem,
compareItem,
resourceType,
@@ -417,8 +491,12 @@ const getConfigMapSecretData = (
compareWithIsAdmin,
)
+ const pathType =
+ resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret
+
return {
- id: `${resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret}-${currentItem?.name || compareItem?.name}`,
+ id: `${pathType}-${currentItem?.name || compareItem?.name}`,
+ pathType,
title: `${resourceType === ConfigResourceType.ConfigMap ? 'ConfigMap' : 'Secret'} / ${currentItem?.name || compareItem?.name}`,
name: currentItem?.name || compareItem?.name,
primaryConfig: {
@@ -429,13 +507,59 @@ const getConfigMapSecretData = (
heading: getDiffHeading(currentItem),
list: compareToDiff,
},
- hasDiff,
+ diffState,
+ groupHeader: resourceType === ConfigResourceType.ConfigMap ? 'CONFIGMAPS' : 'SECRETS',
}
})
return deploymentConfig
}
+const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplateDTO) => {
+ try {
+ if (deploymentTemplate.deploymentDraftData) {
+ return JSON.parse(deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.draftResolvedValue)
+ }
+ return deploymentTemplate.resolvedValue
+ } catch {
+ return null
+ }
+}
+
+const getConfigDataWithResolvedDeploymentTemplate = (
+ data: AppEnvDeploymentConfigListParams['compareList'],
+ convertVariables: boolean,
+): AppEnvDeploymentConfigListParams['compareList'] => {
+ if (!data) {
+ return {
+ deploymentTemplate: null,
+ configMapData: null,
+ isAppAdmin: null,
+ secretsData: null,
+ pipelineConfigData: null,
+ }
+ }
+
+ if (!data.deploymentTemplate || !convertVariables) {
+ return data
+ }
+
+ const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
+
+ return {
+ ...data,
+ deploymentTemplate: {
+ ...data.deploymentTemplate,
+ ...(deploymentTemplateResolvedData
+ ? {
+ data: deploymentTemplateResolvedData,
+ deploymentDraftData: null,
+ }
+ : {}),
+ },
+ }
+}
+
/**
* Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
*
@@ -453,70 +577,119 @@ export const getAppEnvDeploymentConfigList = ): {
configList: DeploymentConfigDiffProps['configList']
navList: DeploymentConfigDiffProps['navList']
collapsibleNavList: DeploymentConfigDiffProps['collapsibleNavList']
} => {
if (!isManifestView) {
- const _currentList = currentList as AppEnvDeploymentConfigListParams['currentList']
- const _compareList = compareList as AppEnvDeploymentConfigListParams['compareList']
- const currentDeploymentData = getDeploymentTemplateDiffViewData(_currentList.deploymentTemplate, sortOrder)
- const compareDeploymentData = getDeploymentTemplateDiffViewData(_compareList.deploymentTemplate, sortOrder)
+ const compareToObject = getConfigDataWithResolvedDeploymentTemplate(
+ currentList as AppEnvDeploymentConfigListParams['currentList'],
+ convertVariables,
+ )
+ const compareWithObject = getConfigDataWithResolvedDeploymentTemplate(
+ compareList as AppEnvDeploymentConfigListParams['compareList'],
+ convertVariables,
+ )
+ const currentDeploymentData = getDeploymentTemplateDiffViewData(compareToObject.deploymentTemplate)
+ const compareDeploymentData = getDeploymentTemplateDiffViewData(compareWithObject.deploymentTemplate)
const deploymentTemplateData = {
id: EnvResourceType.DeploymentTemplate,
+ pathType: EnvResourceType.DeploymentTemplate,
title: 'Deployment Template',
primaryConfig: {
- heading: getDiffHeading(_compareList.deploymentTemplate, true),
+ heading: getDiffHeading(compareWithObject.deploymentTemplate, true),
list: compareDeploymentData,
},
secondaryConfig: {
- heading: getDiffHeading(_currentList.deploymentTemplate, true),
+ heading: getDiffHeading(compareToObject.deploymentTemplate, true),
list: currentDeploymentData,
},
- hasDiff: currentDeploymentData.codeEditorValue.value !== compareDeploymentData.codeEditorValue.value,
- isDeploymentTemplate: true,
+ diffState: getDiffState(currentDeploymentData, compareDeploymentData),
+ }
+
+ let currentPipelineConfigData: DeploymentHistoryDetail
+ let comparePipelineConfigData: DeploymentHistoryDetail
+ let pipelineConfigData: DeploymentConfigDiffProps['configList'][0]
+
+ if (compareToObject.pipelineConfigData || compareWithObject.pipelineConfigData) {
+ currentPipelineConfigData = getPipelineConfigDiffViewData(compareToObject.pipelineConfigData)
+ comparePipelineConfigData = getPipelineConfigDiffViewData(compareWithObject.pipelineConfigData)
+ pipelineConfigData = {
+ id: EnvResourceType.PipelineStrategy,
+ pathType: EnvResourceType.PipelineStrategy,
+ title: 'Pipeline Configuration',
+ primaryConfig: {
+ heading: null,
+ list: comparePipelineConfigData,
+ },
+ secondaryConfig: {
+ heading: null,
+ list: currentPipelineConfigData,
+ },
+ diffState: getDiffState(currentPipelineConfigData, comparePipelineConfigData),
+ }
}
const cmData = getConfigMapSecretData(
- _currentList.configMapData,
- _compareList.configMapData,
+ compareToObject.configMapData,
+ compareWithObject.configMapData,
ConfigResourceType.ConfigMap,
- _currentList.isAppAdmin,
- _compareList.isAppAdmin,
+ compareToObject.isAppAdmin,
+ compareWithObject.isAppAdmin,
+ convertVariables,
)
const secretData = getConfigMapSecretData(
- _currentList.secretsData,
- _compareList.secretsData,
+ compareToObject.secretsData,
+ compareWithObject.secretsData,
ConfigResourceType.Secret,
- _currentList.isAppAdmin,
- _compareList.isAppAdmin,
+ compareToObject.isAppAdmin,
+ compareWithObject.isAppAdmin,
+ convertVariables,
)
- const configList: DeploymentConfigDiffProps['configList'] = [deploymentTemplateData, ...cmData, ...secretData]
+ const configList: DeploymentConfigDiffProps['configList'] = [
+ deploymentTemplateData,
+ ...(pipelineConfigData ? [pipelineConfigData] : []),
+ ...cmData,
+ ...secretData,
+ ]
const navList: DeploymentConfigDiffProps['navList'] = [
{
title: deploymentTemplateData.title,
- hasDiff: deploymentTemplateData.hasDiff,
+ diffState: deploymentTemplateData.diffState,
href: getNavItemHref(EnvResourceType.DeploymentTemplate, null),
onClick: () => {
const element = document.querySelector(`#${deploymentTemplateData.id}`)
element?.scrollIntoView({ block: 'start' })
},
},
+ ...(pipelineConfigData
+ ? [
+ {
+ title: pipelineConfigData.title,
+ diffState: pipelineConfigData.diffState,
+ href: getNavItemHref(EnvResourceType.PipelineStrategy, null),
+ onClick: () => {
+ const element = document.querySelector(`#${pipelineConfigData.id}`)
+ element?.scrollIntoView({ block: 'start' })
+ },
+ },
+ ]
+ : []),
]
const collapsibleNavList: DeploymentConfigDiffProps['collapsibleNavList'] = [
{
header: 'ConfigMaps',
id: EnvResourceType.ConfigMap,
- items: cmData.map(({ name, hasDiff, id }) => ({
+ items: cmData.map(({ name, diffState, id }) => ({
title: name,
- hasDiff,
+ diffState,
href: getNavItemHref(EnvResourceType.ConfigMap, name),
onClick: () => {
const element = document.querySelector(`#${id}`)
@@ -528,9 +701,9 @@ export const getAppEnvDeploymentConfigList = ({
+ items: secretData.map(({ name, diffState, id }) => ({
title: name,
- hasDiff,
+ diffState,
href: getNavItemHref(EnvResourceType.Secret, name),
onClick: () => {
const element = document.querySelector(`#${id}`)
@@ -548,14 +721,15 @@ export const getAppEnvDeploymentConfigList = ['currentList']
- const _compareList = compareList as AppEnvDeploymentConfigListParams['compareList']
+ const compareToObject = currentList as AppEnvDeploymentConfigListParams['currentList']
+ const compareWithObject = compareList as AppEnvDeploymentConfigListParams['compareList']
- const currentManifestData = getManifestDiffViewData(_currentList)
- const compareManifestData = getManifestDiffViewData(_compareList)
+ const currentManifestData = getManifestDiffViewData(compareToObject)
+ const compareManifestData = getManifestDiffViewData(compareWithObject)
const manifestData = {
id: EnvResourceType.Manifest,
+ pathType: EnvResourceType.Manifest,
title: 'Manifest Output',
primaryConfig: {
heading: Generated Manifest,
@@ -565,8 +739,8 @@ export const getAppEnvDeploymentConfigList = Generated Manifest,
list: currentManifestData,
},
- hasDiff: currentManifestData.codeEditorValue.value !== compareManifestData.codeEditorValue.value,
- isDeploymentTemplate: true,
+ diffState: getDiffState(currentManifestData, compareManifestData),
+ singleView: true,
}
const configList: DeploymentConfigDiffProps['configList'] = [manifestData]
@@ -574,7 +748,7 @@ export const getAppEnvDeploymentConfigList = {
const element = document.querySelector(`#${manifestData.id}`)
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
index 64b720431..a13f67817 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
@@ -1,34 +1,44 @@
-import { forwardRef } from 'react'
-
import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
import { Collapse } from '../Collapse'
-import { DeploymentConfigDiffAccordionProps } from './DeploymentConfigDiff.types'
+import { DeploymentConfigDiffAccordionProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+import { diffStateTextColorMap, diffStateTextMap } from './DeploymentConfigDiff.constants'
-export const DeploymentConfigDiffAccordion = forwardRef(
- (
- { hasDiff, children, title, id, isExpanded, onClick, onTransitionEnd }: DeploymentConfigDiffAccordionProps,
- ref,
- ) => (
-
-
+
+ {children}
+
+
-
-
+
+ )
+ }
+ onClick={handleSorting}
+ disabled={isLoading}
+ />
+ )
+ }
+
+ return null
+ }
+
+ const renderScopeVariablesButton = () => {
+ if (scopeVariablesConfig) {
+ const { convertVariables } = scopeVariablesConfig
+
+ return (
+
+
+
+
+
)
}
@@ -117,7 +173,7 @@ export const DeploymentConfigDiffMain = ({
}
const renderDiffs = () =>
- configList.map(({ id, isDeploymentTemplate, primaryConfig, secondaryConfig, title, hasDiff }) => {
+ configList.map(({ id, primaryConfig, secondaryConfig, title, diffState, singleView }) => {
const { heading: primaryHeading, list: primaryList } = primaryConfig
const { heading: secondaryHeading, list: secondaryList } = secondaryConfig
@@ -127,18 +183,20 @@ export const DeploymentConfigDiffMain = ({
id={id}
title={title}
isExpanded={expandedView[id]}
- hasDiff={hasDiff}
+ diffState={diffState}
onClick={handleAccordionClick(id)}
- onTransitionEnd={handleTransitionEnd(id)}
+ onTransitionEnd={onTransitionEnd}
+ showDetailedDiffState={showDetailedDiffState}
+ hideDiffState={hideDiffState}
>
- {isDeploymentTemplate ? (
+ {singleView ? (
<>
{primaryHeading}
{secondaryHeading}
) : (
-
-
{primaryHeading}
-
{secondaryHeading}
-
+ {primaryHeading && secondaryHeading && (
+
+
{primaryHeading}
+
{secondaryHeading}
+
+ )}
+
-
{headerText}
+ {!!headerText &&
{headerText}
}
{renderHeaderSelectors(selectorsConfig.primaryConfig)}
{renderHeaderSelectors(selectorsConfig.secondaryConfig)}
- {renderSortButton()}
+ {(sortingConfig || scopeVariablesConfig) && (
+
+ {renderSortButton()}
+ {renderScopeVariablesButton()}
+
+ )}
-
- {errorConfig?.error &&
}
+
+ {errorConfig?.error && (
+
+ )}
{!errorConfig?.error &&
(isLoading ? (
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index b8f2d8307..3d6841f0e 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -4,11 +4,12 @@ import Tippy from '@tippyjs/react'
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
-import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error.svg'
import { StyledRadioGroup } from '@Common/index'
-import { CollapsibleList } from '../CollapsibleList'
-import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types'
+import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
+import { DeploymentConfigDiffNavigationProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
// LOADING SHIMMER
const ShimmerText = ({ width }: { width: string }) => (
@@ -24,7 +25,10 @@ export const DeploymentConfigDiffNavigation = ({
goBackURL,
navHeading,
navHelpText,
+ isNavHelpTextShowingError,
tabConfig,
+ showDetailedDiffState,
+ hideDiffState,
}: DeploymentConfigDiffNavigationProps) => {
// STATES
const [expandedIds, setExpandedIds] = useState
>({})
@@ -34,17 +38,23 @@ export const DeploymentConfigDiffNavigation = ({
}, [collapsibleNavList])
/** Collapsible List Config. */
- const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
+ const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
...resListItem,
isExpanded: expandedIds[resListItem.id],
- items: items.map(({ hasDiff, ...resItem }) => ({
+ items: items.map(({ diffState, ...resItem }) => ({
...resItem,
- ...(hasDiff
+ strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
+ ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
? {
iconConfig: {
- Icon: ICDiffFileUpdated,
- props: { className: 'icon-dim-16 dc__no-shrink' },
- tooltipProps: { content: 'File has difference', arrow: false, placement: 'right' as const },
+ Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
+ tooltipProps: {
+ content: showDetailedDiffState
+ ? diffStateTooltipTextMap[diffState]
+ : diffStateTooltipTextMap.hasDiff,
+ arrow: false,
+ placement: 'right' as const,
+ },
},
}
: {}),
@@ -103,31 +113,47 @@ export const DeploymentConfigDiffNavigation = ({
const renderContent = () => (
<>
- {navList.map(({ title, href, onClick, hasDiff }) => (
-
- {title}
- {hasDiff && (
-
-
-
-
-
- )}
-
- ))}
+ {navList.map(({ title, href, onClick, diffState }) => {
+ const Icon = showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff
+ return (
+
+ {title}
+ {!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF && (
+
+
+
+
+
+ )}
+
+ )
+ })}
{navHelpText && (
-
+ {isNavHelpTextShowingError ? (
+
+ ) : (
+
+ )}
-
{navHelpText}
+
{navHelpText}
)}
diff --git a/src/Shared/Components/DeploymentConfigDiff/index.ts b/src/Shared/Components/DeploymentConfigDiff/index.ts
index c84340d18..0b8c7a4d5 100644
--- a/src/Shared/Components/DeploymentConfigDiff/index.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/index.ts
@@ -1,3 +1,4 @@
export * from './DeploymentConfigDiff.component'
export * from './DeploymentConfigDiff.types'
export * from './DeploymentConfigDiff.utils'
+export * from './DeploymentConfigDiff.constants'
diff --git a/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx b/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
index c482227f0..56d5b6025 100644
--- a/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
+++ b/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
@@ -15,6 +15,7 @@
*/
import Tippy from '@tippyjs/react'
+import { Tooltip } from '@Common/Tooltip'
import { DefaultUserKey } from '../../../types'
import { ImagePathTippyContentProps } from './types'
import { ArtifactInfoProps } from '../types'
@@ -57,8 +58,8 @@ const ArtifactInfo = ({
}
return (
-
-
+
+
{deployedTime}
)
@@ -88,7 +89,9 @@ const ArtifactInfo = ({
>
{deployedBy[0]}
-
{deployedBy}
+
+ {deployedBy}
+
- {isMulti && !isCreatableOption && (
-
- )}
-
- {startIcon && (
-
{startIcon}
+
+
+ {isMulti && !isCreatableOption && (
+
)}
-
-
- {label}
-
- {/* Add support for custom ellipsis if required */}
- {showDescription && (
-
- {description}
-
+
+ {startIcon && (
+
{startIcon}
+ )}
+
+
+ {label}
+
+ {/* Add support for custom ellipsis if required */}
+ {showDescription &&
+ (typeof description === 'string' ? (
+
+ {description}
+
+ ) : (
+
{description}
+ ))}
+
+ {endIcon && (
+
{endIcon}
)}
- {endIcon && (
-
{endIcon}
- )}
-
)
}
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
index 580b4cc4f..44d9478c3 100644
--- a/src/Shared/Components/SelectPicker/type.ts
+++ b/src/Shared/Components/SelectPicker/type.ts
@@ -22,12 +22,13 @@ import { GroupBase, GroupHeadingProps, Props as ReactSelectProps, SelectInstance
import { CreatableProps } from 'react-select/creatable'
// This import allows to extend the base interface in react-select module via module augmentation
import type {} from 'react-select/base'
+import { TooltipProps } from '@Common/Tooltip/types'
export interface SelectPickerOptionType
extends OptionType {
/**
* Description to be displayed for the option
*/
- description?: string
+ description?: ReactNode
/**
* Icon at the start of the option
*/
@@ -36,6 +37,13 @@ export interface SelectPickerOptionType extends O
* Icon at the end of the option
*/
endIcon?: ReactElement
+ /**
+ * Props passed to show the tippy on option
+ */
+ tooltipProps?:
+ | Omit
+ | (Omit &
+ Required>)
}
type SelectProps = ReactSelectProps<
diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx
index 5dff56f68..5eaac04f8 100644
--- a/src/Shared/Helpers.tsx
+++ b/src/Shared/Helpers.tsx
@@ -821,3 +821,34 @@ export const getDefaultValueFromType = (value: unknown) => {
return null
}
}
+
+/**
+ * Groups an array of objects by a specified key.
+ *
+ * This function takes an array of objects and a key, and groups the objects in the array
+ * based on the value of the specified key. If an object does not have the specified key,
+ * it will be grouped under the `'UNGROUPED'` key.
+ *
+ * @param array - The array of objects to be grouped.
+ * @param key - The key of the object used to group the array.
+ * @returns An object where the keys are the unique values of the specified key in the array,
+ * and the values are arrays of objects that share the same key value.
+ */
+export const groupArrayByObjectKey = , K extends keyof T>(
+ array: T[],
+ key: K,
+): Record =>
+ array.reduce(
+ (result, currentValue) => {
+ const groupKey = currentValue[key] ?? 'UNGROUPED'
+
+ if (!result[groupKey]) {
+ Object.assign(result, { [groupKey]: [] })
+ }
+
+ result[groupKey].push(currentValue)
+
+ return result
+ },
+ {} as Record,
+ )
diff --git a/src/Shared/Hooks/useForm/useForm.ts b/src/Shared/Hooks/useForm/useForm.ts
index e3362ede5..181526b86 100644
--- a/src/Shared/Hooks/useForm/useForm.ts
+++ b/src/Shared/Hooks/useForm/useForm.ts
@@ -69,7 +69,7 @@ export const useForm = = {}>(options?: {
*/
const onBlur = (key: keyof T, noTrim: boolean) => () => {
if (!noTrim) {
- setData({ ...data, [key]: data[key].trim() })
+ setData({ ...data, [key]: data[key]?.trim() })
}
if (options?.validationMode === 'onBlur') {
diff --git a/src/Shared/Services/app.service.ts b/src/Shared/Services/app.service.ts
index 2f1684359..a244b84f6 100644
--- a/src/Shared/Services/app.service.ts
+++ b/src/Shared/Services/app.service.ts
@@ -55,8 +55,11 @@ export const getArtifactInfo = async (
}
}
-export const getAppEnvDeploymentConfig = (
- params: AppEnvDeploymentConfigPayloadType,
- signal?: AbortSignal,
-): Promise> =>
+export const getAppEnvDeploymentConfig = ({
+ params,
+ signal,
+}: {
+ params: AppEnvDeploymentConfigPayloadType
+ signal?: AbortSignal
+}): Promise> =>
get(getUrlWithSearchParams(ROUTES.CONFIG_DATA, params), { signal })
diff --git a/src/Shared/Services/app.types.ts b/src/Shared/Services/app.types.ts
index 88c4bd402..cf3d4f31a 100644
--- a/src/Shared/Services/app.types.ts
+++ b/src/Shared/Services/app.types.ts
@@ -161,6 +161,7 @@ export interface DraftMetadataDTO {
draftId: number
draftVersionId: number
draftState: number
+ draftResolvedValue: string
approvers: string[]
canApprove: boolean
commentsCount: number
@@ -202,36 +203,62 @@ export enum ConfigResourceType {
ConfigMap = 'ConfigMap',
Secret = 'Secret',
DeploymentTemplate = 'Deployment Template',
+ PipelineStrategy = 'Pipeline Strategy',
}
export interface DeploymentTemplateDTO {
resourceType: ConfigResourceType.DeploymentTemplate
- data: { [key: string]: any }
+ data: Record
deploymentDraftData: ConfigMapSecretDataType | null
+ variableSnapshot: {
+ 'Deployment Template': Record
+ }
+ templateVersion: string
+ isAppMetricsEnabled?: true
+ resolvedValue: Record
}
export interface ConfigMapSecretDataDTO {
resourceType: Extract
data: ConfigMapSecretDataType
+ variableSnapshot: Record>
+ resolvedValue: string
+}
+
+export interface PipelineConfigDataDTO {
+ resourceType: ConfigResourceType.PipelineStrategy
+ data: Record
+ pipelineTriggerType: string
+ Strategy: string
}
export interface AppEnvDeploymentConfigDTO {
deploymentTemplate: DeploymentTemplateDTO | null
configMapData: ConfigMapSecretDataDTO | null
secretsData: ConfigMapSecretDataDTO | null
+ pipelineConfigData?: PipelineConfigDataDTO
isAppAdmin: boolean
}
-export interface AppEnvDeploymentConfigPayloadType {
- appName: string
- envName: string
- configType: AppEnvDeploymentConfigType
- identifierId?: number
- pipelineId?: number
- resourceType?: ConfigResourceType
- resourceId?: number
- resourceName?: string
-}
+export type AppEnvDeploymentConfigPayloadType =
+ | {
+ appName: string
+ envName: string
+ configType: AppEnvDeploymentConfigType
+ identifierId?: number
+ pipelineId?: number
+ resourceType?: ConfigResourceType
+ resourceId?: number
+ resourceName?: string
+ configArea?: 'AppConfiguration'
+ }
+ | {
+ appName: string
+ envName: string
+ pipelineId: number
+ configArea: 'CdRollback' | 'DeploymentHistory'
+ wfrId: number
+ }
export enum TemplateListType {
DefaultVersions = 1,
@@ -251,6 +278,7 @@ export interface TemplateListDTO {
finishedOn?: string
status?: string
pipelineId?: number
+ wfrId?: number
}
export interface ManifestTemplateDTO {
@@ -271,4 +299,5 @@ export enum EnvResourceType {
Secret = 'secrets',
DeploymentTemplate = 'deployment-template',
Manifest = 'manifest',
+ PipelineStrategy = 'pipeline-strategy',
}