Skip to content

Commit 272a88e

Browse files
RohitRaj011RohitRaj011
committed
feat: DeploymentHistoryConfigDiff - add NullState for previous/current deployment not available & required changes to DeploymentConfigDiff
1 parent 52e6472 commit 272a88e

File tree

10 files changed

+81
-34
lines changed

10 files changed

+81
-34
lines changed

‎src/Common/ChartVersionAndTypeSelector.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,19 @@ 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>
7374
<SelectPicker
74-
inputId='chart-type-select'
75-
label='Chart Type'
75+
inputId="chart-type-select"
7676
value={selectedChartType ?? chartTypeOptions[0]}
7777
options={chartTypeOptions}
7878
onChange={handleChartTypeChange}
7979
variant={SelectPickerVariantType.BORDER_LESS}
8080
/>
8181
</div>
8282
<div className="chart-version-options flex" data-testid="chart-version-options">
83-
<span className="cn-7 mr-4">Chart Version</span>
83+
<span className="cn-7 mr-4">Chart Version</span>
8484
<SelectPicker
85-
inputId='chart-version-select'
85+
inputId="chart-version-select"
8686
value={selectedChartVersion ?? chartVersionOptions[0]}
8787
options={chartVersionOptions}
8888
onChange={handleChartVersionChange}

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

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { useMemo, useState } from 'react'
22
import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
33

4+
import { ReactComponent as ICError } from '@Icons/ic-error.svg'
45
import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
56
import { useAsync } from '@Common/Helper'
67
import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
78
import { groupArrayByObjectKey } from '@Shared/Helpers'
89
import ErrorScreenManager from '@Common/ErrorScreenManager'
910
import { Progressing } from '@Common/Progressing'
1011
import { useUrlFilters } from '@Common/Hooks'
11-
import { GenericEmptyState } from '@Common/index'
12+
import { GenericEmptyState, InfoColourBar } from '@Common/index'
1213

