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

aslilac · web-flow · commit bb8ce7bc022a · 2024-01-26T15:11:07.000-07:00
diff --git a/site/.storybook/preview.jsx b/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",
     },
   },
diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/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[];
diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/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,
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx b/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: {
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx b/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,
diff --git a/site/src/modules/dashboard/ServiceBanner/ServiceBannerView.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/AgentButton.tsx b/site/src/modules/resources/AgentButton.tsx
diff --git a/site/src/modules/resources/AgentLatency.tsx b/site/src/modules/resources/AgentLatency.tsx
diff --git a/site/src/modules/resources/AgentMetadata.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/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",
diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx
diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
diff --git a/site/src/modules/resources/AgentRow.test.tsx b/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 };
 });
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
@@ -2,6 +2,17 @@ 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 {
+  type FC,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List, ListOnScrollProps } from "react-window";
 import * as API from "api/api";
 import type {
   Workspace,
@@ -10,33 +21,22 @@ import type {
   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,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList as List, ListOnScrollProps } from "react-window";
-import { Stack } from "../Stack/Stack";
+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
diff --git a/site/src/modules/resources/AgentRowPreview.stories.tsx b/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,
diff --git a/site/src/modules/resources/AgentRowPreview.test.tsx b/site/src/modules/resources/AgentRowPreview.test.tsx
diff --git a/site/src/modules/resources/AgentRowPreview.tsx b/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 { AppPreview } from "./AppLink/AppPreview";
-import { BaseIcon } from "./AppLink/BaseIcon";
+import { Stack } from "components/Stack/Stack";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
-import { DisplayAppNameMap } from "./AppLink/AppLink";
 import { TerminalIcon } from "components/Icons/TerminalIcon";
+import { DisplayAppNameMap } from "./AppLink/AppLink";
+import { AppPreview } from "./AppLink/AppPreview";
+import { BaseIcon } from "./AppLink/BaseIcon";
 
 interface AgentRowPreviewStyles {
   // Helpful when there are more than one row so the values are aligned
diff --git a/site/src/modules/resources/AgentStatus.tsx b/site/src/modules/resources/AgentStatus.tsx
diff --git a/site/src/modules/resources/AgentVersion.tsx b/site/src/modules/resources/AgentVersion.tsx
diff --git a/site/src/modules/resources/AppLink/AppLink.stories.tsx b/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) => (
diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/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";
 
diff --git a/site/src/modules/resources/AppLink/AppPreview.tsx b/site/src/modules/resources/AppLink/AppPreview.tsx
diff --git a/site/src/modules/resources/AppLink/BaseIcon.tsx b/site/src/modules/resources/AppLink/BaseIcon.tsx
diff --git a/site/src/modules/resources/AppLink/ShareIcon.tsx b/site/src/modules/resources/AppLink/ShareIcon.tsx
diff --git a/site/src/modules/resources/PortForwardButton.stories.tsx b/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,
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
diff --git a/site/src/modules/resources/PortForwardPopoverView.stories.tsx b/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) => (
diff --git a/site/src/modules/resources/ResourceAvatar.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/ResourceAvatar.tsx b/site/src/modules/resources/ResourceAvatar.tsx
diff --git a/site/src/modules/resources/ResourceCard.stories.tsx b/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,
diff --git a/site/src/modules/resources/ResourceCard.test.tsx b/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 () => {
diff --git a/site/src/modules/resources/ResourceCard.tsx b/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";
 
diff --git a/site/src/modules/resources/Resources.stories.tsx b/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],
diff --git a/site/src/modules/resources/Resources.tsx b/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) => {
diff --git a/site/src/modules/resources/SSHButton/SSHButton.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
diff --git a/site/src/modules/resources/SensitiveValue.tsx b/site/src/modules/resources/SensitiveValue.tsx
diff --git a/site/src/modules/resources/TerminalLink/TerminalLink.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/TerminalLink/TerminalLink.tsx b/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,
diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.stories.tsx b/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,
 };
 
diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/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 {
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx b/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 };
diff --git a/site/src/pages/WorkspacePage/ResourceMetadata.tsx b/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>>;
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/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";
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
