Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf0fd9a0

Browse files
committed
Add GroupsPage storybook
1 parente0c90ef commitf0fd9a0

File tree

3 files changed

+242
-174
lines changed

3 files changed

+242
-174
lines changed
Lines changed: 6 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,12 @@
1-
importButtonfrom"@material-ui/core/Button"
2-
importLinkfrom"@material-ui/core/Link"
3-
import{makeStyles}from"@material-ui/core/styles"
4-
importTablefrom"@material-ui/core/Table"
5-
importTableBodyfrom"@material-ui/core/TableBody"
6-
importTableCellfrom"@material-ui/core/TableCell"
7-
importTableContainerfrom"@material-ui/core/TableContainer"
8-
importTableHeadfrom"@material-ui/core/TableHead"
9-
importTableRowfrom"@material-ui/core/TableRow"
10-
importArrowRightAltOutlinedfrom"@material-ui/icons/ArrowRightAltOutlined"
11-
importAddCircleOutlinefrom"@material-ui/icons/AddCircleOutline"
12-
importKeyboardArrowRightfrom"@material-ui/icons/KeyboardArrowRight"
13-
importAvatarGroupfrom"@material-ui/lab/AvatarGroup"
141
import{useMachine}from"@xstate/react"
15-
import{AvatarData}from"components/AvatarData/AvatarData"
16-
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne"
17-
import{EmptyState}from"components/EmptyState/EmptyState"
18-
import{Stack}from"components/Stack/Stack"
19-
import{TableLoader}from"components/TableLoader/TableLoader"
20-
import{UserAvatar}from"components/UserAvatar/UserAvatar"
212
import{useFeatureVisibility}from"hooks/useFeatureVisibility"
223
import{useOrganizationId}from"hooks/useOrganizationId"
234
import{usePermissions}from"hooks/usePermissions"
245
importReactfrom"react"
256
import{Helmet}from"react-helmet-async"
26-
import{LinkasRouterLink,useNavigate}from"react-router-dom"
277
import{pageTitle}from"util/page"
288
import{groupsMachine}from"xServices/groups/groupsXService"
29-
import{Paywall}from"components/Paywall/Paywall"
9+
importGroupsPageViewfrom"./GroupsPageView"
3010

3111
exportconstGroupsPage:React.FC=()=>{
3212
constorganizationId=useOrganizationId()
@@ -36,10 +16,6 @@ export const GroupsPage: React.FC = () => {
3616
},
3717
})
3818
const{ groups}=state.context
39-
constisLoading=Boolean(groups===undefined)
40-
constisEmpty=Boolean(groups&&groups.length===0)
41-
constnavigate=useNavigate()
42-
conststyles=useStyles()
4319
const{createGroup:canCreateGroup}=usePermissions()
4420
const{rbac:isRBACEnabled}=useFeatureVisibility()
4521

