Skip to content

Commit aef400c

Browse files
ParkreinerParkreiner
authored
fix: update presentation of beta badges for organizations UI (#14806)
* fix: make badges capitalized * fix: remove beta badges from all headers for organizations
1 parent 9ef9044 commit aef400c

File tree

8 files changed

+35
-51
lines changed

8 files changed

+35
-51
lines changed

‎site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
4141
{...delegatedProps}
4242
>
4343
<span style={visuallyHidden}> (This is a</span>
44-
{featureStageBadgeTypes[contentType]}
44+
<span css={styles.badgeLabel}>
45+
{featureStageBadgeTypes[contentType]}
46+
</span>
4547
<span style={visuallyHidden}> feature)</span>
4648
</span>
4749
)}
@@ -99,6 +101,13 @@ const styles = {
99101
backgroundColor: theme.branding.featureStage.hover.background,
100102
}),
101103

104+
badgeLabel: {
105+
// Have to set display mode to anything other than inline, or else the
106+
// CSS capitalization algorithm won't capitalize the element
107+
display: "inline-block",
108+
textTransform: "capitalize",
109+
},
110+
102111
badgeLargeText: {
103112
fontSize: "1rem",
104113
},

‎site/src/components/SettingsHeader/SettingsHeader.tsx

+22-27
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ interface HeaderProps {
1010
secondary?: boolean;
1111
docsHref?: string;
1212
tooltip?: ReactNode;
13-
badges?: ReactNode;
1413
}
1514

1615
export const SettingsHeader: FC<HeaderProps> = ({
@@ -19,38 +18,34 @@ export const SettingsHeader: FC<HeaderProps> = ({
1918
docsHref,
2019
secondary,
2120
tooltip,
22-
badges,
2321
}) => {
2422
const theme = useTheme();
2523

2624
return (
2725
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
2826
<div css={{ maxWidth: 420, marginBottom: 24 }}>
29-
<Stack direction="row" spacing={2} alignItems="center">
30-
<Stack direction="row" spacing={1} alignItems="center">
31-
<h1
32-
css={[
33-
{
34-
fontSize: 32,
35-
fontWeight: 700,
36-
display: "flex",
37-
alignItems: "baseline",
38-
lineHeight: "initial",
39-
margin: 0,
40-
marginBottom: 4,
41-
gap: 8,
42-
},
43-
secondary && {
44-
fontSize: 24,
45-
fontWeight: 500,
46-
},
47-
]}
48-
>
49-
{title}
50-
</h1>
51-
{tooltip}
52-
</Stack>
53-
{badges}
27+
<Stack direction="row" spacing={1} alignItems="center">
28+
<h1
29+
css={[
30+
{
31+
fontSize: 32,
32+
fontWeight: 700,
33+
display: "flex",
34+
alignItems: "baseline",
35+
lineHeight: "initial",
36+
margin: 0,
37+
marginBottom: 4,
38+
gap: 8,
39+
},
40+
secondary && {
41+
fontSize: 24,
42+
fontWeight: 500,
43+
},
44+
]}
45+
>
46+
{title}
47+
</h1>
48+
{tooltip}
5449
</Stack>
5550

5651
{description && (

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

-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { organizationPermissions } from "api/queries/organizations";
55
import { deleteOrganizationRole, organizationRoles } from "api/queries/roles";
66
import type { Role } from "api/typesGenerated";
77
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
8-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
98
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
109
import { Loader } from "components/Loader/Loader";
1110
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
@@ -67,7 +66,6 @@ export const CustomRolesPage: FC = () => {
6766
<SettingsHeader
6867
title="Custom Roles"
6968
description="Manage custom roles for this organization."
70-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
7169
/>
7270
{permissions.assignOrgRole && isCustomRolesEnabled && (
7371
<Button component={RouterLink} startIcon={<AddIcon />} to="create">

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

-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { groupsByOrganization } from "api/queries/groups";
55
import { organizationPermissions } from "api/queries/organizations";
66
import type { Organization } from "api/typesGenerated";
77
import { EmptyState } from "components/EmptyState/EmptyState";
8-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
98
import { displayError } from "components/GlobalSnackbar/utils";
109
import { Loader } from "components/Loader/Loader";
1110
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
@@ -81,7 +80,6 @@ export const GroupsPage: FC = () => {
8180
<SettingsHeader
8281
title="Groups"
8382
description="Manage groups for this organization."
84-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
8583
/>
8684
{permissions.createGroup && feats.template_rbac && (
8785
<Button component={RouterLink} startIcon={<GroupAdd />} to="create">

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

-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
} from "api/queries/organizations";
88
import { ErrorAlert } from "components/Alert/ErrorAlert";
99
import { EmptyState } from "components/EmptyState/EmptyState";
10-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
1110
import { Loader } from "components/Loader/Loader";
1211
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1312
import { Stack } from "components/Stack/Stack";
@@ -84,7 +83,6 @@ export const IdpSyncPage: FC = () => {
8483
title="IdP Sync"
8584
description="Group and role sync mappings (configured using Coder CLI)."
8685
tooltip={<IdpSyncHelpTooltip />}
87-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
8886
/>
8987
<Stack direction="row" spacing={2}>
9088
<Button

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import type {
1717
} from "api/typesGenerated";
1818
import { ErrorAlert } from "components/Alert/ErrorAlert";
1919
import { AvatarData } from "components/AvatarData/AvatarData";
20-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
2120
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
2221
import {
2322
MoreMenu,
@@ -61,11 +60,7 @@ export const OrganizationMembersPageView: FC<
6160
> = (props) => {
6261
return (
6362
<div>
64-
<SettingsHeader
65-
title="Members"
66-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
67-
/>
68-
63+
<SettingsHeader title="Members" />
6964
<Stack>
7065
{Boolean(props.error) && <ErrorAlert error={props.error} />}
7166

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type {
66
ProvisionerKeyDaemons,
77
} from "api/typesGenerated";
88
import { EmptyState } from "components/EmptyState/EmptyState";
9-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
109
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1110
import { Stack } from "components/Stack/Stack";
1211
import { ProvisionerGroup } from "modules/provisioners/ProvisionerGroup";
@@ -39,10 +38,7 @@ export const OrganizationProvisionersPageView: FC<
3938
direction="row"
4039
justifyContent="space-between"
4140
>
42-
<SettingsHeader
43-
title="Provisioners"
44-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
45-
/>
41+
<SettingsHeader title="Provisioners" />
4642
<Button
4743
endIcon={<OpenInNewIcon />}
4844
target="_blank"

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import type {
88
} from "api/typesGenerated";
99
import { ErrorAlert } from "components/Alert/ErrorAlert";
1010
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
11-
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
1211
import {
1312
FormFields,
1413
FormFooter,
@@ -67,11 +66,7 @@ export const OrganizationSettingsPageView: FC<
6766

6867
return (
6968
<div>
70-
<SettingsHeader
71-
title="Settings"
72-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
73-
/>
74-
69+
<SettingsHeader title="Settings" />
7570
{Boolean(error) && !isApiValidationError(error) && (
7671
<div css={{ marginBottom: 32 }}>
7772
<ErrorAlert error={error} />

0 commit comments

Comments
 (0)