Adds a tooltip to the Status header showing deployment status descriptions (#1554)

Author: samejr

apps/webapp/app/components/runs/v3/DeploymentStatus.tsx

@@ -118,3 +118,34 @@ export function deploymentStatusTitle(status: WorkerDeploymentStatus, isBuilt: b
     }
   }
 }
+
+// PENDING and CANCELED are not used so are ommited from the UI
+export const deploymentStatuses: WorkerDeploymentStatus[] = [
+  "BUILDING",
+  "DEPLOYING",
+  "DEPLOYED",
+  "FAILED",
+  "TIMED_OUT",
+];
+
+export function deploymentStatusDescription(status: WorkerDeploymentStatus): string {
+  switch (status) {
+    case "PENDING":
+      return "The deployment is queued and waiting to be processed.";
+    case "BUILDING":
+      return "The code is being built and prepared for deployment.";
+    case "DEPLOYING":
+      return "The deployment is in progress and tasks are being indexed.";
+    case "DEPLOYED":
+      return "The deployment has completed successfully.";
+    case "CANCELED":
+      return "The deployment was manually canceled.";
+    case "FAILED":
+      return "The deployment encountered an error and could not complete.";
+    case "TIMED_OUT":
+      return "The deployment exceeded the maximum allowed time and was stopped.";
+    default: {
+      assertNever(status);
+    }
+  }
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx

@@ -35,7 +35,11 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import { TextLink } from "~/components/primitives/TextLink";
-import { DeploymentStatus } from "~/components/runs/v3/DeploymentStatus";
+import {
+  DeploymentStatus,
+  deploymentStatuses,
+  deploymentStatusDescription,
+} from "~/components/runs/v3/DeploymentStatus";
 import { RetryDeploymentIndexingDialog } from "~/components/runs/v3/RetryDeploymentIndexingDialog";
 import { RollbackDeploymentDialog } from "~/components/runs/v3/RollbackDeploymentDialog";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -120,7 +124,30 @@ export default function Page() {
                       <TableHeaderCell>Deploy</TableHeaderCell>
                       <TableHeaderCell>Env</TableHeaderCell>
                       <TableHeaderCell>Version</TableHeaderCell>
-                      <TableHeaderCell>Status</TableHeaderCell>
+                      <TableHeaderCell
+                        tooltip={
+                          <div className="flex flex-col divide-y divide-grid-dimmed">
+                            {deploymentStatuses.map((status) => (
+                              <div
+                                key={status}
+                                className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                              >
+                                <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                                  <DeploymentStatus status={status} isBuilt={false} />
+                                </div>
+                                <Paragraph
+                                  variant="extra-small"
+                                  className="!text-wrap text-text-dimmed"
+                                >
+                                  {deploymentStatusDescription(status)}
+                                </Paragraph>
+                              </div>
+                            ))}
+                          </div>
+                        }
+                      >
+                        Status
+                      </TableHeaderCell>
                       <TableHeaderCell>Tasks</TableHeaderCell>
                       <TableHeaderCell>Deployed at</TableHeaderCell>
                       <TableHeaderCell>Deployed by</TableHeaderCell>