Add "canceled" build status (#438)

src/utils/helpers/buildMapper.ts

@@ -5,7 +5,8 @@ const STATUS_OPTIONS: { [key: Build["status"]]: string } = {
   COMPLETED: "Available",
   QUEUED: "Queued",
   FAILED: "Failed",
-  BUILDING: "Building"
+  BUILDING: "Building",
+  CANCELED: "Canceled"
 };
 
 const TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -25,7 +26,11 @@ export const buildDatetimeStatus = (
   currentBuildId: number
 ): string => {
   if (id === currentBuildId) {
-    return `${dateToTimezone(ended_on ?? scheduled_on)} - Active`;
+    let option = `${dateToTimezone(ended_on ?? scheduled_on)} - Active`;
+    if (status !== "COMPLETED") {
+      option += " - " + STATUS_OPTIONS[status];
+    }
+    return option;
   } else if (status === "BUILDING") {
     return `${dateToTimezone(scheduled_on)} - Building`;
   } else if (status === "QUEUED") {

test/helpers/BuildMapper.test.tsx

@@ -7,29 +7,34 @@ const generateBuild = (status: string) => ({
 });
 
 describe("buildDatetimeStatus", () => {
-  it("should return an active build", () => {
+  it("should indicate completed build", () => {
     const build = generateBuild("COMPLETED");
-    expect(buildDatetimeStatus(build, 1)).toMatch(/Active$/);
+    expect(buildDatetimeStatus(build, build.id)).toMatch(/Active$/);
+    expect(buildDatetimeStatus(build, -1)).toMatch(/(?<!Active.*)Available$/);
   });
 
-  it("should return build", () => {
+  it("should indicate building build", () => {
     const build = generateBuild("BUILDING");
-    expect(buildDatetimeStatus(build, 2)).toMatch(/Building$/);
+    expect(buildDatetimeStatus(build, build.id)).toMatch(/Active - Building$/);
+    expect(buildDatetimeStatus(build, -1)).toMatch(/(?<!Active.*)Building$/);
   });
 
-  it("should return queued build", () => {
+  it("should indicate queued build", () => {
     const build = generateBuild("QUEUED");
-    expect(buildDatetimeStatus(build, 2)).toMatch(/Queued$/);
+    expect(buildDatetimeStatus(build, build.id)).toMatch(/Active - Queued$/);
+    expect(buildDatetimeStatus(build, -1)).toMatch(/(?<!Active.*)Queued$/);
   });
 
-  it("should return completed build", () => {
-    const build = generateBuild("COMPLETED");
-    expect(buildDatetimeStatus(build, 2)).toMatch(/Available$/);
+  it("should indicate failed build", () => {
+    const build = generateBuild("FAILED");
+    expect(buildDatetimeStatus(build, build.id)).toMatch(/Active - Failed$/);
+    expect(buildDatetimeStatus(build, -1)).toMatch(/(?<!Active.*)Failed$/);
   });
 
-  it("should return failed build", () => {
-    const build = generateBuild("FAILED");
-    expect(buildDatetimeStatus(build, 2)).toMatch(/Failed$/);
+  it("should indicate canceled build", () => {
+    const build = generateBuild("CANCELED");
+    expect(buildDatetimeStatus(build, build.id)).toMatch(/Active - Canceled$/);
+    expect(buildDatetimeStatus(build, -1)).toMatch(/(?<!Active.*)Canceled$/);
   });
 
   it("should use the scheduled_on date if the ended_on prop is null", () => {

test/playwright/conftest.py

@@ -1,15 +1,13 @@
 import pytest
 
-from playwright.sync_api import expect
-
-
 
 def pytest_addoption(parser):
     parser.addoption("--screenshots", action="store", default="false")
 
+
 @pytest.fixture(scope="session")
 def screenshot(pytestconfig):
-    if pytestconfig.getoption("screenshots") == 'false':
+    if pytestconfig.getoption("screenshots") == "false":
         return False
     else:
         return True

test/playwright/test_ux.py

@@ -2,13 +2,12 @@
 inside and outside of pytest to make future development easier.
 """
 
-import requests
+import random
 import time
 
 import pytest
-from playwright.sync_api import Page, sync_playwright, expect
-import random
-
+import requests
+from playwright.sync_api import Page, expect, sync_playwright
 
 DEFAULT_TIMEOUT = 60_000  # time in ms
 
@@ -93,7 +92,7 @@ def _create_new_environment(page, screenshot=False):
     # add a package to the ui
     page.get_by_label("Enter package").fill("rich")
     page.get_by_role("option", name="rich", exact=True).click()
-    # open up the channels accordian card
+    # open up the channels accordion card
     page.get_by_role("button", name="Channels").click()
     # click the + to add a channel
     page.get_by_role("button", name="+ Add Channel").click()
@@ -105,12 +104,12 @@ def _create_new_environment(page, screenshot=False):
     page.get_by_role("button", name="Create", exact=True).click()
 
     # Interact with the environment shortly after creation
-    # click to open the Active environment dropdown manu
+    # click to open the Active environment dropdown menu
     page.get_by_text(" - Active", exact=False).click()
     # click on the Active environment on the dropdown menu item (which is currently building)
     page.get_by_role("option", name=" - Active", exact=False).click()
     # ensure that the environment is building
-    expect(page.get_by_text("Building")).to_be_visible()
+    expect(page.get_by_test_id("build-status")).to_contain_text("Building", )
     # wait until the status is `Completed`
     completed = page.get_by_text("Completed", exact=False)
     completed.wait_for(state="attached", timeout=time_to_build_env)
@@ -172,7 +171,7 @@ def _existing_environment_interactions(
     # ensure the namespace is expanded
     try:
         expect(env_link).to_be_visible()
-    except Exception as e:
+    except Exception:
         # click to expand the `username` name space (but not click the +)
         page.get_by_role(
             "button", name="username Create a new environment in the username namespace"