1314
import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
1415
import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
@@ -127,10 +128,11 @@ export const DeploymentHistoryConfigDiff = ({
127128
[deploymentConfigList],
128129
)
129130

131+
/** Previous deployment config has 404 error. */
132+
const hasPreviousDeploymentConfigNotFoundError =
133+
compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1])
130134
/** 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]))
135+
const hideDiffState = !isPreviousDeploymentConfigAvailable || hasPreviousDeploymentConfigNotFoundError
134136
// LOADING
135137
const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
136138
// ERROR CONFIG
@@ -140,11 +142,13 @@ export const DeploymentHistoryConfigDiff = ({
140142
reload: reloadCompareDeploymentConfig,
141143
}
142144

143-
// TODO: get null state from Utkarsh
144145
if (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[0])) {
145146
return (
146147
<div className="flex bcn-0 h-100">
147-
<GenericEmptyState title="No Configuration Found" />
148+
<GenericEmptyState
149+
title="Data not available"
150+
subTitle="Configurations used for this deployment execution is not available"
151+
/>
148152
</div>
149153
)
150154
}
@@ -167,6 +171,7 @@ export const DeploymentHistoryConfigDiff = ({
167171
resourceId={resourceId}
168172
renderRunSource={renderRunSource}
169173
hideDiffState={hideDiffState}
174+
isCompareDeploymentConfigNotAvailable={hasPreviousDeploymentConfigNotFoundError}
170175
/>
171176
</Route>
172177
<Route>
@@ -179,16 +184,27 @@ export const DeploymentHistoryConfigDiff = ({
179184
) : (
180185
<>
181186
<h3 className="fs-13 lh-20 fw-6 cn-9 m-0">
182-
Showing configuration change with respect to previous deployment
187+
{hideDiffState
188+
? 'Configurations used for this deployment trigger'
189+
: 'Showing configuration change with respect to previous deployment'}
183190
</h3>
184-
<div className="flexbox-col dc__gap-12 dc__mxw-800">
185-
{Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
186-
renderDeploymentHistoryConfig(
187-
groupedDeploymentConfigList[groupHeader],
188-
groupHeader !== 'UNGROUPED' ? groupHeader : null,
189-
pathname,
190-
hideDiffState,
191-
),
191+
<div className="flexbox-col dc__gap-16 dc__mxw-800">
192+
<div className="flexbox-col dc__gap-12">
193+
{Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
194+
renderDeploymentHistoryConfig(
195+
groupedDeploymentConfigList[groupHeader],
196+
groupHeader !== 'UNGROUPED' ? groupHeader : null,
197+
pathname,
198+
hideDiffState,
199+
),
200+
)}
201+
</div>
202+
{hasPreviousDeploymentConfigNotFoundError && (
203+
<InfoColourBar
204+
classname="error_bar cn-9 fs-13 lh-20"
205+
Icon={ICError}
206+
message="Diff unavailable: Configurations for previous deployment not found."
207+
/>
192208
)}
193209
</div>
194210
</>

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
2929
runSource,
3030
renderRunSource,
3131
resourceId,
32+
isCompareDeploymentConfigNotAvailable,
3233
...props
3334
}: DeploymentHistoryDiffDetailedProps) => {
3435
// HOOKS
@@ -64,13 +65,14 @@ export const DeploymentHistoryConfigDiffCompare = ({
6465
resourceId,
6566
})
6667
const previousDeployment = pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId)
68+
const isPreviousDeploymentConfigAvailable = !!pipelineDeploymentsOptions.length
6769

6870
const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
6971
updateSearchParams({ compareWfrId: value })
7072
}
7173

7274
const selectorsConfig: DeploymentConfigDiffProps['selectorsConfig'] = {
73-
primaryConfig: pipelineDeploymentsOptions.length
75+
primaryConfig: isPreviousDeploymentConfigAvailable
7476
? [
7577
{
7678
id: 'deployment-config-diff-deployment-selector',
@@ -105,6 +107,16 @@ export const DeploymentHistoryConfigDiffCompare = ({
105107
],
106108
}
107109

110+
const getNavHelpText = () => {
111+
if (isPreviousDeploymentConfigAvailable) {
112+
return isCompareDeploymentConfigNotAvailable
113+
? `Diff unavailable: Configurations for deployment execution ‘${previousDeployment?.label || 'N/A'}’ not found`
114+
: `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
115+
}
116+
117+
return null
118+
}
119+
108120
const onSorting = () => handleSorting(sortOrder !== SortingOrder.DESC ? 'sort-config' : '')
109121

110122
const sortingConfig: DeploymentConfigDiffProps['sortingConfig'] = {
@@ -123,13 +135,10 @@ export const DeploymentHistoryConfigDiffCompare = ({
123135
{...props}
124136
showDetailedDiffState
125137
navHeading={`Comparing ${envName}`}
126-
headerText={!pipelineDeploymentsOptions.length ? '' : undefined} // using `undefined` to ensure component picks default value
138+
headerText={!isPreviousDeploymentConfigAvailable ? '' : undefined} // using `undefined` to ensure component picks default value
127139
scrollIntoViewId={`${resourceType}${resourceName ? `-${resourceName}` : ''}`}
128-
navHelpText={
129-
compareWfrId
130-
? `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
131-
: null
132-
}
140+
navHelpText={getNavHelpText()}
141+
isNavHelpTextShowingError={isCompareDeploymentConfigNotAvailable}
133142
goBackURL={generatePath(path.split('/:resourceType')[0], { ...params })}
134143
selectorsConfig={selectorsConfig}
135144
sortingConfig={sortingConfig}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ export const renderDeploymentHistoryConfig = (
4747
>
4848
<p className="m-0 flex dc__gap-8">
4949
<ICFileCode className="icon-dim-20 scn-6" />
50-
<span className="cb-5 fs-13 lh-20">{name || title}</span>
50+
<span
51+
className={`cb-5 fs-13 lh-20 ${diffState === DeploymentConfigDiffState.DELETED ? 'dc__strike-through' : ''}`}
52+
>
53+
{name || title}
54+
</span>
5155
</p>
5256
{!hideDiffState && renderState(diffState)}
5357
</NavLink>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export type DeploymentHistoryDiffDetailedProps = Pick<
3030
previousWfrId: number
3131
convertVariables: boolean
3232
setConvertVariables: Dispatch<SetStateAction<boolean>>
33+
isCompareDeploymentConfigNotAvailable?: boolean
3334
}
3435

3536
export interface DeploymentHistoryConfigDiffQueryParams {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
6060
</span>
6161
</div>
6262
) : (
63-
items.map(({ title, href, iconConfig, subtitle, onClick }) => (
63+
items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
6464
<NavLink
6565
key={title}
6666
to={href}
@@ -74,7 +74,9 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
7474
}}
7575
>
7676
<div className="flexbox-col flex-grow-1 mw-none">
77-
<span className="collapsible__item__title dc__truncate fs-13 lh-20">
77+
<span
78+
className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
79+
>
7880
{title}
7981
</span>
8082
{subtitle && (

‎src/Shared/Components/CollapsibleList/CollapsibleList.types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ export interface CollapsibleListItem {
1010
* The subtitle of the list item.
1111
*/
1212
subtitle?: string
13+
/**
14+
* If true, the title will be rendered with line-through.
15+
*/
16+
strikeThrough?: boolean
1317
/**
1418
* Configuration for the icon.
1519
*/

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const DeploymentConfigDiff = ({
1111
goBackURL,
1212
navHeading,
1313
navHelpText,
14+
isNavHelpTextShowingError,
1415
tabConfig,
1516
showDetailedDiffState,
1617
hideDiffState,
@@ -25,6 +26,7 @@ export const DeploymentConfigDiff = ({
2526
goBackURL={goBackURL}
2627
navHeading={navHeading}
2728
navHelpText={navHelpText}
29+
isNavHelpTextShowingError={isNavHelpTextShowingError}
2830
tabConfig={tabConfig}
2931
showDetailedDiffState={showDetailedDiffState}
3032
hideDiffState={hideDiffState}

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export interface DeploymentConfigDiffProps {
8989
goBackURL?: string
9090
navHeading: string
9191
navHelpText?: string
92+
isNavHelpTextShowingError?: boolean
9293
tabConfig?: {
9394
tabs: string[]
9495
activeTab: string
@@ -110,6 +111,7 @@ export interface DeploymentConfigDiffNavigationProps
110111
| 'goBackURL'
111112
| 'navHeading'
112113
| 'navHelpText'
114+
| 'isNavHelpTextShowingError'
113115
| 'tabConfig'
114116
| 'showDetailedDiffState'
115117
| 'hideDiffState'

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import Tippy from '@tippyjs/react'
44

55
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
66
import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
7+
import { ReactComponent as ICError } from '@Icons/ic-error.svg'
78
import { StyledRadioGroup } from '@Common/index'
89

9-
import { CollapsibleList } from '../CollapsibleList'
10+
import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
1011
import { DeploymentConfigDiffNavigationProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
1112
import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
1213

@@ -24,6 +25,7 @@ export const DeploymentConfigDiffNavigation = ({
2425
goBackURL,
2526
navHeading,
2627
navHelpText,
28+
isNavHelpTextShowingError,
2729
tabConfig,
2830
showDetailedDiffState,
2931
hideDiffState,
@@ -36,11 +38,12 @@ export const DeploymentConfigDiffNavigation = ({
3638
}, [collapsibleNavList])
3739

3840
/** Collapsible List Config. */
39-
const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
41+
const collapsibleListConfig = collapsibleNavList.map<CollapsibleListConfig>(({ items, ...resListItem }) => ({
4042
...resListItem,
4143
isExpanded: expandedIds[resListItem.id],
42-
items: items.map(({ diffState, ...resItem }) => ({
44+
items: items.map<CollapsibleListConfig['items'][0]>(({ diffState, ...resItem }) => ({
4345
...resItem,
46+
strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
4447
...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
4548
? {
4649
iconConfig: {
@@ -145,9 +148,13 @@ export const DeploymentConfigDiffNavigation = ({
145148
{navHelpText && (
146149
<div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
147150
<span className="flex p-2 dc__align-self-start">
148-
<ICInfoOutlined className="icon-dim-16 fcn-6" />
151+
{isNavHelpTextShowingError ? (
152+
<ICError className="icon-dim-16 dc__no-shrink" />
153+
) : (
154+
<ICInfoOutlined className="icon-dim-16 fcn-6 dc__no-shrink" />
155+
)}
149156
</span>
150-
<p className="m-0 fs-12 lh-1-5 cn-9">{navHelpText}</p>
157+
<p className={`m-0 fs-12 lh-1-5 ${isNavHelpTextShowingError ? 'cr-5' : 'cn-9'}`}>{navHelpText}</p>
151158
</div>
152159
)}
153160
</>

0 commit comments

Comments
 (0)