Skip to content

Commit a26bdc1

Browse files
rodrimaiarodrimaia
committed
wip
1 parent 432456f commit a26bdc1

File tree

6 files changed

+156
-33
lines changed

6 files changed

+156
-33
lines changed

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"jest-location-mock": "1.0.9",
6565
"just-debounce-it": "3.1.1",
6666
"lodash": "4.17.21",
67+
"material-ui-dropzone": "^3.5.0",
6768
"playwright": "1.29.2",
6869
"react": "18.2.0",
6970
"react-chartjs-2": "4.3.1",

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

Lines changed: 0 additions & 8 deletions
This file was deleted.

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import AddNewLicensePageView from "./AddNewLicensePageView";
2+
3+
export default {
4+
title: "pages/AddNewLicensePageView",
5+
component: AddNewLicensePageView,
6+
}
7+
8+
export const Default = () => <AddNewLicensePageView />

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
2+
import { Stack } from "components/Stack/Stack"
3+
import { FC, PropsWithChildren, useState } from "react"
4+
import { Header } from "components/DeploySettingsLayout/Header"
5+
import { FormSection, HorizontalForm } from "components/Form/Form"
6+
import Button from "@material-ui/core/Button"
7+
import { DropzoneDialog } from "material-ui-dropzone"
8+
import { Divider, Input, TextareaAutosize, makeStyles } from "@material-ui/core"
9+
import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
10+
11+
const AddNewLicense: FC = () => {
12+
13+
return (
14+
<>
15+
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
16+
<Header
17+
title="Add your license"
18+
description="Add a license to your account to unlock more features."
19+
/>
20+
</Stack>
21+
22+
23+
<HorizontalForm
24+
onSubmit={(data: unknown) => {
25+
console.log(data)
26+
}}
27+
>
28+
<FormSection
29+
title="Upload license file"
30+
description="please upload the license file you received when you purchased your license."
31+
>
32+
33+
34+
<DropzoneDialogExample />
35+
36+
</FormSection>
37+
38+
<DividerWithText>or</DividerWithText>
39+
40+
<Fieldset
41+
title="Paste your license key"
42+
onSubmit={(data: unknown) => { console.log(data) }}
43+
>
44+
45+
</Fieldset>
46+
</HorizontalForm>
47+
</>
48+
)
49+
}
50+
51+
export default AddNewLicense
52+
53+
const useStyles = makeStyles(theme => ({
54+
container: {
55+
display: "flex",
56+
alignItems: "center"
57+
},
58+
border: {
59+
borderBottom: `2px solid ${theme.palette.divider}`,
60+
width: "100%"
61+
},
62+
content: {
63+
paddingTop: theme.spacing(0.5),
64+
paddingBottom: theme.spacing(0.5),
65+
paddingRight: theme.spacing(2),
66+
paddingLeft: theme.spacing(2),
67+
fontWeight: 500,
68+
fontSize: theme.typography.h5.fontSize,
69+
color: theme.palette.text.secondary
70+
}
71+
}));
72+
73+
const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
74+
const classes = useStyles();
75+
return (
76+
<div className={classes.container}>
77+
<div className={classes.border} />
78+
<span className={classes.content}>{children}</span>
79+
<div className={classes.border} />
80+
</div>
81+
);
82+
};
83+
84+
const DropzoneDialogExample = (props) => {
85+
const [open, setOpen] = useState(false);
86+
const [files, setFiles] = useState([]);
87+
88+
function handleClose() {
89+
setOpen(false);
90+
}
91+
92+
function handleSave(files) {
93+
setFiles(files);
94+
setOpen(false);
95+
}
96+
97+
function handleOpen() {
98+
setOpen(true)
99+
}
100+
101+
return (
102+
<div>
103+
<Button onClick={handleOpen}>
104+
Add Image
105+
</Button>
106+
<DropzoneDialog
107+
open={open}
108+
onSave={handleSave}
109+
acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
110+
showPreviews={true}
111+
maxFileSize={5000000}
112+
onClose={handleClose}
113+
/>
114+
</div>
115+
);
116+
}

‎site/yarn.lock

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4201,6 +4201,11 @@ asynckit@^0.4.0:
42014201
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
42024202
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
42034203

4204+
attr-accept@^2.0.0:
4205+
version "2.2.2"
4206+
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
4207+
integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
4208+
42044209
available-typed-arrays@^1.0.5:
42054210
version "1.0.5"
42064211
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -4770,7 +4775,7 @@ clone@^1.0.2:
47704775
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
47714776
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
47724777

4773-
clsx@^1.0.4:
4778+
clsx@^1.0.2, clsx@^1.0.4:
47744779
version "1.2.1"
47754780
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
47764781
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -6154,6 +6159,13 @@ file-entry-cache@^6.0.1:
61546159
dependencies:
61556160
flat-cache "^3.0.4"
61566161

6162+
file-selector@^0.1.12:
6163+
version "0.1.19"
6164+
resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf"
6165+
integrity sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==
6166+
dependencies:
6167+
tslib "^2.0.1"
6168+
61576169
file-system-cache@^2.0.0:
61586170
version "2.0.2"
61596171
resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.0.2.tgz#6b51d58c5786302146fa883529e0d7f88896e948"
@@ -8433,6 +8445,15 @@ material-colors@^1.2.1:
84338445
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
84348446
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
84358447

8448+
material-ui-dropzone@^3.5.0:
8449+
version "3.5.0"
8450+
resolved "https://registry.yarnpkg.com/material-ui-dropzone/-/material-ui-dropzone-3.5.0.tgz#2d7f36032db96c24ce97b42e4d0053f94e91a9fc"
8451+
integrity sha512-3BC6mz/4OEM4ZpbqMfuMN065JQyqfEbifT6/VzIua7Zj4b0DaR5YPCgpN+fL/e8yBgTs9MGBZJQY06p5pfKwvw==
8452+
dependencies:
8453+
"@babel/runtime" "^7.4.4"
8454+
clsx "^1.0.2"
8455+
react-dropzone "^10.2.1"
8456+
84368457
mdast-util-definitions@^4.0.0:
84378458
version "4.0.0"
84388459
resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz#c5c1a84db799173b4dcf7643cda999e440c24db2"
@@ -9957,6 +9978,15 @@ react-dom@18.2.0:
99579978
loose-envify "^1.1.0"
99589979
scheduler "^0.23.0"
99599980

9981+
react-dropzone@^10.2.1:
9982+
version "10.2.2"
9983+
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815"
9984+
integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA==
9985+
dependencies:
9986+
attr-accept "^2.0.0"
9987+
file-selector "^0.1.12"
9988+
prop-types "^15.7.2"
9989+
99609990
react-element-to-jsx-string@^15.0.0:
99619991
version "15.0.0"
99629992
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"

0 commit comments

Comments
 (0)