From 85c3095cf07ad3796efa4ba454c380a797eb04ef Mon Sep 17 00:00:00 2001
From: Richard87 <richard.hagen@gmail.com>
Date: Mon, 25 Nov 2024 11:24:01 +0100
Subject: [PATCH] fix active job-overview

---
 src/components/job-overview/dev.tsx           |  2 +-
 src/components/job-overview/step-summary.tsx  | 20 +++++++++----------
 src/components/job-overview/steps-list.tsx    |  9 ++++++---
 .../jobs-list/job-summary-table-row.tsx       |  6 +++---
 src/utils/pipeline/index.ts                   |  2 +-
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/job-overview/dev.tsx b/src/components/job-overview/dev.tsx
index 9bff94f17..e7d472ab9 100644
--- a/src/components/job-overview/dev.tsx
+++ b/src/components/job-overview/dev.tsx
@@ -218,7 +218,7 @@ export default (
             padding: 'var(--eds_spacing_large)',
           }}
         >
-          <JobOverview appName="MyApp" jobName={name} />
+          <JobOverview appName="MyApp" jobName={name!} />
         </div>
         <div>{i < length - 1 && <Divider />}</div>
       </Fragment>
diff --git a/src/components/job-overview/step-summary.tsx b/src/components/job-overview/step-summary.tsx
index 4bf63b5df..b904b5e6a 100644
--- a/src/components/job-overview/step-summary.tsx
+++ b/src/components/job-overview/step-summary.tsx
@@ -44,10 +44,8 @@ const StepDuration: FunctionComponent<Pick<Step, 'started' | 'ended'>> = ({
     <>Not yet started</>
   );
 
-const StepDescription: FunctionComponent<Pick<Step, 'name' | 'components'>> = ({
-  name,
-  components,
-}) => {
+type StepDescriptionProps = { name?: string; components: Step['components'] };
+const StepDescription = ({ name, components }: StepDescriptionProps) => {
   const stepDescription = getPipelineStepDescription(name);
   if (stepDescription) {
     return <>{stepDescription}</>;
@@ -67,21 +65,23 @@ const StepDescription: FunctionComponent<Pick<Step, 'name' | 'components'>> = ({
     );
   }
 
-  const buildComponent = name.match(/^build-(.+)$/);
+  const buildComponent = name?.match(/^build-(.+)$/);
   if (buildComponent) {
     return (
       <>
-        Building <strong>{getComponents(buildComponent[1], components)}</strong>{' '}
+        Building{' '}
+        <strong>{getComponents(buildComponent[1], components ?? [])}</strong>{' '}
         component
       </>
     );
   }
 
-  const scanComponent = name.match(/^scan-(.+)$/);
+  const scanComponent = name?.match(/^scan-(.+)$/);
   if (scanComponent) {
     return (
       <>
-        Scanning <strong>{getComponents(scanComponent[1], components)}</strong>{' '}
+        Scanning{' '}
+        <strong>{getComponents(scanComponent[1], components ?? [])}</strong>{' '}
         component
       </>
     );
@@ -102,7 +102,7 @@ export const StepSummary: FunctionComponent<{
         to={routeWithParams(routes.appJobStep, {
           appName,
           jobName,
-          stepName: step.name,
+          stepName: step.name ?? '',
         })}
         link
         token={{ textDecoration: 'none', textTransform: 'capitalize' }}
@@ -110,7 +110,7 @@ export const StepSummary: FunctionComponent<{
         <StepDescription name={step.name} components={step.components} />
       </Typography>
 
-      <RadixJobConditionBadge status={step.status} />
+      <RadixJobConditionBadge status={step.status ?? 'Waiting'} />
     </div>
 
     <div className="step-summary__time">
diff --git a/src/components/job-overview/steps-list.tsx b/src/components/job-overview/steps-list.tsx
index 1528c49e4..e045ab29c 100644
--- a/src/components/job-overview/steps-list.tsx
+++ b/src/components/job-overview/steps-list.tsx
@@ -17,7 +17,7 @@ import type { Step } from '../../store/radix-api';
 import { PipelineStep } from '../../utils/pipeline';
 import { sortCompareDate } from '../../utils/sort-utils';
 
-function getStepIcon({ name }: Step): IconData {
+function getStepIcon(name: string): IconData {
   switch (name) {
     case PipelineStep.CloneConfig:
     case PipelineStep.CloneRepository:
@@ -65,12 +65,15 @@ export const StepsList: FunctionComponent<{
                 sortCompareDate(
                   a.started ?? new Date('9999-01-01T00:00:00Z'),
                   b.started ?? new Date('9999-01-01T00:00:00Z')
-                ) ?? a.name.localeCompare(b.name)
+                ) ?? a.name?.localeCompare(b.name ?? '')
             )
             .map((step) => (
               <div key={getStepKey(step)} className="steps-list__step">
                 <div className="grid steps-list__divider">
-                  <Icon className="step__icon" data={getStepIcon(step)} />
+                  <Icon
+                    className="step__icon"
+                    data={getStepIcon(step.name ?? '')}
+                  />
                   <span className="steps-list__divider-line" />
                 </div>
                 <StepSummary appName={appName} jobName={jobName} step={step} />
diff --git a/src/components/jobs-list/job-summary-table-row.tsx b/src/components/jobs-list/job-summary-table-row.tsx
index 02574ff90..214c35b33 100644
--- a/src/components/jobs-list/job-summary-table-row.tsx
+++ b/src/components/jobs-list/job-summary-table-row.tsx
@@ -21,7 +21,7 @@ export const JobSummaryTableRow: FunctionComponent<{
         className="job-summary__id-section"
         to={routeWithParams(routes.appJob, { appName, jobName: job.name })}
       >
-        {job.triggeredBy?.length > 25 ? (
+        {job.triggeredBy && job.triggeredBy.length > 25 ? (
           <Tooltip placement="top" title={job.triggeredBy}>
             <div>
               {`${job.triggeredBy.substring(0, 8)}...${job.triggeredBy.slice(
@@ -32,7 +32,7 @@ export const JobSummaryTableRow: FunctionComponent<{
         ) : (
           <div>{job.triggeredBy || 'N/A'}</div>
         )}
-        <CommitHash commit={job.commitID} />
+        <CommitHash commit={job.commitID ?? ''} />
       </Link>
     </Table.Cell>
     <Table.Cell>
@@ -66,7 +66,7 @@ export const JobSummaryTableRow: FunctionComponent<{
       </div>
     </Table.Cell>
     <Table.Cell variant="icon">
-      <RadixJobConditionBadge status={job.status} />
+      <RadixJobConditionBadge status={job.status ?? 'Waiting'} />
     </Table.Cell>
     <Table.Cell>{job.pipeline}</Table.Cell>
   </Table.Row>
diff --git a/src/utils/pipeline/index.ts b/src/utils/pipeline/index.ts
index 292f35dc9..ba21da8c5 100644
--- a/src/utils/pipeline/index.ts
+++ b/src/utils/pipeline/index.ts
@@ -8,7 +8,7 @@ export enum PipelineStep {
   BuildComponent = 'build',
 }
 
-export function getPipelineStepDescription(stepName: string): string | null {
+export function getPipelineStepDescription(stepName?: string): string | null {
   switch (stepName) {
     case PipelineStep.CloneConfig:
       return 'Cloning Radix config from config branch';