wip

coder · rodrimaia · Apr 26, 2023 · Apr 14, 2023 · Apr 17, 2023 · Apr 17, 2023
commit bcb5d9a90c1a69ce52fd6b9d9d2650e8f95e8295
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -7,7 +7,6 @@ import GroupsPage from "pages/GroupsPage/GroupsPage"
 import LoginPage from "pages/LoginPage/LoginPage"
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage"
-import LicensesSettingsPage from "pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage"
 import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
 import UsersPage from "pages/UsersPage/UsersPage"
 import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
@@ -157,6 +156,9 @@ const TemplateSchedulePage = lazy(
     ),
 )
 
+const LicensesSettingsPage = lazy(() => import("./pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage"))
+const AddNewLicensePageView = lazy(() => import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView"))
+
 export const AppRouter: FC = () => {
   return (
     <Suspense fallback={<FullScreenLoader />}>
@@ -246,6 +248,7 @@ export const AppRouter: FC = () => {
               >
                 <Route path="general" element={<GeneralSettingsPage />} />
                 <Route path="licenses" element={<LicensesSettingsPage />} />
+                <Route path="licenses/add" element={<AddNewLicensePageView />} />
                 <Route path="security" element={<SecuritySettingsPage />} />
                 <Route path="appearance" element={<AppearanceSettingsPage />} />
                 <Route path="network" element={<NetworkSettingsPage />} />

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
@@ -1,5 +1,5 @@
 
-import { TextField, makeStyles, useTheme } from "@material-ui/core"
+import { makeStyles, useTheme } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
 import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
 import { Header } from "components/DeploySettingsLayout/Header"
@@ -8,8 +8,12 @@ import { Stack } from "components/Stack/Stack"
 import { DropzoneDialog } from "material-ui-dropzone"
 import { FC, PropsWithChildren, useState } from "react"
 import Confetti from 'react-confetti'
+import { NavLink, Link as RouterLink } from "react-router-dom"
 import { useToggle } from 'react-use'
 import useWindowSize from 'react-use/lib/useWindowSize'
+import TextField from "@material-ui/core/TextField"
+import PlusOneOutlined from "@material-ui/icons/PlusOneOutlined"
+import { CloudUploadOutlined } from "@material-ui/icons"
 
 const AddNewLicense: FC = () => {
   const styles = useStyles()
@@ -26,7 +30,7 @@ const AddNewLicense: FC = () => {
     toggleConfettiOn()
     setTimeout(() => {
       toggleConfettiOn(false)
-    }, 2000 )
+    }, 2000)
   }
 
   return (
@@ -42,7 +46,13 @@ const AddNewLicense: FC = () => {
           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>
+        <Button
+          component={RouterLink}
+          to="/settings/deployment/licenses"
+          variant="outlined"
+        >
+          Back to licenses
+        </Button>
       </Stack>
 
       <Stack
@@ -61,8 +71,12 @@ const AddNewLicense: FC = () => {
             height: "100%",
           }}>
             <div>
-              <Button onClick={() => toggleDialogOpen()}>
-                Upload file
+              <Button
+              startIcon={<CloudUploadOutlined />}
+              size="large"
+              variant="contained"
+                onClick={() => toggleDialogOpen()}>
+                Upload license file
               </Button>
               <DropzoneDialog
                 open={isDialogOpen}
@@ -83,7 +97,9 @@ const AddNewLicense: FC = () => {
 
         <Fieldset
           title="Paste your license key"
-          onSubmit={(data: unknown) => { console.log(data) }}
+          onSubmit={(data: unknown) => {
+            console.log(data)
+          }}
         >
           <TextField placeholder="Paste your license key here" multiline rows={4} fullWidth />
 

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx
@@ -10,6 +10,7 @@ import { Button, Card, CardContent, Typography } from "@material-ui/core"
 import dayjs from "dayjs"
 import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { PlusOneOutlined } from "@material-ui/icons"
+import { Link, NavLink } from "react-router-dom"
 
 const LicensesSettingsPage: FC = () => {
   const { data: licenses, isLoading } = useQuery({
@@ -32,10 +33,11 @@ const LicensesSettingsPage: FC = () => {
         />
 
         <Button
-          component="a"
-          target="_blank"
+          variant="outlined"
+          component={Link}
+          to="/settings/deployment/licenses/add"
         >
-          Add a license
+          Add new license
         </Button>
 
       </Stack>