feat: add custom roles page stories

coder · jaaydenh · Aug 9, 2024 · Jul 31, 2024 · Jul 31, 2024 · Aug 1, 2024
commit 764b15fc603a04456b08eaadfde5e8b53f082043
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MockRole } from "testHelpers/entities";
+import { CustomRolesPageView } from "./CustomRolesPageView";
+
+const meta: Meta<typeof CustomRolesPageView> = {
+  title: "pages/OrganizationCustomRolesPage",
+  component: CustomRolesPageView,
+};
+
+export default meta;
+type Story = StoryObj<typeof CustomRolesPageView>;
+
+export const NotEnabled: Story = {
+  args: {
+    roles: [MockRole],
+    canAssignOrgRole: true,
+    isCustomRolesEnabled: false,
+  },
+};
+
+export const Enabled: Story = {
+  args: {
+    roles: [MockRole],
+    canAssignOrgRole: true,
+    isCustomRolesEnabled: true,
+  },
+};
+
+export const EmptyDisplayName: Story = {
+  args: {
+    roles: [{ ...MockRole, name: "my-custom-role", display_name: "" }],
+    canAssignOrgRole: true,
+    isCustomRolesEnabled: true,
+  },
+};
+
+export const EmptyRoleWithoutPermission: Story = {
+  args: {
+    roles: [],
+    canAssignOrgRole: false,
+    isCustomRolesEnabled: true,
+  },
+};
+
+export const EmptyRoleWithPermission: Story = {
+  args: {
+    roles: [],
+    canAssignOrgRole: true,
+    isCustomRolesEnabled: true,
+  },
+};
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2425,6 +2425,71 @@ export const MockWorkspaceQuota: TypesGen.WorkspaceQuota = {
   budget: 100,
 };
 
+export const MockRole: TypesGen.Role = {
+  name: "my-role-1",
+  display_name: "My Role 1",
+  organization_id: MockOrganization.id,
+  site_permissions: [],
+  organization_permissions: [
+    {
+      negate: false,
+      resource_type: "organization_member",
+      action: "create",
+    },
+    {
+      negate: false,
+      resource_type: "organization_member",
+      action: "delete",
+    },
+    {
+      negate: false,
+      resource_type: "organization_member",
+      action: "read",
+    },
+    {
+      negate: false,
+      resource_type: "organization_member",
+      action: "update",
+    },
+    {
+      negate: false,
+      resource_type: "template",
+      action: "create",
+    },
+    {
+      negate: false,
+      resource_type: "template",
+      action: "delete",
+    },
+    {
+      negate: false,
+      resource_type: "template",
+      action: "read",
+    },
+    {
+      negate: false,
+      resource_type: "template",
+      action: "update",
+    },
+    {
+      negate: false,
+      resource_type: "template",
+      action: "view_insights",
+    },
+    {
+      negate: false,
+      resource_type: "audit_log",
+      action: "create",
+    },
+    {
+      negate: false,
+      resource_type: "audit_log",
+      action: "read",
+    },
+  ],
+  user_permissions: [],
+};
+
 export const MockGroup: TypesGen.Group = {
   id: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
   name: "Front-End",