Skip to content

Commit df47cc1

Browse files
code-ashercode-asher
committed
Use settings header on org pages
1 parent c58db86 commit df47cc1

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
<div css={{ 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-
<Stack spacing={1}>
131-
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
132-
<AddGroupMember
133-
isLoading={addMemberMutation.isLoading}
134-
onSubmit={async (user, reset) => {
135-
try {
136-
await addMemberMutation.mutateAsync({
137-
groupId,
138-
userId: user.id,
139-
});
140-
reset();
141-
await groupQuery.refetch();
142-
} catch (error) {
143-
displayError(getErrorMessage(error, "Failed to add member."));
144-
}
109+
{canUpdateGroup && (
110+
<Stack direction="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-
<TableCell width="59%">User</TableCell>
162-
<TableCell width="40">Status</TableCell>
163-
<TableCell width="1%"></TableCell>
164-
</TableRow>
165-
</TableHead>
132+
<Stack spacing={1}>
133+
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
134+
<AddGroupMember
135+
isLoading={addMemberMutation.isLoading}
136+
onSubmit={async (user, reset) => {
137+
try {
138+
await addMemberMutation.mutateAsync({
139+
groupId,
140+
userId: user.id,
141+
});
142+
reset();
143+
await groupQuery.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+
<TableCell width="59%">User</TableCell>
164+
<TableCell width="40">Status</TableCell>
165+
<TableCell width="1%"></TableCell>
166+
</TableRow>
167+
</TableHead>
166168

167-
<TableBody>
168-
{groupData?.members.length === 0 ? (
169-
<TableRow>
170-
<TableCell colSpan={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-
await removeMemberMutation.mutateAsync({
187-
groupId: groupData.id,
188-
userId: member.id,
189-
});
190-
await groupQuery.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+
<TableCell colSpan={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+
await removeMemberMutation.mutateAsync({
189+
groupId: groupData.id,
190+
userId: member.id,
191+
});
192+
await groupQuery.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+
<Button component={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+
<SettingsHeader title="Organization members" />
5856

5957
<Stack>
6058
{Boolean(props.error) && <ErrorAlert error={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+
<SettingsHeader title="Organization settings" />
7371

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

0 commit comments

Comments
 (0)