refactor: restructure CIListItem component to conditionally render target platforms and image tags

Author: AbhishekA1509

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -102,23 +102,25 @@ export const CIListItem = ({
                     {children}
                 </div>
 
-                {targetPlatforms?.length && (
-                    <div className="mt-8 flexbox-col dc__gap-8">
-                        <TargetPlatformBadgeList targetPlatforms={targetPlatforms} />
-                    </div>
-                )}
-
                 {type !== 'report' && (
-                    <ImageTagsContainer
-                        ciPipelineId={ciPipelineId}
-                        artifactId={artifactId}
-                        imageComment={imageComment}
-                        imageReleaseTags={imageReleaseTags}
-                        appReleaseTagNames={appReleaseTagNames}
-                        tagsEditable={tagsEditable}
-                        hideHardDelete={hideImageTaggingHardDelete}
-                        isSuperAdmin={isSuperAdmin}
-                    />
+                    <>
+                        {targetPlatforms?.length && (
+                            <div className="mt-8 flexbox-col dc__gap-8">
+                                <TargetPlatformBadgeList targetPlatforms={targetPlatforms} />
+                            </div>
+                        )}
+
+                        <ImageTagsContainer
+                            ciPipelineId={ciPipelineId}
+                            artifactId={artifactId}
+                            imageComment={imageComment}
+                            imageReleaseTags={imageReleaseTags}
+                            appReleaseTagNames={appReleaseTagNames}
+                            tagsEditable={tagsEditable}
+                            hideHardDelete={hideImageTaggingHardDelete}
+                            isSuperAdmin={isSuperAdmin}
+                        />
+                    </>
                 )}
             </div>
         </>
@@ -233,14 +235,7 @@ const Artifacts = ({
                     </CIListItem>
                 )}
                 {blobStorageEnabled && downloadArtifactUrl && isArtifactUploaded && (
-                    <CIListItem
-                        type="report"
-                        hideImageTaggingHardDelete={hideImageTaggingHardDelete}
-                        isSuperAdmin={isSuperAdmin}
-                        renderCIListHeader={renderCIListHeader}
-                        // FIXME: Remove
-                        targetPlatforms={[]}
-                    >
+                    <CIListItem type="report" renderCIListHeader={renderCIListHeader}>
                         <div className="flex column left">
                             <div className="cn-9 fs-14">Reports.zip</div>
                             <button

src/Shared/Components/CICDHistory/types.tsx

@@ -394,16 +394,11 @@ export interface VirtualHistoryArtifactProps {
     }
 }
 
-export interface CIListItemType
-    extends Pick<History, 'promotionApprovalMetadata'>,
-        Required<Pick<TargetPlatformBadgeListProps, 'targetPlatforms'>> {
-    type: 'report' | 'artifact' | 'deployed-artifact'
+export type CIListItemType = Pick<History, 'promotionApprovalMetadata'> & {
     userApprovalMetadata?: UserApprovalMetadataType
     triggeredBy?: string
     children: any
-    ciPipelineId?: number
-    artifactId?: number
-    imageComment?: ImageComment
+
     imageReleaseTags?: ReleaseTag[]
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
@@ -413,7 +408,34 @@ export interface CIListItemType
     isSuperAdmin?: boolean
     selectedEnvironmentName?: string
     renderCIListHeader: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
-}
+} & (
+        | {
+              type: 'artifact' | 'deployed-artifact'
+              targetPlatforms: TargetPlatformBadgeListProps['targetPlatforms']
+
+              ciPipelineId: number
+              artifactId: number
+              imageComment: ImageComment
+              imageReleaseTags: ReleaseTag[]
+              appReleaseTagNames: string[]
+              tagsEditable: boolean
+              hideImageTaggingHardDelete: boolean
+              isSuperAdmin: boolean
+          }
+        | {
+              type: 'report'
+              targetPlatforms?: never
+
+              ciPipelineId?: never
+              artifactId?: never
+              imageComment?: never
+              imageReleaseTags?: never
+              appReleaseTagNames?: never
+              tagsEditable?: never
+              hideImageTaggingHardDelete?: never
+              isSuperAdmin?: never
+          }
+    )
 
 export interface TriggerOutputProps extends RenderRunSourceType, Pick<TriggerDetailsType, 'renderTargetConfigInfo'> {
     fullScreenView: boolean
@@ -462,7 +484,7 @@ export interface HistoryLogsProps
             | 'appName'
             | 'triggerHistory'
         >,
-        Pick<CIListItemType, 'targetPlatforms'> {
+        Pick<TargetPlatformBadgeListProps, 'targetPlatforms'> {
     triggerDetails: History
     loading: boolean
     userApprovalMetadata: UserApprovalMetadataType
@@ -622,27 +644,49 @@ export interface ScrollerType {
     style: CSSProperties
 }
 
-export interface GitChangesType
-    extends Pick<History, 'promotionApprovalMetadata'>,
-        Pick<CIListItemType, 'targetPlatforms' | 'selectedEnvironmentName'> {
+export type GitChangesType = {
     gitTriggers: Map<number, GitTriggers>
     ciMaterials: CiMaterial[]
-    artifact?: string
-    userApprovalMetadata?: UserApprovalMetadataType
-    triggeredByEmail?: string
-    imageComment?: ImageComment
-    imageReleaseTags?: ReleaseTag[]
-    artifactId?: number
-    ciPipelineId?: number
-    appReleaseTagNames?: string[]
-    tagsEditable?: boolean
-    hideImageTaggingHardDelete?: boolean
-    appliedFilters?: FilterConditionsListType[]
-    appliedFiltersTimestamp?: string
-    renderCIListHeader: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
-}
+} & (
+    | {
+          artifact?: never
+          promotionApprovalMetadata?: never
+          targetPlatforms?: never
+          selectedEnvironmentName?: never
+          userApprovalMetadata?: never
+          triggeredByEmail?: never
+          imageComment?: never
+          imageReleaseTags?: never
+          artifactId?: never
+          ciPipelineId?: never
+          appReleaseTagNames?: never
+          tagsEditable?: never
+          hideImageTaggingHardDelete?: never
+          appliedFilters?: never
+          appliedFiltersTimestamp?: never
+          renderCIListHeader?: never
+      }
+    | {
+          artifact: string
+          promotionApprovalMetadata: History['promotionApprovalMetadata']
+          targetPlatforms: TargetPlatformBadgeListProps['targetPlatforms']
+          selectedEnvironmentName: CIListItemType['selectedEnvironmentName']
+          userApprovalMetadata?: UserApprovalMetadataType
+          triggeredByEmail?: string
+          imageComment?: ImageComment
+          imageReleaseTags?: ReleaseTag[]
+          artifactId?: number
+          ciPipelineId?: number
+          appReleaseTagNames?: string[]
+          tagsEditable?: boolean
+          hideImageTaggingHardDelete?: boolean
+          appliedFilters?: FilterConditionsListType[]
+          appliedFiltersTimestamp?: string
+          renderCIListHeader: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
+      }
+)
 
-export interface ArtifactType extends Pick<CIListItemType, 'targetPlatforms'> {
+export interface ArtifactType extends Pick<TargetPlatformBadgeListProps, 'targetPlatforms'> {
     status: string
     artifact: string
     blobStorageEnabled: boolean

src/Shared/Components/TargetPlatforms/types.ts

@@ -1,7 +1,7 @@
 import { TooltipProps } from '@Common/Tooltip/types'
 import { TargetPlatformsDTO } from '@Shared/types'
 
-export interface TargetPlatformBadgeListProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {}
+export interface TargetPlatformBadgeListProps extends Required<Pick<TargetPlatformsDTO, 'targetPlatforms'>> {}
 export interface TargetPlatformListTooltipProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {
     children: TooltipProps['children']
 }