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

Commit7de576b

Browse files
authored
feat: add premium license banner for custom roles page (#14595)
* feat: initial commit for premium banners* feat: update design and copy* fix: fix format* fix: cleanup* fix: paywall stories and popoverpaywall* fix: updates for review comments* chore: remove references to enterprise license* chore:n remove references to enterprise license* fix: format* chore: simplify branding colors* fix: fix color references
1 parent3301212 commit7de576b

File tree

30 files changed

+215
-177
lines changed

30 files changed

+215
-177
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
Badges,
55
DisabledBadge,
66
EnabledBadge,
7-
EnterpriseBadge,
87
EntitledBadge,
98
HealthyBadge,
109
NotHealthyBadge,
1110
NotReachableBadge,
1211
NotRegisteredBadge,
12+
PremiumBadge,
1313
PreviewBadge,
1414
}from"./Badges";
1515

@@ -50,9 +50,9 @@ export const Disabled: Story = {
5050
children:<DisabledBadge/>,
5151
},
5252
};
53-
exportconstEnterprise:Story={
53+
exportconstPremium:Story={
5454
args:{
55-
children:<EnterpriseBadge/>,
55+
children:<PremiumBadge/>,
5656
},
5757
};
5858
exportconstPreview:Story={

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -106,31 +106,14 @@ 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.roles.notice.background,
116-
border:`1px solid${theme.roles.notice.outline}`,
117-
color:theme.roles.notice.text,
118-
}),
119-
]}
120-
>
121-
Enterprise
122-
</span>
123-
);
124-
};
125-
126109
exportconstPremiumBadge:FC=()=>{
127110
return(
128111
<span
129112
css={[
130113
styles.badge,
131114
(theme)=>({
132-
backgroundColor:theme.roles.notice.background,
133-
border:`1px solid${theme.roles.notice.outline}`,
115+
backgroundColor:theme.branding.background,
116+
border:`1px solid${theme.branding.border}`,
134117
color:theme.roles.notice.text,
135118
}),
136119
]}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ const meta: Meta<typeof Paywall> = {
99
exportdefaultmeta;
1010
typeStory=StoryObj<typeofPaywall>;
1111

12-
constExample:Story={
12+
exportconstPremium:Story={
1313
args:{
1414
message:"Black Lotus",
1515
description:
1616
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
1717
},
1818
};
19-
20-
export{ExampleasPaywall};

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

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
22
importTaskAltIconfrom"@mui/icons-material/TaskAlt";
33
importButtonfrom"@mui/material/Button";
44
importLinkfrom"@mui/material/Link";
5-
import{EnterpriseBadge}from"components/Badges/Badges";
5+
import{PremiumBadge}from"components/Badges/Badges";
66
import{Stack}from"components/Stack/Stack";
77
importtype{FC,ReactNode}from"react";
88
import{docs}from"utils/docs";
@@ -19,11 +19,19 @@ export const Paywall: FC<PaywallProps> = ({
1919
documentationLink,
2020
})=>{
2121
return(
22-
<divcss={styles.root}>
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+
>
2331
<div>
2432
<Stackdirection="row"alignItems="center"css={{marginBottom:24}}>
2533
<h5css={styles.title}>{message}</h5>
26-
<EnterpriseBadge/>
34+
<PremiumBadge/>
2735
</Stack>
2836

2937
{description&&<pcss={styles.description}>{description}</p>}
@@ -36,20 +44,24 @@ export const Paywall: FC<PaywallProps> = ({
3644
Read the documentation
3745
</Link>
3846
</div>
39-
<divcss={styles.separator}></div>
47+
<divcss={styles.separator}/>
4048
<Stackdirection="column"alignItems="center"spacing={3}>
4149
<ulcss={styles.featureList}>
4250
<licss={styles.feature}>
43-
<FeatureIcon/> Template access control
51+
<FeatureIcon/>
52+
High availability&workspaceproxies
4453
</li>
4554
<licss={styles.feature}>
46-
<FeatureIcon/> User groups
55+
<FeatureIcon/>
56+
Multi-org&role-basedaccesscontrol
4757
</li>
4858
<licss={styles.feature}>
49-
<FeatureIcon/> 24 hour support
59+
<FeatureIcon/>
60+
24x7 global support with SLA
5061
</li>
5162
<licss={styles.feature}>
52-
<FeatureIcon/> Audit logs
63+
<FeatureIcon/>
64+
Unlimited Git&externalauthintegrations
5365
</li>
5466
</ul>
5567
<Button
@@ -60,29 +72,33 @@ export const Paywall: FC<PaywallProps> = ({
6072
variant="outlined"
6173
color="neutral"
6274
>
63-
Learn aboutEnterprise
75+
Learn aboutPremium
6476
</Button>
6577
</Stack>
6678
</div>
6779
);
6880
};
6981

7082
constFeatureIcon:FC=()=>{
71-
return<TaskAltIconcss={styles.featureIcon}/>;
83+
return(
84+
<TaskAltIcon
85+
css={[
86+
(theme)=>({
87+
color:theme.branding.border,
88+
}),
89+
]}
90+
/>
91+
);
7292
};
7393

7494
conststyles={
75-
root:(theme)=>({
95+
root:()=>({
7696
display:"flex",
7797
flexDirection:"row",
7898
justifyContent:"center",
7999
alignItems:"center",
80-
minHeight:300,
81-
maxWidth:920,
82-
margin:"auto",
100+
minHeight:280,
83101
padding:24,
84-
backgroundImage:`linear-gradient(160deg, transparent,${theme.roles.active.background})`,
85-
border:`1px solid${theme.roles.active.fill.outline}`,
86102
borderRadius:8,
87103
gap:32,
88104
}),
@@ -92,25 +108,21 @@ const styles = {
92108
fontSize:22,
93109
margin:0,
94110
},
95-
description:(theme)=>({
96-
marginTop:16,
111+
description:()=>({
97112
fontFamily:"inherit",
98-
maxWidth:420,
99-
lineHeight:"160%",
100-
color:theme.palette.text.secondary,
101-
fontSize:16,
113+
maxWidth:460,
114+
fontSize:14,
102115
}),
103116
separator:(theme)=>({
104117
width:1,
105118
height:220,
106-
backgroundColor:theme.palette.divider,
119+
backgroundColor:theme.branding.divider,
107120
marginLeft:8,
108121
}),
109122
featureList:{
110123
listStyle:"none",
111124
margin:0,
112-
marginRight:8,
113-
padding:"0 12px",
125+
padding:"0 24px",
114126
fontSize:14,
115127
fontWeight:500,
116128
},

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,10 @@ const meta: Meta<typeof PopoverPaywall> = {
99
exportdefaultmeta;
1010
typeStory=StoryObj<typeofPopoverPaywall>;
1111

12-
exportconstEnterprise:Story={
13-
args:{
14-
message:"Black Lotus",
15-
description:
16-
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
17-
},
18-
};
19-
2012
exportconstPremium:Story={
2113
args:{
2214
message:"Black Lotus",
2315
description:
2416
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
25-
licenseType:"premium",
2617
},
2718
};

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

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
22
importTaskAltIconfrom"@mui/icons-material/TaskAlt";
33
importButtonfrom"@mui/material/Button";
44
importLinkfrom"@mui/material/Link";
5-
import{EnterpriseBadge,PremiumBadge}from"components/Badges/Badges";
5+
import{PremiumBadge}from"components/Badges/Badges";
66
import{Stack}from"components/Stack/Stack";
77
importtype{FC,ReactNode}from"react";
88
import{docs}from"utils/docs";
@@ -11,21 +11,27 @@ export interface PopoverPaywallProps {
1111
message:string;
1212
description?:ReactNode;
1313
documentationLink?:string;
14-
licenseType?:"enterprise"|"premium";
1514
}
1615

1716
exportconstPopoverPaywall:FC<PopoverPaywallProps>=({
1817
message,
1918
description,
2019
documentationLink,
21-
licenseType="enterprise",
2220
})=>{
2321
return(
24-
<divcss={styles.root}>
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+
>
2531
<div>
2632
<Stackdirection="row"alignItems="center"css={{marginBottom:18}}>
2733
<h5css={styles.title}>{message}</h5>
28-
{licenseType==="premium" ?<PremiumBadge/> :<EnterpriseBadge/>}
34+
<PremiumBadge/>
2935
</Stack>
3036

3137
{description&&<pcss={styles.description}>{description}</p>}
@@ -38,26 +44,21 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
3844
Read the documentation
3945
</Link>
4046
</div>
41-
<divcss={styles.separator}></div>
47+
<divcss={styles.separator}/>
4248
<Stackdirection="column"alignItems="center"spacing={2}>
4349
<ulcss={styles.featureList}>
4450
<licss={styles.feature}>
45-
<FeatureIcon/>Template access control
51+
<FeatureIcon/>High availability&workspaceproxies
4652
</li>
4753
<licss={styles.feature}>
48-
<FeatureIcon/>User groups
54+
<FeatureIcon/>Multi-org&role-basedaccesscontrol
4955
</li>
5056
<licss={styles.feature}>
51-
<FeatureIcon/>24 hour support
57+
<FeatureIcon/>24x7 global support with SLA
5258
</li>
5359
<licss={styles.feature}>
54-
<FeatureIcon/>Audit logs
60+
<FeatureIcon/>Unlimited Git&externalauthintegrations
5561
</li>
56-
{licenseType==="premium"&&(
57-
<licss={styles.feature}>
58-
<FeatureIcon/> Organizations
59-
</li>
60-
)}
6162
</ul>
6263
<Button
6364
href={docs("/enterprise")}
@@ -67,15 +68,23 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6768
variant="outlined"
6869
color="neutral"
6970
>
70-
Learn about{licenseType==="premium" ?"Premium" :"Enterprise"}
71+
Learn about Premium
7172
</Button>
7273
</Stack>
7374
</div>
7475
);
7576
};
7677

7778
constFeatureIcon:FC=()=>{
78-
return<TaskAltIconcss={styles.featureIcon}/>;
79+
return(
80+
<TaskAltIcon
81+
css={[
82+
(theme)=>({
83+
color:theme.branding.border,
84+
}),
85+
]}
86+
/>
87+
);
7988
};
8089

8190
conststyles={
@@ -85,8 +94,6 @@ const styles = {
8594
alignItems:"center",
8695
maxWidth:600,
8796
padding:"24px 36px",
88-
backgroundImage:`linear-gradient(160deg, transparent,${theme.roles.active.background})`,
89-
border:`1px solid${theme.roles.active.fill.outline}`,
9097
borderRadius:8,
9198
gap:18,
9299
}),
@@ -118,10 +125,6 @@ const styles = {
118125
fontSize:13,
119126
fontWeight:500,
120127
},
121-
featureIcon:(theme)=>({
122-
color:theme.roles.active.fill.outline,
123-
fontSize:"1.5em",
124-
}),
125128
feature:{
126129
display:"flex",
127130
alignItems:"center",

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
138138
<Cond>
139139
<Paywall
140140
message="Audit logs"
141-
description="Audit logs allow you to monitor user operations on your deployment. You need anEnterprise license to use this feature."
141+
description="Audit logs allow you to monitor user operations on your deployment. You need anPremium license to use this feature."
142142
documentationLink={docs("/admin/audit-logs")}
143143
/>
144144
</Cond>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import type { UpdateAppearanceConfig } from "api/typesGenerated";
55
import{
66
Badges,
77
DisabledBadge,
8-
EnterpriseBadge,
98
EntitledBadge,
9+
PremiumBadge,
1010
}from"components/Badges/Badges";
1111
import{PopoverPaywall}from"components/Paywall/PopoverPaywall";
1212
import{
@@ -64,13 +64,13 @@ export const AppearanceSettingsPageView: FC<
6464
<Popovermode="hover">
6565
<PopoverTrigger>
6666
<span>
67-
<EnterpriseBadge/>
67+
<PremiumBadge/>
6868
</span>
6969
</PopoverTrigger>
7070
<PopoverContentcss={{transform:"translateY(-28px)"}}>
7171
<PopoverPaywall
7272
message="Appearance"
73-
description="Withan Enterprise license, you can customize the appearance of your deployment."
73+
description="Witha Premium license, you can customize the appearance of your deployment."
7474
documentationLink="https://coder.com/docs/admin/appearance"
7575
/>
7676
</PopoverContent>

0 commit comments

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