chore: storybook additions and cleanup (#14968)

site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.stories.tsx

@@ -29,52 +29,81 @@ export const Default: Story = {
 
 export const CheckboxIndeterminate: Story = {
 	args: {
+		...Default.args,
 		role: assignableRole(MockRole2WithOrgPermissions, true),
-		onSubmit: () => null,
-		isLoading: false,
-		organizationName: "my-org",
-		canAssignOrgRole: true,
 	},
 };
 
 export const WithError: Story = {
 	args: {
-		role: assignableRole(MockRoleWithOrgPermissions, true),
+		...Default.args,
-		onSubmit: () => null,
+		role: undefined,
+		error: "this is an error",
+	},
+};
+
+export const WithValidationError: Story = {
+	args: {
+		...Default.args,
+		role: undefined,
 		error: mockApiError({
 			message: "A role named new-role already exists.",
 			validations: [{ field: "name", detail: "Role names must be unique" }],
 		}),
-		isLoading: false,
+	},
-		organizationName: "my-org",
+	play: async ({ canvasElement, step }) => {
-		canAssignOrgRole: true,
+		const canvas = within(canvasElement);
+
+		await step("Enter name", async () => {
+			const input = canvas.getByLabelText("Name");
+			await userEvent.type(input, "new-role");
+			input.blur();
+		});
 	},
 };
 
-export const CannotEdit: Story = {
+export const InvalidCharsError: Story = {
 	args: {
-		role: assignableRole(MockRoleWithOrgPermissions, true),
+		...Default.args,
-		onSubmit: () => null,
+		role: undefined,
-		error: undefined,
+	},
-		isLoading: false,
+	play: async ({ canvasElement, step }) => {
-		organizationName: "my-org",
+		const canvas = within(canvasElement);
+
+		await step("Enter name", async () => {
+			const input = canvas.getByLabelText("Name");
+			await userEvent.type(input, "!~@#@!");
+			input.blur();
+		});
+	},
+};
+
+export const CannotEditRoleName: Story = {
+	args: {
+		...Default.args,
 		canAssignOrgRole: false,
 	},
 };
 
 export const ShowAllResources: Story = {
 	args: {
-		role: assignableRole(MockRoleWithOrgPermissions, true),
+		...Default.args,
-		onSubmit: () => null,
-		error: undefined,
-		isLoading: false,
-		organizationName: "my-org",
-		canAssignOrgRole: true,
 		allResources: true,
 	},
 };
 
+export const Loading: Story = {
+	args: {
+		...Default.args,
+		isLoading: true,
+	},
+};
+
 export const ToggleParentCheckbox: Story = {
+	args: {
+		...Default.args,
+		role: undefined,
+	},
 	play: async ({ canvasElement }) => {
 		const user = userEvent.setup();
 		const canvas = within(canvasElement);

site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx

@@ -44,9 +44,3 @@ export const HoverOverflowPill: Story = {
 		await userEvent.hover(canvas.getByTestId("overflow-permissions-pill"));
 	},
 };
-
-export const ShowAllResources: Story = {
-	args: {
-		permissions: MockRoleWithOrgPermissions.organization_permissions,
-	},
-};

site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import {
 	MockGroup,
 	MockGroup2,
@@ -43,17 +44,6 @@ export const Empty: Story = {
 	},
 };
 
-export const HasError: Story = {
-	args: {
-		groupSyncSettings: MockGroupSyncSettings,
-		roleSyncSettings: MockRoleSyncSettings,
-		groups: [MockGroup, MockGroup2],
-		groupsMap,
-		organization: MockOrganization,
-		error: "This is a test error",
-	},
-};
-
 export const Default: Story = {
 	args: {
 		groupSyncSettings: MockGroupSyncSettings,
@@ -65,24 +55,36 @@ export const Default: Story = {
 	},
 };
 
+export const HasError: Story = {
+	args: {
+		...Default.args,
+		error: "This is a test error",
+	},
+};
+
 export const MissingGroups: Story = {
 	args: {
+		...Default.args,
 		groupSyncSettings: MockGroupSyncSettings2,
-		roleSyncSettings: MockRoleSyncSettings,
-		groups: [MockGroup, MockGroup2],
-		groupsMap,
-		organization: MockOrganization,
-		error: undefined,
 	},
 };
 
 export const WithLegacyMapping: Story = {
 	args: {
+		...Default.args,
 		groupSyncSettings: MockLegacyMappingGroupSyncSettings,
-		roleSyncSettings: MockRoleSyncSettings,
+	},
-		groups: [MockGroup, MockGroup2],
+};
-		groupsMap,
+
-		organization: MockOrganization,
+export const RolesTab: Story = {
-		error: undefined,
+	args: {
+		...Default.args,
+	},
+	play: async ({ canvasElement }) => {
+		const user = userEvent.setup();
+		const canvas = within(canvasElement);
+		const rolesTab = await canvas.findByText("Role Sync Settings");
+		await user.click(rolesTab);
+		await expect(canvas.findByText("IdP Role")).resolves.toBeVisible();
 	},
 };