coder · rodrimaia · Apr 26, 2023 · Apr 14, 2023 · Apr 17, 2023 · Apr 17, 2023
diff --git a/enterprise/coderd/license/license.go b/enterprise/coderd/license/license.go
@@ -52,6 +52,13 @@ func Entitlements(
 		return entitlements, xerrors.Errorf("query active user count: %w", err)
 	}
 
+	// always shows active user count regardless of license
+	entitlements.Features[codersdk.FeatureUserLimit] = codersdk.Feature{
+		Entitlement: codersdk.EntitlementNotEntitled,
+		Enabled:     enablements[codersdk.FeatureUserLimit],
+		Actual:      &activeUserCount,
+	}
+
 	allFeatures := false
 
 	// Here we loop through licenses to detect enabled features.

diff --git a/site/package.json b/site/package.json
@@ -64,17 +64,20 @@
     "jest-location-mock": "1.0.9",
     "just-debounce-it": "3.1.1",
     "lodash": "4.17.21",
+    "material-ui-dropzone": "^3.5.0",
     "playwright": "1.29.2",
     "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/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -156,6 +156,19 @@ 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 />}>
@@ -244,6 +257,11 @@ export const AppRouter: FC = () => {
                 element={<DeploySettingsLayout />}
               >
                 <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/api/api.ts b/site/src/api/api.ts
@@ -965,6 +965,37 @@ export const getWorkspaceBuildParameters = async (
   )
   return response.data
 }
+type Claims = {
+  license_expires?: jwt.NumericDate
+  account_type?: string
+  account_id?: string
+  trial: boolean
+  all_features: boolean
+  version: number
+  features: Record<string, number>
+  require_telemetry?: boolean
+}
+
+type GetLicensesResponse = Omit<TypesGen.License, "claims"> & {
+  claims: Claims
+  expires_at: string
+}
+
+export const getLicenses = async (): Promise<GetLicensesResponse[]> => {
+  const response = await axios.get(`/api/v2/licenses`)
+  return response.data
+}
+
+export const createLicense = async (
+  data: TypesGen.AddLicenseRequest,
+): Promise<TypesGen.AddLicenseRequest> => {
+  const response = await axios.post(`/api/v2/licenses`, data)
+  return response.data
+}
+
+export const removeLicense = async (licenseId: number): Promise<void> => {
+  await axios.delete(`/api/v2/licenses/${licenseId}`)
+}
 
 export class MissingBuildParameters extends Error {
   parameters: TypesGen.TemplateVersionParameter[] = []

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Brush from "@material-ui/icons/Brush"
 import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import ApprovalIcon from "@material-ui/icons/VerifiedUserOutlined"
 import LockRounded from "@material-ui/icons/LockOutlined"
 import Globe from "@material-ui/icons/PublicOutlined"
 import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
@@ -48,6 +49,12 @@ export const Sidebar: React.FC = () => {
       >
         General
       </SidebarNavItem>
+      <SidebarNavItem
+        href="licenses"
+        icon={<SidebarNavItemIcon icon={ApprovalIcon} />}
+      >
+        Licenses
+      </SidebarNavItem>
       <SidebarNavItem
         href="appearance"
         icon={<SidebarNavItemIcon icon={Brush} />}

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx
@@ -0,0 +1,8 @@
+import AddNewLicensePageView from "./AddNewLicensePageView"
+
+export default {
+  title: "pages/AddNewLicensePageView",
+  component: AddNewLicensePageView,
+}
+
+export const Default = () => <AddNewLicensePageView />
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
@@ -0,0 +1,179 @@
+import Button from "@material-ui/core/Button"
+import TextField from "@material-ui/core/TextField"
+import { makeStyles } from "@material-ui/core/styles"
+import CloudUploadOutlined from "@material-ui/icons/CloudUploadOutlined"
+import { useMutation } from "@tanstack/react-query"
+import { createLicense } from "api/api"
+import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
+import { Header } from "components/DeploySettingsLayout/Header"
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
+import { Stack } from "components/Stack/Stack"
+import { DropzoneDialog } from "material-ui-dropzone"
+import { FC, PropsWithChildren } from "react"
+import { Link as RouterLink, useNavigate } from "react-router-dom"
+import { useToggle } from "react-use"
+
+const AddNewLicense: FC = () => {
+  const styles = useStyles()
+  const [isDialogOpen, toggleDialogOpen] = useToggle(false)
+  const navigate = useNavigate()
+
+  const {
+    mutate: saveLicenseKeyApi,
+    isLoading: isCreating,
+    isError: creationFailed,
+  } = useMutation(createLicense)
+
+  function handleFileUploaded(files: File[]) {
+    const fileReader = new FileReader()
+    fileReader.onload = () => {
+      const licenseKey = fileReader.result as string
+
+      saveLicenseKey(licenseKey)
+
+      fileReader.onerror = () => {
+        displayError("Failed to read file")
+      }
+    }
+
+    fileReader.readAsText(files[0])
+  }
+
+  function saveLicenseKey(licenseKey: string) {
+    saveLicenseKeyApi(
+      { license: licenseKey },
+      {
+        onSuccess: () => {
+          displaySuccess("License key saved")
+          navigate("/settings/deployment/licenses?success=true")
+        },
+        onError: () => displayError("Failed to save license key"),
+      },
+    )
+  }
+
+  return (
+    <>
+      <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
+          component={RouterLink}
+          to="/settings/deployment/licenses"
+          variant="outlined"
+        >
+          Back to licenses
+        </Button>
+      </Stack>
+
+      <Stack className={styles.main}>
+        <Stack alignItems="center">
+          <Button
+            className={styles.ctaButton}
+            startIcon={<CloudUploadOutlined />}
+            size="large"
+            onClick={() => toggleDialogOpen()}
+          >
+            Upload License Key
+          </Button>
+        </Stack>
+        <DropzoneDialog
+          open={isDialogOpen}
+          onSave={handleFileUploaded}
+          showPreviews
+          maxFileSize={1000000}
+          onClose={() => toggleDialogOpen(false)}
+        />
+
+        <DividerWithText>or</DividerWithText>
+
+        <Fieldset
+          title="Paste your license key"
+          validation={creationFailed ? "License key is invalid" : undefined}
+          onSubmit={(e) => {
+            e.preventDefault()
+
+            const form = e.target
+            const formData = new FormData(form as HTMLFormElement)
+
+            const licenseKey = formData.get("licenseKey")
+
+            saveLicenseKey(licenseKey?.toString() || "")
+          }}
+          button={
+            <Button type="submit" disabled={isCreating}>
+              Save License
+            </Button>
+          }
+        >
+          <TextField
+            name="licenseKey"
+            placeholder="Paste your license key here"
+            multiline
+            rows={4}
+            fullWidth
+          />
+        </Fieldset>
+      </Stack>
+    </>
+  )
+}
+
+export default AddNewLicense
+
+const useStyles = makeStyles((theme) => ({
+  main: {
+    paddingTop: theme.spacing(5),
+  },
+  ctaButton: {
+    backgroundImage: `linear-gradient(90deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`,
+    width: theme.spacing(30),
+    marginBottom: theme.spacing(4),
+  },
+  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",
+  },
+  border: {
+    borderBottom: `2px solid ${theme.palette.divider}`,
+    width: "100%",
+  },
+  content: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    fontWeight: 500,
+    fontSize: theme.typography.h5.fontSize,
+    color: theme.palette.text.secondary,
+  },
+}))
+
+const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.container}>
+      <div className={classes.border} />
+      <span className={classes.content}>{children}</span>
+      <div className={classes.border} />
+    </div>
+  )
+}