Add manual refresh to licenses page

coder · Emyrk · Aug 22, 2023 · Aug 17, 2023 · Aug 17, 2023 · Aug 17, 2023
commit 292f619e0221f6104e63001c15510d1ce9695766
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -808,6 +808,10 @@ export const putWorkspaceExtension = async (
   })
 }
 
+export const refreshEntitlements = async (): Promise<void> => {
+  await axios.post("/api/v2/licenses/refresh-entitlements")
+}
+
 export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
   try {
     const response = await axios.get("/api/v2/entitlements")

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx
@@ -9,14 +9,20 @@ import useToggle from "react-use/lib/useToggle"
 import { pageTitle } from "utils/page"
 import { entitlementsMachine } from "xServices/entitlements/entitlementsXService"
 import LicensesSettingsPageView from "./LicensesSettingsPageView"
+import { getErrorMessage } from "api/errors"
 
 const LicensesSettingsPage: FC = () => {
   const queryClient = useQueryClient()
-  const [entitlementsState] = useMachine(entitlementsMachine)
-  const { entitlements } = entitlementsState.context
+  const [entitlementsState, sendEvent] = useMachine(entitlementsMachine)
+  const { entitlements, getEntitlementsError } = entitlementsState.context
   const [searchParams, setSearchParams] = useSearchParams()
   const success = searchParams.get("success")
   const [confettiOn, toggleConfettiOn] = useToggle(false)
+  if (getEntitlementsError) {
+    displayError(
+      getErrorMessage(getEntitlementsError, "Failed to fetch entitlements"),
+    )
+  }
 
   const { mutate: removeLicenseApi, isLoading: isRemovingLicense } =
     useMutation(removeLicense, {
@@ -58,6 +64,10 @@ const LicensesSettingsPage: FC = () => {
         licenses={licenses}
         isRemovingLicense={isRemovingLicense}
         removeLicense={(licenseId: number) => removeLicenseApi(licenseId)}
+        refreshEntitlements={() => {
+          const x = sendEvent("REFRESH")
+          return !x.context.getEntitlementsError
+        }}
       />
     </>
   )

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -2,6 +2,7 @@ import Button from "@mui/material/Button"
 import { makeStyles, useTheme } from "@mui/styles"
 import Skeleton from "@mui/material/Skeleton"
 import AddIcon from "@mui/icons-material/AddOutlined"
+import RefreshIcon from "@mui/icons-material/Refresh"
 import { GetLicensesResponse } from "api/api"
 import { Header } from "components/DeploySettingsLayout/Header"
 import { LicenseCard } from "components/LicenseCard/LicenseCard"
@@ -11,6 +12,7 @@ import Confetti from "react-confetti"
 import { Link } from "react-router-dom"
 import useWindowSize from "react-use/lib/useWindowSize"
 import MuiLink from "@mui/material/Link"
+import { displaySuccess } from "components/GlobalSnackbar/utils"
 
 type Props = {
   showConfetti: boolean
@@ -20,6 +22,7 @@ type Props = {
   licenses?: GetLicensesResponse[]
   isRemovingLicense: boolean
   removeLicense: (licenseId: number) => void
+  refreshEntitlements?: () => boolean
 }
 
 const LicensesSettingsPageView: FC<Props> = ({
@@ -30,6 +33,7 @@ const LicensesSettingsPageView: FC<Props> = ({
   licenses,
   isRemovingLicense,
   removeLicense,
+  refreshEntitlements,
 }) => {
   const styles = useStyles()
   const { width, height } = useWindowSize()
@@ -55,13 +59,27 @@ const LicensesSettingsPageView: FC<Props> = ({
           description="Manage licenses to unlock Enterprise features."
         />
 
-        <Button
-          component={Link}
-          to="/deployment/licenses/add"
-          startIcon={<AddIcon />}
-        >
-          Add a license
-        </Button>
+        <Stack direction="row" spacing={2}>
+          <Button
+            component={Link}
+            to="/deployment/licenses/add"
+            startIcon={<AddIcon />}
+          >
+            Add a license
+          </Button>
+          <Button
+            onClick={() => {
+              if (refreshEntitlements) {
+                if (refreshEntitlements()) {
+                  displaySuccess("Successfully refreshed licenses")
+                }
+              }
+            }}
+            startIcon={<RefreshIcon />}
+          >
+            Refresh
+          </Button>
+        </Stack>
       </Stack>
 
       {isLoading && <Skeleton variant="rectangular" height={200} />}

diff --git a/site/src/xServices/deploymentStats/deploymentStatsMachine.ts b/site/src/xServices/deploymentStats/deploymentStatsMachine.ts
@@ -4,6 +4,7 @@ import { assign, createMachine } from "xstate"
 
 export const deploymentStatsMachine = createMachine(
   {
+    /** @xstate-layout N4IgpgJg5mDOIC5QTABwDYHsCeBbMAdgC4DKRAhkbALLkDGAFgJYFgB0sFVAxBJq2xYA3TAGt2KDDnzEylGvWYDO8hMMx1KTfgG0ADAF19BxKFSZYTItoKmQAD0QBWAMwuANCGyIATAHYATgBfIM9JLDxCUi4FRhZ2FR4wACdkzGS2DEoAM3TcNnDpKLkqWjjlGLUCEU1rXUNjO3NLOtskB0QAvU9vBAAWVxCwtAiZaPkypXYmCHQwbgAlAFEAGQB5AEEAEUb25qsbO0cEAEY9AA4exDOANhDQkAJMFHh2wsjZGMn4posD-iOiD6Piup3ObCcQxA7zGJViUw4MV+LUO7WOfT03S81xOLihMOKX0U8UEszAyP+bVAxxc5z6oJ8AT6EPuQSAA */
     id: "deploymentStatsMachine",
     predictableActionArguments: true,
 

diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -9,6 +9,7 @@ export type EntitlementsContext = {
 
 export const entitlementsMachine = createMachine(
   {
+    /** @xstate-layout N4IgpgJg5mDOIC5RgHYBcCWaA2YC2qasAsgIYDGAFhimAHQBOYAZk7JQMQQD2tdNAN24Brek1ZxKAUXRZcBdLADaABgC6iUAAdusLBl6aQAD0QAWAGwAOOgGYAjACYArABoQAT0SOA7AE46C0czP2cVHzNIlRV7HwBfOPdCOXxCEgpqPnE2TjAGBm4GOi1sUjRmQrxGFhyZTBxUxVUNJBAdPUxDVtMESxsHF3cvBFtbAKcQsIiomPjE8FkGhSIyKhp6GDRMFCg6lOXYLl56QRENsDQ9pbTmo3b9LtAe2wtnOmcBi1Hos0c-Hx8Q0QVnsdBCfj8Vh8UKsYVscySi3kaVWmXOWxouyRjSIHDyBSKJTKFQYVU2V2RTXUd10DxQRmer3en2+Kl+-0BnkQsTM7yCZimkTM0ViCUR9UpKwy634EFwHAASlIAGJKgDKAAlbq17p16d1uZCgb1HBZ3n54fZIrCgrZHGKFhKcek1nx8YVFSr1VrqTraXqjMN7KE6CoLT4rWYbY4HJyev5QabnBYzA4LX5XmYEvMUNwIHAjMlropUesaR0DPqnogALRR401s3RaKORwqWyw2Ehe3zIuSl1o6oSdjlukMxDwlR0HwWAFsiz-PwqZz-Y0r3m2AXhaGhPxmHzOB1952lvibbZYp0HUcBg0m42wuwp5wfeHP9s98X7FHSvgYOVgDelbjggKjGiENgrpa1rJjGn6Ot+Ja-vQsAAK7kOQcDwH6FaPCYiBQXQSYpmmYyZsa9gqI4oYDM49gWMGPimrOR7Ygcp70O6DBAXhPSEcRqbBmRzhmBRIZhtBUawbG2ZxEAA */
     id: "entitlementsMachine",
     predictableActionArguments: true,
     tsTypes: {} as import("./entitlementsXService.typegen").Typegen0,
@@ -22,13 +23,27 @@ export const entitlementsMachine = createMachine(
     },
     initial: "gettingEntitlements",
     states: {
+      refresh: {
+        invoke: {
+          id: "refreshEntitlements",
+          src: "refreshEntitlements",
+          onDone: {
+            target: "gettingEntitlements",
+          },
+          onError: {
+            target: "error",
+            actions: ["assignGetEntitlementsError"],
+          },
+        },
+        entry: "clearGetEntitlementsError",
+      },
       gettingEntitlements: {
         entry: "clearGetEntitlementsError",
         invoke: {
           id: "getEntitlements",
           src: "getEntitlements",
           onDone: {
-            target: "success",
+            target: "idle",
             actions: ["assignEntitlements"],
           },
           onError: {
@@ -37,11 +52,18 @@ export const entitlementsMachine = createMachine(
           },
         },
       },
+      idle: {
+        on: {
+          REFRESH: "refresh"
+        }
+      },
       success: {
         type: "final",
       },
       error: {
-        type: "final",
+        on: {
+          REFRESH: "refresh"
+        }
       },
     },
   },
@@ -51,13 +73,18 @@ export const entitlementsMachine = createMachine(
         entitlements: (_, event) => event.data,
       }),
       assignGetEntitlementsError: assign({
-        getEntitlementsError: (_, event) => event.data,
+        getEntitlementsError: (_, event) => {
+          return event.data
+        },
       }),
       clearGetEntitlementsError: assign({
         getEntitlementsError: (_) => undefined,
       }),
     },
     services: {
+      refreshEntitlements: async () => {
+        return API.refreshEntitlements()
+      },
       getEntitlements: async () => {
         // Entitlements is injected by the Coder server into the HTML document.
         const entitlements = document.querySelector(