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

Commitc6bc741

Browse files
authored
feat: add premium license behavior for create organization page (#14650)
* fix: type* chore: paywall improvements* feat: update create org for premium license* fix: remove []* feat: update licensing pills to reflect new premium tier (#14670)* feat: update licensing pills to reflect new premium tier* fix: format
1 parent9006b21 commitc6bc741

File tree

16 files changed

+257
-153
lines changed

16 files changed

+257
-153
lines changed

‎site/src/components/Badges/Badges.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,32 @@ export const DisabledBadge: FC = forwardRef<
106106
);
107107
});
108108

109+
exportconstEnterpriseBadge:FC=()=>{
110+
return(
111+
<span
112+
css={[
113+
styles.badge,
114+
(theme)=>({
115+
backgroundColor:theme.branding.enterprise.background,
116+
border:`1px solid${theme.branding.enterprise.border}`,
117+
color:theme.branding.enterprise.text,
118+
}),
119+
]}
120+
>
121+
Enterprise
122+
</span>
123+
);
124+
};
125+
109126
exportconstPremiumBadge:FC=()=>{
110127
return(
111128
<span
112129
css={[
113130
styles.badge,
114131
(theme)=>({
115-
backgroundColor:theme.branding.background,
116-
border:`1px solid${theme.branding.border}`,
117-
color:theme.roles.notice.text,
132+
backgroundColor:theme.branding.premium.background,
133+
border:`1px solid${theme.branding.premium.border}`,
134+
color:theme.branding.premium.text,
118135
}),
119136
]}
120137
>

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
1919
documentationLink,
2020
})=>{
2121
return(
22-
<div
23-
css={[
24-
styles.root,
25-
(theme)=>({
26-
backgroundImage:`linear-gradient(160deg, transparent,${theme.branding.background})`,
27-
border:`1px solid${theme.branding.border}`,
28-
}),
29-
]}
30-
>
22+
<divcss={styles.root}>
3123
<div>
3224
<Stackdirection="row"alignItems="center"css={{marginBottom:24}}>
3325
<h5css={styles.title}>{message}</h5>
@@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
4537
</Link>
4638
</div>
4739
<divcss={styles.separator}/>
48-
<Stackdirection="column"alignItems="center"spacing={3}>
40+
<Stackdirection="column"alignItems="left"spacing={3}>
4941
<ulcss={styles.featureList}>
5042
<licss={styles.feature}>
5143
<FeatureIcon/>
@@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
6456
Unlimited Git&externalauthintegrations
6557
</li>
6658
</ul>
67-
<Button
68-
href={docs("/enterprise")}
69-
target="_blank"
70-
rel="noreferrer"
71-
startIcon={<spancss={{fontSize:22}}>&rarr;</span>}
72-
variant="outlined"
73-
color="neutral"
74-
>
75-
Learn about Premium
76-
</Button>
59+
<divcss={styles.learnButton}>
60+
<Button
61+
href={docs("/enterprise")}
62+
target="_blank"
63+
rel="noreferrer"
64+
startIcon={<spancss={{fontSize:22}}>&rarr;</span>}
65+
variant="outlined"
66+
color="neutral"
67+
>
68+
Learn about Premium
69+
</Button>
70+
</div>
7771
</Stack>
7872
</div>
7973
);
@@ -84,15 +78,15 @@ const FeatureIcon: FC = () => {
8478
<TaskAltIcon
8579
css={[
8680
(theme)=>({
87-
color:theme.branding.border,
81+
color:theme.branding.premium.border,
8882
}),
8983
]}
9084
/>
9185
);
9286
};
9387

