chore: move components/Resources to modules/resources (#11852)

site/.storybook/preview.jsx

@@ -45,7 +45,7 @@ export const parameters = {
   options: {
     storySort: {
       method: "alphabetical",
-      order: ["design", "pages", "components"],
+      order: ["design", "pages", "modules", "components"],
       locales: "en-US",
     },
   },

site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

@@ -1,7 +1,7 @@
 import { type FC } from "react";
 import type { WorkspaceResource } from "api/typesGenerated";
-import { AgentRowPreview } from "components/Resources/AgentRowPreview";
-import { Resources } from "components/Resources/Resources";
+import { AgentRowPreview } from "modules/resources/AgentRowPreview";
+import { Resources } from "modules/resources/Resources";
 
 export interface TemplateResourcesProps {
   resources: WorkspaceResource[];

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx

@@ -6,7 +6,7 @@ import {
 import { DeploymentBannerView } from "./DeploymentBannerView";
 
 const meta: Meta<typeof DeploymentBannerView> = {
-  title: "components/DeploymentBannerView",
+  title: "modules/dashboard/DeploymentBannerView",
   component: DeploymentBannerView,
   args: {
     stats: MockDeploymentStats,

site/src/modules/dashboard/Navbar/NavbarView.stories.tsx

@@ -4,7 +4,7 @@ import { MockUser, MockUser2 } from "testHelpers/entities";
 import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
-  title: "components/NavbarView",
+  title: "modules/dashboard/NavbarView",
   parameters: { chromatic: chromaticWithTablet, layout: "fullscreen" },
   component: NavbarView,
   args: {

site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx

@@ -3,7 +3,7 @@ import { UserDropdown } from "./UserDropdown";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof UserDropdown> = {
-  title: "components/UserDropdown",
+  title: "modules/dashboard/UserDropdown",
   component: UserDropdown,
   args: {
     user: MockUser,

site/src/modules/dashboard/ServiceBanner/ServiceBannerView.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ServiceBannerView } from "./ServiceBannerView";
 
 const meta: Meta<typeof ServiceBannerView> = {
-  title: "components/ServiceBannerView",
+  title: "modules/dashboard/ServiceBannerView",
   component: ServiceBannerView,
 };
 

site/src/modules/resources/AgentMetadata.stories.tsx

@@ -6,7 +6,7 @@ import { AgentMetadataView } from "./AgentMetadata";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof AgentMetadataView> = {
-  title: "components/AgentMetadataView",
+  title: "modules/resources/AgentMetadataView",
   component: AgentMetadataView,
 };
 

site/src/modules/resources/AgentMetadata.tsx

@@ -213,7 +213,7 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
 };
 
 // These are more or less copied from
-// site/src/components/Resources/ResourceCard.tsx
+// site/src/modules/resources/ResourceCard.tsx
 const styles = {
   root: {
     display: "flex",

site/src/modules/resources/AgentRow.test.tsx

@@ -7,7 +7,7 @@ import {
   waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
 
-jest.mock("components/Resources/AgentMetadata", () => {
+jest.mock("modules/resources/AgentMetadata", () => {
   const AgentMetadata = () => <></>;
   return { AgentMetadata };
 });

site/src/modules/resources/AgentRow.tsx

@@ -2,21 +2,6 @@ import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
 import { type Interpolation, type Theme } from "@emotion/react";
-import * as API from "api/api";
-import type {
-  Workspace,
-  WorkspaceAgent,
-  WorkspaceAgentLogSource,
-  WorkspaceAgentMetadata,
-} from "api/typesGenerated";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { VSCodeDesktopButton } from "components/Resources/VSCodeDesktopButton/VSCodeDesktopButton";
-import {
-  Line,
-  LogLine,
-  logLineHeight,
-} from "components/WorkspaceBuildLogs/Logs";
-import { useProxy } from "contexts/ProxyContext";
 import {
   type FC,
   useCallback,
@@ -28,15 +13,30 @@ import {
 } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List, ListOnScrollProps } from "react-window";
-import { Stack } from "../Stack/Stack";
+import * as API from "api/api";
+import type {
+  Workspace,
+  WorkspaceAgent,
+  WorkspaceAgentLogSource,
+  WorkspaceAgentMetadata,
+} from "api/typesGenerated";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import {
+  Line,
+  LogLine,
+  logLineHeight,
+} from "components/WorkspaceBuildLogs/Logs";
+import { useProxy } from "contexts/ProxyContext";
+import { Stack } from "components/Stack/Stack";
 import { AgentLatency } from "./AgentLatency";
 import { AgentMetadata } from "./AgentMetadata";
+import { AgentStatus } from "./AgentStatus";
 import { AgentVersion } from "./AgentVersion";
 import { AppLink } from "./AppLink/AppLink";
 import { PortForwardButton } from "./PortForwardButton";
 import { SSHButton } from "./SSHButton/SSHButton";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
-import { AgentStatus } from "./AgentStatus";
+import { VSCodeDesktopButton } from "./VSCodeDesktopButton/VSCodeDesktopButton";
 
 // Logs are stored as the Line interface to make rendering
 // much more efficient. Instead of mapping objects each time, we're

site/src/modules/resources/AgentRowPreview.stories.tsx

@@ -3,7 +3,7 @@ import { AgentRowPreview } from "./AgentRowPreview";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof AgentRowPreview> = {
-  title: "components/AgentRowPreview",
+  title: "modules/resources/AgentRowPreview",
   component: AgentRowPreview,
   args: {
     agent: MockWorkspaceAgent,

site/src/modules/resources/AgentRowPreview.tsx

@@ -1,12 +1,12 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import type { WorkspaceAgent } from "api/typesGenerated";
-import { Stack } from "../Stack/Stack";
+import { Stack } from "components/Stack/Stack";
+import { VSCodeIcon } from "components/Icons/VSCodeIcon";
+import { TerminalIcon } from "components/Icons/TerminalIcon";
+import { DisplayAppNameMap } from "./AppLink/AppLink";
 import { AppPreview } from "./AppLink/AppPreview";
 import { BaseIcon } from "./AppLink/BaseIcon";
-import { VSCodeIcon } from "components/Icons/VSCodeIcon";
-import { DisplayAppNameMap } from "./AppLink/AppLink";
-import { TerminalIcon } from "components/Icons/TerminalIcon";
 
 interface AgentRowPreviewStyles {
   // Helpful when there are more than one row so the values are aligned

site/src/modules/resources/AppLink/AppLink.stories.tsx

@@ -11,7 +11,7 @@ import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof AppLink> = {
-  title: "components/AppLink",
+  title: "modules/resources/AppLink",
   component: AppLink,
   decorators: [
     (Story) => (

site/src/modules/resources/AppLink/AppLink.tsx

@@ -7,9 +7,9 @@ import { useTheme } from "@emotion/react";
 import { getApiKey } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { useProxy } from "contexts/ProxyContext";
-import { AgentButton } from "components/Resources/AgentButton";
 import { createAppLinkHref } from "utils/apps";
 import { generateRandomString } from "utils/random";
+import { AgentButton } from "../AgentButton";
 import { BaseIcon } from "./BaseIcon";
 import { ShareIcon } from "./ShareIcon";
 

site/src/modules/resources/PortForwardButton.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from "testHelpers/entities";
 
 const meta: Meta<typeof PortForwardButton> = {
-  title: "components/PortForwardButton",
+  title: "modules/resources/PortForwardButton",
   component: PortForwardButton,
   args: {
     agent: MockWorkspaceAgent,

site/src/modules/resources/PortForwardPopoverView.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from "testHelpers/entities";
 
 const meta: Meta<typeof PortForwardPopoverView> = {
-  title: "components/PortForwardPopoverView",
+  title: "modules/resources/PortForwardPopoverView",
   component: PortForwardPopoverView,
   decorators: [
     (Story) => (

site/src/modules/resources/ResourceAvatar.stories.tsx

@@ -3,7 +3,7 @@ import { ResourceAvatar } from "./ResourceAvatar";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof ResourceAvatar> = {
-  title: "components/ResourceAvatar",
+  title: "modules/resources/ResourceAvatar",
   component: ResourceAvatar,
 };
 

site/src/modules/resources/ResourceCard.stories.tsx

@@ -9,7 +9,7 @@ import { type WorkspaceAgent } from "api/typesGenerated";
 import { AgentRowPreview } from "./AgentRowPreview";
 
 const meta: Meta<typeof ResourceCard> = {
-  title: "components/Resources/ResourceCard",
+  title: "modules/resources/ResourceCard",
   component: ResourceCard,
   args: {
     resource: MockWorkspaceResource,

site/src/modules/resources/ResourceCard.test.tsx

@@ -1,8 +1,8 @@
-import { renderComponent } from "testHelpers/renderHelpers";
-import { ResourceCard } from "components/Resources/ResourceCard";
-import { MockWorkspaceResource } from "testHelpers/entities";
 import { screen } from "@testing-library/react";
-import { WorkspaceResourceMetadata } from "api/typesGenerated";
+import type { WorkspaceResourceMetadata } from "api/typesGenerated";
+import { MockWorkspaceResource } from "testHelpers/entities";
+import { renderComponent } from "testHelpers/renderHelpers";
+import { ResourceCard } from "./ResourceCard";
 
 describe("Resource Card", () => {
   it("renders daily cost and metadata tiles", async () => {

site/src/modules/resources/ResourceCard.tsx

@@ -1,13 +1,12 @@
-import { type FC, type PropsWithChildren, useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { type Interpolation, type Theme } from "@emotion/react";
-import { Children } from "react";
+import { Children, type FC, type PropsWithChildren, useState } from "react";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
-import { DropdownArrow } from "../DropdownArrow/DropdownArrow";
-import { CopyableValue } from "../CopyableValue/CopyableValue";
-import { MemoizedInlineMarkdown } from "../Markdown/Markdown";
-import { Stack } from "../Stack/Stack";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { CopyableValue } from "components/CopyableValue/CopyableValue";
+import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
+import { Stack } from "components/Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
 

site/src/modules/resources/Resources.stories.tsx

@@ -10,7 +10,7 @@ import { type WorkspaceAgent } from "api/typesGenerated";
 import { AgentRowPreview } from "./AgentRowPreview";
 
 const meta: Meta<typeof Resources> = {
-  title: "components/Resources/Resources",
+  title: "modules/resources/Resources",
   component: Resources,
   args: {
     resources: [MockWorkspaceResource],

site/src/modules/resources/Resources.tsx

@@ -3,7 +3,7 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC, useState } from "react";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { Stack } from "../Stack/Stack";
+import { Stack } from "components/Stack/Stack";
 import { ResourceCard } from "./ResourceCard";
 
 const countAgents = (resource: WorkspaceResource) => {

site/src/modules/resources/SSHButton/SSHButton.stories.tsx

@@ -3,7 +3,7 @@ import { SSHButton } from "./SSHButton";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof SSHButton> = {
-  title: "components/SSHButton",
+  title: "modules/resources/SSHButton",
   component: SSHButton,
 };
 

site/src/modules/resources/TerminalLink/TerminalLink.stories.tsx

@@ -3,7 +3,7 @@ import { TerminalLink } from "./TerminalLink";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TerminalLink> = {
-  title: "components/TerminalLink",
+  title: "modules/resources/TerminalLink",
   component: TerminalLink,
 };
 

site/src/modules/resources/TerminalLink/TerminalLink.tsx

@@ -1,10 +1,10 @@
 import Link from "@mui/material/Link";
-import { AgentButton } from "components/Resources/AgentButton";
-import { FC } from "react";
-import * as TypesGen from "api/typesGenerated";
+import { type FC } from "react";
+import type * as TypesGen from "api/typesGenerated";
+import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { generateRandomString } from "utils/random";
 import { DisplayAppNameMap } from "../AppLink/AppLink";
-import { TerminalIcon } from "components/Icons/TerminalIcon";
+import { AgentButton } from "../AgentButton";
 
 export const Language = {
   terminalTitle: (identifier: string): string => `Terminal - ${identifier}`,
@@ -23,7 +23,7 @@ export interface TerminalLinkProps {
  * If no user name is provided "me" is used however it makes the link not
  * shareable.
  */
-export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
+export const TerminalLink: FC<TerminalLinkProps> = ({
   agentName,
   userName = "me",
   workspaceName,

site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.stories.tsx

@@ -3,7 +3,7 @@ import { VSCodeDesktopButton } from "./VSCodeDesktopButton";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof VSCodeDesktopButton> = {
-  title: "components/VSCodeDesktopButton",
+  title: "modules/resources/VSCodeDesktopButton",
   component: VSCodeDesktopButton,
 };
 

site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx

@@ -4,10 +4,10 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { type FC, useState, useRef } from "react";
 import { getApiKey } from "api/api";
-import { DisplayApp } from "api/typesGenerated";
+import type { DisplayApp } from "api/typesGenerated";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { AgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "../AgentButton";
 import { DisplayAppNameMap } from "../AppLink/AppLink";
 
 export interface VSCodeDesktopButtonProps {

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
 import { chromatic } from "testHelpers/chromatic";
 import { MockTemplateVersion } from "testHelpers/entities";
 import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
-import { useArgs } from "@storybook/preview-api";
 
 const meta: Meta<typeof ProvisionerTagsPopover> = {
-  title: "component/ProvisionerTagsPopover",
+  title: "pages/TemplateVersionEditorPage/ProvisionerTagsPopover",
   parameters: {
     chromatic,
     layout: "centered",
@@ -37,4 +37,6 @@ const meta: Meta<typeof ProvisionerTagsPopover> = {
 export default meta;
 type Story = StoryObj<typeof ProvisionerTagsPopover>;
 
-export const Example: Story = {};
+const Example: Story = {};
+
+export { Example as ProvisionerTagsPopover };

site/src/pages/WorkspacePage/ResourceMetadata.tsx

@@ -6,8 +6,8 @@ import {
   type PropsWithChildren,
 } from "react";
 import type { WorkspaceResource } from "api/typesGenerated";
+import { SensitiveValue } from "modules/resources/SensitiveValue";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
-import { SensitiveValue } from "components/Resources/SensitiveValue";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
 type ResourceMetadataProps = Omit<HTMLAttributes<HTMLElement>, "resource"> & {
@@ -76,9 +76,9 @@ const styles = {
     background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`,
   }),
 
-  item: () => ({
+  item: {
     lineHeight: "1.5",
-  }),
+  },
 
   label: (theme) => ({
     fontSize: 13,
@@ -88,9 +88,9 @@ const styles = {
     whiteSpace: "nowrap",
   }),
 
-  value: () => ({
+  value: {
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;

site/src/pages/WorkspacePage/Workspace.stories.tsx

@@ -6,7 +6,7 @@ import type { ProvisionerJobLog } from "api/typesGenerated";
 import * as Mocks from "testHelpers/entities";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import { DashboardContext } from "modules/dashboard/DashboardProvider";
-import { WatchAgentMetadataContext } from "components/Resources/AgentMetadata";
+import { WatchAgentMetadataContext } from "modules/resources/AgentMetadata";
 import { Workspace } from "./Workspace";
 import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection";
 import { WorkspacePermissions } from "./permissions";

site/src/pages/WorkspacePage/Workspace.tsx

@@ -5,7 +5,7 @@ import { type FC } from "react";
 import { useNavigate } from "react-router-dom";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert, AlertDetail } from "components/Alert/Alert";
-import { AgentRow } from "components/Resources/AgentRow";
+import { AgentRow } from "modules/resources/AgentRow";
 import { useTab } from "hooks";
 import {
   ActiveTransition,