site: remove circ dependency

mafredri · mafredri · commit 51c93a4acb1a · 2025-06-13T18:10:26.000Z
diff --git a/site/src/modules/resources/AgentApps/AgentApps.tsx b/site/src/modules/resources/AgentApps/AgentApps.tsx
@@ -0,0 +1,94 @@
+import type { WorkspaceApp } from "api/typesGenerated";
+import type { Workspace, WorkspaceAgent } from "api/typesGenerated";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "components/DropdownMenu/DropdownMenu";
+import { Folder } from "lucide-react";
+import type { FC } from "react";
+import { AgentButton } from "../AgentButton";
+import { AppLink } from "../AppLink/AppLink";
+
+type AppsProps = {
+	section: AppSection;
+	agent: WorkspaceAgent;
+	workspace: Workspace;
+};
+
+export const Apps: FC<AppsProps> = ({ section, agent, workspace }) => {
+	return section.group ? (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<AgentButton>
+					<Folder />
+					{section.group}
+				</AgentButton>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="start">
+				{section.apps.map((app) => (
+					<DropdownMenuItem key={app.slug}>
+						<AppLink grouped app={app} agent={agent} workspace={workspace} />
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	) : (
+		<>
+			{section.apps.map((app) => (
+				<AppLink key={app.slug} app={app} agent={agent} workspace={workspace} />
+			))}
+		</>
+	);
+};
+
+type AppSection = {
+	/**
+	 * If there is no `group`, just render all of the apps inline. If there is a
+	 * group name, show them all in a dropdown.
+	 */
+	group?: string;
+
+	apps: WorkspaceApp[];
+};
+
+/**
+ * Groups apps by their `group` property. Apps with the same group are placed
+ * in the same section. Apps without a group are placed in their own section.
+ *
+ * The algorithm assumes that apps are already sorted by group, meaning that
+ * every ungrouped section is expected to have a group in between, to make the
+ * algorithm a little simpler to implement.
+ */
+export function organizeAgentApps(apps: readonly WorkspaceApp[]): AppSection[] {
+	let currentSection: AppSection | undefined = undefined;
+	const appGroups: AppSection[] = [];
+	const groupsByName = new Map<string, AppSection>();
+
+	for (const app of apps) {
+		if (app.hidden) {
+			continue;
+		}
+
+		if (!currentSection || app.group !== currentSection.group) {
+			const existingSection = groupsByName.get(app.group!);
+			if (existingSection) {
+				currentSection = existingSection;
+			} else {
+				currentSection = {
+					group: app.group,
+					apps: [],
+				};
+				appGroups.push(currentSection);
+				if (app.group) {
+					groupsByName.set(app.group, currentSection);
+				}
+			}
+		}
+
+		currentSection.apps.push(app);
+	}
+
+	return appGroups;
+}
diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -23,9 +23,9 @@ import { AppStatuses } from "pages/WorkspacePage/AppStatuses";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { portForwardURL } from "utils/portForward";
+import { Apps, organizeAgentApps } from "./AgentApps/AgentApps";
 import { AgentButton } from "./AgentButton";
 import { AgentLatency } from "./AgentLatency";
-import { Apps, organizeAgentApps } from "./AgentRow";
 import { SubAgentStatus } from "./AgentStatus";
 import { PortForwardButton } from "./PortForwardButton";
 import { AgentSSHButton } from "./SSHButton/SSHButton";
diff --git a/site/src/modules/resources/AgentRow.test.tsx b/site/src/modules/resources/AgentRow.test.tsx
@@ -1,5 +1,5 @@
 import { MockWorkspaceApp } from "testHelpers/entities";
-import { organizeAgentApps } from "./AgentRow";
+import { organizeAgentApps } from "./AgentApps/AgentApps";
 
 describe("organizeAgentApps", () => {
 	test("returns one ungrouped app", () => {
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
@@ -8,20 +8,12 @@ import type {
 	Workspace,
 	WorkspaceAgent,
 	WorkspaceAgentMetadata,
-	WorkspaceApp,
 } from "api/typesGenerated";
 import { isAxiosError } from "axios";
 import { Button } from "components/Button/Button";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "components/DropdownMenu/DropdownMenu";
 import { Stack } from "components/Stack/Stack";
 import { useProxy } from "contexts/ProxyContext";
-import { Folder } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { AppStatuses } from "pages/WorkspacePage/AppStatuses";
 import {
@@ -36,15 +28,14 @@ import {
 import { useQuery } from "react-query";
 import AutoSizer from "react-virtualized-auto-sizer";
 import type { FixedSizeList as List, ListOnScrollProps } from "react-window";
-import { AgentButton } from "./AgentButton";
+import { Apps, organizeAgentApps } from "./AgentApps/AgentApps";
 import { AgentDevcontainerCard } from "./AgentDevcontainerCard";
 import { AgentLatency } from "./AgentLatency";
 import { AGENT_LOG_LINE_HEIGHT } from "./AgentLogs/AgentLogLine";
 import { AgentLogs } from "./AgentLogs/AgentLogs";
 import { AgentMetadata } from "./AgentMetadata";
 import { AgentStatus } from "./AgentStatus";
 import { AgentVersion } from "./AgentVersion";
-import { AppLink } from "./AppLink/AppLink";
 import { DownloadAgentLogsButton } from "./DownloadAgentLogsButton";
 import { PortForwardButton } from "./PortForwardButton";
 import { AgentSSHButton } from "./SSHButton/SSHButton";
@@ -354,93 +345,6 @@ export const AgentRow: FC<AgentRowProps> = ({
 	);
 };
 
-export type AppSection = {
-	/**
-	 * If there is no `group`, just render all of the apps inline. If there is a
-	 * group name, show them all in a dropdown.
-	 */
-	group?: string;
-
-	apps: WorkspaceApp[];
-};
-
-/**
- * organizeAgentApps returns an ordering of agent apps that accounts for
- * grouping. When we receive the list of apps from the backend, they have
- * already been "ordered" by their `order` attribute, but we are not given that
- * value. We must be careful to preserve that ordering, while also properly
- * grouping together all apps of any given group.
- *
- * The position of the group overall is determined by the `order` position of
- * the first app in the group. There may be several sections returned without
- * a group name, to allow placing grouped apps in between non-grouped apps. Not
- * every ungrouped section is expected to have a group in between, to make the
- * algorithm a little simpler to implement.
- */
-export function organizeAgentApps(apps: readonly WorkspaceApp[]): AppSection[] {
-	let currentSection: AppSection | undefined = undefined;
-	const appGroups: AppSection[] = [];
-	const groupsByName = new Map<string, AppSection>();
-
-	for (const app of apps) {
-		if (app.hidden) {
-			continue;
-		}
-
-		if (!currentSection || app.group !== currentSection.group) {
-			const existingSection = groupsByName.get(app.group!);
-			if (existingSection) {
-				currentSection = existingSection;
-			} else {
-				currentSection = {
-					group: app.group,
-					apps: [],
-				};
-				appGroups.push(currentSection);
-				if (app.group) {
-					groupsByName.set(app.group, currentSection);
-				}
-			}
-		}
-
-		currentSection.apps.push(app);
-	}
-
-	return appGroups;
-}
-
-export type AppsProps = {
-	section: AppSection;
-	agent: WorkspaceAgent;
-	workspace: Workspace;
-};
-
-export const Apps: FC<AppsProps> = ({ section, agent, workspace }) => {
-	return section.group ? (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<AgentButton>
-					<Folder />
-					{section.group}
-				</AgentButton>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="start">
-				{section.apps.map((app) => (
-					<DropdownMenuItem key={app.slug}>
-						<AppLink grouped app={app} agent={agent} workspace={workspace} />
-					</DropdownMenuItem>
-				))}
-			</DropdownMenuContent>
-		</DropdownMenu>
-	) : (
-		<>
-			{section.apps.map((app) => (
-				<AppLink key={app.slug} app={app} agent={agent} workspace={workspace} />
-			))}
-		</>
-	);
-};
-
 const styles = {
 	agentRow: (theme) => ({
 		fontSize: 14,
