From d464360103d3346d0fd732c252e6435fea9c53b8 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 19 Sep 2025 18:50:11 -0300
Subject: [PATCH] fix(site): resolve circular dependency between WorkspacesPage
 components (#19895)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move `ACTIVE_BUILD_STATUSES` constant from `WorkspacesPage.tsx` to a
module to break the circular dependency between `WorkspacesPage.tsx` and
`BatchUpdateModalForm.tsx`. This resolves the circular dependency lint
error and ensures proper code organization.

**Error:**
```
• Circular Dependencies
  1) src/pages/WorkspacesPage/WorkspacesPage.tsx -> src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
```

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 site/src/modules/workspaces/status.ts             | 14 ++++++++++++++
 .../BatchUpdateModalForm.stories.tsx              |  2 +-
 .../pages/WorkspacesPage/BatchUpdateModalForm.tsx |  2 +-
 site/src/pages/WorkspacesPage/WorkspacesPage.tsx  | 15 +--------------
 4 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 site/src/modules/workspaces/status.ts

diff --git a/site/src/modules/workspaces/status.ts b/site/src/modules/workspaces/status.ts
new file mode 100644
index 0000000000..308d6e0cc7
--- /dev/null
+++ b/site/src/modules/workspaces/status.ts
@@ -0,0 +1,14 @@
+import type { WorkspaceStatus } from "api/typesGenerated";
+
+/**
+ * The set of all workspace statuses that indicate that the state for a
+ * workspace is in the middle of a transition and will eventually reach a more
+ * stable state/status.
+ */
+export const ACTIVE_BUILD_STATUSES: readonly WorkspaceStatus[] = [
+	"canceling",
+	"deleting",
+	"pending",
+	"starting",
+	"stopping",
+];
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx
index d1e72e718f..a17caf00f7 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx
@@ -6,11 +6,11 @@ import type {
 	Workspace,
 	WorkspaceBuild,
 } from "api/typesGenerated";
+import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
 import { useQueryClient } from "react-query";
 import { action } from "storybook/internal/actions";
 import { expect, screen, userEvent, within } from "storybook/test";
 import { BatchUpdateModalForm } from "./BatchUpdateModalForm";
-import { ACTIVE_BUILD_STATUSES } from "./WorkspacesPage";
 
 type Writeable<T> = { -readonly [Key in keyof T]: T[Key] };
 type MutableWorkspace = Writeable<Omit<Workspace, "latest_build">> & {
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
index bcc6ff9b51..77bad68c8e 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
@@ -15,6 +15,7 @@ import {
 } from "components/Dialog/Dialog";
 import { Spinner } from "components/Spinner/Spinner";
 import { TriangleAlert } from "lucide-react";
+import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
 import {
 	type FC,
 	type ForwardedRef,
@@ -25,7 +26,6 @@ import {
 } from "react";
 import { useQueries } from "react-query";
 import { cn } from "utils/cn";
-import { ACTIVE_BUILD_STATUSES } from "./WorkspacesPage";
 
 export const BatchUpdateModalForm: FC<BatchUpdateModalFormProps> = ({
 	open,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
index 5563ef400f..b8d8768e79 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -2,7 +2,6 @@ import { getErrorDetail, getErrorMessage } from "api/errors";
 import { workspacePermissionsByOrganization } from "api/queries/organizations";
 import { templates, templateVersionRoot } from "api/queries/templates";
 import { workspaces } from "api/queries/workspaces";
-import type { WorkspaceStatus } from "api/typesGenerated";
 import { useFilter } from "components/Filter/Filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
 import { displayError } from "components/GlobalSnackbar/utils";
@@ -11,6 +10,7 @@ import { useEffectEvent } from "hooks/hookPolyfills";
 import { usePagination } from "hooks/usePagination";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useOrganizationsFilterMenu } from "modules/tableFiltering/options";
+import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
 import { type FC, useMemo, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery, useQueryClient } from "react-query";
@@ -22,19 +22,6 @@ import { useBatchActions } from "./batchActions";
 import { useStatusFilterMenu, useTemplateFilterMenu } from "./filter/menus";
 import { WorkspacesPageView } from "./WorkspacesPageView";
 
-/**
- * The set of all workspace statuses that indicate that the state for a
- * workspace is in the middle of a transition and will eventually reach a more
- * stable state/status.
- */
-export const ACTIVE_BUILD_STATUSES: readonly WorkspaceStatus[] = [
-	"canceling",
-	"deleting",
-	"pending",
-	"starting",
-	"stopping",
-];
-
 // To reduce the number of fetches, we reduce the fetch interval if there are no
 // active workspace builds.
 const ACTIVE_BUILDS_REFRESH_INTERVAL = 5_000;