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

Commitc58db86

Browse files
committed
Add premium badge
1 parenteb9318c commitc58db86

File tree

16 files changed

+68
-37
lines changed

16 files changed

+68
-37
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,23 @@ export const EnterpriseBadge: FC = () => {
123123
);
124124
};
125125

126+
exportconstPremiumBadge:FC=()=>{
127+
return(
128+
<span
129+
css={[
130+
styles.badge,
131+
(theme)=>({
132+
backgroundColor:theme.roles.info.background,
133+
border:`1px solid${theme.roles.info.outline}`,
134+
color:theme.roles.info.text,
135+
}),
136+
]}
137+
>
138+
Premium
139+
</span>
140+
);
141+
};
142+
126143
exportconstPreviewBadge:FC=()=>{
127144
return(
128145
<span

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

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

12-
constExample:Story={
12+
exportconstEnterprise: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
};
1919

20-
export{ExampleasPopoverPaywall};
20+
exportconstPremium:Story={
21+
args:{
22+
message:"Black Lotus",
23+
description:
24+
"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",
26+
},
27+
};

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,29 @@ import TaskAltIcon from "@mui/icons-material/TaskAlt";
33
importButtonfrom"@mui/material/Button";
44
importLinkfrom"@mui/material/Link";
55
importtype{FC,ReactNode}from"react";
6-
import{EnterpriseBadge}from"components/Badges/Badges";
6+
import{EnterpriseBadge,PremiumBadge}from"components/Badges/Badges";
77
import{Stack}from"components/Stack/Stack";
88
import{docs}from"utils/docs";
99

1010
exportinterfacePopoverPaywallProps{
1111
message:string;
1212
description?:ReactNode;
1313
documentationLink?:string;
14+
licenseType?:"enterprise"|"premium";
1415
}
1516

1617
exportconstPopoverPaywall:FC<PopoverPaywallProps>=({
1718
message,
1819
description,
1920
documentationLink,
21+
licenseType="enterprise",
2022
})=>{
2123
return(
2224
<divcss={styles.root}>
2325
<div>
2426
<Stackdirection="row"alignItems="center"css={{marginBottom:18}}>
2527
<h5css={styles.title}>{message}</h5>
26-
<EnterpriseBadge/>
28+
{licenseType==="premium" ?<PremiumBadge/> :<EnterpriseBadge/>}
2729
</Stack>
2830

2931
{description&&<pcss={styles.description}>{description}</p>}
@@ -51,6 +53,11 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
5153
<licss={styles.feature}>
5254
<FeatureIcon/> Audit logs
5355
</li>
56+
{licenseType==="premium"&&(
57+
<licss={styles.feature}>
58+
<FeatureIcon/> Organizations
59+
</li>
60+
)}
5461
</ul>
5562
<Button
5663
href={docs("/enterprise")}
@@ -60,7 +67,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6067
variant="outlined"
6168
color="neutral"
6269
>
63-
Learn about Enterprise
70+
Learn about{licenseType==="premium" ?"Premium" :"Enterprise"}
6471
</Button>
6572
</Stack>
6673
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import {
1616
PopoverContent,
1717
PopoverTrigger,
1818
}from"components/Popover/Popover";
19-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
2019
import{getFormHelpers}from"utils/formUtils";
2120
import{Fieldset}from"../Fieldset";
21+
import{Header}from"../Header";
2222
import{AnnouncementBannerSettings}from"./AnnouncementBannerSettings";
2323

2424
exporttypeAppearanceSettingsPageViewProps={
@@ -54,7 +54,7 @@ export const AppearanceSettingsPageView: FC<
5454

5555
return(
5656
<>
57-
<SettingsHeader
57+
<Header
5858
title="Appearance"
5959
description="Customize the look and feel of your Coder deployment."
6060
/>

‎site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import type { FC } from "react";
99
importtype{DeploymentValues,ExternalAuthConfig}from"api/typesGenerated";
1010
import{Alert}from"components/Alert/Alert";
1111
import{EnterpriseBadge}from"components/Badges/Badges";
12-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
1312
import{docs}from"utils/docs";
13+
import{Header}from"../Header";
1414

1515
exporttypeExternalAuthSettingsPageViewProps={
1616
config:DeploymentValues;
@@ -21,7 +21,7 @@ export const ExternalAuthSettingsPageView: FC<
2121
>=({ config})=>{
2222
return(
2323
<>
24-
<SettingsHeader
24+
<Header
2525
title="External Authentication"
2626
description="Coder integrates with GitHub, GitLab, BitBucket, Azure Repos, and OpenID Connect to authenticate developers with external services."
2727
docsHref={docs("/admin/external-auth")}

‎site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import {
1111
ActiveUsersTitle,
1212
}from"components/ActiveUserChart/ActiveUserChart";
1313
import{ErrorAlert}from"components/Alert/ErrorAlert";
14-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
1514
import{Stack}from"components/Stack/Stack";
1615
import{useDeploymentOptions}from"utils/deployOptions";
1716
import{docs}from"utils/docs";
1817
import{Alert}from"../../../components/Alert/Alert";
18+
import{Header}from"../Header";
1919
importOptionsTablefrom"../OptionsTable";
2020
import{ChartSection}from"./ChartSection";
2121

@@ -38,7 +38,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
3838
})=>{
3939
return(
4040
<>
41-
<SettingsHeader
41+
<Header
4242
title="General"
4343
description="Information about your Coder deployment."
4444
docsHref={docs("/admin/configure")}

‎site/src/components/SettingsHeader/SettingsHeader.tsx‎renamed to ‎site/src/pages/DeploySettingsPage/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface HeaderProps {
1111
docsHref?:string;
1212
}
1313

14-
exportconstSettingsHeader:FC<HeaderProps>=({
14+
exportconstHeader:FC<HeaderProps>=({
1515
title,
1616
description,
1717
docsHref,

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { Link as RouterLink } from "react-router-dom";
66
import{ErrorAlert}from"components/Alert/ErrorAlert";
77
import{FileUpload}from"components/FileUpload/FileUpload";
88
import{displayError}from"components/GlobalSnackbar/utils";
9-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
109
import{Stack}from"components/Stack/Stack";
1110
import{Fieldset}from"../Fieldset";
11+
import{Header}from"../Header";
1212
import{DividerWithText}from"./DividerWithText";
1313

1414
typeAddNewLicenseProps={
@@ -50,7 +50,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
5050
direction="row"
5151
justifyContent="space-between"
5252
>
53-
<SettingsHeader
53+
<Header
5454
title="Add a license"
5555
description="Get access to high availability, RBAC, quotas, and more."
5656
/>

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import type { FC } from "react";
1010
importConfettifrom"react-confetti";
1111
import{Link}from"react-router-dom";
1212
importtype{GetLicensesResponse}from"api/api";
13-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
1413
import{Stack}from"components/Stack/Stack";
1514
import{useWindowSize}from"hooks/useWindowSize";
15+
import{Header}from"../Header";
1616
import{LicenseCard}from"./LicenseCard";
1717

1818
typeProps={
@@ -55,7 +55,7 @@ const LicensesSettingsPageView: FC<Props> = ({
5555
direction="row"
5656
justifyContent="space-between"
5757
>
58-
<SettingsHeader
58+
<Header
5959
title="Licenses"
6060
description="Manage licenses to unlock Enterprise features."
6161
/>

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
importtype{FC}from"react";
22
importtype{SerpentOption}from"api/typesGenerated";
33
import{Badges,EnabledBadge,DisabledBadge}from"components/Badges/Badges";
4-
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
54
import{Stack}from"components/Stack/Stack";
65
import{
76
deploymentGroupHasParent,
87
useDeploymentOptions,
98
}from"utils/deployOptions";
109
import{docs}from"utils/docs";
10+
import{Header}from"../Header";
1111
importOptionsTablefrom"../OptionsTable";
1212

1313
exporttypeNetworkSettingsPageViewProps={
@@ -19,7 +19,7 @@ export const NetworkSettingsPageView: FC<NetworkSettingsPageViewProps> = ({
1919
})=>(
2020
<Stackdirection="column"spacing={6}>
2121
<div>
22-
<SettingsHeader
22+
<Header
2323
title="Network"
2424
description="Configure your deployment connectivity."
2525
docsHref={docs("/networking")}
@@ -32,7 +32,7 @@ export const NetworkSettingsPageView: FC<NetworkSettingsPageViewProps> = ({
3232
</div>
3333

3434
<div>
35-
<SettingsHeader
35+
<Header
3636
title="Port Forwarding"
3737
secondary
3838
description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."

0 commit comments

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