DEVPROD-1135 Add timeout test status (#2272)

src/constants/test.ts

@@ -1,20 +1,5 @@
-import { Variant } from "@leafygreen-ui/badge";
 import { TestStatus } from "types/test";
 
-export const statusToBadgeColor = {
-  [TestStatus.Pass]: Variant.Green,
-  [TestStatus.Fail]: Variant.Red,
-  [TestStatus.SilentFail]: Variant.Blue,
-  [TestStatus.Skip]: Variant.Yellow,
-};
-
-export const statusCopy = {
-  [TestStatus.Pass]: "Pass",
-  [TestStatus.Fail]: "Fail",
-  [TestStatus.Skip]: "Skip",
-  [TestStatus.SilentFail]: "Silent Fail",
-};
-
 export const testStatusesFilterTreeData = [
   {
     title: "All",

src/pages/task/taskTabs/testsTable/TestStatusBadge/TestStatusBadge.stories.tsx

@@ -0,0 +1,26 @@
+import Styled from "@emotion/styled";
+import { size } from "constants/tokens";
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import { TestStatus } from "types/test";
+import TestStatusBadge from ".";
+
+export default {
+  component: TestStatusBadge,
+} satisfies CustomMeta<typeof TestStatusBadge>;
+
+export const Default: CustomStoryObj<typeof TestStatusBadge> = {
+  render: (args) => (
+    <Container>
+      {Object.values(TestStatus).map((status) => (
+        <TestStatusBadge {...args} status={status} key={status} />
+      ))}
+    </Container>
+  ),
+  argTypes: {},
+  args: {},
+};
+
+const Container = Styled.div`
+    display: flex;
+    gap: ${size.s};
+`;

src/pages/task/taskTabs/testsTable/TestStatusBadge/__snapshots__/TestStatusBadge.stories.storyshot

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Tests TestStatusBadge.stories Default 1`] = `
+<div>
+  <div
+    class="css-8cvf0s-Container et5ujl80"
+  >
+    <div
+      class="leafygreen-ui-ud6teo"
+    >
+      Fail
+    </div>
+    <div
+      class="leafygreen-ui-ixbeze"
+    >
+      Skip
+    </div>
+    <div
+      class="leafygreen-ui-1qtf7xy"
+    >
+      Silent Fail
+    </div>
+    <div
+      class="leafygreen-ui-n4itms"
+    >
+      Pass
+    </div>
+    <div
+      class="leafygreen-ui-ohl2hc"
+    >
+      all
+    </div>
+    <div
+      class="leafygreen-ui-ud6teo"
+    >
+      Timeout
+    </div>
+  </div>
+</div>
+`;

src/pages/task/taskTabs/testsTable/TestStatusBadge/constants.ts

@@ -0,0 +1,18 @@
+import { Variant } from "@leafygreen-ui/badge";
+import { TestStatus } from "types/test";
+
+export const statusToBadgeColor = {
+  [TestStatus.Pass]: Variant.Green,
+  [TestStatus.Fail]: Variant.Red,
+  [TestStatus.SilentFail]: Variant.Blue,
+  [TestStatus.Skip]: Variant.Yellow,
+  [TestStatus.Timeout]: Variant.Red,
+};
+
+export const statusCopy = {
+  [TestStatus.Pass]: "Pass",
+  [TestStatus.Fail]: "Fail",
+  [TestStatus.Skip]: "Skip",
+  [TestStatus.SilentFail]: "Silent Fail",
+  [TestStatus.Timeout]: "Timeout",
+};

src/pages/task/taskTabs/testsTable/TestStatusBadge.tsx → src/pages/task/taskTabs/testsTable/TestStatusBadge/index.tsx

@@ -1,15 +1,18 @@
 import Badge, { Variant } from "@leafygreen-ui/badge";
-import { statusToBadgeColor, statusCopy } from "constants/test";
+import { TestStatus } from "types/test";
+import { statusToBadgeColor, statusCopy } from "./constants";
 
 interface TestStatusBadgeProps {
-  status: string;
+  status: TestStatus;
 }
 
-export const TestStatusBadge: React.FC<TestStatusBadgeProps> = ({ status }) => (
+const TestStatusBadge: React.FC<TestStatusBadgeProps> = ({ status }) => (
   <Badge
     variant={statusToBadgeColor[status?.toLowerCase()] || Variant.LightGray}
     key={status}
   >
     {statusCopy[status?.toLowerCase()] || status}
   </Badge>
 );
+
+export default TestStatusBadge;

src/pages/task/taskTabs/testsTable/getColumnsTemplate.tsx

@@ -3,7 +3,7 @@ import { testStatusesFilterTreeData } from "constants/test";
 import { TestSortCategory, TaskQuery } from "gql/generated/types";
 import { string } from "utils";
 import { LogsColumn } from "./LogsColumn";
-import { TestStatusBadge } from "./TestStatusBadge";
+import TestStatusBadge from "./TestStatusBadge";
 
 const { msToDuration } = string;
 

src/types/test.ts

@@ -4,4 +4,5 @@ export enum TestStatus {
   SilentFail = "silentfail",
   Pass = "pass",
   All = "all",
+  Timeout = "timeout",
 }