From 52fae611a4c6d1ea29fefde123c1c290fb6746b9 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 14:23:07 +0000 Subject: [PATCH 01/31] Refactor AuditPage --- .../AuditLogDescription.stories.tsx | 58 ++++++++ .../AuditLogDescription.test.tsx | 106 -------------- .../AuditLogRow/AuditLogDescription/index.ts | 1 - .../AuditLogRow/AuditLogDiff/index.ts | 2 - .../AuditLogRow/AuditLogRow.stories.tsx | 132 ++++++++++-------- site/src/pages/AuditPage/AuditPage.test.tsx | 9 -- 6 files changed, 130 insertions(+), 178 deletions(-) create mode 100644 site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx delete mode 100644 site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx delete mode 100644 site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts delete mode 100644 site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts 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..f437b2367348f --- /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 UnsuccessfulLoginForUnkownUser: 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/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; From cc2a549a391ba1e92c5f4a07cdfc7b10e90d7dfd Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 14:26:07 +0000 Subject: [PATCH 02/31] Refactor CliAuthPageView stories --- .../CliAuthPage/CliAuthPageView.stories.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) 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 = {}; From 4f7bb53c3844b0dd7e0e541485efa87a3092d895 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 14:28:01 +0000 Subject: [PATCH 03/31] Refactor CreateTemplateForm stories --- .../CreateTemplateForm.stories.tsx | 671 +++++++++--------- 1 file changed, 335 insertions(+), 336 deletions(-) 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: "", + }, + ], + }, }; From cd5b40f40e298cd2e9f8f45c18d0180536e2b432 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 14:41:48 +0000 Subject: [PATCH 04/31] Refactor CreateUserPage test --- .../CreateUserPage/CreateUserPage.test.tsx | 33 ------------------- 1 file changed, 33 deletions(-) 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({}); From c5b4eb565708417f1f336a726808be2db9798493 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:24:23 +0000 Subject: [PATCH 05/31] Refactor CreateWorkspacePage tests --- .../CreateWorkspacePage.test.tsx | 24 ------ .../CreateWorkspacePage/GitAuth.stories.tsx | 81 ++++++++++--------- .../SelectedTemplate.stories.tsx | 35 ++++---- 3 files changed, 63 insertions(+), 77 deletions(-) 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/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: "", + }, }, }; From 6121f0d9dbb3fe016429d4e4ece9fa5edaf1b778 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:27:46 +0000 Subject: [PATCH 06/31] Fix stories name --- .../CreateWorkspacePage/CreateWorkspacePageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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: "", From a5440cbdd4b6aae10b61938a15d8740d9a79bb57 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:31:21 +0000 Subject: [PATCH 07/31] Refactor AppereancePageView stories --- .../AppearanceSettingsPageView.stories.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) 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 = {}; From 4b3d9f8103a2222b7b19eba9e92a4d56f17f50b0 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:34:28 +0000 Subject: [PATCH 08/31] Refactor GitAuthSettingsPageView stories --- .../GitAuthSettingsPageView.stories.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) 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 = {}; From 8f654b65f8a7773c87edd25aa25bf4b6efe42833 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:43:07 +0000 Subject: [PATCH 09/31] Refactor NetworkSettingsPageView stories --- .../NetworkSettingsPageView.stories.tsx | 71 +++++++++++-------- 1 file changed, 41 insertions(+), 30 deletions(-) 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 = {}; From 1618d36fc74f838d26350ba1821c021bea6bfbc4 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 16:45:46 +0000 Subject: [PATCH 10/31] Refactor SecuritySettingsPageView stories --- .../SecuritySettingsPageView.stories.tsx | 77 +++++++++++-------- 1 file changed, 46 insertions(+), 31 deletions(-) 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, + ], + }, }; From 64ee7323b110a2177a529e75f305c38d22d2b138 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 17:45:03 +0000 Subject: [PATCH 11/31] Refactor UserAuthSettingsPageView stories --- .../UserAuthSettingsPageView.stories.tsx | 102 +++++++++++------- 1 file changed, 61 insertions(+), 41 deletions(-) diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx index d0047d6dd3cde..f847ffcef9b35 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: "Networking", + 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 = {}; From 1e4062466991c1b00f11fe7884eaf3eedefc9ef3 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 17:48:09 +0000 Subject: [PATCH 12/31] Refactor GroupsPage stories --- .../CreateGroupPageView.stories.tsx | 17 ++--- .../GroupsPage/GroupsPageView.stories.tsx | 66 ++++++++++--------- .../SettingsGroupPageView.stories.tsx | 23 +++---- 3 files changed, 51 insertions(+), 55 deletions(-) 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, + }, }; From 974bb3f7e56b1ea77cc2039bef6dd35cc948b41e Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 17:53:50 +0000 Subject: [PATCH 13/31] Refactor LoginPage tests --- site/src/pages/LoginPage/LoginPage.test.tsx | 36 +------ .../pages/LoginPage/LoginPageView.stories.tsx | 77 ++++++------- .../{SignInForm => }/OAuthSignInForm.tsx | 2 +- .../{SignInForm => }/PasswordSignInForm.tsx | 6 +- .../pages/LoginPage/SignInForm.stories.tsx | 94 ++++++++++++++++ .../LoginPage/{SignInForm => }/SignInForm.tsx | 4 +- .../{SignInForm => }/SignInForm.types.ts | 0 .../SignInForm/SignInForm.stories.tsx | 102 ------------------ 8 files changed, 143 insertions(+), 178 deletions(-) rename site/src/pages/LoginPage/{SignInForm => }/OAuthSignInForm.tsx (97%) rename site/src/pages/LoginPage/{SignInForm => }/PasswordSignInForm.tsx (90%) create mode 100644 site/src/pages/LoginPage/SignInForm.stories.tsx rename site/src/pages/LoginPage/{SignInForm => }/SignInForm.tsx (97%) rename site/src/pages/LoginPage/{SignInForm => }/SignInForm.types.ts (100%) delete mode 100644 site/src/pages/LoginPage/SignInForm/SignInForm.stories.tsx 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/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: "" }, - }, -}; From 30a783afb9b40be8ed7938785be39149e4940682 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 17:56:30 +0000 Subject: [PATCH 14/31] Refactor SetupPage stories --- .../pages/SetupPage/SetupPageView.stories.tsx | 37 ++++++++----------- 1 file changed, 16 insertions(+), 21 deletions(-) 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, + }, }; From 5e5e35c18f12d24a7107fa60f5a59f349c74cfb6 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 7 Sep 2023 18:03:31 +0000 Subject: [PATCH 15/31] Refactor StarterTemplatePageView stories --- .../StarterTemplatePage.test.tsx | 20 -------- .../StarterTemplatePageView.stories.tsx | 50 +++++++++---------- 2 files changed, 24 insertions(+), 46 deletions(-) delete mode 100644 site/src/pages/StarterTemplatePage/StarterTemplatePage.test.tsx 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, + }, }, }; From 429b823f9e209c8b7e758c9dcffda9a7916f2ed9 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:20:41 +0000 Subject: [PATCH 16/31] Refactor StarterTemplatesPage tests --- .../StarterTemplatesPage.test.tsx | 22 -------- .../StarterTemplatesPageView.stories.tsx | 50 +++++++++---------- 2 files changed, 24 insertions(+), 48 deletions(-) delete mode 100644 site/src/pages/StarterTemplatesPage/StarterTemplatesPage.test.tsx 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, + }, }, }; From 5dd69e9b5699933584636af0e6a2c168adbaf069 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:26:11 +0000 Subject: [PATCH 17/31] Refactor TemplatePage tests --- .../TemplateDocsPage.test.tsx | 31 ------- .../TemplateStats.stories.tsx | 80 ++++++++++--------- .../TemplateSummaryPage.test.tsx | 53 ------------ .../VersionsTable.stories.tsx | 74 ++++++++--------- 4 files changed, 80 insertions(+), 158 deletions(-) delete mode 100644 site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.test.tsx delete mode 100644 site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.test.tsx 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: [], + }, }; From d5532f0f71bbfcf0a931944ec3a60aa83455453d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:33:08 +0000 Subject: [PATCH 18/31] RefactorTemplateSettingsPage tests --- .../CreateTemplatePage/CreateTemplateForm.tsx | 2 +- .../TemplateSettingsPageView.stories.tsx | 47 +++---- .../TemplatePermissionsPageView.stories.tsx | 43 +++---- .../AutostopRequirementHelperText.tsx | 0 .../TTLHelperText.tsx | 0 .../TemplateScheduleForm.tsx | 0 .../TemplateSchedulePage.test.tsx | 5 +- .../TemplateSchedulePageView.tsx | 2 +- .../formHelpers.tsx | 0 .../useWorkspacesToBeDeleted.ts | 0 .../TemplateVariablesPageView.stories.tsx | 120 ++++++++---------- .../createTemplate/createTemplateXService.ts | 2 +- 12 files changed, 99 insertions(+), 122 deletions(-) rename site/src/pages/TemplateSettingsPage/TemplateSchedulePage/{TemplateScheduleForm => }/AutostopRequirementHelperText.tsx (100%) rename site/src/pages/TemplateSettingsPage/TemplateSchedulePage/{TemplateScheduleForm => }/TTLHelperText.tsx (100%) rename site/src/pages/TemplateSettingsPage/TemplateSchedulePage/{TemplateScheduleForm => }/TemplateScheduleForm.tsx (100%) rename site/src/pages/TemplateSettingsPage/TemplateSchedulePage/{TemplateScheduleForm => }/formHelpers.tsx (100%) rename site/src/pages/TemplateSettingsPage/TemplateSchedulePage/{TemplateScheduleForm => }/useWorkspacesToBeDeleted.ts (100%) diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 53d171dc53e38..c429731426dcb 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -46,7 +46,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/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/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"; From d6444c9ba6e0761334455a476159ef675b58712d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:35:48 +0000 Subject: [PATCH 19/31] Refactor TemplatesPage tests --- .../TemplatesPage/TemplatesPage.test.tsx | 91 ----------- .../TemplatesPageView.stories.tsx | 144 +++++++++--------- 2 files changed, 74 insertions(+), 161 deletions(-) delete mode 100644 site/src/pages/TemplatesPage/TemplatesPage.test.tsx 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, }, }; From 08adf24b4e95831a3f3bd71102f92bb2edc47d74 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:38:18 +0000 Subject: [PATCH 20/31] Flat TemplateVersionEditorPage --- .../{TemplateVersionEditor => }/FileDialog.tsx | 0 .../{TemplateVersionEditor => }/FileTreeView.tsx | 0 .../MissingTemplateVariablesDialog.tsx | 0 .../{TemplateVersionEditor => }/MonacoEditor.tsx | 0 .../PublishTemplateVersionDialog.tsx | 0 .../TemplateVersionEditor.stories.tsx | 0 .../{TemplateVersionEditor => }/TemplateVersionEditor.tsx | 0 .../TemplateVersionEditorPage.test.tsx | 2 +- .../TemplateVersionEditorPage/TemplateVersionEditorPage.tsx | 2 +- .../{TemplateVersionEditor => }/TemplateVersionStatusBadge.tsx | 0 10 files changed, 2 insertions(+), 2 deletions(-) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/FileDialog.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/FileTreeView.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/MissingTemplateVariablesDialog.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/MonacoEditor.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/PublishTemplateVersionDialog.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/TemplateVersionEditor.stories.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/TemplateVersionEditor.tsx (100%) rename site/src/pages/TemplateVersionEditorPage/{TemplateVersionEditor => }/TemplateVersionStatusBadge.tsx (100%) 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 From d40214a145f5a316fe019be3c2b8d42c788cc17e Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:41:01 +0000 Subject: [PATCH 21/31] Refactor TemplateVersionPage stories --- .../TemplateVersionPageView.stories.tsx | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) 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", + }), + }, }, }; From 5a8b6494e0ff2f92a957f3c2612e32b900ff6fe9 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 13:54:33 +0000 Subject: [PATCH 22/31] Refactor UserSettingsPage stories --- .../AccountPage/AccountForm.stories.tsx | 70 ++++++------- .../SSHKeysPage/SSHKeysPageView.stories.tsx | 73 +++++++------- .../SettingsSecurityForm.stories.tsx | 57 ++++++----- .../ConfirmDeleteDialog.stories.tsx | 38 ++++---- .../TokensPage/TokensPageView.stories.tsx | 76 +++++++-------- .../WorspaceProxyView.stories.tsx | 97 +++++++++---------- 6 files changed, 194 insertions(+), 217 deletions(-) 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.", + }), + }, }; From 2d1e6bf842a8bbbbbfd04b818330b0750e9eaec8 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:03:54 +0000 Subject: [PATCH 23/31] Refactor UsersPage stories --- .../UsersPage/ResetPasswordDialog.stories.tsx | 30 ++++------ site/src/pages/UsersPage/UsersPage.test.tsx | 6 -- .../UsersTable/EditRolesButton.stories.tsx | 55 +++++++++---------- 3 files changed, 38 insertions(+), 53 deletions(-) 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 }, + }, }; From 30ad92b4e92ba0ac9a23a4270e1d3025eb22a27d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:06:09 +0000 Subject: [PATCH 24/31] Simplify IndexPage --- site/src/AppRouter.tsx | 10 +++++++--- site/src/pages/index.tsx | 8 -------- 2 files changed, 7 insertions(+), 11 deletions(-) delete mode 100644 site/src/pages/index.tsx 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/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; From 5c64496c71b7bd630fdff178d76171aec16e041e Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:11:20 +0000 Subject: [PATCH 25/31] Refactor WorkspaceSettingsPage stories --- .../WorkspaceParametersPage.stories.tsx | 22 ++-- .../WorkspaceScheduleForm.stories.tsx | 101 +++++++++--------- .../WorkspaceSettingsPageView.stories.tsx | 21 ++-- 3 files changed, 64 insertions(+), 80 deletions(-) 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 = {}; From 5d8bcdea755310a8fdd69a56348fe93419e23166 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:20:04 +0000 Subject: [PATCH 26/31] Refactor WorkspacePage stories --- .../WorkspacePage/BuildsTable.stories.tsx | 25 ++-- .../pages/WorkspacePage/Workspace.stories.tsx | 1 + .../WorkspaceActions.stories.tsx | 118 ++++++++---------- .../WorkspaceBuildProgress.stories.tsx | 98 +++++++-------- .../WorkspaceDeletedBanner.stories.tsx | 20 +-- .../WorkspacePage/WorkspaceStats.stories.tsx | 60 +++++---- 6 files changed, 155 insertions(+), 167 deletions(-) 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, + }, }, }; From 7f0e89effd943e2ea8b8fd336a3d0cb41d77c699 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:31:22 +0000 Subject: [PATCH 27/31] Refactor Conditionals stories --- .../Conditionals/ChooseOne.stories.tsx | 89 +++++++++++-------- .../components/Conditionals/Maybe.stories.tsx | 28 +++--- 2 files changed, 69 insertions(+), 48 deletions(-) diff --git a/site/src/components/Conditionals/ChooseOne.stories.tsx b/site/src/components/Conditionals/ChooseOne.stories.tsx index a4663b8819a52..c30b7d27ae522 100644 --- a/site/src/components/Conditionals/ChooseOne.stories.tsx +++ b/site/src/components/Conditionals/ChooseOne.stories.tsx @@ -1,46 +1,63 @@ -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, + }, }; From b5d365baf6c5c4e21a97e1eb4e676348060f8627 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:40:00 +0000 Subject: [PATCH 28/31] Fix typo --- .../AuditLogDescription/AuditLogDescription.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx index f437b2367348f..06c999d2f0a20 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx @@ -51,7 +51,7 @@ export const SuccessLogin: Story = { }, }; -export const UnsuccessfulLoginForUnkownUser: Story = { +export const UnsuccessfulLoginForUnknownUser: Story = { args: { auditLog: MockAuditLogUnsuccessfulLoginKnownUser, }, From 2f55e6b8d37649c56e5dc93aefc6fcf12d91e536 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 14:47:16 +0000 Subject: [PATCH 29/31] Fix imports --- site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx | 5 +++-- site/src/pages/AuditPage/AuditPageView.stories.tsx | 3 +-- site/src/pages/AuditPage/AuditPageView.tsx | 2 +- site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx | 5 +---- site/src/pages/CreateTokenPage/CreateTokenPage.test.tsx | 2 +- site/src/pages/LoginPage/LoginPageView.tsx | 2 +- 6 files changed, 8 insertions(+), 11 deletions(-) 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/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/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index c429731426dcb..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"; 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/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"; From b3114d6cf725a8d0603d9e8b3a5748241644cad7 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 15:58:16 +0000 Subject: [PATCH 30/31] Fix ChooseOne story --- .../Conditionals/ChooseOne.stories.tsx | 64 +++++++++++-------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/site/src/components/Conditionals/ChooseOne.stories.tsx b/site/src/components/Conditionals/ChooseOne.stories.tsx index c30b7d27ae522..7330a9bc6a018 100644 --- a/site/src/components/Conditionals/ChooseOne.stories.tsx +++ b/site/src/components/Conditionals/ChooseOne.stories.tsx @@ -11,48 +11,56 @@ type Story = StoryObj; export const FirstIsTrue: Story = { args: { - children: ( - <> - The first one shows. - The second one does not show. - The default does not show. - - ), + children: [ + + 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. - - ), + 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. - - ), + children: [ + + Only the first one shows. + , + + The second one does not show. + , + The default does not show., + ], }, }; export const NoneAreTrue: Story = { args: { - children: ( - <> - The first one does not show. - The second one does not show. - The default shows. - - ), + children: [ + + The first one does not show. + , + + The second one does not show. + , + The default shows., + ], }, }; From 397370cd0e5a7ac4885343f4fa26e26c79668351 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Sep 2023 16:00:21 +0000 Subject: [PATCH 31/31] Fix UserAuthSettingsPageView stories --- .../UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx index f847ffcef9b35..892f1a6e7257f 100644 --- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx @@ -9,7 +9,7 @@ const oidcGroup: DeploymentGroup = { }; const ghGroup: DeploymentGroup = { - name: "Networking", + name: "GitHub", description: "", children: [] as DeploymentGroup[], };