Skip to content

Commit e72e55d

Browse files
AbhishekA1509AbhishekA1509
committed
feat: refactor target platform handling and add tooltip support
1 parent 047a7e3 commit e72e55d

File tree

11 files changed

+98
-46
lines changed

11 files changed

+98
-46
lines changed

‎src/Common/ImageTags.Types.ts

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

17+
import { ReactElement } from 'react'
18+
1719
export interface ReleaseTag {
1820
id: number
1921
tagName: string
@@ -56,4 +58,5 @@ export interface ImageButtonType {
5658
isSuperAdmin: boolean
5759
duplicateTag?: boolean
5860
hideHardDelete?: boolean
61+
startIcon?: ReactElement
5962
}

‎src/Common/ImageTags.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,7 @@ export const ImageTagButton = ({
509509
isSuperAdmin,
510510
duplicateTag,
511511
hideHardDelete,
512+
startIcon,
512513
}: ImageButtonType) => {
513514
const IconComponent = isSoftDeleted ? Redo : Minus
514515
const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
@@ -530,6 +531,8 @@ export const ImageTagButton = ({
530531
isEditing ? 'icon-hover' : ''
531532
} ${tabColor()}`}
532533
>
534+
{startIcon}
535+
533536
{duplicateTag ? (
534537
<Warning className="icon-dim-12 mr-4" />
535538
) : (

‎src/Shared/Components/ImageCard/ImageCard.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
*/
1616

1717
import { ImageTagsContainer } from '../../../Common'
18-
import TargetPlatformBadgeList from '../TargetPlatformBadgeList/TargetPlatformBadgeList.component'
1918
import { ArtifactInfo } from './ArtifactInfo'
2019
import { SequentialCDCardTitle } from './SequentialCDCardTitle'
2120
import { ImageCardProps } from './types'
@@ -26,7 +25,6 @@ const ImageCard = ({
2625
sequentialCDCardTitleProps,
2726
artifactInfoProps,
2827
imageTagContainerProps,
29-
targetPlatforms,
3028
children,
3129
rootClassName = '',
3230
materialInfoRootClassName = '',
@@ -50,8 +48,6 @@ const ImageCard = ({
5048
</div>
5149
</div>
5250

53-
<TargetPlatformBadgeList targetPlatforms={targetPlatforms} />
54-
5551
<div data-testid={`image-tags-container-${testIdLocator}`}>
5652
<ImageTagsContainer {...imageTagContainerProps} />
5753
</div>

‎src/Shared/Components/ImageCard/SequentialCDCardTitle/SequentialCDCardTitle.tsx

Lines changed: 70 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { ReactComponent as ICStack } from '@Icons/ic-stack.svg'
18+
import { TargetPlatformListTooltip } from '@Shared/Components/TargetPlatforms'
1719
import { ARTIFACT_STATUS, STAGE_TYPE } from '../../../constants'
1820
import { DeploymentEnvState } from './DeploymentEnvState'
1921
import { DEPLOYMENT_ENV_TEXT } from './DeploymentEnvState/constants'
2022
import { SequentialCDCardTitleProps } from '../types'
21-
import { ImageTagButton } from '../../../../Common'
23+
import { ImageTagButton, Tooltip } from '../../../../Common'
2224

2325
const SequentialCDCardTitle = ({
2426
isLatest,
@@ -31,6 +33,7 @@ const SequentialCDCardTitle = ({
3133
isVirtualEnvironment,
3234
deployedOn,
3335
additionalInfo,
36+
targetPlatforms,
3437
}: SequentialCDCardTitleProps) => {
3538
const getDeployedStateText = () => {
3639
if (isVirtualEnvironment) {
@@ -64,53 +67,81 @@ const SequentialCDCardTitle = ({
6467
)
6568
}
6669

67-
if (stageType !== STAGE_TYPE.CD) {
68-
if (isLatest || additionalInfo) {
69-
return (
70-
<div className="bg__primary pb-8 br-4 flex left dc__gap-8">
71-
{isLatest && <span className="last-deployed-status">Last Run</span>}
70+
const addFlexGap = stageType !== STAGE_TYPE.CD
71+
72+
const renderContent = () => {
73+
if (stageType !== STAGE_TYPE.CD) {
74+
if (isLatest || additionalInfo) {
75+
return (
76+
<>
77+
{isLatest && <span className="last-deployed-status">Last Run</span>}
78+
{additionalInfo}
79+
</>
80+
)
81+
}
82+
83+
return null
84+
}
7285

86+
if (
87+
isLatest ||
88+
isRunningOnParentCD ||
89+
Object.values(ARTIFACT_STATUS).includes(artifactStatus) ||
90+
showLatestTag ||
91+
deployedOn?.length ||
92+
additionalInfo
93+
) {
94+
return (
95+
<>
96+
{renderDeployedEnvironmentName()}
97+
{artifactStatus === ARTIFACT_STATUS.PROGRESSING && (
98+
<DeploymentEnvState envStateText={DEPLOYMENT_ENV_TEXT.DEPLOYING} title={environmentName} />
99+
)}
100+
{(artifactStatus === ARTIFACT_STATUS.DEGRADED || artifactStatus === ARTIFACT_STATUS.FAILED) && (
101+
<DeploymentEnvState envStateText={DEPLOYMENT_ENV_TEXT.FAILED} title={environmentName} />
102+
)}
103+
{showLatestTag && (
104+
<ImageTagButton
105+
text="Latest"
106+
isSoftDeleted={false}
107+
isEditing={false}
108+
tagId={0}
109+
softDeleteTags={[]}
110+
isSuperAdmin
111+
/>
112+
)}
73113
{additionalInfo}
74-
</div>
114+
</>
75115
)
76116
}
77117

78118
return null
79119
}
80120

81-
if (
82-
isLatest ||
83-
isRunningOnParentCD ||
84-
Object.values(ARTIFACT_STATUS).includes(artifactStatus) ||
85-
showLatestTag ||
86-
deployedOn?.length ||
87-
additionalInfo
88-
) {
89-
return (
90-
<div className="bg__primary pb-8 br-4 flex left">
91-
{renderDeployedEnvironmentName()}
92-
{artifactStatus === ARTIFACT_STATUS.PROGRESSING && (
93-
<DeploymentEnvState envStateText={DEPLOYMENT_ENV_TEXT.DEPLOYING} title={environmentName} />
94-
)}
95-
{(artifactStatus === ARTIFACT_STATUS.DEGRADED || artifactStatus === ARTIFACT_STATUS.FAILED) && (
96-
<DeploymentEnvState envStateText={DEPLOYMENT_ENV_TEXT.FAILED} title={environmentName} />
97-
)}
98-
{showLatestTag && (
99-
<ImageTagButton
100-
text="Latest"
101-
isSoftDeleted={false}
102-
isEditing={false}
103-
tagId={0}
104-
softDeleteTags={[]}
105-
isSuperAdmin
106-
/>
107-
)}
108-
{additionalInfo}
109-
</div>
110-
)
111-
}
121+
return (
122+
<div className={`bg__primary pb-8 br-4 flex left ${addFlexGap ? 'dc__gap-8' : ''}`}>
123+
{!!targetPlatforms?.length && (
124+
<Tooltip
125+
content={<TargetPlatformListTooltip targetPlatforms={targetPlatforms} />}
126+
alwaysShowTippyOnHover
127+
>
128+
<div>
129+
<ImageTagButton
130+
text="Multi-arch image"
131+
startIcon={<ICStack className="dc__no-shrink scn-6 icon-dim-16 mr-6" />}
132+
isSoftDeleted={false}
133+
isEditing={false}
134+
tagId={0}
135+
softDeleteTags={[]}
136+
isSuperAdmin
137+
/>
138+
</div>
139+
</Tooltip>
140+
)}
112141

113-
return null
142+
{renderContent()}
143+
</div>
144+
)
114145
}
115146

116147
export default SequentialCDCardTitle

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export interface SequentialCDCardTitleProps {
4242
environmentName?: string
4343
parentEnvironmentName?: string
4444
additionalInfo?: ReactNode
45+
targetPlatforms: CDMaterialType['targetPlatforms']
4546
}
4647

4748
export interface ImageCardProps {
@@ -50,7 +51,6 @@ export interface ImageCardProps {
5051
cta: ReactNode
5152
artifactInfoProps: ArtifactInfoProps
5253
imageTagContainerProps: ImageTaggingContainerType
53-
targetPlatforms: CDMaterialType['targetPlatforms']
5454
/**
5555
* Meant for ImageCardAccordion
5656
*/

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

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/Shared/Components/TargetPlatformBadgeList/TargetPlatformBadgeList.component.tsx renamed to ‎src/Shared/Components/TargetPlatforms/TargetPlatformBadgeList.tsx

File renamed without changes.

‎src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { TargetPlatformListTooltipProps } from './types'
2+
3+
const TargetPlatformListTooltip = ({ targetPlatforms }: TargetPlatformListTooltipProps) => (
4+
<div className="flexbox-col dc__gap-2 fs-12 lh-18 cn-0 w-200">
5+
<h6 className="m-0 fw-6">Target platforms</h6>
6+
7+
<ul className="pl-12 m-0">
8+
{targetPlatforms.map(({ name }) => (
9+
<li key={name} className="dc__word-break">
10+
{name}
11+
</li>
12+
))}
13+
</ul>
14+
</div>
15+
)
16+
17+
export default TargetPlatformListTooltip

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as TargetPlatformBadgeList } from './TargetPlatformBadgeList'
2+
export { default as TargetPlatformListTooltip } from './TargetPlatformListTooltip'

‎src/Shared/Components/TargetPlatformBadgeList/types.ts renamed to ‎src/Shared/Components/TargetPlatforms/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import { TargetPlatformsDTO } from '@Shared/types'
22

33
export interface TargetPlatformBadgeListProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {}
4+
export interface TargetPlatformListTooltipProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {}

0 commit comments

Comments
 (0)