Add role select storybook

BrunoQuaresma · BrunoQuaresma · commit 82a60f81575b · 2022-05-10T13:24:27.000Z
diff --git a/site/src/components/UsersTable/RoleSelect.stories.tsx b/site/src/components/UsersTable/RoleSelect.stories.tsx
@@ -0,0 +1,67 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { RoleSelect, RoleSelectProps } from "./RoleSelect"
+
+export default {
+  title: "components/RoleSelect",
+  component: RoleSelect,
+} as ComponentMeta<typeof RoleSelect>
+
+const Template: Story<RoleSelectProps> = (args) => <RoleSelect {...args} />
+
+export const Close = Template.bind({})
+Close.args = {
+  roles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "auditor",
+      display_name: "Auditor",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+  selectedRoles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+}
+
+export const Open = Template.bind({})
+Open.args = {
+  open: true,
+  roles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "auditor",
+      display_name: "Auditor",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+  selectedRoles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+}
diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/UsersTable/RoleSelect.tsx
@@ -10,16 +10,18 @@ export interface RoleSelectProps {
   selectedRoles: Role[]
   onChange: (roles: Role["name"][]) => void
   loading?: boolean
+  open?: boolean
 }
 
-export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange }) => {
+export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange, open }) => {
   const styles = useStyles()
   const value = selectedRoles.map((r) => r.name)
   const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ")
   const sortedRoles = roles.sort((a, b) => a.display_name.localeCompare(b.display_name))
 
   return (
     <Select
+      open={open}
       multiple
       value={value}
       renderValue={renderValue}