9488
conststyles={
95-
root:()=>({
89+
root:(theme)=>({
9690
display:"flex",
9791
flexDirection:"row",
9892
justifyContent:"center",
@@ -101,6 +95,8 @@ const styles = {
10195
padding:24,
10296
borderRadius:8,
10397
gap:32,
98+
backgroundImage:`linear-gradient(160deg, transparent,${theme.branding.premium.background})`,
99+
border:`1px solid${theme.branding.premium.border}`,
104100
}),
105101
title:{
106102
fontWeight:600,
@@ -116,9 +112,12 @@ const styles = {
116112
separator:(theme)=>({
117113
width:1,
118114
height:220,
119-
backgroundColor:theme.branding.divider,
115+
backgroundColor:theme.branding.premium.divider,
120116
marginLeft:8,
121117
}),
118+
learnButton:{
119+
padding:"0 28px",
120+
},
122121
featureList:{
123122
listStyle:"none",
124123
margin:0,

‎site/src/components/Paywall/PopoverPaywall.tsx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
2323
css={[
2424
styles.root,
2525
(theme)=>({
26-
backgroundImage:`linear-gradient(160deg, transparent,${theme.branding.background})`,
27-
border:`1px solid${theme.branding.border}`,
26+
backgroundImage:`linear-gradient(160deg, transparent,${theme.branding.premium.background})`,
27+
border:`1px solid${theme.branding.premium.border}`,
2828
}),
2929
]}
3030
>
@@ -45,7 +45,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
4545
</Link>
4646
</div>
4747
<divcss={styles.separator}/>
48-
<Stackdirection="column"alignItems="center"spacing={2}>
48+
<Stackdirection="column"alignItems="left"spacing={2}>
4949
<ulcss={styles.featureList}>
5050
<licss={styles.feature}>
5151
<FeatureIcon/> High availability&workspaceproxies
@@ -60,16 +60,18 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6060
<FeatureIcon/> Unlimited Git&externalauthintegrations
6161
</li>
6262
</ul>
63-
<Button
64-
href={docs("/enterprise")}
65-
target="_blank"
66-
rel="noreferrer"
67-
startIcon={<spancss={{fontSize:22}}>&rarr;</span>}
68-
variant="outlined"
69-
color="neutral"
70-
>
71-
Learn about Premium
72-
</Button>
63+
<divcss={styles.learnButton}>
64+
<Button
65+
href={docs("/enterprise")}
66+
target="_blank"
67+
rel="noreferrer"
68+
startIcon={<spancss={{fontSize:22}}>&rarr;</span>}
69+
variant="outlined"
70+
color="neutral"
71+
>
72+
Learn about Premium
73+
</Button>
74+
</div>
7375
</Stack>
7476
</div>
7577
);
@@ -80,7 +82,7 @@ const FeatureIcon: FC = () => {
8082
<TaskAltIcon
8183
css={[
8284
(theme)=>({
83-
color:theme.branding.border,
85+
color:theme.branding.premium.border,
8486
}),
8587
]}
8688
/>
@@ -92,7 +94,7 @@ const styles = {
9294
display:"flex",
9395
flexDirection:"row",
9496
alignItems:"center",
95-
maxWidth:600,
97+
maxWidth:770,
9698
padding:"24px 36px",
9799
borderRadius:8,
98100
gap:18,
@@ -106,7 +108,7 @@ const styles = {
106108
description:(theme)=>({
107109
marginTop:8,
108110
fontFamily:"inherit",
109-
maxWidth:420,
111+
maxWidth:360,
110112
lineHeight:"160%",
111113
color:theme.palette.text.secondary,
112114
fontSize:14,
@@ -121,10 +123,13 @@ const styles = {
121123
listStyle:"none",
122124
margin:0,
123125
marginRight:8,
124-
padding:"012px",
126+
padding:"00 0 24px",
125127
fontSize:13,
126128
fontWeight:500,
127129
},
130+
learnButton:{
131+
padding:"0 28px",
132+
},
128133
feature:{
129134
display:"flex",
130135
alignItems:"center",

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { appearanceConfigKey, updateAppearance } from "api/queries/appearance";
33
importtype{UpdateAppearanceConfig}from"api/typesGenerated";
44
import{displayError,displaySuccess}from"components/GlobalSnackbar/utils";
55
import{useDashboard}from"modules/dashboard/useDashboard";
6+
import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility";
67
importtype{FC}from"react";
78
import{Helmet}from"react-helmet-async";
89
import{useMutation,useQueryClient}from"react-query";
@@ -15,6 +16,7 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
1516
// the command line would be a significantly worse user experience.
1617
constAppearanceSettingsPage:FC=()=>{
1718
const{ appearance, entitlements}=useDashboard();
19+
const{multiple_organizations:hasPremiumLicense}=useFeatureVisibility();
1820
constqueryClient=useQueryClient();
1921
constupdateAppearanceMutation=useMutation(updateAppearance(queryClient));
2022

@@ -46,6 +48,7 @@ const AppearanceSettingsPage: FC = () => {
4648
isEntitled={
4749
entitlements.features.appearance.entitlement!=="not_entitled"
4850
}
51+
isPremium={hasPremiumLicense}
4952
/>
5053
</>
5154
);

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import TextField from "@mui/material/TextField";
44
importtype{UpdateAppearanceConfig}from"api/typesGenerated";
55
import{
66
Badges,
7-
DisabledBadge,
8-
EntitledBadge,
7+
EnterpriseBadge,
98
PremiumBadge,
109
}from"components/Badges/Badges";
1110
import{PopoverPaywall}from"components/Paywall/PopoverPaywall";
@@ -24,14 +23,15 @@ import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings";
2423
exporttypeAppearanceSettingsPageViewProps={
2524
appearance:UpdateAppearanceConfig;
2625
isEntitled:boolean;
26+
isPremium:boolean;
2727
onSaveAppearance:(
2828
newConfig:Partial<UpdateAppearanceConfig>,
2929
)=>Promise<void>;
3030
};
3131

3232
exportconstAppearanceSettingsPageView:FC<
3333
AppearanceSettingsPageViewProps
34-
>=({ appearance, isEntitled, onSaveAppearance})=>{
34+
>=({ appearance, isEntitled,isPremium,onSaveAppearance})=>{
3535
constapplicationNameForm=useFormik<{
3636
application_name:string;
3737
}>({
@@ -60,13 +60,17 @@ export const AppearanceSettingsPageView: FC<
6060
/>
6161

6262
<Badges>
63-
{isEntitled ?<EntitledBadge/> :<DisabledBadge/>}
6463
<Popovermode="hover">
65-
<PopoverTrigger>
66-
<span>
67-
<PremiumBadge/>
68-
</span>
69-
</PopoverTrigger>
64+
{isEntitled&&!isPremium ?(
65+
<EnterpriseBadge/>
66+
) :(
67+
<PopoverTrigger>
68+
<span>
69+
<PremiumBadge/>
70+
</span>
71+
</PopoverTrigger>
72+
)}
73+
7074
<PopoverContentcss={{transform:"translateY(-28px)"}}>
7175
<PopoverPaywall
7276
message="Appearance"

‎site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{Loader}from"components/Loader/Loader";
22
import{useDashboard}from"modules/dashboard/useDashboard";
3+
import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility";
34
importtype{FC}from"react";
45
import{Helmet}from"react-helmet-async";
56
import{pageTitle}from"utils/page";
@@ -9,6 +10,7 @@ import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
910
constObservabilitySettingsPage:FC=()=>{
1011
const{ deploymentValues}=useDeploySettings();
1112
const{ entitlements}=useDashboard();
13+
const{multiple_organizations:hasPremiumLicense}=useFeatureVisibility();
1214

1315
return(
1416
<>
@@ -20,6 +22,7 @@ const ObservabilitySettingsPage: FC = () => {
2022
<ObservabilitySettingsPageView
2123
options={deploymentValues.options}
2224
featureAuditLogEnabled={entitlements.features.audit_log.enabled}
25+
isPremium={hasPremiumLicense}
2326
/>
2427
) :(
2528
<Loader/>

‎site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
importtype{SerpentOption}from"api/typesGenerated";
22
import{
33
Badges,
4-
DisabledBadge,
5-
EnabledBadge,
4+
EnterpriseBadge,
65
PremiumBadge,
76
}from"components/Badges/Badges";
7+
import{PopoverPaywall}from"components/Paywall/PopoverPaywall";
8+
import{
9+
Popover,
10+
PopoverContent,
11+
PopoverTrigger,
12+
}from"components/Popover/Popover";
813
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
914
import{Stack}from"components/Stack/Stack";
1015
importtype{FC}from"react";
@@ -15,11 +20,12 @@ import OptionsTable from "../OptionsTable";
1520
exporttypeObservabilitySettingsPageViewProps={
1621
options:SerpentOption[];
1722
featureAuditLogEnabled:boolean;
23+
isPremium:boolean;
1824
};
1925

2026
exportconstObservabilitySettingsPageView:FC<
2127
ObservabilitySettingsPageViewProps
22-
>=({ options, featureAuditLogEnabled})=>{
28+
>=({ options, featureAuditLogEnabled, isPremium})=>{
2329
return(
2430
<>
2531
<Stackdirection="column"spacing={6}>
@@ -33,8 +39,25 @@ export const ObservabilitySettingsPageView: FC<
3339
/>
3440

3541
<Badges>
36-
{featureAuditLogEnabled ?<EnabledBadge/> :<DisabledBadge/>}
37-
<PremiumBadge/>
42+
<Popovermode="hover">
43+
{featureAuditLogEnabled&&!isPremium ?(
44+
<EnterpriseBadge/>
45+
) :(
46+
<PopoverTrigger>
47+
<span>
48+
<PremiumBadge/>
49+
</span>
50+
</PopoverTrigger>
51+
)}
52+
53+
<PopoverContentcss={{transform:"translateY(-28px)"}}>
54+
<PopoverPaywall
55+
message="Observability"
56+
description="With a Premium license, you can monitor your application with logs and metrics."
57+
documentationLink="https://coder.com/docs/admin/appearance"
58+
/>
59+
</PopoverContent>
60+
</Popover>
3861
</Badges>
3962
</div>
4063

0 commit comments

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