@@ -49,157 +25,13 @@ export const GroupsPage: React.FC = () => {
4925
<title>{pageTitle("Groups")}</title>
5026
</Helmet>
5127

52-
<ChooseOne>
53-
<Condcondition={!isRBACEnabled}>
54-
<Paywall
55-
message="User groups"
56-
description="Organize the users into groups and manage their permissions. To use this feature, you have to upgrade your account."
57-
cta={
58-
<Stackdirection="row"alignItems="center">
59-
<Link
60-
underline="none"
61-
href="https://coder.com/docs/coder-oss/latest/admin/upgrade"
62-
target="_blank"
63-
rel="noreferrer"
64-
>
65-
<Buttonsize="small"startIcon={<ArrowRightAltOutlined/>}>
66-
See how to upgrade
67-
</Button>
68-
</Link>
69-
<Link
70-
underline="none"
71-
href="https://coder.com/docs/coder-oss/latest/admin/upgrade"
72-
target="_blank"
73-
rel="noreferrer"
74-
>
75-
Read the docs
76-
</Link>
77-
</Stack>
78-
}
79-
/>
80-
</Cond>
81-
<Cond>
82-
<TableContainer>
83-
<Table>
84-
<TableHead>
85-
<TableRow>
86-
<TableCellwidth="50%">Name</TableCell>
87-
<TableCellwidth="49%">Users</TableCell>
88-
<TableCellwidth="1%"></TableCell>
89-
</TableRow>
90-
</TableHead>
91-
<TableBody>
92-
<ChooseOne>
93-
<Condcondition={isLoading}>
94-
<TableLoader/>
95-
</Cond>
96-
97-
<Condcondition={isEmpty}>
98-
<TableRow>
99-
<TableCellcolSpan={999}>
100-
<EmptyState
101-
message="No groups yet"
102-
description={
103-
canCreateGroup
104-
?"Create your first group"
105-
:"You don't have permission to create a group"
106-
}
107-
cta={
108-
canCreateGroup&&(
109-
<Linkunderline="none"component={RouterLink}to="/groups/create">
110-
<ButtonstartIcon={<AddCircleOutline/>}>Create group</Button>
111-
</Link>
112-
)
113-
}
114-
/>
115-
</TableCell>
116-
</TableRow>
117-
</Cond>
118-
119-
<Cond>
120-
{groups?.map((group)=>{
121-
constgroupPageLink=`/groups/${group.id}`
122-
123-
return(
124-
<TableRow
125-
hover
126-
key={group.id}
127-
data-testid={`group-${group.id}`}
128-
tabIndex={0}
129-
onClick={()=>{
130-
navigate(groupPageLink)
131-
}}
132-
onKeyDown={(event)=>{
133-
if(event.key==="Enter"){
134-
navigate(groupPageLink)
135-
}
136-
}}
137-
className={styles.clickableTableRow}
138-
>
139-
<TableCell>
140-
<AvatarData
141-
title={group.name}
142-
subtitle={`${group.members.length} members`}
143-
highlightTitle
144-
/>
145-
</TableCell>
146-
147-
<TableCell>
148-
{group.members.length===0&&"-"}
149-
<AvatarGroup>
150-
{group.members.map((member)=>(
151-
<UserAvatar
152-
key={member.username}
153-
username={member.username}
154-
avatarURL={member.avatar_url}
155-
/>
156-
))}
157-
</AvatarGroup>
158-
</TableCell>
159-
160-
<TableCell>
161-
<divclassName={styles.arrowCell}>
162-
<KeyboardArrowRightclassName={styles.arrowRight}/>
163-
</div>
164-
</TableCell>
165-
</TableRow>
166-
)
167-
})}
168-
</Cond>
169-
</ChooseOne>
170-
</TableBody>
171-
</Table>
172-
</TableContainer>
173-
</Cond>
174-
</ChooseOne>
28+
<GroupsPageView
29+
groups={groups}
30+
canCreateGroup={canCreateGroup}
31+
isRBACEnabled={isRBACEnabled}
32+
/>
17533
</>
17634
)
17735
}
17836

179-
constuseStyles=makeStyles((theme)=>({
180-
clickableTableRow:{
181-
cursor:"pointer",
182-
183-
"&:hover td":{
184-
backgroundColor:theme.palette.action.hover,
185-
},
186-
187-
"&:focus":{
188-
outline:`1px solid${theme.palette.secondary.dark}`,
189-
},
190-
191-
"& .MuiTableCell-root:last-child":{
192-
paddingRight:theme.spacing(2),
193-
},
194-
},
195-
arrowRight:{
196-
color:theme.palette.text.secondary,
197-
width:20,
198-
height:20,
199-
},
200-
arrowCell:{
201-
display:"flex",
202-
},
203-
}))
204-
20537
exportdefaultGroupsPage
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import{Story}from"@storybook/react"
2+
import{MockGroup}from"testHelpers/entities"
3+
import{GroupsPageView,GroupsPageViewProps}from"./GroupsPageView"
4+
5+
exportdefault{
6+
title:"pages/GroupsPageView",
7+
component:GroupsPageView,
8+
}
9+
10+
constTemplate:Story<GroupsPageViewProps>=(args:GroupsPageViewProps)=>(
11+
<GroupsPageView{...args}/>
12+
)
13+
14+
exportconstNotEnabled=Template.bind({})
15+
NotEnabled.args={
16+
groups:[MockGroup],
17+
canCreateGroup:true,
18+
isRBACEnabled:false,
19+
}
20+
21+
exportconstWithGroups=Template.bind({})
22+
WithGroups.args={
23+
groups:[MockGroup],
24+
canCreateGroup:true,
25+
isRBACEnabled:true,
26+
}
27+
28+
exportconstEmptyGroup=Template.bind({})
29+
EmptyGroup.args={
30+
groups:[],
31+
canCreateGroup:false,
32+
isRBACEnabled:true,
33+
}
34+
35+
exportconstEmptyGroupWithPermission=Template.bind({})
36+
EmptyGroupWithPermission.args={
37+
groups:[],
38+
canCreateGroup:true,
39+
isRBACEnabled:true,
40+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp