Skip to content

Commit ee583e1

Browse files
rodrimaiarodrimaia
committed
wip: extract components
1 parent 1d107d8 commit ee583e1

File tree

7 files changed

+198
-126
lines changed

7 files changed

+198
-126
lines changed

‎site/src/AppRouter.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,9 @@ const LicensesSettingsPage = lazy(
162162
"./pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage"
163163
),
164164
)
165-
const AddNewLicensePageView = lazy(
165+
const AddNewLicensePage = lazy(
166166
() =>
167-
import(
168-
"./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView"
169-
),
167+
import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage"),
170168
)
171169

172170
export const AppRouter: FC = () => {
@@ -258,10 +256,7 @@ export const AppRouter: FC = () => {
258256
>
259257
<Route path="general" element={<GeneralSettingsPage />} />
260258
<Route path="licenses" element={<LicensesSettingsPage />} />
261-
<Route
262-
path="licenses/add"
263-
element={<AddNewLicensePageView />}
264-
/>
259+
<Route path="licenses/add" element={<AddNewLicensePage />} />
265260
<Route path="security" element={<SecuritySettingsPage />} />
266261
<Route path="appearance" element={<AppearanceSettingsPage />} />
267262
<Route path="network" element={<NetworkSettingsPage />} />

‎site/src/api/api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -976,7 +976,7 @@ type Claims = {
976976
require_telemetry?: boolean
977977
}
978978

979-
type GetLicensesResponse = Omit<TypesGen.License, "claims"> & {
979+
export type GetLicensesResponse = Omit<TypesGen.License, "claims"> & {
980980
claims: Claims
981981
expires_at: string
982982
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useMutation } from "@tanstack/react-query"
2+
import { createLicense } from "api/api"
3+
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
4+
import { FC } from "react"
5+
import { useNavigate } from "react-router-dom"
6+
import { AddNewLicensePageView } from "./AddNewLicensePageView"
7+
import { pageTitle } from "utils/page"
8+
import { Helmet } from "react-helmet-async"
9+
10+
const AddNewLicensePage: FC = () => {
11+
const navigate = useNavigate()
12+
13+
const {
14+
mutate: saveLicenseKeyApi,
15+
isLoading: isCreating,
16+
isError: creationFailed,
17+
} = useMutation(createLicense, {
18+
onSuccess: () => {
19+
displaySuccess("You have successfully added a license")
20+
navigate("/settings/deployment/licenses?success=true")
21+
},
22+
onError: () => displayError("Failed to save license key"),
23+
})
24+
25+
function saveLicenseKey(licenseKey: string) {
26+
saveLicenseKeyApi(
27+
{ license: licenseKey },
28+
{
29+
onSuccess: () => {
30+
displaySuccess("You have successfully added a license")
31+
navigate("/settings/deployment/licenses?success=true")
32+
},
33+
onError: () => displayError("Failed to save license key"),
34+
},
35+
)
36+
}
37+
38+
return (
39+
<>
40+
<Helmet>
41+
<title>{pageTitle("License Settings")}</title>
42+
</Helmet>
43+
44+
<AddNewLicensePageView
45+
isSavingLicense={isCreating}
46+
didSavingFailed={creationFailed}
47+
onSaveLicenseKey={saveLicenseKey}
48+
/>
49+
</>
50+
)
51+
}
52+
53+
export default AddNewLicensePage

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import AddNewLicensePageView from "./AddNewLicensePageView"
1+
import { AddNewLicensePageView } from "./AddNewLicensePageView"
22

33
export default {
44
title: "pages/AddNewLicensePageView",
55
component: AddNewLicensePageView,
66
}
7-
8-
export const Default = () => <AddNewLicensePageView />

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

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
import Button from "@material-ui/core/Button"
22
import TextField from "@material-ui/core/TextField"
33
import { makeStyles } from "@material-ui/core/styles"
4-
import { useMutation } from "@tanstack/react-query"
5-
import { createLicense } from "api/api"
64
import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
75
import { Header } from "components/DeploySettingsLayout/Header"
86
import { DividerWithText } from "components/DividerWithText/DividerWithText"
97
import { FileUpload } from "components/FileUpload/FileUpload"
108
import { Form, FormFields, FormSection } from "components/Form/Form"
11-
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
9+
import { displayError } from "components/GlobalSnackbar/utils"
1210
import { Stack } from "components/Stack/Stack"
1311
import { FC } from "react"
14-
import { Link as RouterLink, useNavigate } from "react-router-dom"
12+
import { Link as RouterLink } from "react-router-dom"
1513

16-
const AddNewLicense: FC = () => {
17-
const styles = useStyles()
18-
const navigate = useNavigate()
14+
type AddNewLicenseProps = {
15+
onSaveLicenseKey: (license: string) => void
16+
isSavingLicense: boolean
17+
didSavingFailed: boolean
18+
}
1919

20-
const {
21-
mutate: saveLicenseKeyApi,
22-
isLoading: isCreating,
23-
isError: creationFailed,
24-
} = useMutation(createLicense)
20+
export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
21+
onSaveLicenseKey,
22+
isSavingLicense,
23+
didSavingFailed,
24+
}) => {
25+
const styles = useStyles()
2526

2627
function handleFileUploaded(files: File[]) {
2728
const fileReader = new FileReader()
2829
fileReader.onload = () => {
2930
const licenseKey = fileReader.result as string
3031

31-
saveLicenseKey(licenseKey)
32+
onSaveLicenseKey(licenseKey)
3233

3334
fileReader.onerror = () => {
3435
displayError("Failed to read file")
@@ -38,19 +39,6 @@ const AddNewLicense: FC = () => {
3839
fileReader.readAsText(files[0])
3940
}
4041

41-
function saveLicenseKey(licenseKey: string) {
42-
saveLicenseKeyApi(
43-
{ license: licenseKey },
44-
{
45-
onSuccess: () => {
46-
displaySuccess("You have successfully added a license")
47-
navigate("/settings/deployment/licenses?success=true")
48-
},
49-
onError: () => displayError("Failed to save license key"),
50-
},
51-
)
52-
}
53-
5442
const isUploading = false
5543

5644
function onUpload(file: File) {
@@ -99,7 +87,7 @@ const AddNewLicense: FC = () => {
9987

10088
<Fieldset
10189
title="Paste your license key"
102-
validation={creationFailed ? "License key is invalid" : undefined}
90+
validation={didSavingFailed ? "License key is invalid" : undefined}
10391
onSubmit={(e) => {
10492
e.preventDefault()
10593

@@ -108,10 +96,10 @@ const AddNewLicense: FC = () => {
10896

10997
const licenseKey = formData.get("licenseKey")
11098

111-
saveLicenseKey(licenseKey?.toString() || "")
99+
onSaveLicenseKey(licenseKey?.toString() || "")
112100
}}
113101
button={
114-
<Button type="submit" disabled={isCreating}>
102+
<Button type="submit" disabled={isSavingLicense}>
115103
Add license
116104
</Button>
117105
}
@@ -129,8 +117,6 @@ const AddNewLicense: FC = () => {
129117
)
130118
}
131119

132-
export default AddNewLicense
133-
134120
const useStyles = makeStyles((theme) => ({
135121
main: {
136122
paddingTop: theme.spacing(5),

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

Lines changed: 21 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,25 @@
1-
import Button from "@material-ui/core/Button"
2-
import { makeStyles, useTheme } from "@material-ui/core/styles"
3-
import Skeleton from "@material-ui/lab/Skeleton"
41
import { useMutation, useQuery } from "@tanstack/react-query"
52
import { useMachine } from "@xstate/react"
63
import { getLicenses, removeLicense } from "api/api"
7-
import { Header } from "components/DeploySettingsLayout/Header"
84
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
9-
import { LicenseCard } from "components/LicenseCard/LicenseCard"
10-
import { Stack } from "components/Stack/Stack"
115
import { FC, useEffect } from "react"
12-
import Confetti from "react-confetti"
136
import { Helmet } from "react-helmet-async"
14-
import { Link, useSearchParams } from "react-router-dom"
7+
import { useSearchParams } from "react-router-dom"
158
import useToggle from "react-use/lib/useToggle"
16-
import useWindowSize from "react-use/lib/useWindowSize"
179
import { pageTitle } from "utils/page"
1810
import { entitlementsMachine } from "xServices/entitlements/entitlementsXService"
11+
import LicensesSettingsPageView from "./LicensesSettingsPageView"
1912

2013
const LicensesSettingsPage: FC = () => {
2114
const [entitlementsState] = useMachine(entitlementsMachine)
2215
const { entitlements } = entitlementsState.context
23-
const styles = useStyles()
2416
const [searchParams, setSearchParams] = useSearchParams()
2517
const success = searchParams.get("success")
2618
const [confettiOn, toggleConfettiOn] = useToggle(false)
27-
const { width, height } = useWindowSize()
2819

2920
const { mutate: removeLicenseApi, isLoading: isRemovingLicense } =
3021
useMutation(removeLicense)
3122

32-
const theme = useTheme()
33-
3423
const {
3524
data: licenses,
3625
isLoading,
@@ -55,79 +44,28 @@ const LicensesSettingsPage: FC = () => {
5544
<Helmet>
5645
<title>{pageTitle("License Settings")}</title>
5746
</Helmet>
58-
<Confetti
59-
width={width}
60-
height={height}
61-
numberOfPieces={confettiOn ? 200 : 0}
62-
colors={[theme.palette.primary.main, theme.palette.secondary.main]}
47+
<LicensesSettingsPageView
48+
showConfetti={confettiOn}
49+
isLoading={isLoading}
50+
userLimitActual={entitlements?.features.user_limit.actual}
51+
userLimitLimit={entitlements?.features.user_limit.limit}
52+
licenses={licenses}
53+
isRemovingLicense={isRemovingLicense}
54+
removeLicense={(licenseId: number) =>
55+
removeLicenseApi(licenseId, {
56+
onSuccess: () => {
57+
displaySuccess("Successfully removed license")
58+
void refetchGetLicenses()
59+
},
60+
onError: () => {
61+
displayError("Failed to remove license")
62+
void refetchGetLicenses()
63+
},
64+
})
65+
}
6366
/>
64-
<Stack
65-
alignItems="baseline"
66-
direction="row"
67-
justifyContent="space-between"
68-
>
69-
<Header
70-
title="Licenses"
71-
description="Enterprise licenses unlock more features on your deployment."
72-
/>
73-
74-
<Button
75-
variant="outlined"
76-
component={Link}
77-
to="/settings/deployment/licenses/add"
78-
>
79-
Add new License
80-
</Button>
81-
</Stack>
82-
83-
{isLoading && <Skeleton variant="rect" height={200} />}
84-
85-
{!isLoading && licenses && licenses?.length > 0 && (
86-
<Stack spacing={4}>
87-
{licenses?.map((license) => (
88-
<LicenseCard
89-
key={license.id}
90-
license={license}
91-
userLimitActual={entitlements?.features.user_limit.actual}
92-
userLimitLimit={entitlements?.features.user_limit.limit}
93-
isRemoving={isRemovingLicense}
94-
onRemove={(licenseId: number) =>
95-
removeLicenseApi(licenseId, {
96-
onSuccess: () => {
97-
displaySuccess("Successfully removed license")
98-
void refetchGetLicenses()
99-
},
100-
onError: () => {
101-
displayError("Failed to remove license")
102-
void refetchGetLicenses()
103-
},
104-
})
105-
}
106-
/>
107-
))}
108-
</Stack>
109-
)}
110-
111-
{!isLoading && licenses && licenses.length === 0 && (
112-
<Stack spacing={4} justifyContent="center" alignItems="center">
113-
<Button className={styles.ctaButton} size="large">
114-
Add license
115-
</Button>
116-
</Stack>
117-
)}
11867
</>
11968
)
12069
}
12170

122-
const useStyles = makeStyles((theme) => ({
123-
ctaButton: {
124-
backgroundImage: `linear-gradient(90deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`,
125-
width: theme.spacing(30),
126-
marginBottom: theme.spacing(4),
127-
},
128-
removeButtom: {
129-
color: "red",
130-
},
131-
}))
132-
13371
export default LicensesSettingsPage

0 commit comments

Comments
 (0)