Skip to content

Commit 71561c8

Browse files
code-ashercode-asher
committed
Use settings header on org pages
1 parent b4663c1 commit 71561c8

File tree

8 files changed

+182
-187
lines changed

8 files changed

+182
-187
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/CustomRolesPage/CreateEditRolePageView.tsx

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,8 @@ import type {
2828
} from "api/typesGenerated";
2929
import { ErrorAlert } from "components/Alert/ErrorAlert";
3030
import { FormFields, FormFooter, VerticalForm } from "components/Form/Form";
31-
import {
32-
PageHeader,
33-
PageHeaderSubtitle,
34-
PageHeaderTitle,
35-
} from "components/PageHeader/PageHeader";
31+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
32+
import { Stack } from "components/Stack/Stack";
3633
import { getFormHelpers, nameValidator } from "utils/formUtils";
3734

3835
const validationSchema = Yup.object({
@@ -77,37 +74,37 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
7774

7875
return (
7976
<>
80-
<PageHeader
81-
actions={
82-
canAssignOrgRole && (
83-
<>
84-
<Button
85-
onClick={() => {
86-
navigate(`/organizations/${organizationName}/roles`);
87-
}}
88-
>
89-
Cancel
90-
</Button>
91-
<Button
92-
variant="contained"
93-
color="primary"
94-
onClick={() => {
95-
form.handleSubmit();
96-
}}
97-
>
98-
{role !== undefined ? "Save" : "Create Role"}
99-
</Button>
100-
</>
101-
)
102-
}
77+
<Stack
78+
alignItems="baseline"
79+
direction="row"
80+
justifyContent="space-between"
10381
>
104-
<PageHeaderTitle>
105-
{role ? "Edit" : "Create"} custom role
106-
</PageHeaderTitle>
107-
<PageHeaderSubtitle>
108-
{"Set a name and permissions for this role."}
109-
</PageHeaderSubtitle>
110-
</PageHeader>
82+
<SettingsHeader
83+
title={`${role ? "Edit" : "Create"} custom role`}
84+
description="Set a name and permissions for this role."
85+
/>
86+
{canAssignOrgRole && (
87+
<Stack direction="row" spacing={2}>
88+
<Button
89+
onClick={() => {
90+
navigate(`/organizations/${organizationName}/roles`);
91+
}}
92+
>
93+
Cancel
94+
</Button>
95+
<Button
96+
variant="contained"
97+
color="primary"
98+
onClick={() => {
99+
form.handleSubmit();
100+
}}
101+
>
102+
{role !== undefined ? "Save" : "Create Role"}
103+
</Button>
104+
</Stack>
105+
)}
106+
</Stack>
107+
111108
<VerticalForm onSubmit={form.handleSubmit}>
112109
<FormFields>
113110
{Boolean(error) && !isApiValidationError(error) && (

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { organizationPermissions } from "api/queries/organizations";
99
import { organizationRoles } from "api/queries/roles";
1010
import { displayError } from "components/GlobalSnackbar/utils";
1111
import { Loader } from "components/Loader/Loader";
12-
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
12+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
13+
import { Stack } from "components/Stack/Stack";
1314
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1415
import { pageTitle } from "utils/page";
1516
import { useOrganizationSettings } from "../ManagementSettingsLayout";
@@ -50,23 +51,21 @@ export const CustomRolesPage: FC = () => {
5051
<title>{pageTitle("Custom Roles")}</title>
5152
</Helmet>
5253

53-
<PageHeader
54-
actions={
55-
<>
56-
{permissions.assignOrgRole && isCustomRolesEnabled && (
57-
<Button
58-
component={RouterLink}
59-
startIcon={<AddIcon />}
60-
to="create"
61-
>
62-
Create custom role
63-
</Button>
64-
)}
65-
</>
66-
}
54+
<Stack
55+
alignItems="baseline"
56+
direction="row"
57+
justifyContent="space-between"
6758
>
68-
<PageHeaderTitle>Custom Roles</PageHeaderTitle>
69-
</PageHeader>
59+
<SettingsHeader
60+
title="Custom Roles"
61+
description="Manage custom roles for this organization."
62+
/>
63+
{permissions.assignOrgRole && isCustomRolesEnabled && (
64+
<Button component={RouterLink} startIcon={<AddIcon />} to="create">
65+
Create custom role
66+
</Button>
67+
)}
68+
</Stack>
7069

7170
<CustomRolesPageView
7271
roles={filteredRoleData}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
HorizontalForm,
1414
} from "components/Form/Form";
1515
import { IconField } from "components/IconField/IconField";
16-
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
16+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1717
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
1818

1919
const validationSchema = Yup.object({
@@ -47,9 +47,11 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
4747

4848
return (
4949
<>
50-
<PageHeader css={{ paddingTop: 8 }}>
51-
<PageHeaderTitle>Create a group</PageHeaderTitle>
52-
</PageHeader>
50+
<SettingsHeader
51+
title="New Group"
52+
description="Create a group in this organization."
53+
/>
54+
5355
<HorizontalForm onSubmit={form.handleSubmit}>
5456
<FormSection
5557
title="Group settings"

0 commit comments

Comments
 (0)