Apr 26, 2023 · Apr 14, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 18, 2023
diff --git a/site/package.json b/site/package.json
    "react": "18.2.0",
    "react-chartjs-2": "4.3.1",
    "react-color": "2.19.3",
    "react-confetti": "^6.1.0",
    "react-dom": "18.2.0",
    "react-headless-tabs": "6.0.3",
    "react-helmet-async": "1.3.0",
    "react-i18next": "12.1.1",
    "react-markdown": "8.0.3",
    "react-router-dom": "6.4.1",
    "react-syntax-highlighter": "15.5.0",
    "react-use": "^17.4.0",
    "react-virtualized-auto-sizer": "1.0.7",
    "react-window": "1.8.8",
    "remark-gfm": "3.0.1",
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

 import { Stack } from "components/Stack/Stack"
 import { FC, PropsWithChildren, useState } from "react"
 import { Header } from "components/DeploySettingsLayout/Header"
 import { FormSection, HorizontalForm } from "components/Form/Form"
 import { TextField, makeStyles, useTheme } from "@material-ui/core"
 import Button from "@material-ui/core/Button"
 import { DropzoneDialog } from "material-ui-dropzone"
 import { Divider, Input, TextareaAutosize, makeStyles } from "@material-ui/core"
 import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
 import { Header } from "components/DeploySettingsLayout/Header"
 import { FormFields, FormSection } from "components/Form/Form"
 import { Stack } from "components/Stack/Stack"
 import { DropzoneDialog } from "material-ui-dropzone"
 import { FC, PropsWithChildren, useState } from "react"
 import Confetti from 'react-confetti'
 import { useToggle } from 'react-use'
 import useWindowSize from 'react-use/lib/useWindowSize'

 const AddNewLicense: FC = () => {
  const styles = useStyles()
  const { width, height } = useWindowSize()
  const [confettiOn, toggleConfettiOn] = useToggle(false)
  const [isDialogOpen, toggleDialogOpen] = useToggle(false)
  const [files, setFiles] = useState<File[]>([]);
  const theme = useTheme()

  function handleSave(files: File[]) {
    setFiles(files);
    console.log(files)
    toggleDialogOpen()
    toggleConfettiOn()
    setTimeout(() => {
      toggleConfettiOn(false)
    }, 2000 )
  }

  return (
    <>
      <Confetti
        width={width}
        height={height}
        run={confettiOn}
        colors={[theme.palette.primary.main, theme.palette.secondary.main]}
      />
      <Stack alignItems="baseline" direction="row" justifyContent="space-between">
        <Header
          title="Add your license"
          description="Add a license to your account to unlock more features."
        />
        <Button variant="outlined" color="primary" href="/deploy-settings/licenses">Back to licenses</Button>
      </Stack>


      <HorizontalForm
        onSubmit={(data: unknown) => {
          console.log(data)
        }}
      <Stack
        spacing={4}
      >
        <FormSection
          title="Upload license file"
          description="please upload the license file you received when you purchased your license."
          classes={{
            root: styles.formSectionRoot
          }}
        >


        <DropzoneDialogExample />
          <Stack style={{
            height: "100%",
          }}>
            <div>
              <Button onClick={() => toggleDialogOpen()}>
                Upload file
              </Button>
              <DropzoneDialog
                open={isDialogOpen}
                onSave={handleSave}
                // acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
                showPreviews={false}
                maxFileSize={1000000}
                onClose={() => toggleDialogOpen(false)}
              />
            </div>
          </Stack>

        </FormSection>
        <FormFields>

        <DividerWithText>or</DividerWithText>
          <DividerWithText>or</DividerWithText>
        </FormFields>

        <Fieldset
          title="Paste your license key"
          onSubmit={(data: unknown) => { console.log(data) }}
        >
          <TextField placeholder="Paste your license key here" multiline rows={4} fullWidth />

 </Fieldset>
      </HorizontalForm>
        </Fieldset>
      </Stack>
    </>
  )
 }

 export default AddNewLicense


 const useStyles = makeStyles(theme => ({
  formSectionRoot: {
    alignItems: "center",
  },
  description: {
    color: theme.palette.text.secondary,
    lineHeight: "160%",
  },
  title: {
    ...theme.typography.h5,
    fontWeight: 600,
    marging: theme.spacing(1)
  },
  container: {
    display: "flex",
    alignItems: "center"
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    fontWeight: 500,
    fontSize:theme.typography.h5.fontSize,
    color:theme.palette.text.secondary
    fontSize: theme.typography.h5.fontSize,
    color: theme.palette.text.secondary
  }
 }));

    </div>
  );
 };

 const DropzoneDialogExample = (props) => {
  const [open, setOpen] = useState(false);
  const [files, setFiles] = useState([]);

  function handleClose() {
    setOpen(false);
  }

  function handleSave(files) {
    setFiles(files);
    setOpen(false);
  }

  function handleOpen() {
    setOpen(true)
  }

  return (
    <div>
      <Button onClick={handleOpen}>
        Add Image
      </Button>
      <DropzoneDialog
        open={open}
        onSave={handleSave}
        acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
        showPreviews={true}
        maxFileSize={5000000}
        onClose={handleClose}
      />
    </div>
  );
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -69,13 +69,15 @@
		"react": "18.2.0",
		"react-chartjs-2": "4.3.1",
		"react-color": "2.19.3",
		"react-confetti": "^6.1.0",
		"react-dom": "18.2.0",
		"react-headless-tabs": "6.0.3",
		"react-helmet-async": "1.3.0",
		"react-i18next": "12.1.1",
		"react-markdown": "8.0.3",
		"react-router-dom": "6.4.1",
		"react-syntax-highlighter": "15.5.0",
		"react-use": "^17.4.0",
		"react-virtualized-auto-sizer": "1.0.7",
		"react-window": "1.8.8",
		"remark-gfm": "3.0.1",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,56 +1,114 @@

		import { Stack } from "components/Stack/Stack"
		import { FC, PropsWithChildren, useState } from "react"
		import { Header } from "components/DeploySettingsLayout/Header"
		import { FormSection, HorizontalForm } from "components/Form/Form"
		import { TextField, makeStyles, useTheme } from "@material-ui/core"
		import Button from "@material-ui/core/Button"
		import { DropzoneDialog } from "material-ui-dropzone"
		import { Divider, Input, TextareaAutosize, makeStyles } from "@material-ui/core"
		import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
		import { Header } from "components/DeploySettingsLayout/Header"
		import { FormFields, FormSection } from "components/Form/Form"
		import { Stack } from "components/Stack/Stack"
		import { DropzoneDialog } from "material-ui-dropzone"
		import { FC, PropsWithChildren, useState } from "react"
		import Confetti from 'react-confetti'
		import { useToggle } from 'react-use'
		import useWindowSize from 'react-use/lib/useWindowSize'

		const AddNewLicense: FC = () => {
		const styles = useStyles()
		const { width, height } = useWindowSize()
		const [confettiOn, toggleConfettiOn] = useToggle(false)
		const [isDialogOpen, toggleDialogOpen] = useToggle(false)
		const [files, setFiles] = useState<File[]>([]);
		const theme = useTheme()

		function handleSave(files: File[]) {
		setFiles(files);
		console.log(files)
		toggleDialogOpen()
		toggleConfettiOn()
		setTimeout(() => {
		toggleConfettiOn(false)
		}, 2000 )
		}

		return (
		<>
		<Confetti
		width={width}
		height={height}
		run={confettiOn}
		colors={[theme.palette.primary.main, theme.palette.secondary.main]}
		/>
		<Stack alignItems="baseline" direction="row" justifyContent="space-between">
		<Header
		title="Add your license"
		description="Add a license to your account to unlock more features."
		/>
		<Button variant="outlined" color="primary" href="/deploy-settings/licenses">Back to licenses</Button>
		</Stack>


		<HorizontalForm
		onSubmit={(data: unknown) => {
		console.log(data)
		}}
		<Stack
		spacing={4}
		>
		<FormSection
		title="Upload license file"
		description="please upload the license file you received when you purchased your license."
		classes={{
		root: styles.formSectionRoot
		}}
		>


		<DropzoneDialogExample />
		<Stack style={{
		height: "100%",
		}}>
		<div>
		<Button onClick={() => toggleDialogOpen()}>
		Upload file
		</Button>
		<DropzoneDialog
		open={isDialogOpen}
		onSave={handleSave}
		// acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
		showPreviews={false}
		maxFileSize={1000000}
		onClose={() => toggleDialogOpen(false)}
		/>
		</div>
		</Stack>

		</FormSection>
		<FormFields>

		<DividerWithText>or</DividerWithText>
		<DividerWithText>or</DividerWithText>
		</FormFields>

		<Fieldset
		title="Paste your license key"
		onSubmit={(data: unknown) => { console.log(data) }}
		>
		<TextField placeholder="Paste your license key here" multiline rows={4} fullWidth />

		</Fieldset>
		</HorizontalForm>
		</Fieldset>
		</Stack>
		</>
		)
		}

		export default AddNewLicense


		const useStyles = makeStyles(theme => ({
		formSectionRoot: {
		alignItems: "center",
		},
		description: {
		color: theme.palette.text.secondary,
		lineHeight: "160%",
		},
		title: {
		...theme.typography.h5,
		fontWeight: 600,
		marging: theme.spacing(1)
		},
		container: {
		display: "flex",
		alignItems: "center"
Expand All		@@ -65,8 +123,8 @@ const useStyles = makeStyles(theme => ({
		paddingRight: theme.spacing(2),
		paddingLeft: theme.spacing(2),
		fontWeight: 500,
		fontSize:theme.typography.h5.fontSize,
		color:theme.palette.text.secondary
		fontSize: theme.typography.h5.fontSize,
		color: theme.palette.text.secondary
		}
		}));

Expand All		@@ -80,37 +138,3 @@ const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
		</div>
		);
		};

		const DropzoneDialogExample = (props) => {
		const [open, setOpen] = useState(false);
		const [files, setFiles] = useState([]);

		function handleClose() {
		setOpen(false);
		}

		function handleSave(files) {
		setFiles(files);
		setOpen(false);
		}

		function handleOpen() {
		setOpen(true)
		}

		return (
		<div>
		<Button onClick={handleOpen}>
		Add Image
		</Button>
		<DropzoneDialog
		open={open}
		onSave={handleSave}
		acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
		showPreviews={true}
		maxFileSize={5000000}
		onClose={handleClose}
		/>
		</div>
		);
		}