diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 3c32ac8e42ab3..67af1b48d86dc 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -1,7 +1,6 @@ import { FullScreenLoader } from "components/Loader/FullScreenLoader"; import { TemplateLayout } from "components/TemplateLayout/TemplateLayout"; import { UsersLayout } from "components/UsersLayout/UsersLayout"; -import IndexPage from "pages"; import AuditPage from "pages/AuditPage/AuditPage"; import GroupsPage from "pages/GroupsPage/GroupsPage"; import LoginPage from "pages/LoginPage/LoginPage"; @@ -11,7 +10,12 @@ import TemplatesPage from "pages/TemplatesPage/TemplatesPage"; import UsersPage from "pages/UsersPage/UsersPage"; import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"; import { FC, lazy, Suspense } from "react"; -import { Route, Routes, BrowserRouter as Router } from "react-router-dom"; +import { + Route, + Routes, + BrowserRouter as Router, + Navigate, +} from "react-router-dom"; import { DashboardLayout } from "./components/Dashboard/DashboardLayout"; import { RequireAuth } from "./components/RequireAuth/RequireAuth"; import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"; @@ -195,7 +199,7 @@ export const AppRouter: FC = () => { {/* Dashboard routes */} }> }> - } /> + } /> } /> diff --git a/site/src/components/Conditionals/ChooseOne.stories.tsx b/site/src/components/Conditionals/ChooseOne.stories.tsx index a4663b8819a52..7330a9bc6a018 100644 --- a/site/src/components/Conditionals/ChooseOne.stories.tsx +++ b/site/src/components/Conditionals/ChooseOne.stories.tsx @@ -1,46 +1,71 @@ -import { Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { ChooseOne, Cond } from "./ChooseOne"; -export default { +const meta: Meta = { title: "components/Conditionals/ChooseOne", component: ChooseOne, - subcomponents: { Cond }, }; -export const FirstIsTrue: Story = () => ( - - The first one shows. - The second one does not show. - The default does not show. - -); +export default meta; +type Story = StoryObj; -export const SecondIsTrue: Story = () => ( - - The first one does not show. - The second one shows. - The default does not show. - -); +export const FirstIsTrue: Story = { + args: { + children: [ + + The first one shows. + , + + The second one does not show. + , + The default does not show., + ], + }, +}; -export const AllAreTrue: Story = () => ( - - Only the first one shows. - The second one does not show. - The default does not show. - -); +export const SecondIsTrue: Story = { + args: { + children: [ + + The first one does not show. + , + + The second one shows. + , + The default does not show., + ], + }, +}; +export const AllAreTrue: Story = { + args: { + children: [ + + Only the first one shows. + , + + The second one does not show. + , + The default does not show., + ], + }, +}; -export const NoneAreTrue: Story = () => ( - - The first one does not show. - The second one does not show. - The default shows. - -); +export const NoneAreTrue: Story = { + args: { + children: [ + + The first one does not show. + , + + The second one does not show. + , + The default shows., + ], + }, +}; -export const OneCond: Story = () => ( - - An only child renders. - -); +export const OneCond: Story = { + args: { + children: An only child renders., + }, +}; diff --git a/site/src/components/Conditionals/Maybe.stories.tsx b/site/src/components/Conditionals/Maybe.stories.tsx index bc94f3f810735..cfe14ede5acbb 100644 --- a/site/src/components/Conditionals/Maybe.stories.tsx +++ b/site/src/components/Conditionals/Maybe.stories.tsx @@ -1,21 +1,25 @@ -import { Story } from "@storybook/react"; -import { Maybe, MaybeProps } from "./Maybe"; +import { StoryObj, Meta } from "@storybook/react"; +import { Maybe } from "./Maybe"; -export default { +const meta: Meta = { title: "components/Conditionals/Maybe", component: Maybe, + args: { + children: "Now you see me", + }, }; -const Template: Story = (args: MaybeProps) => ( - Now you see me -); +export default meta; +type Story = StoryObj; -export const ConditionIsTrue = Template.bind({}); -ConditionIsTrue.args = { - condition: true, +export const ConditionIsTrue: Story = { + args: { + condition: true, + }, }; -export const ConditionIsFalse = Template.bind({}); -ConditionIsFalse.args = { - condition: false, +export const ConditionIsFalse: Story = { + args: { + condition: false, + }, }; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx new file mode 100644 index 0000000000000..06c999d2f0a20 --- /dev/null +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx @@ -0,0 +1,58 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { AuditLogDescription } from "./AuditLogDescription"; +import { + MockAuditLog, + MockAuditLogSuccessfulLogin, + MockAuditLogUnsuccessfulLoginKnownUser, + MockAuditLogWithWorkspaceBuild, + MockWorkspaceCreateAuditLogForDifferentOwner, +} from "testHelpers/entities"; + +const meta: Meta = { + title: "components/AuditLogDescription", + component: AuditLogDescription, +}; + +export default meta; +type Story = StoryObj; + +export const WorkspaceCreate: Story = { + args: { + auditLog: MockAuditLog, + }, +}; + +export const WorkspaceBuildStop: Story = { + args: { + auditLog: MockAuditLogWithWorkspaceBuild, + }, +}; + +export const WorkspaceBuildDuplicatedWord: Story = { + args: { + auditLog: { + ...MockAuditLogWithWorkspaceBuild, + additional_fields: { + workspace_name: "workspace", + }, + }, + }, +}; + +export const CreateWorkspaceWithDiffOwner: Story = { + args: { + auditLog: MockWorkspaceCreateAuditLogForDifferentOwner, + }, +}; + +export const SuccessLogin: Story = { + args: { + auditLog: MockAuditLogSuccessfulLogin, + }, +}; + +export const UnsuccessfulLoginForUnknownUser: Story = { + args: { + auditLog: MockAuditLogUnsuccessfulLoginKnownUser, + }, +}; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx deleted file mode 100644 index cbe305c75eaff..0000000000000 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { - MockAuditLog, - MockAuditLogWithWorkspaceBuild, - MockWorkspaceCreateAuditLogForDifferentOwner, - MockAuditLogSuccessfulLogin, - MockAuditLogUnsuccessfulLoginKnownUser, -} from "testHelpers/entities"; -import { AuditLogDescription } from "./AuditLogDescription"; -import { AuditLogRow } from "../AuditLogRow"; -import { render } from "testHelpers/renderHelpers"; -import { screen } from "@testing-library/react"; -import { i18n } from "i18n"; - -const t = (str: string, variables: Record) => - i18n.t(str, variables); - -const getByTextContent = (text: string) => { - return screen.getByText((_, element) => { - const hasText = (element: Element | null) => element?.textContent === text; - const elementHasText = hasText(element); - const childrenDontHaveText = Array.from(element?.children || []).every( - (child) => !hasText(child), - ); - return elementHasText && childrenDontHaveText; - }); -}; -describe("AuditLogDescription", () => { - it("renders the correct string for a workspace create audit log", async () => { - render(); - - expect(screen.getByText("TestUser created workspace")).toBeDefined(); - expect(screen.getByText("bruno-dev")).toBeDefined(); - }); - - it("renders the correct string for a workspace_build stop audit log", async () => { - render(); - - expect(getByTextContent("TestUser stopped workspace test2")).toBeDefined(); - }); - - it("renders the correct string for a workspace_build audit log with a duplicate word", async () => { - const AuditLogWithRepeat = { - ...MockAuditLogWithWorkspaceBuild, - additional_fields: { - workspace_name: "workspace", - }, - }; - render(); - - expect( - getByTextContent("TestUser stopped workspace workspace"), - ).toBeDefined(); - }); - it("renders the correct string for a workspace created for a different owner", async () => { - render( - , - ); - - expect( - screen.getByText( - `on behalf of ${MockWorkspaceCreateAuditLogForDifferentOwner.additional_fields.workspace_owner}`, - { exact: false }, - ), - ).toBeDefined(); - }); - it("renders the correct string for successful login", async () => { - render(); - - expect( - screen.getByText( - t("auditLog:table.logRow.description.unlinkedAuditDescription", { - truncatedDescription: `${MockAuditLogSuccessfulLogin.user?.username} logged in`, - target: "", - onBehalfOf: undefined, - }) - .replace(/<[^>]*>/g, " ") - .replace(/\s{2,}/g, " ") - .trim(), - ), - ).toBeInTheDocument(); - - const statusPill = screen.getByRole("status"); - expect(statusPill).toHaveTextContent("201"); - }); - it("renders the correct string for unsuccessful login for a known user", async () => { - render(); - - expect( - screen.getByText( - t("auditLog:table.logRow.description.unlinkedAuditDescription", { - truncatedDescription: `${MockAuditLogUnsuccessfulLoginKnownUser.user?.username} logged in`, - target: "", - onBehalfOf: undefined, - }) - .replace(/<[^>]*>/g, " ") - .replace(/\s{2,}/g, " ") - .trim(), - ), - ).toBeInTheDocument(); - - const statusPill = screen.getByRole("status"); - expect(statusPill).toHaveTextContent("401"); - }); -}); diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts deleted file mode 100644 index 03c56cd0e8ff6..0000000000000 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AuditLogDescription } from "./AuditLogDescription"; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts deleted file mode 100644 index 1e4c4c34a51bb..0000000000000 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { AuditLogDiff } from "./AuditLogDiff"; -export { determineGroupDiff } from "./auditUtils"; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx index 5ded123ef1221..4eecbca66ec57 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx @@ -4,7 +4,6 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; -import { ComponentMeta, Story } from "@storybook/react"; import { MockAuditLog, MockAuditLog2, @@ -12,89 +11,102 @@ import { MockAuditLogWithDeletedResource, MockAuditLogGitSSH, } from "testHelpers/entities"; -import { AuditLogRow, AuditLogRowProps } from "./AuditLogRow"; +import { AuditLogRow } from "./AuditLogRow"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/AuditLogRow", component: AuditLogRow, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + + Logs + + + + + +
+ + ), + ], +}; -const Template: Story = (args) => ( - - - - - Logs - - - - - -
- -); +export default meta; +type Story = StoryObj; -export const NoDiff = Template.bind({}); -NoDiff.args = { - auditLog: { - ...MockAuditLog, - diff: {}, +export const NoDiff: Story = { + args: { + auditLog: { + ...MockAuditLog, + diff: {}, + }, }, }; -export const WithDiff = Template.bind({}); -WithDiff.args = { - auditLog: MockAuditLog2, - defaultIsDiffOpen: true, +export const WithDiff: Story = { + args: { + auditLog: MockAuditLog2, + defaultIsDiffOpen: true, + }, }; -export const WithLongDiffRow = Template.bind({}); -WithLongDiffRow.args = { - auditLog: { - ...MockAuditLog2, - diff: { - ...MockAuditLog2.diff, - icon: { - old: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.docker.com%2Fcompany%2Fnewsroom%2Fmedia-resources%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAD", - new: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kindpng.com%2Fimgv%2FhRowRxi_docker-icon-png-transparent-png%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAI", - secret: false, +export const WithLongDiffRow: Story = { + args: { + auditLog: { + ...MockAuditLog2, + diff: { + ...MockAuditLog2.diff, + icon: { + old: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.docker.com%2Fcompany%2Fnewsroom%2Fmedia-resources%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAD", + new: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kindpng.com%2Fimgv%2FhRowRxi_docker-icon-png-transparent-png%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAI", + secret: false, + }, }, }, + defaultIsDiffOpen: true, }, - defaultIsDiffOpen: true, }; -export const WithStoppedWorkspaceBuild = Template.bind({}); -WithStoppedWorkspaceBuild.args = { - auditLog: { - ...MockAuditLogWithWorkspaceBuild, - action: "stop", +export const WithStoppedWorkspaceBuild: Story = { + args: { + auditLog: { + ...MockAuditLogWithWorkspaceBuild, + action: "stop", + }, }, }; -export const WithStartedWorkspaceBuild = Template.bind({}); -WithStartedWorkspaceBuild.args = { - auditLog: { - ...MockAuditLogWithWorkspaceBuild, - action: "start", +export const WithStartedWorkspaceBuild: Story = { + args: { + auditLog: { + ...MockAuditLogWithWorkspaceBuild, + action: "start", + }, }, }; -export const WithDeletedWorkspaceBuild = Template.bind({}); -WithDeletedWorkspaceBuild.args = { - auditLog: { - ...MockAuditLogWithWorkspaceBuild, - action: "delete", - is_deleted: true, +export const WithDeletedWorkspaceBuild: Story = { + args: { + auditLog: { + ...MockAuditLogWithWorkspaceBuild, + action: "delete", + is_deleted: true, + }, }, }; -export const DeletedResource = Template.bind({}); -DeletedResource.args = { - auditLog: MockAuditLogWithDeletedResource, +export const DeletedResource: Story = { + args: { + auditLog: MockAuditLogWithDeletedResource, + }, }; -export const SecretDiffValue = Template.bind({}); -SecretDiffValue.args = { - auditLog: MockAuditLogGitSSH, +export const SecretDiffValue: Story = { + args: { + auditLog: MockAuditLogGitSSH, + }, }; diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index 6f8c858f893e3..fafa263030409 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -12,10 +12,11 @@ import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useState } from "react"; import userAgentParser from "ua-parser-js"; -import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff"; +import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff"; import { useTranslation } from "react-i18next"; -import { AuditLogDescription } from "./AuditLogDescription"; +import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription"; import { PaletteIndex } from "theme/theme"; +import { determineGroupDiff } from "./AuditLogDiff/auditUtils"; const httpStatusColor = (httpStatus: number): PaletteIndex => { // redirects are successful diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx index 3d07123e9c67b..8be345bba6031 100644 --- a/site/src/pages/AuditPage/AuditPage.test.tsx +++ b/site/src/pages/AuditPage/AuditPage.test.tsx @@ -59,15 +59,6 @@ describe("AuditPage", () => { ); }); - it("shows the audit logs", async () => { - // When - await renderPage(); - - // Then - await screen.findByTestId(`audit-log-row-${MockAuditLog.id}`); - screen.getByTestId(`audit-log-row-${MockAuditLog2.id}`); - }); - it("renders page 5", async () => { // Given const page = 5; diff --git a/site/src/pages/AuditPage/AuditPageView.stories.tsx b/site/src/pages/AuditPage/AuditPageView.stories.tsx index ef8bc8c2d229d..28a2e4f80ebea 100644 --- a/site/src/pages/AuditPage/AuditPageView.stories.tsx +++ b/site/src/pages/AuditPage/AuditPageView.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import { MockAuditLog, MockAuditLog2, MockUser } from "testHelpers/entities"; import { AuditPageView } from "./AuditPageView"; -import { WorkspacesPageView } from "pages/WorkspacesPage/WorkspacesPageView"; import { ComponentProps } from "react"; import { MockMenu, @@ -38,7 +37,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const AuditPage: Story = {}; diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index 688eb353f570c..db8bb15593c00 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -4,7 +4,7 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; import { AuditLog } from "api/typesGenerated"; -import { AuditLogRow } from "pages/AuditPage/AuditLogRow/AuditLogRow"; +import { AuditLogRow } from "./AuditLogRow/AuditLogRow"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Margins } from "components/Margins/Margins"; diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx index 44731ad3ef6fb..afce40ff48f25 100644 --- a/site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx +++ b/site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx @@ -1,20 +1,15 @@ -import { Story } from "@storybook/react"; -import { CliAuthPageView, CliAuthPageViewProps } from "./CliAuthPageView"; +import { CliAuthPageView } from "./CliAuthPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/CliAuthPageView", component: CliAuthPageView, - argTypes: { - sessionToken: { control: "text" }, - }, args: { sessionToken: "some-session-token", }, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = {}; +export const Example: Story = {}; diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx index 7dd881434cc47..d366c4a1e3206 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.stories.tsx @@ -1,4 +1,3 @@ -import { ComponentMeta, Story } from "@storybook/react"; import { MockTemplateExample, MockTemplateVersionVariable1, @@ -7,353 +6,353 @@ import { MockTemplateVersionVariable4, MockTemplateVersionVariable5, } from "testHelpers/entities"; -import { - CreateTemplateForm, - CreateTemplateFormProps, -} from "./CreateTemplateForm"; +import { CreateTemplateForm } from "./CreateTemplateForm"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/CreateTemplateForm", component: CreateTemplateForm, args: { isSubmitting: false, allowDisableEveryoneAccess: true, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Initial = Template.bind({}); -Initial.args = {}; +export const Initial: Story = {}; -export const WithStarterTemplate = Template.bind({}); -WithStarterTemplate.args = { - starterTemplate: MockTemplateExample, +export const WithStarterTemplate: Story = { + args: { + starterTemplate: MockTemplateExample, + }, }; -export const WithVariables = Template.bind({}); -WithVariables.args = { - variables: [ - MockTemplateVersionVariable1, - MockTemplateVersionVariable2, - MockTemplateVersionVariable3, - MockTemplateVersionVariable4, - MockTemplateVersionVariable5, - ], +export const WithVariables: Story = { + args: { + variables: [ + MockTemplateVersionVariable1, + MockTemplateVersionVariable2, + MockTemplateVersionVariable3, + MockTemplateVersionVariable4, + MockTemplateVersionVariable5, + ], + }, }; -export const WithJobError = Template.bind({}); -WithJobError.args = { - jobError: - "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1", - logs: [ - { - id: 461061, - created_at: "2023-03-06T14:47:32.501Z", - log_source: "provisioner_daemon", - log_level: "info", - stage: "Adding README.md...", - output: "", - }, - { - id: 461062, - created_at: "2023-03-06T14:47:32.501Z", - log_source: "provisioner_daemon", - log_level: "info", - stage: "Setting up", - output: "", - }, - { - id: 461063, - created_at: "2023-03-06T14:47:32.528Z", - log_source: "provisioner_daemon", - log_level: "info", - stage: "Parsing template parameters", - output: "", - }, - { - id: 461064, - created_at: "2023-03-06T14:47:32.552Z", - log_source: "provisioner_daemon", - log_level: "info", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461065, - created_at: "2023-03-06T14:47:32.633Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461066, - created_at: "2023-03-06T14:47:32.633Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "Initializing the backend...", - }, - { - id: 461067, - created_at: "2023-03-06T14:47:32.71Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461068, - created_at: "2023-03-06T14:47:32.711Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "Initializing provider plugins...", - }, - { - id: 461069, - created_at: "2023-03-06T14:47:32.712Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: '- Finding coder/coder versions matching "~\u003e 0.6.12"...', - }, - { - id: 461070, - created_at: "2023-03-06T14:47:32.922Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: '- Finding hashicorp/aws versions matching "~\u003e 4.55"...', - }, - { - id: 461071, - created_at: "2023-03-06T14:47:33.132Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "- Installing hashicorp/aws v4.57.0...", - }, - { - id: 461072, - created_at: "2023-03-06T14:47:37.364Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "- Installed hashicorp/aws v4.57.0 (signed by HashiCorp)", - }, - { - id: 461073, - created_at: "2023-03-06T14:47:38.142Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "- Installing coder/coder v0.6.15...", - }, - { - id: 461074, - created_at: "2023-03-06T14:47:39.083Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "- Installed coder/coder v0.6.15 (signed by a HashiCorp partner, key ID 93C75807601AA0EC)", - }, - { - id: 461075, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461076, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "Partner and community providers are signed by their developers.", - }, - { - id: 461077, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "If you'd like to know more about provider signing, you can read about it here:", - }, - { - id: 461078, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "https://www.terraform.io/docs/cli/plugins/signing.html", - }, - { - id: 461079, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461080, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "Terraform has created a lock file .terraform.lock.hcl to record the provider", - }, - { - id: 461081, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "selections it made above. Include this file in your version control repository", - }, - { - id: 461082, - created_at: "2023-03-06T14:47:39.394Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "so that Terraform can guarantee to make the same selections by default when", - }, - { - id: 461083, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: 'you run "terraform init" in the future.', - }, - { - id: 461084, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461085, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "Terraform has been successfully initialized!", - }, - { - id: 461086, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461087, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - 'You may now begin working with Terraform. Try running "terraform plan" to see', - }, - { - id: 461088, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "any changes that are required for your infrastructure. All Terraform commands", - }, - { - id: 461089, - created_at: "2023-03-06T14:47:39.395Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "should now work.", - }, - { - id: 461090, - created_at: "2023-03-06T14:47:39.397Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461091, - created_at: "2023-03-06T14:47:39.397Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "If you ever set or change modules or backend configuration for Terraform,", - }, - { - id: 461092, - created_at: "2023-03-06T14:47:39.397Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: - "rerun this command to reinitialize your working directory. If you forget, other", - }, - { - id: 461093, - created_at: "2023-03-06T14:47:39.397Z", - log_source: "provisioner", - log_level: "debug", - stage: "Detecting persistent resources", - output: "commands will detect it and remind you to do so if necessary.", - }, - { - id: 461094, - created_at: "2023-03-06T14:47:39.431Z", - log_source: "provisioner", - log_level: "info", - stage: "Detecting persistent resources", - output: "Terraform 1.1.9", - }, - { - id: 461095, - created_at: "2023-03-06T14:47:43.759Z", - log_source: "provisioner", - log_level: "error", - stage: "Detecting persistent resources", - output: - "Error: configuring Terraform AWS Provider: no valid credential sources for Terraform AWS Provider found.\n\nPlease see https://registry.terraform.io/providers/hashicorp/aws\nfor more information about providing credentials.\n\nError: failed to refresh cached credentials, no EC2 IMDS role found, operation error ec2imds: GetMetadata, http response error StatusCode: 404, request to EC2 IMDS failed\n", - }, - { - id: 461096, - created_at: "2023-03-06T14:47:43.759Z", - log_source: "provisioner", - log_level: "error", - stage: "Detecting persistent resources", - output: "", - }, - { - id: 461097, - created_at: "2023-03-06T14:47:43.777Z", - log_source: "provisioner_daemon", - log_level: "info", - stage: "Cleaning Up", - output: "", - }, - ], +export const WithJobError: Story = { + args: { + jobError: + "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1", + logs: [ + { + id: 461061, + created_at: "2023-03-06T14:47:32.501Z", + log_source: "provisioner_daemon", + log_level: "info", + stage: "Adding README.md...", + output: "", + }, + { + id: 461062, + created_at: "2023-03-06T14:47:32.501Z", + log_source: "provisioner_daemon", + log_level: "info", + stage: "Setting up", + output: "", + }, + { + id: 461063, + created_at: "2023-03-06T14:47:32.528Z", + log_source: "provisioner_daemon", + log_level: "info", + stage: "Parsing template parameters", + output: "", + }, + { + id: 461064, + created_at: "2023-03-06T14:47:32.552Z", + log_source: "provisioner_daemon", + log_level: "info", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461065, + created_at: "2023-03-06T14:47:32.633Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461066, + created_at: "2023-03-06T14:47:32.633Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "Initializing the backend...", + }, + { + id: 461067, + created_at: "2023-03-06T14:47:32.71Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461068, + created_at: "2023-03-06T14:47:32.711Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "Initializing provider plugins...", + }, + { + id: 461069, + created_at: "2023-03-06T14:47:32.712Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: '- Finding coder/coder versions matching "~\u003e 0.6.12"...', + }, + { + id: 461070, + created_at: "2023-03-06T14:47:32.922Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: '- Finding hashicorp/aws versions matching "~\u003e 4.55"...', + }, + { + id: 461071, + created_at: "2023-03-06T14:47:33.132Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "- Installing hashicorp/aws v4.57.0...", + }, + { + id: 461072, + created_at: "2023-03-06T14:47:37.364Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "- Installed hashicorp/aws v4.57.0 (signed by HashiCorp)", + }, + { + id: 461073, + created_at: "2023-03-06T14:47:38.142Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "- Installing coder/coder v0.6.15...", + }, + { + id: 461074, + created_at: "2023-03-06T14:47:39.083Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "- Installed coder/coder v0.6.15 (signed by a HashiCorp partner, key ID 93C75807601AA0EC)", + }, + { + id: 461075, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461076, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "Partner and community providers are signed by their developers.", + }, + { + id: 461077, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "If you'd like to know more about provider signing, you can read about it here:", + }, + { + id: 461078, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "https://www.terraform.io/docs/cli/plugins/signing.html", + }, + { + id: 461079, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461080, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "Terraform has created a lock file .terraform.lock.hcl to record the provider", + }, + { + id: 461081, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "selections it made above. Include this file in your version control repository", + }, + { + id: 461082, + created_at: "2023-03-06T14:47:39.394Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "so that Terraform can guarantee to make the same selections by default when", + }, + { + id: 461083, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: 'you run "terraform init" in the future.', + }, + { + id: 461084, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461085, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "Terraform has been successfully initialized!", + }, + { + id: 461086, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461087, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + 'You may now begin working with Terraform. Try running "terraform plan" to see', + }, + { + id: 461088, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "any changes that are required for your infrastructure. All Terraform commands", + }, + { + id: 461089, + created_at: "2023-03-06T14:47:39.395Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "should now work.", + }, + { + id: 461090, + created_at: "2023-03-06T14:47:39.397Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461091, + created_at: "2023-03-06T14:47:39.397Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "If you ever set or change modules or backend configuration for Terraform,", + }, + { + id: 461092, + created_at: "2023-03-06T14:47:39.397Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: + "rerun this command to reinitialize your working directory. If you forget, other", + }, + { + id: 461093, + created_at: "2023-03-06T14:47:39.397Z", + log_source: "provisioner", + log_level: "debug", + stage: "Detecting persistent resources", + output: "commands will detect it and remind you to do so if necessary.", + }, + { + id: 461094, + created_at: "2023-03-06T14:47:39.431Z", + log_source: "provisioner", + log_level: "info", + stage: "Detecting persistent resources", + output: "Terraform 1.1.9", + }, + { + id: 461095, + created_at: "2023-03-06T14:47:43.759Z", + log_source: "provisioner", + log_level: "error", + stage: "Detecting persistent resources", + output: + "Error: configuring Terraform AWS Provider: no valid credential sources for Terraform AWS Provider found.\n\nPlease see https://registry.terraform.io/providers/hashicorp/aws\nfor more information about providing credentials.\n\nError: failed to refresh cached credentials, no EC2 IMDS role found, operation error ec2imds: GetMetadata, http response error StatusCode: 404, request to EC2 IMDS failed\n", + }, + { + id: 461096, + created_at: "2023-03-06T14:47:43.759Z", + log_source: "provisioner", + log_level: "error", + stage: "Detecting persistent resources", + output: "", + }, + { + id: 461097, + created_at: "2023-03-06T14:47:43.777Z", + log_source: "provisioner_daemon", + log_level: "info", + stage: "Cleaning Up", + output: "", + }, + ], + }, }; diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 53d171dc53e38..49ff828800a91 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -8,10 +8,7 @@ import { TemplateVersionVariable, } from "api/typesGenerated"; import { Stack } from "components/Stack/Stack"; -import { - TemplateUpload, - TemplateUploadProps, -} from "pages/CreateTemplatePage/TemplateUpload"; +import { TemplateUpload, TemplateUploadProps } from "./TemplateUpload"; import { useFormik } from "formik"; import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"; import { FC, useEffect } from "react"; @@ -46,7 +43,7 @@ import { docs } from "utils/docs"; import { AutostopRequirementDaysHelperText, AutostopRequirementWeeksHelperText, -} from "pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/AutostopRequirementHelperText"; +} from "pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText"; import MenuItem from "@mui/material/MenuItem"; const MAX_DESCRIPTION_CHAR_LIMIT = 128; diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx index 709ee7fce272a..cb167247818de 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx @@ -2,7 +2,7 @@ import { renderWithAuth, waitForLoaderToBeRemoved, } from "testHelpers/renderHelpers"; -import { CreateTokenPage } from "pages/CreateTokenPage/CreateTokenPage"; +import { CreateTokenPage } from "./CreateTokenPage"; import * as API from "api/api"; import { screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; diff --git a/site/src/pages/CreateUserPage/CreateUserPage.test.tsx b/site/src/pages/CreateUserPage/CreateUserPage.test.tsx index 7baaa574689af..f50a98977aee6 100644 --- a/site/src/pages/CreateUserPage/CreateUserPage.test.tsx +++ b/site/src/pages/CreateUserPage/CreateUserPage.test.tsx @@ -1,13 +1,11 @@ import { fireEvent, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { rest } from "msw"; import { Language as FormLanguage } from "./CreateUserForm"; import { Language as FooterLanguage } from "components/FormFooter/FormFooter"; import { renderWithAuth, waitForLoaderToBeRemoved, } from "testHelpers/renderHelpers"; -import { server } from "testHelpers/server"; import { Language as CreateUserLanguage } from "xServices/users/createUserXService"; import { CreateUserPage } from "./CreateUserPage"; @@ -45,37 +43,6 @@ const fillForm = async ({ }; describe("Create User Page", () => { - it("shows validation error message", async () => { - await renderCreateUserPage(); - await fillForm({ email: "test" }); - const errorMessage = await screen.findByText(FormLanguage.emailInvalid); - expect(errorMessage).toBeDefined(); - }); - - it("shows API error message", async () => { - const fieldErrorMessage = "username already in use"; - server.use( - rest.post("/api/v2/users", async (req, res, ctx) => { - return res( - ctx.status(400), - ctx.json({ - message: "invalid field", - validations: [ - { - detail: fieldErrorMessage, - field: "username", - }, - ], - }), - ); - }), - ); - await renderCreateUserPage(); - await fillForm({}); - const errorMessage = await screen.findByText(fieldErrorMessage); - expect(errorMessage).toBeDefined(); - }); - it("shows success notification and redirects to users page", async () => { await renderCreateUserPage(); await fillForm({}); diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx index 5f47c5dcba6c5..2f8ff41ea425e 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx @@ -54,30 +54,6 @@ Object.defineProperty(window, "BroadcastChannel", { }); describe("CreateWorkspacePage", () => { - it("renders", async () => { - jest - .spyOn(API, "getTemplateVersionRichParameters") - .mockResolvedValueOnce([MockTemplateVersionParameter1]); - renderCreateWorkspacePage(); - - const element = await screen.findByText(createWorkspaceText); - expect(element).toBeDefined(); - }); - - it("renders with rich parameter", async () => { - jest - .spyOn(API, "getTemplateVersionRichParameters") - .mockResolvedValueOnce([MockTemplateVersionParameter1]); - renderCreateWorkspacePage(); - - const element = await screen.findByText(createWorkspaceText); - expect(element).toBeDefined(); - const firstParameter = await screen.findByText( - MockTemplateVersionParameter1.description, - ); - expect(firstParameter).toBeDefined(); - }); - it("succeeds with default owner", async () => { jest .spyOn(API, "getUsers") diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx index bf3fab55aa8df..b404757bdd782 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx @@ -10,7 +10,7 @@ import { import { CreateWorkspacePageView } from "./CreateWorkspacePageView"; const meta: Meta = { - title: "components/Alert", + title: "pages/CreateWorkspacePageView", component: CreateWorkspacePageView, args: { defaultName: "", diff --git a/site/src/pages/CreateWorkspacePage/GitAuth.stories.tsx b/site/src/pages/CreateWorkspacePage/GitAuth.stories.tsx index 26eb8b5841920..bd6f8cf813d39 100644 --- a/site/src/pages/CreateWorkspacePage/GitAuth.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/GitAuth.stories.tsx @@ -1,57 +1,66 @@ -import { Story } from "@storybook/react"; -import { GitAuth, GitAuthProps } from "./GitAuth"; +import { GitAuth } from "./GitAuth"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/GitAuth", component: GitAuth, }; -const Template: Story = (args) => ; +export default meta; +type Story = StoryObj; -export const GithubNotAuthenticated = Template.bind({}); -GithubNotAuthenticated.args = { - type: "github", - authenticated: false, +export const GithubNotAuthenticated: Story = { + args: { + type: "github", + authenticated: false, + }, }; -export const GithubAuthenticated = Template.bind({}); -GithubAuthenticated.args = { - type: "github", - authenticated: true, +export const GithubAuthenticated: Story = { + args: { + type: "github", + authenticated: true, + }, }; -export const GitlabNotAuthenticated = Template.bind({}); -GitlabNotAuthenticated.args = { - type: "gitlab", - authenticated: false, +export const GitlabNotAuthenticated: Story = { + args: { + type: "gitlab", + authenticated: false, + }, }; -export const GitlabAuthenticated = Template.bind({}); -GitlabAuthenticated.args = { - type: "gitlab", - authenticated: true, +export const GitlabAuthenticated: Story = { + args: { + type: "gitlab", + authenticated: true, + }, }; -export const AzureDevOpsNotAuthenticated = Template.bind({}); -AzureDevOpsNotAuthenticated.args = { - type: "azure-devops", - authenticated: false, +export const AzureDevOpsNotAuthenticated: Story = { + args: { + type: "azure-devops", + authenticated: false, + }, }; -export const AzureDevOpsAuthenticated = Template.bind({}); -AzureDevOpsAuthenticated.args = { - type: "azure-devops", - authenticated: true, +export const AzureDevOpsAuthenticated: Story = { + args: { + type: "azure-devops", + authenticated: true, + }, }; -export const BitbucketNotAuthenticated = Template.bind({}); -BitbucketNotAuthenticated.args = { - type: "bitbucket", - authenticated: false, +export const BitbucketNotAuthenticated: Story = { + args: { + type: "bitbucket", + authenticated: false, + }, }; -export const BitbucketAuthenticated = Template.bind({}); -BitbucketAuthenticated.args = { - type: "bitbucket", - authenticated: true, +export const BitbucketAuthenticated: Story = { + args: { + type: "bitbucket", + authenticated: true, + }, }; diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx index c2aae0676361e..51f54b0951823 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.stories.tsx @@ -1,28 +1,29 @@ -import { ComponentMeta, Story } from "@storybook/react"; import { MockTemplate } from "../../testHelpers/entities"; -import { SelectedTemplate, SelectedTemplateProps } from "./SelectedTemplate"; +import { SelectedTemplate } from "./SelectedTemplate"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/SelectedTemplate", component: SelectedTemplate, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const WithIcon = Template.bind({}); -WithIcon.args = { - template: { - ...MockTemplate, - icon: "/icon/docker.png", +export const WithIcon: Story = { + args: { + template: { + ...MockTemplate, + icon: "/icon/docker.png", + }, }, }; -export const WithoutIcon = Template.bind({}); -WithoutIcon.args = { - template: { - ...MockTemplate, - icon: "", +export const WithoutIcon: Story = { + args: { + template: { + ...MockTemplate, + icon: "", + }, }, }; diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx index 1332e4c5ea740..da41824db556c 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx @@ -1,10 +1,7 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { - AppearanceSettingsPageView, - AppearanceSettingsPageViewProps, -} from "./AppearanceSettingsPageView"; +import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/AppearanceSettingsPageView", component: AppearanceSettingsPageView, args: { @@ -21,9 +18,9 @@ export default { return undefined; }, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); -export const Page = Template.bind({}); +export default meta; +type Story = StoryObj; + +export const Page: Story = {}; diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx index 6c4eafb91ee51..4c9892de562d5 100644 --- a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.stories.tsx @@ -1,10 +1,7 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { - GitAuthSettingsPageView, - GitAuthSettingsPageViewProps, -} from "./GitAuthSettingsPageView"; +import { GitAuthSettingsPageView } from "./GitAuthSettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/GitAuthSettingsPageView", component: GitAuthSettingsPageView, args: { @@ -19,9 +16,9 @@ export default { ], }, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); -export const Page = Template.bind({}); +export default meta; +type Story = StoryObj; + +export const Page: Story = {}; diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx index 4749fcc04efe0..c9c155de378ff 100644 --- a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx @@ -1,60 +1,71 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { - NetworkSettingsPageView, - NetworkSettingsPageViewProps, -} from "./NetworkSettingsPageView"; +import { DeploymentGroup } from "api/types"; +import { NetworkSettingsPageView } from "./NetworkSettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const group: DeploymentGroup = { + name: "Networking", + description: "", + children: [] as DeploymentGroup[], +}; + +const meta: Meta = { title: "pages/NetworkSettingsPageView", component: NetworkSettingsPageView, args: { options: [ { name: "DERP Server Enable", - usage: "Whether to enable or disable the embedded DERP relay server.", + description: + "Whether to enable or disable the embedded DERP relay server.", value: true, - group: { - name: "Networking", - }, + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "DERP Server Region Name", - usage: "Region name that for the embedded DERP server.", + description: "Region name that for the embedded DERP server.", value: "aws-east", - group: { - name: "Networking", - }, + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "DERP Server STUN Addresses", - usage: + description: "Addresses for STUN servers to establish P2P connections. Set empty to disable P2P connections.", value: ["stun.l.google.com:19302", "stun.l.google.com:19301"], - group: { - name: "Networking", - }, + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "DERP Config URL", - usage: + description: "URL to fetch a DERP mapping on startup. See: https://tailscale.com/kb/1118/custom-derp-servers/", value: "https://coder.com", - group: { - name: "Networking", - }, + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "Wildcard Access URL", + description: "", value: "https://coder.com", - group: { - name: "Networking", - }, + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, ], }, -} as ComponentMeta; +}; + +export default meta; +type Story = StoryObj; -const Template: Story = (args) => ( - -); -export const Page = Template.bind({}); +export const Page: Story = {}; diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx index 4ccbbdcba6204..1e3521e9bfbcd 100644 --- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx @@ -1,11 +1,14 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { DeploymentOption } from "api/types"; -import { - SecuritySettingsPageView, - SecuritySettingsPageViewProps, -} from "./SecuritySettingsPageView"; +import { DeploymentGroup, DeploymentOption } from "api/types"; +import { SecuritySettingsPageView } from "./SecuritySettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const group: DeploymentGroup = { + name: "Networking", + description: "", + children: [] as DeploymentGroup[], +}; + +const meta: Meta = { title: "pages/SecuritySettingsPageView", component: SecuritySettingsPageView, args: { @@ -14,50 +17,62 @@ export default { name: "SSH Keygen Algorithm", description: "something", value: "1234", + group, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "Secure Auth Cookie", description: "something", value: "1234", + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "Disable Owner Workspace Access", description: "something", value: false, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, { name: "TLS Version", description: "something", value: ["something"], - group: { - name: "TLS", - }, + group: { ...group, name: "TLS" }, + flag: "derp", + flag_shorthand: "d", + hidden: false, }, ], featureAuditLogEnabled: true, featureBrowserOnlyEnabled: true, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); -export const Page = Template.bind({}); +export default meta; +type Story = StoryObj; -export const NoTLS = Template.bind({}); -NoTLS.args = { - options: [ - { - name: "SSH Keygen Algorithm", - value: "1234", - } as DeploymentOption, - { - name: "Disable Owner Workspace Access", - value: false, - } as DeploymentOption, - { - name: "Secure Auth Cookie", - value: "1234", - } as DeploymentOption, - ], +export const Page: Story = {}; + +export const NoTLS = { + args: { + options: [ + { + name: "SSH Keygen Algorithm", + value: "1234", + } as DeploymentOption, + { + name: "Disable Owner Workspace Access", + value: false, + } as DeploymentOption, + { + name: "Secure Auth Cookie", + value: "1234", + } as DeploymentOption, + ], + }, }; diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx index d0047d6dd3cde..892f1a6e7257f 100644 --- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx @@ -1,10 +1,20 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { - UserAuthSettingsPageView, - UserAuthSettingsPageViewProps, -} from "./UserAuthSettingsPageView"; +import { DeploymentGroup } from "api/types"; +import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const oidcGroup: DeploymentGroup = { + name: "OIDC", + description: "", + children: [] as DeploymentGroup[], +}; + +const ghGroup: DeploymentGroup = { + name: "GitHub", + description: "", + children: [] as DeploymentGroup[], +}; + +const meta: Meta = { title: "pages/UserAuthSettingsPageView", component: UserAuthSettingsPageView, args: { @@ -13,91 +23,101 @@ export default { name: "OIDC Client ID", description: "Client ID to use for Login with OIDC.", value: "1234", - group: { - name: "OIDC", - }, + group: oidcGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OIDC Allow Signups", description: "Whether new users can sign up with OIDC.", value: true, - group: { - name: "OIDC", - }, + group: oidcGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OIDC Email Domain", description: "Email domains that clients logging in with OIDC must match.", value: "@coder.com", - group: { - name: "OIDC", - }, + group: oidcGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OIDC Issuer URL", description: "Issuer URL to use for Login with OIDC.", value: "https://coder.com", - group: { - name: "OIDC", - }, + group: oidcGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OIDC Scopes", description: "Scopes to grant when authenticating with OIDC.", value: ["idk"], - group: { - name: "OIDC", - }, + group: oidcGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OAuth2 GitHub Client ID", description: "Client ID for Login with GitHub.", value: "1224", - group: { - name: "GitHub", - }, + group: ghGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OAuth2 GitHub Allow Signups", description: "Whether new users can sign up with GitHub.", value: true, - group: { - name: "GitHub", - }, + group: ghGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OAuth2 GitHub Enterprise Base URL", description: "Base URL of a GitHub Enterprise deployment to use for Login with GitHub.", value: "https://google.com", - group: { - name: "GitHub", - }, + group: ghGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OAuth2 GitHub Allowed Orgs", description: "Organizations the user must be a member of to Login with GitHub.", value: true, - group: { - name: "GitHub", - }, + group: ghGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, { name: "OAuth2 GitHub Allowed Teams", description: "Teams inside organizations the user must be a member of to Login with GitHub. Structured as: /.", value: true, - group: { - name: "GitHub", - }, + group: ghGroup, + flag: "oidc", + flag_shorthand: "o", + hidden: false, }, ], }, -} as ComponentMeta; +}; + +export default meta; +type Story = StoryObj; -const Template: Story = (args) => ( - -); -export const Page = Template.bind({}); +export const Page: Story = {}; diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx index eb75881df4323..eb67b9c109578 100644 --- a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx +++ b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx @@ -1,17 +1,12 @@ -import { Story } from "@storybook/react"; -import { - CreateGroupPageView, - CreateGroupPageViewProps, -} from "./CreateGroupPageView"; +import { CreateGroupPageView } from "./CreateGroupPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/CreateGroupPageView", component: CreateGroupPageView, }; -const Template: Story = ( - args: CreateGroupPageViewProps, -) => ; +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = {}; +export const Example: Story = {}; diff --git a/site/src/pages/GroupsPage/GroupsPageView.stories.tsx b/site/src/pages/GroupsPage/GroupsPageView.stories.tsx index 030934180eba1..45330e3f31906 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.stories.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.stories.tsx @@ -1,47 +1,51 @@ -import { Story } from "@storybook/react"; import { MockGroup } from "testHelpers/entities"; -import { GroupsPageView, GroupsPageViewProps } from "./GroupsPageView"; +import { GroupsPageView } from "./GroupsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/GroupsPageView", component: GroupsPageView, }; -const Template: Story = (args: GroupsPageViewProps) => ( - -); +export default meta; +type Story = StoryObj; -export const NotEnabled = Template.bind({}); -NotEnabled.args = { - groups: [MockGroup], - canCreateGroup: true, - isTemplateRBACEnabled: false, +export const NotEnabled: Story = { + args: { + groups: [MockGroup], + canCreateGroup: true, + isTemplateRBACEnabled: false, + }, }; -export const WithGroups = Template.bind({}); -WithGroups.args = { - groups: [MockGroup], - canCreateGroup: true, - isTemplateRBACEnabled: true, +export const WithGroups: Story = { + args: { + groups: [MockGroup], + canCreateGroup: true, + isTemplateRBACEnabled: true, + }, }; -export const WithDisplayGroup = Template.bind({}); -WithGroups.args = { - groups: [{ ...MockGroup, name: "front-end" }], - canCreateGroup: true, - isTemplateRBACEnabled: true, +export const WithDisplayGroup: Story = { + args: { + groups: [{ ...MockGroup, name: "front-end" }], + canCreateGroup: true, + isTemplateRBACEnabled: true, + }, }; -export const EmptyGroup = Template.bind({}); -EmptyGroup.args = { - groups: [], - canCreateGroup: false, - isTemplateRBACEnabled: true, +export const EmptyGroup: Story = { + args: { + groups: [], + canCreateGroup: false, + isTemplateRBACEnabled: true, + }, }; -export const EmptyGroupWithPermission = Template.bind({}); -EmptyGroupWithPermission.args = { - groups: [], - canCreateGroup: true, - isTemplateRBACEnabled: true, +export const EmptyGroupWithPermission: Story = { + args: { + groups: [], + canCreateGroup: true, + isTemplateRBACEnabled: true, + }, }; diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx index 244fa526af8f9..4e0c8063bfbcd 100644 --- a/site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx +++ b/site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx @@ -1,21 +1,18 @@ -import { Story } from "@storybook/react"; import { MockGroup } from "testHelpers/entities"; -import { - SettingsGroupPageView, - SettingsGroupPageViewProps, -} from "./SettingsGroupPageView"; +import { SettingsGroupPageView } from "./SettingsGroupPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/SettingsGroupPageView", component: SettingsGroupPageView, }; -const Template: Story = ( - args: SettingsGroupPageViewProps, -) => ; +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - group: MockGroup, - isLoading: false, +export const Example: Story = { + args: { + group: MockGroup, + isLoading: false, + }, }; diff --git a/site/src/pages/LoginPage/LoginPage.test.tsx b/site/src/pages/LoginPage/LoginPage.test.tsx index 0e40048c23e71..4b923b7732c42 100644 --- a/site/src/pages/LoginPage/LoginPage.test.tsx +++ b/site/src/pages/LoginPage/LoginPage.test.tsx @@ -2,13 +2,13 @@ import { fireEvent, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { rest } from "msw"; import { createMemoryRouter } from "react-router-dom"; -import { Language } from "./SignInForm/SignInForm"; +import { Language } from "./SignInForm"; import { render, renderWithRouter, waitForLoaderToBeRemoved, -} from "../../testHelpers/renderHelpers"; -import { server } from "../../testHelpers/server"; +} from "testHelpers/renderHelpers"; +import { server } from "testHelpers/server"; import { LoginPage } from "./LoginPage"; import * as TypesGen from "api/typesGenerated"; import { i18n } from "i18n"; @@ -25,14 +25,6 @@ describe("LoginPage", () => { ); }); - it("renders the sign-in form", async () => { - // When - render(); - - // Then - await screen.findByText(Language.passwordSignIn); - }); - it("shows an error message if SignIn fails", async () => { // Given const apiErrorMessage = "Something wrong happened"; @@ -59,28 +51,6 @@ describe("LoginPage", () => { expect(errorMessage).toBeDefined(); }); - it("shows github authentication when enabled", async () => { - const authMethods: TypesGen.AuthMethods = { - password: { enabled: true }, - github: { enabled: true }, - oidc: { enabled: true, signInText: "", iconUrl: "" }, - }; - - // Given - server.use( - rest.get("/api/v2/users/authmethods", async (req, res, ctx) => { - return res(ctx.status(200), ctx.json(authMethods)); - }), - ); - - // When - render(); - - // Then - expect(screen.queryByText(Language.passwordSignIn)).not.toBeInTheDocument(); - await screen.findByText(Language.githubSignIn); - }); - it("redirects to the setup page if there is no first user", async () => { // Given server.use( diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx index 0681cc3b234ae..a28baadd9507a 100644 --- a/site/src/pages/LoginPage/LoginPageView.stories.tsx +++ b/site/src/pages/LoginPage/LoginPageView.stories.tsx @@ -1,59 +1,62 @@ import { action } from "@storybook/addon-actions"; -import { ComponentMeta, Story } from "@storybook/react"; import { MockAuthMethods } from "testHelpers/entities"; -import { LoginPageView, LoginPageViewProps } from "./LoginPageView"; +import { LoginPageView } from "./LoginPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/LoginPageView", component: LoginPageView, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - isLoading: false, - onSignIn: action("onSignIn"), - context: { - data: { - authMethods: MockAuthMethods, - hasFirstUser: false, +export const Example: Story = { + args: { + isLoading: false, + onSignIn: action("onSignIn"), + context: { + data: { + authMethods: MockAuthMethods, + hasFirstUser: false, + }, }, }, }; const err = new Error("Username or email are wrong."); -export const AuthError = Template.bind({}); -AuthError.args = { - isLoading: false, - onSignIn: action("onSignIn"), - context: { - error: err, - data: { - authMethods: MockAuthMethods, - hasFirstUser: false, +export const AuthError: Story = { + args: { + isLoading: false, + onSignIn: action("onSignIn"), + context: { + error: err, + data: { + authMethods: MockAuthMethods, + hasFirstUser: false, + }, }, }, }; -export const LoadingInitialData = Template.bind({}); -LoadingInitialData.args = { - isLoading: true, - onSignIn: action("onSignIn"), - context: {}, +export const LoadingInitialData: Story = { + args: { + isLoading: true, + onSignIn: action("onSignIn"), + context: {}, + }, }; -export const SigningIn = Template.bind({}); -SigningIn.args = { - isSigningIn: true, - onSignIn: action("onSignIn"), - context: { - data: { - authMethods: MockAuthMethods, - hasFirstUser: false, +export const SigningIn: Story = { + args: { + isSigningIn: true, + onSignIn: action("onSignIn"), + context: { + data: { + authMethods: MockAuthMethods, + hasFirstUser: false, + }, }, }, }; diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index 1209224f60b3e..d724767aeb32b 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -3,7 +3,7 @@ import { FullScreenLoader } from "components/Loader/FullScreenLoader"; import { FC } from "react"; import { useLocation } from "react-router-dom"; import { AuthContext, UnauthenticatedData } from "xServices/auth/authXService"; -import { SignInForm } from "pages/LoginPage/SignInForm/SignInForm"; +import { SignInForm } from "./SignInForm"; import { retrieveRedirect } from "utils/redirect"; import { CoderIcon } from "components/Icons/CoderIcon"; diff --git a/site/src/pages/LoginPage/SignInForm/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx similarity index 97% rename from site/src/pages/LoginPage/SignInForm/OAuthSignInForm.tsx rename to site/src/pages/LoginPage/OAuthSignInForm.tsx index cc450debff921..0b8515b33e60c 100644 --- a/site/src/pages/LoginPage/SignInForm/OAuthSignInForm.tsx +++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx @@ -4,7 +4,7 @@ import GitHubIcon from "@mui/icons-material/GitHub"; import KeyIcon from "@mui/icons-material/VpnKey"; import Box from "@mui/material/Box"; import { Language } from "./SignInForm"; -import { AuthMethods } from "../../../api/typesGenerated"; +import { AuthMethods } from "api/typesGenerated"; import { FC } from "react"; import { makeStyles } from "@mui/styles"; diff --git a/site/src/pages/LoginPage/SignInForm/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx similarity index 90% rename from site/src/pages/LoginPage/SignInForm/PasswordSignInForm.tsx rename to site/src/pages/LoginPage/PasswordSignInForm.tsx index 6e919ef346cdc..3703e78044109 100644 --- a/site/src/pages/LoginPage/SignInForm/PasswordSignInForm.tsx +++ b/site/src/pages/LoginPage/PasswordSignInForm.tsx @@ -1,7 +1,7 @@ -import { Stack } from "../../../components/Stack/Stack"; +import { Stack } from "components/Stack/Stack"; import TextField from "@mui/material/TextField"; -import { getFormHelpers, onChangeTrimmed } from "../../../utils/formUtils"; -import { LoadingButton } from "../../../components/LoadingButton/LoadingButton"; +import { getFormHelpers, onChangeTrimmed } from "utils/formUtils"; +import { LoadingButton } from "components/LoadingButton/LoadingButton"; import { Language } from "./SignInForm"; import { FormikContextType, FormikTouched, useFormik } from "formik"; import * as Yup from "yup"; diff --git a/site/src/pages/LoginPage/SignInForm.stories.tsx b/site/src/pages/LoginPage/SignInForm.stories.tsx new file mode 100644 index 0000000000000..548414326eb56 --- /dev/null +++ b/site/src/pages/LoginPage/SignInForm.stories.tsx @@ -0,0 +1,94 @@ +import { mockApiError } from "testHelpers/entities"; +import { SignInForm } from "./SignInForm"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "components/SignInForm", + component: SignInForm, + args: { + isSigningIn: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const SignedOut: Story = {}; + +export const SigningIn: Story = { + args: { + isSigningIn: true, + authMethods: { + password: { enabled: true }, + github: { enabled: true }, + oidc: { enabled: false, signInText: "", iconUrl: "" }, + }, + }, +}; + +export const WithError: Story = { + args: { + error: mockApiError({ + message: "Email or password was invalid", + validations: [ + { + field: "password", + detail: "Password is invalid.", + }, + ], + }), + initialTouched: { + password: true, + }, + }, +}; + +export const WithGithub: Story = { + args: { + authMethods: { + password: { enabled: true }, + github: { enabled: true }, + oidc: { enabled: false, signInText: "", iconUrl: "" }, + }, + }, +}; + +export const WithOIDC: Story = { + args: { + authMethods: { + password: { enabled: true }, + github: { enabled: false }, + oidc: { enabled: true, signInText: "", iconUrl: "" }, + }, + }, +}; + +export const WithOIDCWithoutPassword: Story = { + args: { + authMethods: { + password: { enabled: false }, + github: { enabled: false }, + oidc: { enabled: true, signInText: "", iconUrl: "" }, + }, + }, +}; + +export const WithoutAny: Story = { + args: { + authMethods: { + password: { enabled: false }, + github: { enabled: false }, + oidc: { enabled: false, signInText: "", iconUrl: "" }, + }, + }, +}; + +export const WithGithubAndOIDC: Story = { + args: { + authMethods: { + password: { enabled: true }, + github: { enabled: true }, + oidc: { enabled: true, signInText: "", iconUrl: "" }, + }, + }, +}; diff --git a/site/src/pages/LoginPage/SignInForm/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx similarity index 97% rename from site/src/pages/LoginPage/SignInForm/SignInForm.tsx rename to site/src/pages/LoginPage/SignInForm.tsx index 6801cee1c4c51..434940c52f200 100644 --- a/site/src/pages/LoginPage/SignInForm/SignInForm.tsx +++ b/site/src/pages/LoginPage/SignInForm.tsx @@ -1,9 +1,9 @@ import { makeStyles } from "@mui/styles"; import { FormikTouched } from "formik"; import { FC, useState } from "react"; -import { AuthMethods } from "../../../api/typesGenerated"; +import { AuthMethods } from "api/typesGenerated"; import { useTranslation } from "react-i18next"; -import { Maybe } from "../../../components/Conditionals/Maybe"; +import { Maybe } from "components/Conditionals/Maybe"; import { PasswordSignInForm } from "./PasswordSignInForm"; import { OAuthSignInForm } from "./OAuthSignInForm"; import { BuiltInAuthFormValues } from "./SignInForm.types"; diff --git a/site/src/pages/LoginPage/SignInForm/SignInForm.types.ts b/site/src/pages/LoginPage/SignInForm.types.ts similarity index 100% rename from site/src/pages/LoginPage/SignInForm/SignInForm.types.ts rename to site/src/pages/LoginPage/SignInForm.types.ts diff --git a/site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx b/site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx deleted file mode 100644 index 16dd0f0823c48..0000000000000 --- a/site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Story } from "@storybook/react"; -import { mockApiError } from "testHelpers/entities"; -import { SignInForm, SignInFormProps } from "./SignInForm"; - -export default { - title: "components/SignInForm", - component: SignInForm, - argTypes: { - isLoading: "boolean", - onSubmit: { action: "Submit" }, - }, -}; - -const Template: Story = (args: SignInFormProps) => ( - -); - -export const SignedOut = Template.bind({}); -SignedOut.args = { - isSigningIn: false, - onSubmit: () => { - return Promise.resolve(); - }, -}; - -export const SigningIn = Template.bind({}); -SigningIn.args = { - ...SignedOut.args, - isSigningIn: true, - authMethods: { - password: { enabled: true }, - github: { enabled: true }, - oidc: { enabled: false, signInText: "", iconUrl: "" }, - }, -}; - -export const WithError = Template.bind({}); -WithError.args = { - ...SignedOut.args, - error: mockApiError({ - message: "Email or password was invalid", - validations: [ - { - field: "password", - detail: "Password is invalid.", - }, - ], - }), - initialTouched: { - password: true, - }, -}; - -export const WithGithub = Template.bind({}); -WithGithub.args = { - ...SignedOut.args, - authMethods: { - password: { enabled: true }, - github: { enabled: true }, - oidc: { enabled: false, signInText: "", iconUrl: "" }, - }, -}; - -export const WithOIDC = Template.bind({}); -WithOIDC.args = { - ...SignedOut.args, - authMethods: { - password: { enabled: true }, - github: { enabled: false }, - oidc: { enabled: true, signInText: "", iconUrl: "" }, - }, -}; - -export const WithOIDCWithoutPassword = Template.bind({}); -WithOIDCWithoutPassword.args = { - ...SignedOut.args, - authMethods: { - password: { enabled: false }, - github: { enabled: false }, - oidc: { enabled: true, signInText: "", iconUrl: "" }, - }, -}; - -export const WithoutAny = Template.bind({}); -WithoutAny.args = { - ...SignedOut.args, - authMethods: { - password: { enabled: false }, - github: { enabled: false }, - oidc: { enabled: false, signInText: "", iconUrl: "" }, - }, -}; - -export const WithGithubAndOIDC = Template.bind({}); -WithGithubAndOIDC.args = { - ...SignedOut.args, - authMethods: { - password: { enabled: true }, - github: { enabled: true }, - oidc: { enabled: true, signInText: "", iconUrl: "" }, - }, -}; diff --git a/site/src/pages/SetupPage/SetupPageView.stories.tsx b/site/src/pages/SetupPage/SetupPageView.stories.tsx index 1cbe5e03a10fc..d8bca32431573 100644 --- a/site/src/pages/SetupPage/SetupPageView.stories.tsx +++ b/site/src/pages/SetupPage/SetupPageView.stories.tsx @@ -1,32 +1,27 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; -import { SetupPageView, SetupPageViewProps } from "./SetupPageView"; +import { SetupPageView } from "./SetupPageView"; import { mockApiError } from "testHelpers/entities"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/SetupPageView", component: SetupPageView, }; -const Template: Story = (args: SetupPageViewProps) => ( - -); +export default meta; +type Story = StoryObj; -export const Ready = Template.bind({}); -Ready.args = { - onSubmit: action("submit"), -}; +export const Ready: Story = {}; -export const FormError = Template.bind({}); -FormError.args = { - onSubmit: action("submit"), - error: mockApiError({ - validations: [{ field: "username", detail: "Username taken" }], - }), +export const FormError: Story = { + args: { + error: mockApiError({ + validations: [{ field: "username", detail: "Username taken" }], + }), + }, }; -export const Loading = Template.bind({}); -Loading.args = { - onSubmit: action("submit"), - isLoading: true, +export const Loading: Story = { + args: { + isLoading: true, + }, }; diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePage.test.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePage.test.tsx deleted file mode 100644 index a196be8fd2e80..0000000000000 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePage.test.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { screen } from "@testing-library/react"; -import { MockTemplateExample } from "testHelpers/entities"; -import { - renderWithAuth, - waitForLoaderToBeRemoved, -} from "testHelpers/renderHelpers"; -import StarterTemplatePage from "./StarterTemplatePage"; - -jest.mock("remark-gfm", () => jest.fn()); - -describe("StarterTemplatePage", () => { - it("shows the starter template", async () => { - renderWithAuth(, { - route: `/starter-templates/${MockTemplateExample.id}`, - path: "/starter-templates/:exampleId", - }); - await waitForLoaderToBeRemoved(); - expect(screen.getByText(MockTemplateExample.name)).toBeInTheDocument(); - }); -}); diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx index ef9489fe79a78..4434ab57e6df2 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx @@ -1,41 +1,39 @@ -import { Story } from "@storybook/react"; import { mockApiError, MockOrganization, MockTemplateExample, } from "testHelpers/entities"; -import { - StarterTemplatePageView, - StarterTemplatePageViewProps, -} from "./StarterTemplatePageView"; +import { StarterTemplatePageView } from "./StarterTemplatePageView"; + +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/StarterTemplatePageView", component: StarterTemplatePageView, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); -Default.args = { - context: { - exampleId: MockTemplateExample.id, - organizationId: MockOrganization.id, - error: undefined, - starterTemplate: MockTemplateExample, +export const Default: Story = { + args: { + context: { + exampleId: MockTemplateExample.id, + organizationId: MockOrganization.id, + error: undefined, + starterTemplate: MockTemplateExample, + }, }, }; - -export const Error = Template.bind({}); -Error.args = { - context: { - exampleId: MockTemplateExample.id, - organizationId: MockOrganization.id, - error: mockApiError({ - message: `Example ${MockTemplateExample.id} not found.`, - }), - starterTemplate: undefined, +export const Error: Story = { + args: { + context: { + exampleId: MockTemplateExample.id, + organizationId: MockOrganization.id, + error: mockApiError({ + message: `Example ${MockTemplateExample.id} not found.`, + }), + starterTemplate: undefined, + }, }, }; diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx deleted file mode 100644 index 27ce03f488607..0000000000000 --- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { screen } from "@testing-library/react"; -import { - MockTemplateExample, - MockTemplateExample2, -} from "testHelpers/entities"; -import { - renderWithAuth, - waitForLoaderToBeRemoved, -} from "testHelpers/renderHelpers"; -import StarterTemplatesPage from "./StarterTemplatesPage"; - -describe("StarterTemplatesPage", () => { - it("shows the starter template", async () => { - renderWithAuth(, { - route: `/starter-templates`, - path: "/starter-templates", - }); - await waitForLoaderToBeRemoved(); - expect(screen.getByText(MockTemplateExample.name)).toBeInTheDocument(); - expect(screen.getByText(MockTemplateExample2.name)).toBeInTheDocument(); - }); -}); diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx index 98efedfabc94a..e5c67ca2f5bbd 100644 --- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx +++ b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx @@ -1,4 +1,3 @@ -import { Story } from "@storybook/react"; import { mockApiError, MockOrganization, @@ -6,39 +5,38 @@ import { MockTemplateExample2, } from "testHelpers/entities"; import { getTemplatesByTag } from "utils/starterTemplates"; -import { - StarterTemplatesPageView, - StarterTemplatesPageViewProps, -} from "./StarterTemplatesPageView"; +import { StarterTemplatesPageView } from "./StarterTemplatesPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/StarterTemplatesPageView", component: StarterTemplatesPageView, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); -Default.args = { - context: { - organizationId: MockOrganization.id, - error: undefined, - starterTemplatesByTag: getTemplatesByTag([ - MockTemplateExample, - MockTemplateExample2, - ]), +export const Default: Story = { + args: { + context: { + organizationId: MockOrganization.id, + error: undefined, + starterTemplatesByTag: getTemplatesByTag([ + MockTemplateExample, + MockTemplateExample2, + ]), + }, }, }; -export const Error = Template.bind({}); -Error.args = { - context: { - organizationId: MockOrganization.id, - error: mockApiError({ - message: "Error on loading the template examples", - }), - starterTemplatesByTag: undefined, +export const Error: Story = { + args: { + context: { + organizationId: MockOrganization.id, + error: mockApiError({ + message: "Error on loading the template examples", + }), + starterTemplatesByTag: undefined, + }, }, }; diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx deleted file mode 100644 index 4e50feac9425a..0000000000000 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { screen } from "@testing-library/react"; -import { TemplateLayout } from "components/TemplateLayout/TemplateLayout"; -import { ResizeObserver } from "resize-observer"; -import { renderWithAuth } from "testHelpers/renderHelpers"; -import TemplateDocsPage from "./TemplateDocsPage"; - -jest.mock("remark-gfm", () => jest.fn()); - -const TEMPLATE_NAME = "coder-ts"; - -Object.defineProperty(window, "ResizeObserver", { - value: ResizeObserver, -}); - -const renderPage = () => - renderWithAuth( - - - , - { - route: `/templates/${TEMPLATE_NAME}/docs`, - path: "/templates/:template/docs", - }, - ); - -describe("TemplateSummaryPage", () => { - it("shows the template readme", async () => { - renderPage(); - await screen.findByTestId("markdown"); - }); -}); diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx index cba94c31077e3..45ef93e351ca1 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.stories.tsx @@ -1,57 +1,61 @@ -import { Story } from "@storybook/react"; import { MockTemplate, MockTemplateVersion } from "testHelpers/entities"; -import { TemplateStats, TemplateStatsProps } from "./TemplateStats"; +import { TemplateStats } from "./TemplateStats"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/TemplateStats", component: TemplateStats, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - template: MockTemplate, - activeVersion: MockTemplateVersion, +export const Example: Story = { + args: { + template: MockTemplate, + activeVersion: MockTemplateVersion, + }, }; -export const UsedByMany = Template.bind({}); -UsedByMany.args = { - template: { - ...MockTemplate, - active_user_count: 15, +export const UsedByMany: Story = { + args: { + template: { + ...MockTemplate, + active_user_count: 15, + }, + activeVersion: MockTemplateVersion, }, - activeVersion: MockTemplateVersion, }; -export const ActiveUsersNotLoaded = Template.bind({}); -ActiveUsersNotLoaded.args = { - template: { - ...MockTemplate, - active_user_count: -1, +export const ActiveUsersNotLoaded: Story = { + args: { + template: { + ...MockTemplate, + active_user_count: -1, + }, + activeVersion: MockTemplateVersion, }, - activeVersion: MockTemplateVersion, }; -export const LongTemplateVersion = Template.bind({}); -LongTemplateVersion.args = { - template: MockTemplate, - activeVersion: { - ...MockTemplateVersion, - name: "thisisareallyreallylongnamefortesting", +export const LongTemplateVersion: Story = { + args: { + template: MockTemplate, + activeVersion: { + ...MockTemplateVersion, + name: "thisisareallyreallylongnamefortesting", + }, + }, + parameters: { + chromatic: { viewports: [960] }, }, -}; -LongTemplateVersion.parameters = { - chromatic: { viewports: [960] }, }; -export const SmallViewport = Template.bind({}); -SmallViewport.args = { - template: MockTemplate, - activeVersion: MockTemplateVersion, -}; -SmallViewport.parameters = { - chromatic: { viewports: [600] }, +export const SmallViewport: Story = { + args: { + template: MockTemplate, + activeVersion: MockTemplateVersion, + }, + parameters: { + chromatic: { viewports: [600] }, + }, }; diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx deleted file mode 100644 index 4ae508eda7008..0000000000000 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { screen } from "@testing-library/react"; -import { TemplateLayout } from "components/TemplateLayout/TemplateLayout"; -import { rest } from "msw"; -import { ResizeObserver } from "resize-observer"; -import { - MockTemplate, - MockTemplateVersion, - MockMemberPermissions, -} from "testHelpers/entities"; -import { renderWithAuth } from "testHelpers/renderHelpers"; -import { server } from "testHelpers/server"; -import * as CreateDayString from "utils/createDayString"; -import { TemplateSummaryPage } from "./TemplateSummaryPage"; - -jest.mock("remark-gfm", () => jest.fn()); - -Object.defineProperty(window, "ResizeObserver", { - value: ResizeObserver, -}); - -const renderPage = () => - renderWithAuth( - - - , - { - route: `/templates/${MockTemplate.id}`, - path: "/templates/:template", - }, - ); - -describe("TemplateSummaryPage", () => { - it("shows the template name and resources", async () => { - // Mocking the dayjs module within the createDayString file - const mock = jest.spyOn(CreateDayString, "createDayString"); - mock.mockImplementation(() => "a minute ago"); - - renderPage(); - await screen.findByText(MockTemplate.display_name); - screen.queryAllByText(`${MockTemplateVersion.name}`).length; - }); - it("does not allow a member to delete a template", () => { - // get member-level permissions - server.use( - rest.post("/api/v2/authcheck", async (req, res, ctx) => { - return res(ctx.status(200), ctx.json(MockMemberPermissions)); - }), - ); - renderPage(); - const dropdownButton = screen.queryByLabelText("open-dropdown"); - expect(dropdownButton).toBe(null); - }); -}); diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.stories.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.stories.tsx index 348d4ec8e09fe..2d55b2f0068b9 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.stories.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.stories.tsx @@ -1,48 +1,50 @@ import { action } from "@storybook/addon-actions"; -import { ComponentMeta, Story } from "@storybook/react"; import { MockTemplateVersion } from "testHelpers/entities"; -import { VersionsTable, VersionsTableProps } from "./VersionsTable"; +import { VersionsTable } from "./VersionsTable"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/VersionsTable", component: VersionsTable, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - activeVersionId: MockTemplateVersion.id, - versions: [ - { - ...MockTemplateVersion, - id: "2", - name: "test-template-version-2", - created_at: "2022-05-18T18:39:01.382927298Z", - }, - MockTemplateVersion, - ], - onPromoteClick: undefined, +export const Example: Story = { + args: { + activeVersionId: MockTemplateVersion.id, + versions: [ + { + ...MockTemplateVersion, + id: "2", + name: "test-template-version-2", + created_at: "2022-05-18T18:39:01.382927298Z", + }, + MockTemplateVersion, + ], + onPromoteClick: undefined, + }, }; -export const CanPromote = Template.bind({}); -CanPromote.args = { - activeVersionId: MockTemplateVersion.id, - onPromoteClick: action("onPromoteClick"), - versions: [ - { - ...MockTemplateVersion, - id: "2", - name: "test-template-version-2", - created_at: "2022-05-18T18:39:01.382927298Z", - }, - MockTemplateVersion, - ], +export const CanPromote: Story = { + args: { + activeVersionId: MockTemplateVersion.id, + onPromoteClick: action("onPromoteClick"), + versions: [ + { + ...MockTemplateVersion, + id: "2", + name: "test-template-version-2", + created_at: "2022-05-18T18:39:01.382927298Z", + }, + MockTemplateVersion, + ], + }, }; -export const Empty = Template.bind({}); -Empty.args = { - versions: [], +export const Empty: Story = { + args: { + versions: [], + }, }; diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx index 676eb7201e89c..c15d2fae6b633 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.stories.tsx @@ -1,40 +1,33 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; import { mockApiError, MockTemplate } from "testHelpers/entities"; -import { - TemplateSettingsPageView, - TemplateSettingsPageViewProps, -} from "./TemplateSettingsPageView"; +import { TemplateSettingsPageView } from "./TemplateSettingsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/TemplateSettingsPageView", component: TemplateSettingsPageView, args: { template: MockTemplate, - onSubmit: action("onSubmit"), - onCancel: action("cancel"), }, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = {}; +export const Example: Story = {}; -export const SaveTemplateSettingsError = Template.bind({}); -SaveTemplateSettingsError.args = { - submitError: mockApiError({ - message: 'Template "test" already exists.', - validations: [ - { - field: "name", - detail: "This value is already in use and should be unique.", - }, - ], - }), - initialTouched: { - allow_user_cancel_workspace_jobs: true, +export const SaveTemplateSettingsError: Story = { + args: { + submitError: mockApiError({ + message: 'Template "test" already exists.', + validations: [ + { + field: "name", + detail: "This value is already in use and should be unique.", + }, + ], + }), + initialTouched: { + allow_user_cancel_workspace_jobs: true, + }, }, }; diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx index 643c09ae1fb31..183e844729f07 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx @@ -1,38 +1,37 @@ -import { Story } from "@storybook/react"; import { MockOrganization, MockTemplateACL, MockTemplateACLEmpty, } from "testHelpers/entities"; -import { - TemplatePermissionsPageView, - TemplatePermissionsPageViewProps, -} from "./TemplatePermissionsPageView"; +import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/TemplatePermissionsPageView", component: TemplatePermissionsPageView, }; -const Template: Story = ( - args: TemplatePermissionsPageViewProps, -) => ; +export default meta; +type Story = StoryObj; -export const Empty = Template.bind({}); -Empty.args = { - templateACL: MockTemplateACLEmpty, - canUpdatePermissions: false, +export const Empty: Story = { + args: { + templateACL: MockTemplateACLEmpty, + canUpdatePermissions: false, + }, }; -export const WithTemplateACL = Template.bind({}); -WithTemplateACL.args = { - templateACL: MockTemplateACL, - canUpdatePermissions: false, +export const WithTemplateACL: Story = { + args: { + templateACL: MockTemplateACL, + canUpdatePermissions: false, + }, }; -export const WithUpdatePermissions = Template.bind({}); -WithUpdatePermissions.args = { - templateACL: MockTemplateACL, - canUpdatePermissions: true, - organizationId: MockOrganization.id, +export const WithUpdatePermissions: Story = { + args: { + templateACL: MockTemplateACL, + canUpdatePermissions: true, + organizationId: MockOrganization.id, + }, }; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/AutostopRequirementHelperText.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText.tsx similarity index 100% rename from site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/AutostopRequirementHelperText.tsx rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText.tsx diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/TTLHelperText.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TTLHelperText.tsx similarity index 100% rename from site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/TTLHelperText.tsx rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TTLHelperText.tsx diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx similarity index 100% rename from site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/TemplateScheduleForm.tsx rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.test.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.test.tsx index c5be20870d3a0..3148ab272b2fe 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.test.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.test.tsx @@ -10,10 +10,7 @@ import { renderWithTemplateSettingsLayout, waitForLoaderToBeRemoved, } from "testHelpers/renderHelpers"; -import { - TemplateScheduleFormValues, - getValidationSchema, -} from "./TemplateScheduleForm/formHelpers"; +import { TemplateScheduleFormValues, getValidationSchema } from "./formHelpers"; import TemplateSchedulePage from "./TemplateSchedulePage"; import i18next from "i18next"; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx index 1ad43692aeb16..bf29c42c3fbad 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx @@ -1,6 +1,6 @@ import { Template, UpdateTemplateMeta } from "api/typesGenerated"; import { ComponentProps, FC } from "react"; -import { TemplateScheduleForm } from "./TemplateScheduleForm/TemplateScheduleForm"; +import { TemplateScheduleForm } from "./TemplateScheduleForm"; import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; import { makeStyles } from "@mui/styles"; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/formHelpers.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/formHelpers.tsx similarity index 100% rename from site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/formHelpers.tsx rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/formHelpers.tsx diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/useWorkspacesToBeDeleted.ts b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts similarity index 100% rename from site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/useWorkspacesToBeDeleted.ts rename to site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx index f5ef6724a0be6..dfd0baf83e2b6 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx @@ -1,5 +1,3 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; import { mockApiError, MockTemplateVersion, @@ -9,87 +7,77 @@ import { MockTemplateVersionVariable4, MockTemplateVersionVariable5, } from "testHelpers/entities"; -import { - TemplateVariablesPageView, - TemplateVariablesPageViewProps, -} from "./TemplateVariablesPageView"; +import { TemplateVariablesPageView } from "./TemplateVariablesPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/TemplateVariablesPageView", component: TemplateVariablesPageView, }; -const TemplateVariables: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Loading = TemplateVariables.bind({}); -Loading.args = { - onSubmit: action("onSubmit"), - onCancel: action("cancel"), -}; +export const Loading: Story = {}; -export const Basic = TemplateVariables.bind({}); -Basic.args = { - templateVersion: MockTemplateVersion, - templateVariables: [ - MockTemplateVersionVariable1, - MockTemplateVersionVariable2, - MockTemplateVersionVariable3, - MockTemplateVersionVariable4, - ], - onSubmit: action("onSubmit"), - onCancel: action("cancel"), +export const Basic: Story = { + args: { + templateVersion: MockTemplateVersion, + templateVariables: [ + MockTemplateVersionVariable1, + MockTemplateVersionVariable2, + MockTemplateVersionVariable3, + MockTemplateVersionVariable4, + ], + }, }; // This example isn't fully supported. As "user_variable_values" is an array, // FormikTouched can't properly handle this. // See: https://github.com/jaredpalmer/formik/issues/2022 -export const RequiredVariable = TemplateVariables.bind({}); -RequiredVariable.args = { - templateVersion: MockTemplateVersion, - templateVariables: [ - MockTemplateVersionVariable4, - MockTemplateVersionVariable5, - ], - onSubmit: action("onSubmit"), - onCancel: action("cancel"), - initialTouched: { - user_variable_values: true, +export const RequiredVariable: Story = { + args: { + templateVersion: MockTemplateVersion, + templateVariables: [ + MockTemplateVersionVariable4, + MockTemplateVersionVariable5, + ], + + initialTouched: { + user_variable_values: true, + }, }, }; -export const WithUpdateTemplateError = TemplateVariables.bind({}); -WithUpdateTemplateError.args = { - templateVersion: MockTemplateVersion, - templateVariables: [ - MockTemplateVersionVariable1, - MockTemplateVersionVariable2, - MockTemplateVersionVariable3, - MockTemplateVersionVariable4, - ], - errors: { - updateTemplateError: mockApiError({ - message: "Something went wrong.", - }), +export const WithUpdateTemplateError: Story = { + args: { + templateVersion: MockTemplateVersion, + templateVariables: [ + MockTemplateVersionVariable1, + MockTemplateVersionVariable2, + MockTemplateVersionVariable3, + MockTemplateVersionVariable4, + ], + errors: { + updateTemplateError: mockApiError({ + message: "Something went wrong.", + }), + }, }, - onSubmit: action("onSubmit"), - onCancel: action("cancel"), }; -export const WithJobError = TemplateVariables.bind({}); -WithJobError.args = { - templateVersion: MockTemplateVersion, - templateVariables: [ - MockTemplateVersionVariable1, - MockTemplateVersionVariable2, - MockTemplateVersionVariable3, - MockTemplateVersionVariable4, - ], - errors: { - jobError: - "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1", +export const WithJobError: Story = { + args: { + templateVersion: MockTemplateVersion, + templateVariables: [ + MockTemplateVersionVariable1, + MockTemplateVersionVariable2, + MockTemplateVersionVariable3, + MockTemplateVersionVariable4, + ], + errors: { + jobError: + "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1", + }, }, - onSubmit: action("onSubmit"), - onCancel: action("cancel"), }; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/FileDialog.tsx b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/FileDialog.tsx rename to site/src/pages/TemplateVersionEditorPage/FileDialog.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/FileTreeView.tsx rename to site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx rename to site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/MonacoEditor.tsx b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/MonacoEditor.tsx rename to site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/PublishTemplateVersionDialog.tsx rename to site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionEditor.stories.tsx rename to site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionEditor.tsx rename to site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx index 62d5a6a2ff747..5eccbcdc75dd4 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx @@ -7,7 +7,7 @@ import { MockTemplateVersion, MockWorkspaceBuildLogs, } from "testHelpers/entities"; -import { Language } from "./TemplateVersionEditor/PublishTemplateVersionDialog"; +import { Language } from "./PublishTemplateVersionDialog"; // For some reason this component in Jest is throwing a MUI style warning so, // since we don't need it for this test, we can mock it out diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index 29a0944cd42ca..6065f61bdb833 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -1,5 +1,5 @@ import { useMachine } from "@xstate/react"; -import { TemplateVersionEditor } from "pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionEditor"; +import { TemplateVersionEditor } from "./TemplateVersionEditor"; import { useOrganizationId } from "hooks/useOrganizationId"; import { usePermissions } from "hooks/usePermissions"; import { FC } from "react"; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx similarity index 100% rename from site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor/TemplateVersionStatusBadge.tsx rename to site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx index 95893f803b079..4c945bc3f3297 100644 --- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx +++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx @@ -1,5 +1,4 @@ import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; import { UseTabResult } from "hooks/useTab"; import { mockApiError, @@ -11,15 +10,7 @@ import { TemplateVersionPageView, TemplateVersionPageViewProps, } from "./TemplateVersionPageView"; - -export default { - title: "pages/TemplateVersionPageView", - component: TemplateVersionPageView, -}; - -const Template: Story = (args) => ( - -); +import type { Meta, StoryObj } from "@storybook/react"; const tab: UseTabResult = { value: "0", @@ -53,18 +44,26 @@ const defaultArgs: TemplateVersionPageViewProps = { }, }; -export const Default = Template.bind({}); -Default.args = defaultArgs; +const meta: Meta = { + title: "pages/TemplateVersionPageView", + component: TemplateVersionPageView, + args: defaultArgs, +}; + +export default meta; +type Story = StoryObj; -export const Error = Template.bind({}); -Error.args = { - ...defaultArgs, - context: { - ...defaultArgs.context, - currentVersion: undefined, - currentFiles: undefined, - error: mockApiError({ - message: "Error on loading the template version", - }), +export const Default: Story = {}; + +export const Error: Story = { + args: { + context: { + ...defaultArgs.context, + currentVersion: undefined, + currentFiles: undefined, + error: mockApiError({ + message: "Error on loading the template version", + }), + }, }, }; diff --git a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx b/site/src/pages/TemplatesPage/TemplatesPage.test.tsx deleted file mode 100644 index 2efd6259ab716..0000000000000 --- a/site/src/pages/TemplatesPage/TemplatesPage.test.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { screen } from "@testing-library/react"; -import { rest } from "msw"; -import * as CreateDayString from "utils/createDayString"; -import { MockTemplate } from "../../testHelpers/entities"; -import { renderWithAuth } from "../../testHelpers/renderHelpers"; -import { server } from "../../testHelpers/server"; -import { TemplatesPage } from "./TemplatesPage"; -import i18next from "i18next"; - -const { t } = i18next; - -describe("TemplatesPage", () => { - beforeEach(() => { - // Mocking the dayjs module within the createDayString file - const mock = jest.spyOn(CreateDayString, "createDayString"); - mock.mockImplementation(() => "a minute ago"); - }); - - it("renders an empty templates page", async () => { - // Given - server.use( - rest.get( - "/api/v2/organizations/:organizationId/templates", - (req, res, ctx) => { - return res(ctx.status(200), ctx.json([])); - }, - ), - rest.post("/api/v2/authcheck", (req, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - createTemplates: true, - }), - ); - }), - ); - - // When - renderWithAuth(, { - route: `/templates`, - path: "/templates", - }); - - // Then - const emptyMessage = t("empty.message", { - ns: "templatesPage", - }); - await screen.findByText(emptyMessage); - }); - - it("renders a filled templates page", async () => { - // When - renderWithAuth(, { - route: `/templates`, - path: "/templates", - }); - - // Then - await screen.findByText(MockTemplate.display_name); - }); - - it("shows empty view without permissions to create", async () => { - server.use( - rest.get( - "/api/v2/organizations/:organizationId/templates", - (req, res, ctx) => { - return res(ctx.status(200), ctx.json([])); - }, - ), - rest.post("/api/v2/authcheck", (req, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - createTemplates: false, - }), - ); - }), - ); - - // When - renderWithAuth(, { - route: `/templates`, - path: "/templates", - }); - // Then - const emptyMessage = t("empty.descriptionWithoutPermissions", { - ns: "templatesPage", - }); - await screen.findByText(emptyMessage); - }); -}); diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index 9697c72387350..a54a43497b64b 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -1,4 +1,3 @@ -import { ComponentMeta, Story } from "@storybook/react"; import { mockApiError, MockOrganization, @@ -7,92 +6,97 @@ import { MockTemplateExample, MockTemplateExample2, } from "../../testHelpers/entities"; -import { TemplatesPageView, TemplatesPageViewProps } from "./TemplatesPageView"; +import { TemplatesPageView } from "./TemplatesPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "pages/TemplatesPageView", component: TemplatesPageView, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const WithTemplates = Template.bind({}); -WithTemplates.args = { - context: { - organizationId: MockOrganization.id, - permissions: MockPermissions, - error: undefined, - templates: [ - MockTemplate, - { - ...MockTemplate, - active_user_count: -1, - description: "🚀 Some new template that has no activity data", - icon: "/icon/goland.svg", - }, - { - ...MockTemplate, - active_user_count: 150, - description: "😮 Wow, this one has a bunch of usage!", - icon: "", - }, - { - ...MockTemplate, - description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", - }, - ], - examples: [], +export const WithTemplates: Story = { + args: { + context: { + organizationId: MockOrganization.id, + permissions: MockPermissions, + error: undefined, + templates: [ + MockTemplate, + { + ...MockTemplate, + active_user_count: -1, + description: "🚀 Some new template that has no activity data", + icon: "/icon/goland.svg", + }, + { + ...MockTemplate, + active_user_count: 150, + description: "😮 Wow, this one has a bunch of usage!", + icon: "", + }, + { + ...MockTemplate, + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + }, + ], + examples: [], + }, }, }; -export const WithTemplatesSmallViewPort = Template.bind({}); -WithTemplatesSmallViewPort.args = { - ...WithTemplates.args, -}; -WithTemplatesSmallViewPort.parameters = { - chromatic: { viewports: [600] }, +export const WithTemplatesSmallViewPort: Story = { + args: { + ...WithTemplates.args, + }, + parameters: { + chromatic: { viewports: [600] }, + }, }; -export const EmptyCanCreate = Template.bind({}); -EmptyCanCreate.args = { - context: { - organizationId: MockOrganization.id, - permissions: MockPermissions, - error: undefined, - templates: [], - examples: [MockTemplateExample, MockTemplateExample2], +export const EmptyCanCreate: Story = { + args: { + context: { + organizationId: MockOrganization.id, + permissions: MockPermissions, + error: undefined, + templates: [], + examples: [MockTemplateExample, MockTemplateExample2], + }, }, }; -export const EmptyCannotCreate = Template.bind({}); -EmptyCannotCreate.args = { - context: { - organizationId: MockOrganization.id, - permissions: { - ...MockPermissions, - createTemplates: false, +export const EmptyCannotCreate: Story = { + args: { + context: { + organizationId: MockOrganization.id, + permissions: { + ...MockPermissions, + createTemplates: false, + }, + error: undefined, + templates: [], + examples: [MockTemplateExample, MockTemplateExample2], }, - error: undefined, - templates: [], - examples: [MockTemplateExample, MockTemplateExample2], }, }; -export const Error = Template.bind({}); -Error.args = { - context: { - organizationId: MockOrganization.id, - permissions: { - ...MockPermissions, - createTemplates: false, +export const Error: Story = { + args: { + context: { + organizationId: MockOrganization.id, + permissions: { + ...MockPermissions, + createTemplates: false, + }, + error: mockApiError({ + message: "Something went wrong fetching templates.", + }), + templates: undefined, + examples: undefined, }, - error: mockApiError({ - message: "Something went wrong fetching templates.", - }), - templates: undefined, - examples: undefined, }, }; diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx index a056aa1d8f2c7..ede81278f69b2 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx @@ -1,51 +1,43 @@ -import { Story } from "@storybook/react"; -import { AccountForm, AccountFormProps } from "./AccountForm"; +import type { Meta, StoryObj } from "@storybook/react"; +import { AccountForm } from "./AccountForm"; import { mockApiError } from "testHelpers/entities"; -export default { +const meta: Meta = { title: "components/AccountForm", component: AccountForm, - argTypes: { - onSubmit: { action: "Submit" }, + args: { + email: "test-user@org.com", + isLoading: false, + initialValues: { + username: "test-user", + }, + updateProfileError: undefined, }, }; -const Template: Story = (args: AccountFormProps) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - email: "test-user@org.com", - isLoading: false, - initialValues: { - username: "test-user", - }, - updateProfileError: undefined, - onSubmit: () => { - return Promise.resolve(); - }, -}; +export const Example: Story = {}; -export const Loading = Template.bind({}); -Loading.args = { - ...Example.args, - isLoading: true, +export const Loading: Story = { + args: { + isLoading: true, + }, }; - -export const WithError = Template.bind({}); -WithError.args = { - ...Example.args, - updateProfileError: mockApiError({ - message: "Username is invalid", - validations: [ - { - field: "username", - detail: "Username is too long.", - }, - ], - }), - initialTouched: { - username: true, +export const WithError: Story = { + args: { + updateProfileError: mockApiError({ + message: "Username is invalid", + validations: [ + { + field: "username", + detail: "Username is too long.", + }, + ], + }), + initialTouched: { + username: true, + }, }, }; diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx index 469d0f3492d23..e66cdef869806 100644 --- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx +++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx @@ -1,53 +1,46 @@ -import { Story } from "@storybook/react"; import { mockApiError } from "testHelpers/entities"; -import { SSHKeysPageView, SSHKeysPageViewProps } from "./SSHKeysPageView"; +import { SSHKeysPageView } from "./SSHKeysPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { - title: "components/SSHKeysPageView", +const meta: Meta = { + title: "pages/SSHKeysPageView", component: SSHKeysPageView, - argTypes: { - onRegenerateClick: { action: "Submit" }, + args: { + isLoading: false, + hasLoaded: true, + sshKey: { + user_id: "test-user-id", + created_at: "2022-07-28T07:45:50.795918897Z", + updated_at: "2022-07-28T07:45:50.795919142Z", + public_key: "SSH-Key", + }, }, }; -const Template: Story = (args: SSHKeysPageViewProps) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - isLoading: false, - hasLoaded: true, - sshKey: { - user_id: "test-user-id", - created_at: "2022-07-28T07:45:50.795918897Z", - updated_at: "2022-07-28T07:45:50.795919142Z", - public_key: "SSH-Key", - }, - onRegenerateClick: () => { - return Promise.resolve(); - }, -}; +export const Example: Story = {}; -export const Loading = Template.bind({}); -Loading.args = { - ...Example.args, - isLoading: true, +export const Loading: Story = { + args: { + isLoading: true, + }, }; -export const WithGetSSHKeyError = Template.bind({}); -WithGetSSHKeyError.args = { - ...Example.args, - hasLoaded: false, - getSSHKeyError: mockApiError({ - message: "Failed to get SSH key", - }), +export const WithGetSSHKeyError: Story = { + args: { + hasLoaded: false, + getSSHKeyError: mockApiError({ + message: "Failed to get SSH key", + }), + }, }; -export const WithRegenerateSSHKeyError = Template.bind({}); -WithRegenerateSSHKeyError.args = { - ...Example.args, - regenerateSSHKeyError: mockApiError({ - message: "Failed to regenerate SSH key", - }), +export const WithRegenerateSSHKeyError: Story = { + args: { + regenerateSSHKeyError: mockApiError({ + message: "Failed to regenerate SSH key", + }), + }, }; diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.stories.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.stories.tsx index a53d0c205c484..53d70860ca3f7 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.stories.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SettingsSecurityForm.stories.tsx @@ -1,43 +1,40 @@ -import { Story } from "@storybook/react"; -import { SecurityForm, SecurityFormProps } from "./SettingsSecurityForm"; +import type { Meta, StoryObj } from "@storybook/react"; +import { SecurityForm } from "./SettingsSecurityForm"; import { mockApiError } from "testHelpers/entities"; -export default { - title: "components/SettingsSecurityForm", +const meta: Meta = { + title: "components/SecurityForm", component: SecurityForm, - argTypes: { - onSubmit: { action: "Submit" }, + args: { + isLoading: false, }, }; -const Template: Story = (args: SecurityFormProps) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - isLoading: false, - onSubmit: () => { - return Promise.resolve(); +export const Example: Story = { + args: { + isLoading: false, }, }; -export const Loading = Template.bind({}); -Loading.args = { - ...Example.args, - isLoading: true, +export const Loading: Story = { + args: { + isLoading: true, + }, }; -export const WithError = Template.bind({}); -WithError.args = { - ...Example.args, - error: mockApiError({ - message: "Old password is incorrect", - validations: [ - { - field: "old_password", - detail: "Old password is incorrect.", - }, - ], - }), +export const WithError: Story = { + args: { + error: mockApiError({ + message: "Old password is incorrect", + validations: [ + { + field: "old_password", + detail: "Old password is incorrect.", + }, + ], + }), + }, }; diff --git a/site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx b/site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx index b38e4deee1e99..01f4092c16756 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx @@ -1,9 +1,6 @@ -import { Story } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { MockToken } from "testHelpers/entities"; -import { - ConfirmDeleteDialog, - ConfirmDeleteDialogProps, -} from "./ConfirmDeleteDialog"; +import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient({ @@ -16,24 +13,27 @@ const queryClient = new QueryClient({ }, }); -export default { +const meta: Meta = { title: "components/ConfirmDeleteDialog", component: ConfirmDeleteDialog, + decorators: [ + (Story) => ( + + + + ), + ], }; -const Template: Story = ( - args: ConfirmDeleteDialogProps, -) => ( - - - -); +export default meta; +type Story = StoryObj; -export const DeleteDialog = Template.bind({}); -DeleteDialog.args = { - queryKey: ["tokens"], - token: MockToken, - setToken: () => { - return null; +export const DeleteDialog: Story = { + args: { + queryKey: ["tokens"], + token: MockToken, + setToken: () => { + return null; + }, }, }; diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.stories.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.stories.tsx index 5fed9d2864b40..c3fe79abb1a3e 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.stories.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.stories.tsx @@ -1,56 +1,52 @@ -import { Story } from "@storybook/react"; import { mockApiError, MockTokens } from "testHelpers/entities"; -import { TokensPageView, TokensPageViewProps } from "./TokensPageView"; +import { TokensPageView } from "./TokensPageView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { - title: "components/TokensPageView", +const meta: Meta = { + title: "pages/TokensPageView", component: TokensPageView, args: { - onRegenerateClick: { action: "Submit" }, + isLoading: false, + hasLoaded: true, + tokens: MockTokens, + onDelete: () => { + return Promise.resolve(); + }, }, }; -const Template: Story = (args: TokensPageViewProps) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - isLoading: false, - hasLoaded: true, - tokens: MockTokens, - onDelete: () => { - return Promise.resolve(); - }, -}; +export const Example: Story = {}; -export const Loading = Template.bind({}); -Loading.args = { - ...Example.args, - isLoading: true, - hasLoaded: false, +export const Loading: Story = { + args: { + isLoading: true, + hasLoaded: false, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - ...Example.args, - tokens: [], +export const Empty: Story = { + args: { + tokens: [], + }, }; -export const WithGetTokensError = Template.bind({}); -WithGetTokensError.args = { - ...Example.args, - hasLoaded: false, - getTokensError: mockApiError({ - message: "Failed to get tokens.", - }), +export const WithGetTokensError: Story = { + args: { + hasLoaded: false, + getTokensError: mockApiError({ + message: "Failed to get tokens.", + }), + }, }; -export const WithDeleteTokenError = Template.bind({}); -WithDeleteTokenError.args = { - ...Example.args, - hasLoaded: false, - deleteTokenError: mockApiError({ - message: "Failed to delete token.", - }), +export const WithDeleteTokenError: Story = { + args: { + hasLoaded: false, + deleteTokenError: mockApiError({ + message: "Failed to delete token.", + }), + }, }; diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx index 4e6d09e606907..3b758b2d03dac 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorspaceProxyView.stories.tsx @@ -1,4 +1,3 @@ -import { Story } from "@storybook/react"; import { mockApiError, MockWorkspaceProxies, @@ -6,68 +5,68 @@ import { MockHealthyWildWorkspaceProxy, MockProxyLatencies, } from "testHelpers/entities"; -import { - WorkspaceProxyView, - WorkspaceProxyViewProps, -} from "./WorkspaceProxyView"; +import { WorkspaceProxyView } from "./WorkspaceProxyView"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/WorkspaceProxyView", component: WorkspaceProxyView, - args: { - onRegenerateClick: { action: "Submit" }, - }, }; -const Template: Story = ( - args: WorkspaceProxyViewProps, -) => ; +export default meta; +type Story = StoryObj; -export const PrimarySelected = Template.bind({}); -PrimarySelected.args = { - isLoading: false, - hasLoaded: true, - proxies: MockWorkspaceProxies, - proxyLatencies: MockProxyLatencies, - preferredProxy: MockPrimaryWorkspaceProxy, +export const PrimarySelected: Story = { + args: { + isLoading: false, + hasLoaded: true, + proxies: MockWorkspaceProxies, + proxyLatencies: MockProxyLatencies, + preferredProxy: MockPrimaryWorkspaceProxy, + }, }; -export const Example = Template.bind({}); -Example.args = { - isLoading: false, - hasLoaded: true, - proxies: MockWorkspaceProxies, - proxyLatencies: MockProxyLatencies, - preferredProxy: MockHealthyWildWorkspaceProxy, +export const Example: Story = { + args: { + isLoading: false, + hasLoaded: true, + proxies: MockWorkspaceProxies, + proxyLatencies: MockProxyLatencies, + preferredProxy: MockHealthyWildWorkspaceProxy, + }, }; -export const Loading = Template.bind({}); -Loading.args = { - ...Example.args, - isLoading: true, - hasLoaded: false, +export const Loading: Story = { + args: { + ...Example.args, + isLoading: true, + hasLoaded: false, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - ...Example.args, - proxies: [], +export const Empty: Story = { + args: { + ...Example.args, + proxies: [], + }, }; -export const WithProxiesError = Template.bind({}); -WithProxiesError.args = { - ...Example.args, - hasLoaded: false, - getWorkspaceProxiesError: mockApiError({ - message: "Failed to get proxies.", - }), +export const WithProxiesError: Story = { + args: { + ...Example.args, + hasLoaded: false, + getWorkspaceProxiesError: mockApiError({ + message: "Failed to get proxies.", + }), + }, }; -export const WithSelectProxyError = Template.bind({}); -WithSelectProxyError.args = { - ...Example.args, - hasLoaded: false, - selectProxyError: mockApiError({ - message: "Failed to select proxy.", - }), +export const WithSelectProxyError: Story = { + args: { + ...Example.args, + hasLoaded: false, + selectProxyError: mockApiError({ + message: "Failed to select proxy.", + }), + }, }; diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx index 5facf41985099..f07be7be3e03f 100644 --- a/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx +++ b/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx @@ -1,28 +1,20 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { MockUser } from "testHelpers/entities"; -import { - ResetPasswordDialog, - ResetPasswordDialogProps, -} from "./ResetPasswordDialog"; +import { ResetPasswordDialog } from "./ResetPasswordDialog"; -export default { +const meta: Meta = { title: "components/Dialogs/ResetPasswordDialog", component: ResetPasswordDialog, - argTypes: { - onClose: { action: "onClose", defaultValue: action("onClose") }, - onConfirm: { action: "onConfirm", defaultValue: action("onConfirm") }, - }, }; -const Template: Story = ( - args: ResetPasswordDialogProps, -) => ; +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - open: true, - user: MockUser, - newPassword: "somerandomstringhere", +export const Example: Story = { + args: { + open: true, + user: MockUser, + newPassword: "somerandomstringhere", + }, }; diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx index 68734c7d1ce76..382ff7f1d749a 100644 --- a/site/src/pages/UsersPage/UsersPage.test.tsx +++ b/site/src/pages/UsersPage/UsersPage.test.tsx @@ -179,12 +179,6 @@ const updateUserRole = async (setupActionSpies: () => void, role: Role) => { }; describe("UsersPage", () => { - it("shows users", async () => { - renderPage(); - const users = await screen.findAllByText(/.*@coder.com/); - expect(users.length).toEqual(3); - }); - describe("suspend user", () => { describe("when it is success", () => { it("shows a success message and refresh the page", async () => { diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx index 191e761000b86..ce4bc974cd125 100644 --- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx +++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx @@ -1,42 +1,41 @@ -import { ComponentMeta, Story } from "@storybook/react"; import { MockOwnerRole, MockSiteRoles, MockUserAdminRole, } from "testHelpers/entities"; -import { EditRolesButtonProps, EditRolesButton } from "./EditRolesButton"; +import { EditRolesButton } from "./EditRolesButton"; +import type { Meta, StoryObj } from "@storybook/react"; -export default { +const meta: Meta = { title: "components/EditRolesButton", component: EditRolesButton, - argTypes: { - defaultIsOpen: { - defaultValue: true, - }, + args: { + defaultIsOpen: true, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Open = Template.bind({}); -Open.args = { - roles: MockSiteRoles, - selectedRoles: [MockUserAdminRole, MockOwnerRole], -}; -Open.parameters = { - chromatic: { delay: 300 }, +export const Open: Story = { + args: { + roles: MockSiteRoles, + selectedRoles: [MockUserAdminRole, MockOwnerRole], + }, + parameters: { + chromatic: { delay: 300 }, + }, }; -export const Loading = Template.bind({}); -Loading.args = { - isLoading: true, - roles: MockSiteRoles, - selectedRoles: [MockUserAdminRole, MockOwnerRole], - userLoginType: "password", - oidcRoleSync: false, -}; -Loading.parameters = { - chromatic: { delay: 300 }, +export const Loading: Story = { + args: { + isLoading: true, + roles: MockSiteRoles, + selectedRoles: [MockUserAdminRole, MockOwnerRole], + userLoginType: "password", + oidcRoleSync: false, + }, + parameters: { + chromatic: { delay: 300 }, + }, }; diff --git a/site/src/pages/WorkspacePage/BuildsTable.stories.tsx b/site/src/pages/WorkspacePage/BuildsTable.stories.tsx index 01f81f8a9a24e..d454b5e9a88c4 100644 --- a/site/src/pages/WorkspacePage/BuildsTable.stories.tsx +++ b/site/src/pages/WorkspacePage/BuildsTable.stories.tsx @@ -1,20 +1,23 @@ -import { ComponentMeta, Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { MockBuilds } from "testHelpers/entities"; -import { BuildsTable, BuildsTableProps } from "./BuildsTable"; +import { BuildsTable } from "./BuildsTable"; -export default { +const meta: Meta = { title: "components/BuildsTable", component: BuildsTable, -} as ComponentMeta; +}; -const Template: Story = (args) => ; +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - builds: MockBuilds, +export const Example: Story = { + args: { + builds: MockBuilds, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - builds: [], +export const Empty: Story = { + args: { + builds: [], + }, }; diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx index b5819e6b6db29..d06e70f331f7f 100644 --- a/site/src/pages/WorkspacePage/Workspace.stories.tsx +++ b/site/src/pages/WorkspacePage/Workspace.stories.tsx @@ -61,6 +61,7 @@ const meta: Meta = { }), ], }; + export default meta; type Story = StoryObj; diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx index a7c0015dd0cc3..133188ef217f6 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx @@ -1,91 +1,81 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; -import * as Mocks from "../../../testHelpers/entities"; -import { WorkspaceActions, WorkspaceActionsProps } from "./WorkspaceActions"; +import { Meta, StoryObj } from "@storybook/react"; +import * as Mocks from "testHelpers/entities"; +import { WorkspaceActions } from "./WorkspaceActions"; -export default { +const meta: Meta = { title: "components/WorkspaceActions", component: WorkspaceActions, + args: { + isUpdating: false, + }, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -const defaultArgs = { - handleStart: action("start"), - handleStop: action("stop"), - handleRestart: action("restart"), - handleDelete: action("delete"), - handleUpdate: action("update"), - handleCancel: action("cancel"), - isOutdated: false, - isUpdating: false, +export const Starting: Story = { + args: { + workspace: Mocks.MockStartingWorkspace, + }, }; -export const Starting = Template.bind({}); -Starting.args = { - ...defaultArgs, - workspace: Mocks.MockStartingWorkspace, +export const Running: Story = { + args: { + workspace: Mocks.MockWorkspace, + }, }; -export const Running = Template.bind({}); -Running.args = { - ...defaultArgs, - workspace: Mocks.MockWorkspace, +export const Stopping: Story = { + args: { + workspace: Mocks.MockStoppingWorkspace, + }, }; -export const Stopping = Template.bind({}); -Stopping.args = { - ...defaultArgs, - workspace: Mocks.MockStoppingWorkspace, +export const Stopped: Story = { + args: { + workspace: Mocks.MockStoppedWorkspace, + }, }; -export const Stopped = Template.bind({}); -Stopped.args = { - ...defaultArgs, - workspace: Mocks.MockStoppedWorkspace, +export const Canceling: Story = { + args: { + workspace: Mocks.MockCancelingWorkspace, + }, }; -export const Canceling = Template.bind({}); -Canceling.args = { - ...defaultArgs, - workspace: Mocks.MockCancelingWorkspace, +export const Canceled: Story = { + args: { + workspace: Mocks.MockCanceledWorkspace, + }, }; -export const Canceled = Template.bind({}); -Canceled.args = { - ...defaultArgs, - workspace: Mocks.MockCanceledWorkspace, +export const Deleting: Story = { + args: { + workspace: Mocks.MockDeletingWorkspace, + }, }; -export const Deleting = Template.bind({}); -Deleting.args = { - ...defaultArgs, - workspace: Mocks.MockDeletingWorkspace, +export const Deleted: Story = { + args: { + workspace: Mocks.MockDeletedWorkspace, + }, }; -export const Deleted = Template.bind({}); -Deleted.args = { - ...defaultArgs, - workspace: Mocks.MockDeletedWorkspace, +export const Outdated: Story = { + args: { + workspace: Mocks.MockOutdatedWorkspace, + }, }; -export const Outdated = Template.bind({}); -Outdated.args = { - ...defaultArgs, - workspace: Mocks.MockOutdatedWorkspace, +export const Failed: Story = { + args: { + workspace: Mocks.MockFailedWorkspace, + }, }; -export const Failed = Template.bind({}); -Failed.args = { - ...defaultArgs, - workspace: Mocks.MockFailedWorkspace, -}; - -export const Updating = Template.bind({}); -Updating.args = { - ...defaultArgs, - isUpdating: true, - workspace: Mocks.MockOutdatedWorkspace, +export const Updating: Story = { + args: { + isUpdating: true, + workspace: Mocks.MockOutdatedWorkspace, + }, }; diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.stories.tsx index ae1688dd5185d..2dfb5f4eb4962 100644 --- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.stories.tsx @@ -1,75 +1,71 @@ -import { ComponentMeta, Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import dayjs from "dayjs"; import { MockStartingWorkspace, MockWorkspaceBuild, MockProvisionerJob, } from "testHelpers/entities"; -import { - WorkspaceBuildProgress, - WorkspaceBuildProgressProps, -} from "./WorkspaceBuildProgress"; +import { WorkspaceBuildProgress } from "./WorkspaceBuildProgress"; -export default { +const meta: Meta = { title: "components/WorkspaceBuildProgress", component: WorkspaceBuildProgress, -} as ComponentMeta; - -const Template: Story = (args) => ( - -); - -export const Starting = Template.bind({}); -Starting.args = { - transitionStats: { - P50: 10000, - P95: 10010, - }, - workspace: { - ...MockStartingWorkspace, - latest_build: { - ...MockWorkspaceBuild, - status: "starting", - job: { - ...MockProvisionerJob, - started_at: dayjs().add(-5, "second").format(), - status: "running", + args: { + transitionStats: { + P50: 10000, + P95: 10010, + }, + workspace: { + ...MockStartingWorkspace, + latest_build: { + ...MockWorkspaceBuild, + status: "starting", + job: { + ...MockProvisionerJob, + started_at: dayjs().add(-5, "second").format(), + status: "running", + }, }, }, }, }; +export default meta; +type Story = StoryObj; + +export const Starting: Story = {}; + // When the transition stats are returning null, the progress bar should not be // displayed -export const StartingUnknown = Template.bind({}); -StartingUnknown.args = { - ...Starting.args, - transitionStats: { - // HACK: the codersdk type generator doesn't support null values, but this - // can be null when the template is new. - // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above - // @ts-ignore-error - P50: null, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above - // @ts-ignore-error - P95: null, +export const StartingUnknown: Story = { + args: { + transitionStats: { + // HACK: the codersdk type generator doesn't support null values, but this + // can be null when the template is new. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above + // @ts-ignore-error + P50: null, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Read comment above + // @ts-ignore-error + P95: null, + }, }, }; -export const StartingPassedEstimate = Template.bind({}); -StartingPassedEstimate.args = { - ...Starting.args, - transitionStats: { P50: 1000, P95: 1000 }, +export const StartingPassedEstimate: Story = { + args: { + transitionStats: { P50: 1000, P95: 1000 }, + }, }; -export const StartingHighVariaton = Template.bind({}); -StartingHighVariaton.args = { - ...Starting.args, - transitionStats: { P50: 10000, P95: 20000 }, +export const StartingHighVariaton: Story = { + args: { + transitionStats: { P50: 10000, P95: 20000 }, + }, }; -export const StartingZeroEstimate = Template.bind({}); -StartingZeroEstimate.args = { - ...Starting.args, - transitionStats: { P50: 0, P95: 0 }, +export const StartingZeroEstimate: Story = { + args: { + transitionStats: { P50: 0, P95: 0 }, + }, }; diff --git a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx index 3230bf7ccc898..85d06ab706acc 100644 --- a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.stories.tsx @@ -1,20 +1,12 @@ -import { action } from "@storybook/addon-actions"; -import { Story } from "@storybook/react"; -import { - WorkspaceDeletedBanner, - WorkspaceDeletedBannerProps, -} from "./WorkspaceDeletedBanner"; +import { Meta, StoryObj } from "@storybook/react"; +import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner"; -export default { +const meta: Meta = { title: "components/WorkspaceDeletedBanner", component: WorkspaceDeletedBanner, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = { - handleClick: action("extend"), -}; +export const Example: Story = {}; diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.stories.tsx index 714854d71cbd4..715bbad70e2f9 100644 --- a/site/src/pages/WorkspacePage/WorkspaceStats.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceStats.stories.tsx @@ -1,4 +1,4 @@ -import { Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { MockWorkspace, MockAppearance, @@ -6,14 +6,9 @@ import { MockEntitlementsWithScheduling, MockExperiments, } from "testHelpers/entities"; -import { WorkspaceStats, WorkspaceStatsProps } from "./WorkspaceStats"; +import { WorkspaceStats } from "./WorkspaceStats"; import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"; -export default { - title: "components/WorkspaceStats", - component: WorkspaceStats, -}; - const MockedAppearance = { config: MockAppearance, preview: false, @@ -21,28 +16,39 @@ const MockedAppearance = { save: () => null, }; -const Template: Story = (args) => ( - - - -); +const meta: Meta = { + title: "components/WorkspaceStats", + component: WorkspaceStats, + decorators: [ + (Story) => ( + + + + ), + ], +}; -export const Example = Template.bind({}); -Example.args = { - workspace: MockWorkspace, +export default meta; +type Story = StoryObj; + +export const Example: Story = { + args: { + workspace: MockWorkspace, + }, }; -export const Outdated = Template.bind({}); -Outdated.args = { - workspace: { - ...MockWorkspace, - outdated: true, +export const Outdated: Story = { + args: { + workspace: { + ...MockWorkspace, + outdated: true, + }, }, }; diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx index 9dfd817b31b4e..644a5ff648a9b 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx @@ -1,9 +1,5 @@ -import { ComponentMeta, Story } from "@storybook/react"; -import { - WorkspaceParametersPageView, - WorkspaceParametersPageViewProps, -} from "./WorkspaceParametersPage"; -import { action } from "@storybook/addon-actions"; +import { Meta, StoryObj } from "@storybook/react"; +import { WorkspaceParametersPageView } from "./WorkspaceParametersPage"; import { MockWorkspaceBuildParameter1, MockWorkspaceBuildParameter2, @@ -13,13 +9,13 @@ import { MockWorkspaceBuildParameter3, } from "testHelpers/entities"; -export default { +const meta: Meta = { title: "pages/WorkspaceParametersPageView", component: WorkspaceParametersPageView, args: { submitError: undefined, isSubmitting: false, - onCancel: action("cancel"), + data: { buildParameters: [ MockWorkspaceBuildParameter1, @@ -36,11 +32,9 @@ export default { ], }, }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = {}; +export const Example: Story = {}; diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx index 61571eee823ee..80c5e9bdc3e9d 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.stories.tsx @@ -1,4 +1,4 @@ -import { Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import dayjs from "dayjs"; import advancedFormat from "dayjs/plugin/advancedFormat"; import timezone from "dayjs/plugin/timezone"; @@ -9,31 +9,19 @@ import { } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule"; import { emptyTTL } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/ttl"; import { mockApiError } from "testHelpers/entities"; -import { - WorkspaceScheduleForm, - WorkspaceScheduleFormProps, -} from "./WorkspaceScheduleForm"; +import { WorkspaceScheduleForm } from "./WorkspaceScheduleForm"; dayjs.extend(advancedFormat); dayjs.extend(utc); dayjs.extend(timezone); -export default { +const meta: Meta = { title: "components/WorkspaceScheduleForm", component: WorkspaceScheduleForm, - argTypes: { - onCancel: { - action: "onCancel", - }, - onSubmit: { - action: "onSubmit", - }, - }, }; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; const defaultInitialValues = { autostartEnabled: true, @@ -42,53 +30,62 @@ const defaultInitialValues = { ttl: 24, }; -export const AllDisabled = Template.bind({}); -AllDisabled.args = { - initialValues: { - autostartEnabled: false, - ...emptySchedule, - autostopEnabled: false, - ttl: emptyTTL, +export const AllDisabled: Story = { + args: { + initialValues: { + autostartEnabled: false, + ...emptySchedule, + autostopEnabled: false, + ttl: emptyTTL, + }, }, }; -export const Autostart = Template.bind({}); -Autostart.args = { - initialValues: { - autostartEnabled: true, - ...defaultSchedule(), - autostopEnabled: false, - ttl: emptyTTL, +export const Autostart: Story = { + args: { + initialValues: { + autostartEnabled: true, + ...defaultSchedule(), + autostopEnabled: false, + ttl: emptyTTL, + }, }, }; -export const WorkspaceWillShutdownInTwoHours = Template.bind({}); -WorkspaceWillShutdownInTwoHours.args = { - initialValues: { ...defaultInitialValues, ttl: 2 }, +export const WorkspaceWillShutdownInTwoHours: Story = { + args: { + initialValues: { ...defaultInitialValues, ttl: 2 }, + }, }; -export const WorkspaceWillShutdownInADay = Template.bind({}); -WorkspaceWillShutdownInADay.args = { - initialValues: { ...defaultInitialValues, ttl: 24 }, +export const WorkspaceWillShutdownInADay: Story = { + args: { + initialValues: { ...defaultInitialValues, ttl: 24 }, + }, }; -export const WorkspaceWillShutdownInTwoDays = Template.bind({}); -WorkspaceWillShutdownInTwoDays.args = { - initialValues: { ...defaultInitialValues, ttl: 48 }, +export const WorkspaceWillShutdownInTwoDays: Story = { + args: { + initialValues: { ...defaultInitialValues, ttl: 48 }, + }, }; -export const WithError = Template.bind({}); -WithError.args = { - initialValues: { ...defaultInitialValues, ttl: 100 }, - initialTouched: { ttl: true }, - submitScheduleError: mockApiError({ - message: "Something went wrong.", - validations: [{ field: "ttl_ms", detail: "Invalid time until shutdown." }], - }), +export const WithError: Story = { + args: { + initialValues: { ...defaultInitialValues, ttl: 100 }, + initialTouched: { ttl: true }, + submitScheduleError: mockApiError({ + message: "Something went wrong.", + validations: [ + { field: "ttl_ms", detail: "Invalid time until shutdown." }, + ], + }), + }, }; -export const Loading = Template.bind({}); -Loading.args = { - initialValues: defaultInitialValues, - isLoading: true, +export const Loading: Story = { + args: { + initialValues: defaultInitialValues, + isLoading: true, + }, }; diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx index 6d8216902d989..c73d21a6e6910 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx @@ -1,25 +1,18 @@ -import { ComponentMeta, Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { MockWorkspace } from "testHelpers/entities"; -import { - WorkspaceSettingsPageView, - WorkspaceSettingsPageViewProps, -} from "./WorkspaceSettingsPageView"; -import { action } from "@storybook/addon-actions"; +import { WorkspaceSettingsPageView } from "./WorkspaceSettingsPageView"; -export default { +const meta: Meta = { title: "pages/WorkspaceSettingsPageView", component: WorkspaceSettingsPageView, args: { error: undefined, isSubmitting: false, workspace: MockWorkspace, - onCancel: action("cancel"), }, -} as ComponentMeta; +}; -const Template: Story = (args) => ( - -); +export default meta; +type Story = StoryObj; -export const Example = Template.bind({}); -Example.args = {}; +export const Example: Story = {}; diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx deleted file mode 100644 index 9753a6c840b21..0000000000000 --- a/site/src/pages/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { FC } from "react"; -import { Navigate } from "react-router-dom"; - -const IndexPage: FC = () => { - return ; -}; - -export default IndexPage; diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts index 725ec9d141320..e30c1cca93799 100644 --- a/site/src/xServices/createTemplate/createTemplateXService.ts +++ b/site/src/xServices/createTemplate/createTemplateXService.ts @@ -23,7 +23,7 @@ import { displayError } from "components/GlobalSnackbar/utils"; import { TemplateAutostopRequirementDaysValue, calculateAutostopRequirementDaysValue, -} from "pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/AutostopRequirementHelperText"; +} from "pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText"; import { delay } from "utils/delay"; import { assign, createMachine } from "xstate";