Skip to content

Commit 0995322

Browse files
AbhishekA1509AbhishekA1509
committed
feat: refactor AppStatusModal components for improved layout and accessibility, remove deprecated AppStatusDetailsChart, and enhance AppStatusBody with custom messages
1 parent c853b01 commit 0995322

File tree

10 files changed

+38
-236
lines changed

10 files changed

+38
-236
lines changed

‎src/Shared/Components/AppStatusModal/AppStatusBody.tsx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,37 @@ import { AppStatusBodyProps } from './types'
1111
import { getAppStatusMessageFromAppDetails } from './utils'
1212

1313
const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; value: ReactNode; isLast?: boolean }) => (
14-
<div
15-
className={`py-12 px-16 flexbox dc__align-items-center dc__gap-16 ${!isLast ? 'border__secondary--bottom' : ''}`}
16-
>
14+
<div className={`py-12 px-16 flexbox dc__gap-16 ${!isLast ? 'border__secondary--bottom' : ''}`}>
1715
<Tooltip content={heading}>
18-
<h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0">{heading}</h3>
16+
<h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink w-140">{heading}</h3>
1917
</Tooltip>
2018

21-
{typeof value === 'string' ? <ShowMoreText textClass="cn-9 fs-13 fw-4 lh-1-5" text={value} /> : value}
19+
{typeof value === 'string' ? (
20+
<ShowMoreText
21+
key={`show-more-text-${value}`}
22+
textClass="cn-9 fs-13 fw-4 lh-1-5"
23+
containerClass="pr-20"
24+
text={value}
25+
/>
26+
) : (
27+
value
28+
)}
2229
</div>
2330
)
2431

