Skip to content

Commit 80e4d6c

Browse files
committed
feat: add new icon for external link and integrate it into AppStatusModal; enhance AppStatusBody with app details link functionality
1 parent a693de4 commit 80e4d6c

File tree

7 files changed

+71
-14
lines changed

7 files changed

+71
-14
lines changed
Lines changed: 3 additions & 0 deletions
Loading

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { ComponentProps, ReactNode } from 'react'
1+
import { ComponentProps, PropsWithChildren, ReactNode } from 'react'
22

33
import { Tooltip } from '@Common/Tooltip'
4+
import { ComponentSizeType } from '@Shared/constants'
5+
import { getAppDetailsURL } from '@Shared/Helpers'
46

7+
import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
58
import { DeploymentStatusDetailBreakdown } from '../CICDHistory'
69
import { ErrorBar } from '../Error'
10+
import { Icon } from '../Icon'
711
import { ShowMoreText } from '../ShowMoreText'
812
import { AppStatus, DeploymentStatus } from '../StatusComponent'
913
import AppStatusContent from './AppStatusContent'
@@ -13,7 +17,7 @@ import { getAppStatusMessageFromAppDetails } from './utils'
1317

1418
const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; value: ReactNode; isLast?: boolean }) => (
1519
<div
16-
className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${!isLast ? 'border__secondary--bottom' : ''}`}
20+
className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item dc__align-items-center ${!isLast ? 'border__secondary--bottom' : ''}`}
1721
>
1822
<Tooltip content={heading}>
1923
<h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink">{heading}</h3>
@@ -32,6 +36,31 @@ const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; val
3236
</div>
3337
)
3438

