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

Commit043c4d9

Browse files
committed
Use settings header on org pages
1 parent34921a5 commit043c4d9

File tree

5 files changed

+128
-131
lines changed

5 files changed

+128
-131
lines changed

‎site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
FormFooter,
1313
}from"components/Form/Form";
1414
import{IconField}from"components/IconField/IconField";
15-
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
15+
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
1616
import{
1717
getFormHelpers,
1818
nameValidator,
@@ -54,9 +54,10 @@ export const CreateOrganizationPageView: FC<
5454

5555
return(
5656
<div>
57-
<PageHeader>
58-
<PageHeaderTitle>Organization settings</PageHeaderTitle>
59-
</PageHeader>
57+
<SettingsHeader
58+
title="New Organization"
59+
description="Organize your deployment into multiple platform teams."
60+
/>
6061

6162
{Boolean(error)&&!isApiValidationError(error)&&(
6263
<divcss={{marginBottom:32}}>

‎site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx

Lines changed: 103 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,14 @@ import { EmptyState } from "components/EmptyState/EmptyState";
3030
import{displayError,displaySuccess}from"components/GlobalSnackbar/utils";
3131
import{LastSeen}from"components/LastSeen/LastSeen";
3232
import{Loader}from"components/Loader/Loader";
33-
import{Margins}from"components/Margins/Margins";
3433
import{
3534
MoreMenu,
3635
MoreMenuContent,
3736
MoreMenuItem,
3837
MoreMenuTrigger,
3938
ThreeDotsButton,
4039
}from"components/MoreMenu/MoreMenu";
41-
import{ResourcePageHeader}from"components/PageHeader/PageHeader";
40+
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
4241
import{Stack}from"components/Stack/Stack";
4342
import{
4443
PaginationStatus,
@@ -98,111 +97,113 @@ export const GroupPage: FC = () => {
9897
<>
9998
{helmet}
10099

101-
<Margins>
102-
<ResourcePageHeader
103-
displayName={groupData?.display_name}
104-
name={groupData?.name}
105-
actions={
106-
canUpdateGroup&&(
107-
<>
108-
<Button
109-
startIcon={<SettingsOutlined/>}
110-
to="settings"
111-
component={RouterLink}
112-
>
113-
Settings
114-
</Button>
115-
<Button
116-
disabled={groupData?.id===groupData?.organization_id}
117-
onClick={()=>{
118-
setIsDeletingGroup(true);
119-
}}
120-
startIcon={<DeleteOutline/>}
121-
css={styles.removeButton}
122-
>
123-
Delete&hellip;
124-
</Button>
125-
</>
126-
)
127-
}
100+
<Stack
101+
alignItems="baseline"
102+
direction="row"
103+
justifyContent="space-between"
104+
>
105+
<SettingsHeader
106+
title={groupData?.display_name||groupData?.name}
107+
description="Manage members for this group."
128108
/>
129-
130-
<Stackspacing={1}>
131-
{canUpdateGroup&&groupData&&!isEveryoneGroup(groupData)&&(
132-
<AddGroupMember
133-
isLoading={addMemberMutation.isLoading}
134-
onSubmit={async(user,reset)=>{
135-
try{
136-
awaitaddMemberMutation.mutateAsync({
137-
groupId,
138-
userId:user.id,
139-
});
140-
reset();
141-
awaitgroupQuery.refetch();
142-
}catch(error){
143-
displayError(getErrorMessage(error,"Failed to add member."));
144-
}
109+
{canUpdateGroup&&(
110+
<Stackdirection="row"spacing={2}>
111+
<Button
112+
startIcon={<SettingsOutlined/>}
113+
to="settings"
114+
component={RouterLink}
115+
>
116+
Settings
117+
</Button>
118+
<Button
119+
disabled={groupData?.id===groupData?.organization_id}
120+
onClick={()=>{
121+
setIsDeletingGroup(true);
145122
}}
146-
/>
147-
)}
148-
<TableToolbar>
149-
<PaginationStatus
150-
isLoading={Boolean(isLoading)}
151-
showing={groupData?.members.length??0}
152-
total={groupData?.members.length??0}
153-
label="members"
154-
/>
155-
</TableToolbar>
123+
startIcon={<DeleteOutline/>}
124+
css={styles.removeButton}
125+
>
126+
Delete&hellip;
127+
</Button>
128+
</Stack>
129+
)}
130+
</Stack>
156131

157-
<TableContainer>
158-
<Table>
159-
<TableHead>
160-
<TableRow>
161-
<TableCellwidth="59%">User</TableCell>
162-
<TableCellwidth="40">Status</TableCell>
163-
<TableCellwidth="1%"></TableCell>
164-
</TableRow>
165-
</TableHead>
132+
<Stackspacing={1}>
133+
{canUpdateGroup&&groupData&&!isEveryoneGroup(groupData)&&(
134+
<AddGroupMember
135+
isLoading={addMemberMutation.isLoading}
136+
onSubmit={async(user,reset)=>{
137+
try{
138+
awaitaddMemberMutation.mutateAsync({
139+
groupId,
140+
userId:user.id,
141+
});
142+
reset();
143+
awaitgroupQuery.refetch();
144+
}catch(error){
145+
displayError(getErrorMessage(error,"Failed to add member."));
146+
}
147+
}}
148+
/>
149+
)}
150+
<TableToolbar>
151+
<PaginationStatus
152+
isLoading={Boolean(isLoading)}
153+
showing={groupData?.members.length??0}
154+
total={groupData?.members.length??0}
155+
label="members"
156+
/>
157+
</TableToolbar>
158+
159+
<TableContainer>
160+
<Table>
161+
<TableHead>
162+
<TableRow>
163+
<TableCellwidth="59%">User</TableCell>
164+
<TableCellwidth="40">Status</TableCell>
165+
<TableCellwidth="1%"></TableCell>
166+
</TableRow>
167+
</TableHead>
166168

167-
<TableBody>
168-
{groupData?.members.length===0 ?(
169-
<TableRow>
170-
<TableCellcolSpan={999}>
171-
<EmptyState
172-
message="No members yet"
173-
description="Add a member using the controls above"
174-
/>
175-
</TableCell>
176-
</TableRow>
177-
) :(
178-
groupData?.members.map((member)=>(
179-
<GroupMemberRow
180-
member={member}
181-
group={groupData}
182-
key={member.id}
183-
canUpdate={canUpdateGroup}
184-
onRemove={async()=>{
185-
try{
186-
awaitremoveMemberMutation.mutateAsync({
187-
groupId:groupData.id,
188-
userId:member.id,
189-
});
190-
awaitgroupQuery.refetch();
191-
displaySuccess("Member removed successfully.");
192-
}catch(error){
193-
displayError(
194-
getErrorMessage(error,"Failed to remove member."),
195-
);
196-
}
197-
}}
169+
<TableBody>
170+
{groupData?.members.length===0 ?(
171+
<TableRow>
172+
<TableCellcolSpan={999}>
173+
<EmptyState
174+
message="No members yet"
175+
description="Add a member using the controls above"
198176
/>
199-
))
200-
)}
201-
</TableBody>
202-
</Table>
203-
</TableContainer>
204-
</Stack>
205-
</Margins>
177+
</TableCell>
178+
</TableRow>
179+
) :(
180+
groupData?.members.map((member)=>(
181+
<GroupMemberRow
182+
member={member}
183+
group={groupData}
184+
key={member.id}
185+
canUpdate={canUpdateGroup}
186+
onRemove={async()=>{
187+
try{
188+
awaitremoveMemberMutation.mutateAsync({
189+
groupId:groupData.id,
190+
userId:member.id,
191+
});
192+
awaitgroupQuery.refetch();
193+
displaySuccess("Member removed successfully.");
194+
}catch(error){
195+
displayError(
196+
getErrorMessage(error,"Failed to remove member."),
197+
);
198+
}
199+
}}
200+
/>
201+
))
202+
)}
203+
</TableBody>
204+
</Table>
205+
</TableContainer>
206+
</Stack>
206207

207208
{groupQuery.data&&(
208209
<DeleteDialog

‎site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import type { Organization } from "api/typesGenerated";
1111
import{EmptyState}from"components/EmptyState/EmptyState";
1212
import{displayError}from"components/GlobalSnackbar/utils";
1313
import{Loader}from"components/Loader/Loader";
14-
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
14+
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
15+
import{Stack}from"components/Stack/Stack";
1516
import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility";
1617
import{pageTitle}from"utils/page";
1718
import{useOrganizationSettings}from"../ManagementSettingsLayout";
@@ -73,23 +74,21 @@ export const GroupsPage: FC = () => {
7374
<title>{pageTitle("Groups")}</title>
7475
</Helmet>
7576

76-
<PageHeader
77-
actions={
78-
<>
79-
{permissions.createGroup&&feats.template_rbac&&(
80-
<Button
81-
component={RouterLink}
82-
startIcon={<GroupAdd/>}
83-
to="create"
84-
>
85-
Create group
86-
</Button>
87-
)}
88-
</>
89-
}
77+
<Stack
78+
alignItems="baseline"
79+
direction="row"
80+
justifyContent="space-between"
9081
>
91-
<PageHeaderTitle>Groups</PageHeaderTitle>
92-
</PageHeader>
82+
<SettingsHeader
83+
title="Groups"
84+
description="Manage groups for this organization."
85+
/>
86+
{permissions.createGroup&&feats.template_rbac&&(
87+
<Buttoncomponent={RouterLink}startIcon={<GroupAdd/>}to="create">
88+
Create group
89+
</Button>
90+
)}
91+
</Stack>
9392

9493
<GroupsPageView
9594
groups={groupsQuery.data}

‎site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
MoreMenuItem,
2525
ThreeDotsButton,
2626
}from"components/MoreMenu/MoreMenu";
27-
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
27+
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
2828
import{Stack}from"components/Stack/Stack";
2929
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
3030
import{UserAvatar}from"components/UserAvatar/UserAvatar";
@@ -52,9 +52,7 @@ export const OrganizationMembersPageView: FC<
5252
>=(props)=>{
5353
return(
5454
<div>
55-
<PageHeader>
56-
<PageHeaderTitle>Organization members</PageHeaderTitle>
57-
</PageHeader>
55+
<SettingsHeadertitle="Organization members"/>
5856

5957
<Stack>
6058
{Boolean(props.error)&&<ErrorAlerterror={props.error}/>}

‎site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
FormFooter,
1919
}from"components/Form/Form";
2020
import{IconField}from"components/IconField/IconField";
21-
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
21+
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
2222
import{
2323
getFormHelpers,
2424
nameValidator,
@@ -67,9 +67,7 @@ export const OrganizationSettingsPageView: FC<
6767

6868
return(
6969
<div>
70-
<PageHeader>
71-
<PageHeaderTitle>Organization settings</PageHeaderTitle>
72-
</PageHeader>
70+
<SettingsHeadertitle="Organization settings"/>
7371

7472
{Boolean(error)&&!isApiValidationError(error)&&(
7573
<divcss={{marginBottom:32}}>

0 commit comments

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