2532
export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }: AppStatusBodyProps) => {
33+
const appStatus = appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus
2634
const message = useMemo(() => getAppStatusMessageFromAppDetails(appDetails), [appDetails])
27-
const customMessage = APP_STATUS_CUSTOM_MESSAGES[appDetails.resourceTree?.status?.toUpperCase()]
35+
const customMessage =
36+
type === 'stack-manager'
37+
? 'The installation will complete when status for all the below resources become HEALTHY.'
38+
: APP_STATUS_CUSTOM_MESSAGES[appDetails.resourceTree?.status?.toUpperCase()]
2839

2940
const infoCardItems: (Omit<ComponentProps<typeof InfoCardItem>, 'isLast'> & { id: number })[] = [
3041
{
3142
id: 1,
3243
heading: type !== 'stack-manager' ? 'Application Status' : 'Status',
33-
value: <AppStatus status={appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus} />,
44+
value: appStatus ? <AppStatus status={appStatus} /> : '--',
3445
},
3546
...(message
3647
? [
@@ -53,7 +64,7 @@ export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }:
5364
]
5465

5566
return (
56-
<div className="flexbox-col dc__gap-16">
67+
<div className="flexbox-col dc__gap-16 p-20 dc__overflow-auto">
5768
{/* Info card */}
5869
<div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
5970
{infoCardItems.map((item, index) => (
@@ -66,6 +77,7 @@ export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }:
6677
))}
6778
</div>
6879

80+
{/* TODO: Test */}
6981
<ErrorBar appDetails={appDetails} />
7082

7183
<AppStatusContent appDetails={appDetails} handleShowConfigDriftModal={handleShowConfigDriftModal} />

‎src/Shared/Components/AppStatusModal/AppStatusContent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const AppStatusContent = ({
119119
}
120120

121121
return (
122-
<div className={`flexbox-col ${isCardLayout ? 'br-6 border__primary dc__overflow-hidden' : ''}`}>
122+
<div className={`flexbox-col ${isCardLayout ? 'br-6 border__primary' : ''}`}>
123123
{!!flattenedNodes.length && (
124124
<div className="p-12">
125125
<StatusFilterButtonComponent
@@ -131,7 +131,7 @@ const AppStatusContent = ({
131131
)}
132132

133133
<div
134-
className={`${APP_STATUS_ROWS_BASE_CLASS} cn-7 fs-13 fw-6 lh-20 border__secondary--bottom bg__primary`}
134+
className={`${APP_STATUS_ROWS_BASE_CLASS} dc__position-sticky dc__top-0 dc__zi-1 cn-7 fs-13 fw-6 lh-20 border__secondary--bottom bg__primary dc__top-radius-6`}
135135
>
136136
{APP_STATUS_HEADERS.map((headerKey) => (
137137
<SortableTableHeaderCell key={`header_${headerKey}`} isSortable={false} title={headerKey} />

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useEffect, useRef, useState } from 'react'
22

3-
import { ReactComponent as ICChatCircleDots } from '@Icons/ic-chat-circle-dots.svg'
43
import {
54
abortPreviousRequests,
65
DISCORD_LINK,
@@ -128,7 +127,7 @@ const AppStatusModal = ({
128127
>
129128
<div className="flexbox-col px-20 border__primary--bottom dc__no-shrink">
130129
<div className="flexbox py-12 dc__content-space">
131-
{title}
130+
<div className="fs-16 fw-6 lh-1-5">{title}</div>
132131

133132
<Button
134133
dataTestId="close-modal-header-icon-button"
@@ -143,7 +142,7 @@ const AppStatusModal = ({
143142
</div>
144143
</div>
145144

146-
<div className="flexbox-col flex-grow-1 dc__overflow-auto p-20 dc__gap-16">
145+
<div className="flexbox-col flex-grow-1 dc__overflow-auto dc__gap-16 dc__content-space">
147146
<APIResponseHandler
148147
isLoading={areInitialAppDetailsLoadingWithAbortedError}
149148
progressingProps={{
@@ -162,7 +161,7 @@ const AppStatusModal = ({
162161
/>
163162

164163
{type === 'stack-manager' && (
165-
<div className="bg__primary flexbox dc__content-space dc__border-top p-16 fs-13 fw-6">
164+
<div className="bg__primary flexbox dc__align-items-center dc__content-space dc__border-top py-16 px-20 fs-13 fw-6">
166165
<span className="fs-13 fw-6">Facing issues in installing integration?</span>
167166

168167
<Button
@@ -173,10 +172,8 @@ const AppStatusModal = ({
173172
target: '_blank',
174173
rel: 'noreferrer noopener',
175174
}}
176-
// TODO: Can we use Icon component
177-
icon={<ICChatCircleDots />}
178-
ariaLabel="Chat with support"
179-
showAriaLabelInTippy={false}
175+
startIcon={<Icon name="ic-chat-circle-dots" color={null} />}
176+
text="Chat with support"
180177
/>
181178
</div>
182179
)}

‎src/Shared/Components/AppStatusModal/constants.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export const APP_STATUS_CUSTOM_MESSAGES = {
22
HIBERNATED: "This application's workloads are scaled down to 0 replicas",
33
'PARTIALLY HIBERNATED': "Some of this application's workloads are scaled down to 0 replicas.",
4-
INTEGRATION_INSTALLING: 'The installation will complete when status for all the below resources become HEALTHY.',
54
}

‎src/Shared/Components/AppStatusModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
export { default as AppStatusContent } from './AppStatusContent'
12
export { default as AppStatusModal } from './AppStatusModal.component'

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@ export type AppStatusModalProps = {
2424
}
2525
)
2626

27-
export interface AppStatusBodyProps extends Pick<AppStatusModalProps, 'appDetails' | 'type'> {
27+
export interface AppStatusBodyProps extends Required<Pick<AppStatusModalProps, 'appDetails' | 'type'>> {
2828
handleShowConfigDriftModal: () => void
2929
}
3030

31-
export interface AppStatusContentProps extends Pick<AppStatusBodyProps, 'appDetails' | 'handleShowConfigDriftModal'> {
31+
export interface AppStatusContentProps
32+
extends Required<Pick<AppStatusBodyProps, 'appDetails'>>,
33+
Partial<Pick<AppStatusBodyProps, 'handleShowConfigDriftModal'>> {
3234
/**
3335
* @default false
3436
*/

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

Lines changed: 0 additions & 205 deletions
This file was deleted.

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ import { useParams } from 'react-router-dom'
2020
import moment from 'moment'
2121

2222
import { ShowMoreText } from '@Shared/Components/ShowMoreText'
23+
import { IndexStore } from '@Shared/Store'
2324

2425
import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
2526
import { DATE_TIME_FORMATS, showError } from '../../../Common'
2627
import { DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
27-
import AppStatusDetailsChart from './AppStatusDetailsChart'
28+
import { AppStatusContent } from '../AppStatusModal'
2829
import { MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
2930
import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
3031
import { getManualSync } from './service'
@@ -46,6 +47,8 @@ export const DeploymentStatusDetailRow = ({
4647
type === TIMELINE_STATUS.HELM_MANIFEST_PUSHED_TO_HELM_REPO &&
4748
deploymentDetailedData.deploymentStatus === statusIcon.failed
4849

50+
const appDetails = IndexStore.getAppDetails()
51+
4952
useEffect(() => {
5053
toggleCollapsed(statusBreakDownType.isCollapsed)
5154
}, [statusBreakDownType.isCollapsed])
@@ -152,7 +155,8 @@ export const DeploymentStatusDetailRow = ({
152155
</div>
153156
)}
154157
<div>
155-
<AppStatusDetailsChart filterRemoveHealth showFooter={false} />
158+
{/* TODO: Test */}
159+
<AppStatusContent appDetails={appDetails} filterHealthyNodes isCardLayout={false} />
156160
</div>
157161
</div>
158162
)

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
* limitations under the License.
1515
*/
1616

17-
export { default as AppStatusDetailsChart } from './AppStatusDetailsChart'
1817
export { default as Artifacts } from './Artifacts'
1918
export { default as CDEmptyState } from './CDEmptyState'
2019
export * from './CiPipelineSourceConfig'

0 commit comments

Comments
 (0)