39+
const StatusHeadingContainer = ({
40+
children,
41+
type,
42+
appId,
43+
}: PropsWithChildren<Pick<AppStatusBodyProps, 'type'>> & { appId: number }) => (
44+
<div className="flexbox dc__content-space w-100">
45+
{children}
46+
{type === 'release' ? (
47+
<Button
48+
dataTestId="visit-app-details"
49+
component={ButtonComponentType.link}
50+
variant={ButtonVariantType.secondary}
51+
size={ComponentSizeType.xs}
52+
endIcon={<Icon name="ic-arrow-square-out" color={null} />}
53+
text="Visit app"
54+
linkProps={{
55+
to: getAppDetailsURL(appId),
56+
target: '_blank',
57+
rel: 'noopener noreferrer',
58+
}}
59+
/>
60+
) : null}
61+
</div>
62+
)
63+
3564
export const AppStatusBody = ({
3665
appDetails,
3766
type,
@@ -52,7 +81,11 @@ export const AppStatusBody = ({
5281
{
5382
id: `app-status-${1}`,
5483
heading: type !== 'stack-manager' ? 'Application Status' : 'Status',
55-
value: appStatus ? <AppStatus status={appStatus} showAnimatedIcon /> : '--',
84+
value: (
85+
<StatusHeadingContainer type={type} appId={appDetails.appId}>
86+
{appStatus ? <AppStatus status={appStatus} showAnimatedIcon /> : '--'}
87+
</StatusHeadingContainer>
88+
),
5689
},
5790
...(message
5891
? [
@@ -82,13 +115,17 @@ export const AppStatusBody = ({
82115
{
83116
id: `deployment-status-${1}`,
84117
heading: 'Deployment Status',
85-
value: deploymentStatusDetailsBreakdownData?.deploymentStatus ? (
86-
<DeploymentStatus
87-
status={deploymentStatusDetailsBreakdownData.deploymentStatus}
88-
showAnimatedIcon
89-
/>
90-
) : (
91-
'--'
118+
value: (
119+
<StatusHeadingContainer type={type} appId={appDetails.appId}>
120+
{deploymentStatusDetailsBreakdownData?.deploymentStatus ? (
121+
<DeploymentStatus
122+
status={deploymentStatusDetailsBreakdownData.deploymentStatus}
123+
showAnimatedIcon
124+
/>
125+
) : (
126+
'--'
127+
)}
128+
</StatusHeadingContainer>
92129
),
93130
},
94131
]

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,8 @@ const AppStatusModal = ({
201201
className="flexbox-col dc__content-space h-100 border__primary--left bg__modal--primary shadow__modal app-status-modal"
202202
onClick={stopPropagation}
203203
>
204-
<div className="flexbox-col px-20 border__primary--bottom dc__no-shrink">
205-
<div className="flexbox py-12 dc__content-space">
204+
<div className="app-status-modal__header pt-12 flexbox-col px-20 dc__gap-12 border__primary--bottom dc__no-shrink">
205+
<div className="flexbox dc__content-space">
206206
<h2 className="m-0 dc__truncate fs-16 fw-6 lh-1-5 dc__gap-4">
207207
{filteredTitleSegments.map((segment, index) => (
208208
<Fragment key={segment}>

src/Shared/Components/AppStatusModal/AppStatusModal.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22
.info-card-item {
33
grid-template-columns: 140px 1fr;
44
}
5+
6+
&__header {
7+
&:not(:has([role="tablist"])) {
8+
padding-bottom: 12px;
9+
}
10+
}
511
}

src/Shared/Components/AppStatusModal/AppStatusModalTabList.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const AppStatusModalTabList = ({
1919
appDetails,
2020
})
2121

22-
const showApplicationStatus = selectedTab === AppStatusModalTabType.APP_STATUS || !appDetails
22+
const showApplicationStatus = selectedTab === AppStatusModalTabType.APP_STATUS || !!appDetails?.resourceTree
2323

2424
const handleSelectAppStatus = () => {
2525
handleSelectTab(AppStatusModalTabType.APP_STATUS)
@@ -85,7 +85,7 @@ const AppStatusModalTabList = ({
8585
return null
8686
}
8787

88-
return <TabGroup tabs={tabGroups} />
88+
return <TabGroup tabs={tabGroups} hideTopPadding />
8989
}
9090

9191
export default AppStatusModalTabList

src/Shared/Components/Icon/Icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ReactComponent as ICApica } from '@IconsV2/ic-apica.svg'
77
import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg'
88
import { ReactComponent as ICArrowClockwise } from '@IconsV2/ic-arrow-clockwise.svg'
99
import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
10+
import { ReactComponent as ICArrowSquareOut } from '@IconsV2/ic-arrow-square-out.svg'
1011
import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg'
1112
import { ReactComponent as ICAther } from '@IconsV2/ic-ather.svg'
1213
import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
@@ -127,6 +128,7 @@ export const iconMap = {
127128
'ic-app-group': ICAppGroup,
128129
'ic-arrow-clockwise': ICArrowClockwise,
129130
'ic-arrow-right': ICArrowRight,
131+
'ic-arrow-square-out': ICArrowSquareOut,
130132
'ic-arrows-left-right': ICArrowsLeftRight,
131133
'ic-ather': ICAther,
132134
'ic-azure': ICAzure,

src/Shared/Helpers.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
SortingOrder,
4747
SourceTypeMap,
4848
TOKEN_COOKIE_NAME,
49+
URLS,
4950
UserApprovalConfigType,
5051
UserApprovalInfo,
5152
ZERO_TIME_STRING,
@@ -1078,3 +1079,11 @@ export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean, topClass
10781079
export const clearCookieOnLogout = () => {
10791080
document.cookie = `${TOKEN_COOKIE_NAME}=; expires=Thu, 01-Jan-1970 00:00:01 GMT;path=/`
10801081
}
1082+
1083+
export const getAppDetailsURL = (appId: number | string, envId?: number | string): string => {
1084+
const baseURL = `${URLS.APP}/${appId}/${URLS.APP_DETAILS}`
1085+
if (envId) {
1086+
return `${baseURL}/${envId}`
1087+
}
1088+
return baseURL
1089+
}

0 commit comments

Comments
 (0)