Skip to content

Commit d9e2132

Browse files
RohitRaj011RohitRaj011
committed
refactor: DeploymentHistoryConfigDiff - Handle case for no configuration present in deployments; fix: Collapse - add resizeObserver to correctly calculate dynamic height; feat: DeploymentConfigDiff - add hideDiffState prop to hide the configuration diff status
1 parent 68a624f commit d9e2132

15 files changed

+152
-77
lines changed

‎src/Common/ChartVersionAndTypeSelector.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
7070
return (
7171
<div className="flex">
7272
<div className="chart-type-options flex" data-testid="chart-type-options">
73-
<span className="cn-7 mr-4">Chart Type</span>
7473
<SelectPicker
7574
inputId='chart-type-select'
7675
label='Chart Type'

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@ import { useMemo, useState } from 'react'
22
import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
33

44
import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
5-
import { capitalizeFirstLetter, useAsync } from '@Common/Helper'
5+
import { useAsync } from '@Common/Helper'
66
import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
77
import { groupArrayByObjectKey } from '@Shared/Helpers'
88
import ErrorScreenManager from '@Common/ErrorScreenManager'
99
import { Progressing } from '@Common/Progressing'
1010
import { useUrlFilters } from '@Common/Hooks'
11+
import { GenericEmptyState } from '@Common/index'
1112

1213
import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
1314
import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
14-
import { getPipelineDeploymentsWfrIds, getPipelineDeployments, parseDeploymentHistoryDiffSearchParams } from './utils'
15+
import {
16+
getPipelineDeploymentsWfrIds,
17+
getPipelineDeployments,
18+
parseDeploymentHistoryDiffSearchParams,
19+
isDeploymentHistoryConfigDiffNotFoundError,
20+
getDeploymentHistoryConfigDiffError,
21+
} from './utils'
1522
import { renderDeploymentHistoryConfig } from './helpers'
1623

1724
export const DeploymentHistoryConfigDiff = ({
@@ -47,14 +54,9 @@ export const DeploymentHistoryConfigDiff = ({
4754

4855
// ASYNC CALLS
4956
// Load comparison deployment data
50-
const [
51-
compareDeploymentConfigLoader,
52-
compareDeploymentConfig,
53-
compareDeploymentConfigErr,
54-
reloadCompareDeploymentConfig,
55-
] = useAsync(
57+
const [compareDeploymentConfigLoader, compareDeploymentConfig, , reloadCompareDeploymentConfig] = useAsync(
5658
() =>
57-
Promise.all([
59+
Promise.allSettled([
5860
getAppEnvDeploymentConfig({
5961
params: {
6062
appName,
@@ -86,15 +88,18 @@ export const DeploymentHistoryConfigDiff = ({
8688
// Generate the deployment history config list
8789
const deploymentConfigList = useMemo(() => {
8890
if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
89-
const compareList = isPreviousDeploymentConfigAvailable
90-
? compareDeploymentConfig[1].result
91-
: {
92-
configMapData: null,
93-
deploymentTemplate: null,
94-
secretsData: null,
95-
isAppAdmin: false,
96-
}
97-
const currentList = compareDeploymentConfig[0].result
91+
const compareList =
92+
isPreviousDeploymentConfigAvailable && compareDeploymentConfig[1].status === 'fulfilled'
93+
? compareDeploymentConfig[1].value.result
94+
: {
95+
configMapData: null,
96+
deploymentTemplate: null,
97+
secretsData: null,
98+
isAppAdmin: false,
99+
}
100+
101+
const currentList =
102+
compareDeploymentConfig[0].status === 'fulfilled' ? compareDeploymentConfig[0].value.result : null
98103

99104
const configData = getAppEnvDeploymentConfigList({
100105
currentList,
@@ -106,21 +111,44 @@ export const DeploymentHistoryConfigDiff = ({
106111
}
107112

108113
return null
109-
}, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigErr, compareDeploymentConfig, convertVariables])
114+
}, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigLoader, compareDeploymentConfig, convertVariables])
115+
116+
const compareDeploymentConfigErr = useMemo(
117+
() =>
118+
!compareDeploymentConfigLoader && compareDeploymentConfig
119+
? getDeploymentHistoryConfigDiffError(compareDeploymentConfig[0]) ||
120+
getDeploymentHistoryConfigDiffError(compareDeploymentConfig[1])
121+
: null,
122+
[compareDeploymentConfigLoader, compareDeploymentConfig],
123+
)
110124

111125
const groupedDeploymentConfigList = useMemo(
112126
() => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
113127
[deploymentConfigList],
114128
)
115129

130+
/** Hide diff state if the previous deployment config is unavailable or returns a 404 error. */
131+
const hideDiffState =
132+
!isPreviousDeploymentConfigAvailable ||
133+
(compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1]))
134+
// LOADING
116135
const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
136+
// ERROR CONFIG
117137
const errorConfig = {
118138
code: compareDeploymentConfigErr?.code,
119139
error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
120-
message: capitalizeFirstLetter(compareDeploymentConfigErr?.errors[0]?.userMessage || ''),
121140
reload: reloadCompareDeploymentConfig,
122141
}
123142

143+
// TODO: get null state from Utkarsh
144+
if (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[0])) {
145+
return (
146+
<div className="flex bcn-0 h-100">
147+
<GenericEmptyState title="No Configuration Found" />
148+
</div>
149+
)
150+
}
151+
124152
return (
125153
<Switch>
126154
<Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
@@ -138,15 +166,12 @@ export const DeploymentHistoryConfigDiff = ({
138166
runSource={runSource}
139167
resourceId={resourceId}
140168
renderRunSource={renderRunSource}
169+
hideDiffState={hideDiffState}
141170
/>
142171
</Route>
143172
<Route>
144173
{compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
145-
<ErrorScreenManager
146-
code={errorConfig.code}
147-
subtitle={errorConfig.message}
148-
reload={errorConfig.reload}
149-
/>
174+
<ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />
150175
) : (
151176
<div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
152177
{isLoading ? (
@@ -162,6 +187,7 @@ export const DeploymentHistoryConfigDiff = ({
162187
groupedDeploymentConfigList[groupHeader],
163188
groupHeader !== 'UNGROUPED' ? groupHeader : null,
164189
pathname,
190+
hideDiffState,
165191
),
166192
)}
167193
</div>

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
6363
renderRunSource,
6464
resourceId,
6565
})
66+
const previousDeployment = pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId)
6667

6768
const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
6869
updateSearchParams({ compareWfrId: value })
@@ -126,7 +127,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
126127
scrollIntoViewId={`${resourceType}${resourceName ? `-${resourceName}` : ''}`}
127128
navHelpText={
128129
compareWfrId
129-
? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
130+
? `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
130131
: null
131132
}
132133
goBackURL={generatePath(path.split('/:resourceType')[0], { ...params })}

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const renderDeploymentHistoryConfig = (
2828
config: DeploymentConfigDiffProps['configList'],
2929
heading: string,
3030
pathname: string,
31+
hideDiffState: boolean,
3132
) => (
3233
<div className="dc__border br-4 dc__overflow-hidden">
3334
{heading && (
@@ -48,7 +49,7 @@ export const renderDeploymentHistoryConfig = (
4849
<ICFileCode className="icon-dim-20 scn-6" />
4950
<span className="cb-5 fs-13 lh-20">{name || title}</span>
5051
</p>
51-
{renderState(diffState)}
52+
{!hideDiffState && renderState(diffState)}
5253
</NavLink>
5354
)
5455
})}

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface DeploymentHistoryConfigDiffProps
1818

1919
export type DeploymentHistoryDiffDetailedProps = Pick<
2020
DeploymentConfigDiffProps,
21-
'collapsibleNavList' | 'configList' | 'errorConfig' | 'isLoading' | 'navList'
21+
'collapsibleNavList' | 'configList' | 'errorConfig' | 'isLoading' | 'navList' | 'hideDiffState'
2222
> &
2323
Required<
2424
Pick<

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import moment from 'moment'
22

3-
import { DATE_TIME_FORMATS } from '@Common/Constants'
3+
import { DATE_TIME_FORMATS, ERROR_STATUS_CODE } from '@Common/Constants'
44
import { DeploymentStageType } from '@Shared/constants'
55
import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
66

@@ -10,12 +10,7 @@ import { DeploymentHistoryConfigDiffProps } from './types'
1010

1111
export const getPipelineDeployments = (triggerHistory: DeploymentHistoryConfigDiffProps['triggerHistory']) =>
1212
Array.from(triggerHistory)
13-
.filter(
14-
([, value]) =>
15-
// TODO: check with Prakash when API returns this erro
16-
// (!value.message || value.message !== 'pg: no rows in result set') &&
17-
value.stage === DeploymentStageType.DEPLOY,
18-
)
13+
.filter(([, value]) => value.stage === DeploymentStageType.DEPLOY)
1914
.map(([, value]) => value)
2015

2116
export const getPipelineDeploymentsWfrIds = ({
@@ -70,3 +65,9 @@ export const getPipelineDeploymentsOptions = ({
7065
export const parseDeploymentHistoryDiffSearchParams = (compareWfrId: number) => (searchParams: URLSearchParams) => ({
7166
compareWfrId: +(searchParams.get('compareWfrId') || compareWfrId),
7267
})
68+
69+
export const isDeploymentHistoryConfigDiffNotFoundError = <T extends unknown>(res: PromiseSettledResult<T>) =>
70+
res.status === 'rejected' && res.reason?.code === ERROR_STATUS_CODE.NOT_FOUND
71+
72+
export const getDeploymentHistoryConfigDiffError = <T extends unknown>(res: PromiseSettledResult<T>) =>
73+
res.status === 'rejected' && res.reason?.code !== ERROR_STATUS_CODE.NOT_FOUND ? res.reason : null

‎src/Shared/Components/CICDHistory/TriggerOutput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ const StartDetails = ({
297297

298298
return (
299299
<div className="w-100 pr-20 flex column left dc__border-bottom-n1">
300-
<div className="flexbox dc__gap-8 dc__align-items-center pb-12">
300+
<div className="flexbox dc__gap-8 dc__align-items-center pb-12 flex-wrap">
301301
<div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
302302
<div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
303303
<div>Start</div>

‎src/Shared/Components/CICDHistory/service.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,11 @@ export const prepareConfigMapAndSecretData = (
197197
let typeValue = 'Environment Variable'
198198
if (rawData.type === 'volume') {
199199
typeValue = 'Data Volume'
200-
if (rawData.mountPath) {
201-
secretValues['mountPath'] = { displayName: 'Volume mount path', value: rawData.mountPath }
200+
if (rawData.mountPath || rawData.defaultMountPath) {
201+
secretValues['mountPath'] = {
202+
displayName: 'Volume mount path',
203+
value: rawData.mountPath ?? rawData.defaultMountPath,
204+
}
202205
}
203206
if (rawData.subPath) {
204207
secretValues['subPath'] = { displayName: 'Set SubPath', value: 'Yes' }

‎src/Shared/Components/Collapse/Collapse.tsx‎

Lines changed: 47 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,61 @@
1-
import { useEffect, useState, useRef, useMemo } from 'react'
2-
1+
import { useEffect, useRef, useState } from 'react'
32
import { CollapseProps } from './types'
43

54
/**
6-
* Collapse component for expanding/collapsing content with smooth transitions.
7-
* Dynamically calculates and applies height based on the content, with support
8-
* for callback execution when the transition ends.
5+
* Collapse component for smoothly expanding or collapsing its content.
6+
* Dynamically calculates the content height and applies smooth transitions.
7+
* It also supports a callback when the transition ends.
98
*/
109
export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
11-
// Ref to access the content container
10+
// Reference to the content container to calculate its height
1211
const contentRef = useRef<HTMLDivElement>(null)
13-
// State for dynamically calculated height
14-
const [contentHeight, setContentHeight] = useState(0)
1512

16-
// Calculate and update content height when children change or initially on mount
13+
// State to store the dynamic height of the content; initially set to 0 if collapsed
14+
const [contentHeight, setContentHeight] = useState<number>(!expand ? 0 : null)
15+
16+
/**
17+
* Effect to observe changes in the content size when expanded and recalculate the height.
18+
* Uses a ResizeObserver to handle dynamic content size changes.
19+
*/
1720
useEffect(() => {
18-
if (contentRef.current) {
19-
const _contentHeight = contentRef.current.clientHeight || 0
20-
setContentHeight(_contentHeight)
21+
if (!contentHeight || !expand || !contentRef.current) {
22+
return null
2123
}
22-
}, [children])
23-
24-
const collapseStyle = useMemo(
25-
() => ({
26-
// Set height based on the 'expand' prop
27-
height: expand ? contentHeight : 0,
28-
transition: 'height 200ms ease-out',
29-
// Hide content overflow during collapse
30-
overflow: 'hidden',
31-
}),
32-
[expand, contentHeight],
33-
)
24+
25+
const resizeObserver = new ResizeObserver((entries) => {
26+
// Update the height when content size changes
27+
setContentHeight(entries[0].contentRect.height)
28+
})
29+
30+
// Observe the content container for resizing
31+
resizeObserver.observe(contentRef.current)
32+
33+
// Clean up the observer when the component unmounts or content changes
34+
return () => {
35+
resizeObserver.disconnect()
36+
}
37+
}, [contentHeight, expand])
38+
39+
/**
40+
* Effect to handle the initial setting of content height during expansion or collapse.
41+
* Sets height to the content's full height when expanded, or 0 when collapsed.
42+
*/
43+
useEffect(() => {
44+
if (expand) {
45+
// Set the content height when expanded
46+
setContentHeight(contentRef.current?.getBoundingClientRect().height)
47+
} else {
48+
// Collapse content by setting the height to 0
49+
setContentHeight(0)
50+
}
51+
}, [expand])
3452

3553
return (
36-
<div style={collapseStyle} onTransitionEnd={onTransitionEnd}>
37-
{/* Content container with reference to calculate height */}
54+
<div
55+
style={{ height: contentHeight, overflow: 'hidden', transition: 'height 200ms ease-out' }}
56+
onTransitionEnd={onTransitionEnd}
57+
>
58+
{/* The container that holds the collapsible content */}
3859
<div ref={contentRef}>{children}</div>
3960
</div>
4061
)

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const DeploymentConfigDiff = ({
1313
navHelpText,
1414
tabConfig,
1515
showDetailedDiffState,
16+
hideDiffState,
1617
renderedInDrawer,
1718
...resProps
1819
}: DeploymentConfigDiffProps) => (
@@ -26,11 +27,13 @@ export const DeploymentConfigDiff = ({
2627
navHelpText={navHelpText}
2728
tabConfig={tabConfig}
2829
showDetailedDiffState={showDetailedDiffState}
30+
hideDiffState={hideDiffState}
2931
/>
3032
<DeploymentConfigDiffMain
3133
isLoading={isLoading}
3234
configList={configList}
3335
showDetailedDiffState={showDetailedDiffState}
36+
hideDiffState={hideDiffState}
3437
{...resProps}
3538
/>
3639
</div>

0 commit comments

Comments
 (0)