Add template permissions stories

BrunoQuaresma · BrunoQuaresma · commit f8a7b7e505ee · 2022-10-06T14:50:22.000Z
diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -5,7 +5,6 @@ import Autocomplete from "@material-ui/lab/Autocomplete"
 import { useMachine } from "@xstate/react"
 import { Group, User } from "api/typesGenerated"
 import { AvatarData } from "components/AvatarData/AvatarData"
-import { useOrganizationId } from "hooks/useOrganizationId"
 import debounce from "just-debounce-it"
 import { ChangeEvent, useState } from "react"
 import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService"
@@ -19,14 +18,15 @@ const isGroup = (value: UserOrGroupAutocompleteValue): value is Group => {
 export type UserOrGroupAutocompleteProps = {
   value: UserOrGroupAutocompleteValue
   onChange: (value: UserOrGroupAutocompleteValue) => void
+  organizationId: string
 }
 
 export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = ({
   value,
   onChange,
+  organizationId,
 }) => {
   const styles = useStyles()
-  const organizationId = useOrganizationId()
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
   const [searchState, sendSearch] = useMachine(searchUsersAndGroupsMachine, {
     context: {
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -7,13 +7,15 @@ import { Paywall } from "components/Paywall/Paywall"
 import { Stack } from "components/Stack/Stack"
 import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
+import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { templateACLMachine } from "xServices/template/templateACLXService"
 import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView"
 
 export const TemplatePermissionsPage: FC<React.PropsWithChildren<unknown>> = () => {
+  const organizationId = useOrganizationId()
   const { context } = useTemplateLayoutContext()
   const { template, permissions } = context
   if (!template || !permissions) {
@@ -59,6 +61,7 @@ export const TemplatePermissionsPage: FC<React.PropsWithChildren<unknown>> = ()
         </Cond>
         <Cond>
           <TemplatePermissionsPageView
+            organizationId={organizationId}
             templateACL={templateACL}
             canUpdatePermissions={permissions.canUpdateTemplate}
             onAddUser={(user, role, reset) => {
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.stories.tsx
@@ -0,0 +1,34 @@
+import { Story } from "@storybook/react"
+import { MockOrganization, MockTemplateACL, MockTemplateACLEmpty } from "testHelpers/entities"
+import {
+  TemplatePermissionsPageView,
+  TemplatePermissionsPageViewProps,
+} from "./TemplatePermissionsPageView"
+
+export default {
+  title: "pages/TemplatePermissionsPageView",
+  component: TemplatePermissionsPageView,
+}
+
+const Template: Story<TemplatePermissionsPageViewProps> = (
+  args: TemplatePermissionsPageViewProps,
+) => <TemplatePermissionsPageView {...args} />
+
+export const Empty = Template.bind({})
+Empty.args = {
+  templateACL: MockTemplateACLEmpty,
+  canUpdatePermissions: false,
+}
+
+export const WithTemplateACL = Template.bind({})
+WithTemplateACL.args = {
+  templateACL: MockTemplateACL,
+  canUpdatePermissions: false,
+}
+
+export const WithUpdatePermissions = Template.bind({})
+WithUpdatePermissions.args = {
+  templateACL: MockTemplateACL,
+  canUpdatePermissions: true,
+  organizationId: MockOrganization.id,
+}
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -24,13 +24,14 @@ import { FC, useState } from "react"
 import { Maybe } from "components/Conditionals/Maybe"
 
 const AddTemplateUserOrGroup: React.FC<{
+  organizationId: string
   isLoading: boolean
   onSubmit: (
     userOrGroup: TemplateUser | TemplateGroup,
     role: TemplateRole,
     reset: () => void,
   ) => void
-}> = ({ isLoading, onSubmit }) => {
+}> = ({ isLoading, onSubmit, organizationId }) => {
   const styles = useStyles()
   const [selectedOption, setSelectedOption] = useState<UserOrGroupAutocompleteValue>(null)
   const [selectedRole, setSelectedRole] = useState<TemplateRole>("view")
@@ -59,6 +60,7 @@ const AddTemplateUserOrGroup: React.FC<{
     >
       <Stack direction="row" alignItems="center" spacing={1}>
         <UserOrGroupAutocomplete
+          organizationId={organizationId}
           value={selectedOption}
           onChange={(newValue) => {
             setSelectedOption(newValue)
@@ -98,10 +100,11 @@ const AddTemplateUserOrGroup: React.FC<{
 
 export interface TemplatePermissionsPageViewProps {
   templateACL: TemplateACL | undefined
+  organizationId: string
+  canUpdatePermissions: boolean
   // User
   onAddUser: (user: TemplateUser, role: TemplateRole, reset: () => void) => void
   isAddingUser: boolean
-  canUpdatePermissions: boolean
   onUpdateUser: (user: TemplateUser, role: TemplateRole) => void
   updatingUser: TemplateUser | undefined
   onRemoveUser: (user: TemplateUser) => void
@@ -118,6 +121,7 @@ export const TemplatePermissionsPageView: FC<
 > = ({
   templateACL,
   canUpdatePermissions,
+  organizationId,
   // User
   onAddUser,
   isAddingUser,
@@ -140,6 +144,7 @@ export const TemplatePermissionsPageView: FC<
     <Stack spacing={2.5}>
       <Maybe condition={canUpdatePermissions}>
         <AddTemplateUserOrGroup
+          organizationId={organizationId}
           isLoading={isAddingUser || isAddingGroup}
           onSubmit={(value, role, resetAutocomplete) =>
             "members" in value
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -867,3 +867,13 @@ export const MockGroup: TypesGen.Group = {
   organization_id: MockOrganization.id,
   members: [MockUser, MockUser2],
 }
+
+export const MockTemplateACL: TypesGen.TemplateACL = {
+  group: [{ ...MockGroup, role: "admin" }],
+  users: [{ ...MockUser, role: "view" }],
+}
+
+export const MockTemplateACLEmpty: TypesGen.TemplateACL = {
+  group: [],
+  users: [],
+}
