feat: add license settings UI (#7210)

* wip: license page * WIP * WIP * wip * wip * wip * wip * wip * wip * Apply suggestions from code review Co-authored-by: Ben Potter <ben@coder.com> * wip: ui improvements * wip: extract components * wip: stories * wip: stories * fixes from PR reviews * fix stories * fix empty license page * fix copy * fix * wip * add golang test --------- Co-authored-by: Ben Potter <ben@coder.com>
coder · mtojek · Apr 27, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023
commit 5733abcd5d3ba7510205656a41cc01a32eedf9b4
diff --git a/enterprise/coderd/license/license.go b/enterprise/coderd/license/license.go
@@ -53,6 +53,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/enterprise/coderd/license/license_test.go b/enterprise/coderd/license/license_test.go
@@ -37,6 +37,15 @@ func TestEntitlements(t *testing.T) {
 			require.Equal(t, codersdk.EntitlementNotEntitled, entitlements.Features[featureName].Entitlement)
 		}
 	})
+	t.Run("Always return the current user count", func(t *testing.T) {
+		t.Parallel()
+		db := dbfake.New()
+		entitlements, err := license.Entitlements(context.Background(), db, slog.Logger{}, 1, 1, coderdenttest.Keys, all)
+		require.NoError(t, err)
+		require.False(t, entitlements.HasLicense)
+		require.False(t, entitlements.Trial)
+		require.Equal(t, *entitlements.Features[codersdk.FeatureUserLimit].Actual, int64(0))
+	})
 	t.Run("SingleLicenseNothing", func(t *testing.T) {
 		t.Parallel()
 		db := dbfake.New()

diff --git a/site/package.json b/site/package.json
@@ -68,13 +68,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",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -156,6 +156,17 @@ const TemplateSchedulePage = lazy(
     ),
 )
 
+const LicensesSettingsPage = lazy(
+  () =>
+    import(
+      "./pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage"
+    ),
+)
+const AddNewLicensePage = lazy(
+  () =>
+    import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage"),
+)
+
 export const AppRouter: FC = () => {
   return (
     <Suspense fallback={<FullScreenLoader />}>
@@ -244,6 +255,8 @@ export const AppRouter: FC = () => {
                 element={<DeploySettingsLayout />}
               >
                 <Route path="general" element={<GeneralSettingsPage />} />
+                <Route path="licenses" element={<LicensesSettingsPage />} />
+                <Route path="licenses/add" element={<AddNewLicensePage />} />
                 <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
+}
+
+export 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/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
@@ -0,0 +1,178 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
+import { FC, DragEvent, useRef, ReactNode } from "react"
+import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
+import { useClickable } from "hooks/useClickable"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { combineClasses } from "utils/combineClasses"
+import IconButton from "@material-ui/core/IconButton"
+import RemoveIcon from "@material-ui/icons/DeleteOutline"
+import FileIcon from "@material-ui/icons/FolderOutlined"
+
+const useFileDrop = (
+  callback: (file: File) => void,
+  fileTypeRequired?: string,
+): {
+  onDragOver: (e: DragEvent<HTMLDivElement>) => void
+  onDrop: (e: DragEvent<HTMLDivElement>) => void
+} => {
+  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    const file = e.dataTransfer.files[0]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- file can be undefined
+    if (!file) {
+      return
+    }
+    if (fileTypeRequired && file.type !== fileTypeRequired) {
+      return
+    }
+    callback(file)
+  }
+
+  return {
+    onDragOver,
+    onDrop,
+  }
+}
+
+export interface FileUploadProps {
+  isUploading: boolean
+  onUpload: (file: File) => void
+  onRemove?: () => void
+  file?: File
+  removeLabel: string
+  title: string
+  description?: ReactNode
+  extension?: string
+  fileTypeRequired?: string
+}
+
+export const FileUpload: FC<FileUploadProps> = ({
+  isUploading,
+  onUpload,
+  onRemove,
+  file,
+  removeLabel,
+  title,
+  description,
+  extension,
+  fileTypeRequired,
+}) => {
+  const styles = useStyles()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const tarDrop = useFileDrop(onUpload, fileTypeRequired)
+  const clickable = useClickable(() => {
+    if (inputRef.current) {
+      inputRef.current.click()
+    }
+  })
+
+  if (!isUploading && file) {
+    return (
+      <Stack
+        className={styles.file}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack direction="row" alignItems="center">
+          <FileIcon />
+          <span>{file.name}</span>
+        </Stack>
+
+        <IconButton title={removeLabel} size="small" onClick={onRemove}>
+          <RemoveIcon />
+        </IconButton>
+      </Stack>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={combineClasses({
+          [styles.root]: true,
+          [styles.disabled]: isUploading,
+        })}
+        {...clickable}
+        {...tarDrop}
+      >
+        <Stack alignItems="center" spacing={1}>
+          {isUploading ? (
+            <CircularProgress size={32} />
+          ) : (
+            <UploadIcon className={styles.icon} />
+          )}
+
+          <Stack alignItems="center" spacing={0.5}>
+            <span className={styles.title}>{title}</span>
+            <span className={styles.description}>{description}</span>
+          </Stack>
+        </Stack>
+      </div>
+
+      <input
+        type="file"
+        ref={inputRef}
+        className={styles.input}
+        accept={extension}
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0]
+          if (file) {
+            onUpload(file)
+          }
+        }}
+      />
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.shape.borderRadius,
+    border: `2px dashed ${theme.palette.divider}`,
+    padding: theme.spacing(6),
+    cursor: "pointer",
+
+    "&:hover": {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+
+  disabled: {
+    pointerEvents: "none",
+    opacity: 0.75,
+  },
+
+  icon: {
+    fontSize: theme.spacing(8),
+  },
+
+  title: {
+    fontSize: theme.spacing(2),
+  },
+
+  description: {
+    color: theme.palette.text.secondary,
+    textAlign: "center",
+    maxWidth: theme.spacing(50),
+  },
+
+  input: {
+    display: "none",
+  },
+
+  file: {
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2),
+    background: theme.palette.background.paper,
+  },
+}))