1520 fixing several UI issues (#1521)

kubeshop · Nov 17, 2022 · fa7e9d3 · fa7e9d3
1 parent 0f1b1f3
commit fa7e9d3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/web/src/components/TestState/TestState.tsx b/web/src/components/TestState/TestState.tsx
@@ -1,10 +1,10 @@
+import {TestStateMap} from 'constants/TestRun.constants';
+import {TTestRunState} from 'types/TestRun.types';
 import TestStateBadge from './TestStateBadge';
 import TestStateProgress from './TestStateProgress';
-import {TestStateMap} from '../../constants/TestRun.constants';
-import {TTestRun} from '../../types/TestRun.types';
 
 interface IProps {
-  testState: TTestRun['state'];
+  testState: TTestRunState;
 }
 
 const TestState = ({testState}: IProps) => {

diff --git a/web/src/components/TransactionRunResult/ExecutionStep.tsx b/web/src/components/TransactionRunResult/ExecutionStep.tsx
@@ -12,7 +12,7 @@ const iconBasedOnResult = (result: TTestRunState, index: number) => {
     case TestState.FINISHED:
       return <S.IconSuccess />;
     case TestState.FAILED:
-      return <S.IconSuccess />;
+      return <S.IconFail />;
     default:
       return index + 1;
   }
@@ -22,13 +22,19 @@ interface IProps {
   index: number;
   test: TTest;
   testRun?: TTestRun;
+  hasRunFailed: boolean;
 }
 
 const ExecutionStep = ({
   index,
   test: {name, trigger, id: testId},
-  testRun: {id: runId, state, testVersion, passedAssertionCount, failedAssertionCount} = TestRun({}),
+  hasRunFailed,
+  testRun: {id: runId, state, testVersion, passedAssertionCount, failedAssertionCount} = TestRun({
+    state: hasRunFailed ? TestState.SKIPPED : TestState.WAITING,
+  }),
 }: IProps) => {
+  const stateIsFinished = ([TestState.FINISHED, TestState.FAILED] as string[]).includes(state);
+
   return (
     <S.Container data-cy={`run-card-${name}`} key={`${testId}-${runId}`}>
       <S.ExecutionStepStatus>{iconBasedOnResult(state, index)}</S.ExecutionStepStatus>
@@ -37,7 +43,7 @@ const ExecutionStep = ({
         <S.TagContainer>
           <S.TextTag>{trigger.method}</S.TextTag>
           <S.TextTag $isLight>{trigger.entryPoint}</S.TextTag>
-          <S.TextTag>{capitalize(state)}</S.TextTag>
+          {!stateIsFinished && <S.TextTag>{capitalize(state)}</S.TextTag>}
         </S.TagContainer>
       </S.Info>
       <S.AssertionResultContainer>

diff --git a/web/src/components/TransactionRunResult/TransactionRunResult.tsx b/web/src/components/TransactionRunResult/TransactionRunResult.tsx
@@ -1,20 +1,29 @@
 import KeyValueRow from 'components/KeyValueRow';
 import {TTransactionRun} from 'types/TransactionRun.types';
+import {TestState} from 'constants/TestRun.constants';
 import ExecutionStep from './ExecutionStep';
 import * as S from './TransactionRunResult.styled';
 
 interface IProps {
   transactionRun: TTransactionRun;
 }
 
-const TransactionRunResult = ({transactionRun: {steps, stepRuns, environment}}: IProps) => {
+const TransactionRunResult = ({transactionRun: {steps, stepRuns, environment, state}}: IProps) => {
+  const hasRunFailed = state === TestState.FAILED;
+
   return (
     <S.ResultContainer>
       <div>
         <S.Title>Execution Steps</S.Title>
-        {steps.map((step, index) => {
-          return <ExecutionStep index={index} key={step.id} test={step} testRun={stepRuns[index]} />;
-        })}
+        {steps.map((step, index) => (
+          <ExecutionStep
+            index={index}
+            key={step.id}
+            test={step}
+            testRun={stepRuns[index]}
+            hasRunFailed={hasRunFailed}
+          />
+        ))}
       </div>
       <div>
         <S.Title>Variables</S.Title>

diff --git a/web/src/constants/TestRun.constants.ts b/web/src/constants/TestRun.constants.ts
@@ -5,6 +5,8 @@ export enum TestState {
   AWAITING_TEST_RESULTS = 'AWAITING_TEST_RESULTS',
   FAILED = 'FAILED',
   FINISHED = 'FINISHED',
+  WAITING = 'WAITING',
+  SKIPPED = 'SKIPPED',
 }
 
 export const TestStateMap: Record<
@@ -38,6 +40,14 @@ export const TestStateMap: Record<
     status: 'success',
     label: 'Finished',
   },
+  [TestState.WAITING]: {
+    status: 'default',
+    label: 'Waiting',
+  },
+  [TestState.SKIPPED]: {
+    status: 'warning',
+    label: 'Skipped',
+  },
 };
 
 export enum RunDetailModes {

diff --git a/web/src/types/TestRun.types.ts b/web/src/types/TestRun.types.ts
@@ -1,11 +1,18 @@
 import {TAssertionResults} from './Assertion.types';
-import {Model, TTestSchemas, TTriggerSchemas} from './Common.types';
+import {Model, Modify, TTestSchemas, TTriggerSchemas} from './Common.types';
 import {TEnvironment} from './Environment.types';
 import {TTriggerResult} from './Test.types';
 import {TTestRunOutput} from './TestOutput.types';
 import {TTrace} from './Trace.types';
 
-export type TRawTestRun = TTestSchemas['TestRun'];
+export type TTestRunState = NonNullable<TTestSchemas['TestRun']['state'] | 'WAITING' | 'SKIPPED'>;
+
+export type TRawTestRun = Modify<
+  TTestSchemas['TestRun'],
+  {
+    state?: TTestRunState;
+  }
+>;
 
 export type TTestRun = Model<
   TRawTestRun,
@@ -22,7 +29,6 @@ export type TTestRun = Model<
     triggerResult?: TTriggerResult;
     outputs?: TTestRunOutput[];
     environment?: TEnvironment;
+    state: TTestRunState;
   }
 >;
-
-export type TTestRunState = TRawTestRun['state'];