feat: add help icon and enhance workflow execution stages handling in CICD components

Author: AbhishekA1509

src/Assets/Icon/ic-help-filled.svg

@@ -42,7 +42,7 @@ import { ReactComponent as ICDocker } from '../../../Assets/Icon/ic-docker.svg'
 import { GitTriggers } from '../../types'
 import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
 import { HISTORY_LABEL, FILTER_STYLE, statusColor as colorMap } from './constants'
-import { getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
+import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
 
 const SummaryTooltipCard = React.memo(
     ({
@@ -145,6 +145,7 @@ const HistorySummaryCard = React.memo(
         renderRunSource,
         runSource,
         resourceId,
+        workflowExecutionStages,
     }: HistorySummaryCardType): JSX.Element => {
         const { path, params } = useRouteMatch()
         const { pathname } = useLocation()
@@ -215,7 +216,9 @@ const HistorySummaryCard = React.memo(
                     ref={assignTargetCardRef}
                 >
                     <div className="w-100 deployment-history-card">
-                        {getTriggerStatusIcon(status)}
+                        {workflowExecutionStages
+                            ? getHistoryItemStatusIconFromWorkflowStages(workflowExecutionStages)
+                            : getTriggerStatusIcon(status)}
                         <div className="flexbox-col dc__gap-8">
                             <div className="flex column left">
                                 <div className="cn-9 fs-13 lh-20">
@@ -393,6 +396,7 @@ const Sidebar = React.memo(
                                 runSource={triggerDetails.runSource}
                                 renderRunSource={renderRunSource}
                                 resourceId={resourceId}
+                                workflowExecutionStages={triggerDetails.workflowExecutionStages}
                             />
                         ))}
                     {hasMore && (fetchIdData === FetchIdDataStatus.SUSPEND || !fetchIdData) && (

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -155,7 +155,8 @@ const WorkerStatus = React.memo(
                              
                             {podStatus && (
                                 <span>
-                                    {WORKFLOW_STAGE_STATUS_TO_TEXT_MAP[podStatus] || podStatus.toLowerCase()}&nbsp;
+                                    :&nbsp;{WORKFLOW_STAGE_STATUS_TO_TEXT_MAP[podStatus] || podStatus.toLowerCase()}
+                                    &nbsp;
                                 </span>
                             )}
                         </div>
@@ -352,7 +353,9 @@ const StartDetails = ({
     const { pathname } = useLocation()
 
     return (
-        <div className="w-100 pr-20 flex column left dc__border-bottom-n1">
+        <div
+            className={`w-100 pr-20 flex column left ${stage === DeploymentStageType.DEPLOY ? 'dc__border-bottom-n1' : ''}`}
+        >
             <div className="flexbox dc__gap-8 dc__align-items-center pb-12 flex-wrap">
                 <div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
                     <div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
@@ -509,7 +512,6 @@ export const TriggerDetails = React.memo(
 
         return (
             <div className="trigger-details flexbox-col pb-12">
-                {/* */}
                 <div className="flexbox-col py-12">
                     <div className="trigger-details__summary lh-20">
                         <div className="display-grid trigger-details__grid">

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -242,7 +242,7 @@ export interface SidebarType extends RenderRunSourceType {
     resourceId?: number
 }
 
-export interface HistorySummaryCardType extends RenderRunSourceType {
+export interface HistorySummaryCardType extends RenderRunSourceType, Pick<History, 'workflowExecutionStages'> {
     id: number
     status: string
     startedOn: string

src/Shared/Components/CICDHistory/types.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ReactElement } from 'react'
 import { TIMELINE_STATUS } from '@Shared/constants'
 import { ReactComponent as ICAborted } from '@Icons/ic-aborted.svg'
 import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
@@ -25,6 +26,8 @@ import { ReactComponent as Disconnect } from '@Icons/ic-disconnected.svg'
 import { ReactComponent as TimeOut } from '@Icons/ic-timeout-red.svg'
 import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg'
+import { ReactComponent as ICHelpFilled } from '@Icons/ic-help-filled.svg'
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { isTimeStringAvailable } from '@Shared/Helpers'
 import { DEFAULT_CLUSTER_ID, TERMINAL_STATUS_MAP } from './constants'
 import { ResourceKindType, WorkflowStatusEnum } from '../../types'
@@ -287,6 +290,44 @@ export const sanitizeWorkflowExecutionStages = (
     }
 }
 
+export const getHistoryItemStatusIconFromWorkflowStages = (
+    workflowExecutionStages: WorkflowExecutionStagesMapDTO['workflowExecutionStages'],
+): ReactElement => {
+    const executionInfo = sanitizeWorkflowExecutionStages(workflowExecutionStages)
+    const baseClass = 'icon-dim-20 dc__no-shrink'
+
+    if (!executionInfo) {
+        return <ICHelpFilled className={baseClass} />
+    }
+
+    if (!executionInfo.finishedOn) {
+        return renderProgressingTriggerIcon()
+    }
+
+    if (FAILED_WORKFLOW_STAGE_STATUS_MAP[executionInfo.workerDetails?.status]) {
+        return <ICWarningY5 className={baseClass} />
+    }
+
+    const status = executionInfo.currentStatus
+
+    switch (status) {
+        case WorkflowStageStatusType.TIMEOUT:
+            return <TimeOut className={baseClass} />
+
+        case WorkflowStageStatusType.ABORTED:
+            return <ICAborted className={baseClass} />
+
+        case WorkflowStageStatusType.FAILED:
+            return renderFailedTriggerIcon()
+
+        case WorkflowStageStatusType.SUCCEEDED:
+            return <ICCheck className={baseClass} />
+
+        default:
+            return <ICHelpFilled className={baseClass} />
+    }
+}
+
 export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = 'devtron-ci') =>
     `/resource-browser/${clusterId}/${podNamespace}/pod/k8sEmptyGroup`