Add authorization, dismissal and fetch after login

coder · mafredri · Dec 1, 2022 · Oct 31, 2022 · Oct 31, 2022 · Oct 31, 2022
commit 81d11dd01ce0e6e54778a038cbbd0107b9f083c3
@@ -16,8 +16,9 @@ import { AlertBannerCtas } from "./AlertBannerCtas"
  * @param text: default text to be displayed to the user; useful for warnings or as a fallback error message
  * @param error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
  * @param actions: an array of CTAs passed in by the consumer
- * @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
  * @param retry: a handler to retry the action that spawned the error
+ * @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
+ * @param onDismiss: a handler that is called when the `Dismiss` CTA is clicked, after the animation has finished
  */
 export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
   children,
@@ -27,6 +28,7 @@ export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
   actions = [],
   retry,
   dismissible = false,
+  onDismiss,
 }) => {
   const { t } = useTranslation("common")
 
@@ -50,7 +52,7 @@ export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
   const [showDetails, setShowDetails] = useState(false)
 
   return (
-    <Collapse in={open}>
+    <Collapse in={open} onExited={() => onDismiss && onDismiss()}>
       <Stack
         className={classes.alertContainer}
         direction="row"

@@ -9,5 +9,6 @@ export interface AlertBannerProps {
   error?: ApiError | Error | unknown
   actions?: ReactElement[]
   dismissible?: boolean
+  onDismiss?: () => void
   retry?: () => void
 }
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import { Loader } from "components/Loader/Loader"
-import { FC, Suspense, useContext } from "react"
+import { FC, Suspense, useContext, useEffect } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
@@ -19,20 +19,35 @@ interface AuthAndFrameProps {
 export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
   const styles = useStyles({})
   const xServices = useContext(XServiceContext)
+  const [authState] = useActor(xServices.authXService)
   const [buildInfoState] = useActor(xServices.buildInfoXService)
-  const [updateCheckState] = useActor(xServices.updateCheckXService)
+  const [updateCheckState, updateCheckSend] = useActor(
+    xServices.updateCheckXService,
+  )
+
+  useEffect(() => {
+    if (authState.matches("signedIn")) {
+      updateCheckSend("CHECK")
+    } else {
+      updateCheckSend("CLEAR")
+    }
+  }, [authState, updateCheckSend])
 
   return (
     <RequireAuth>
       <div className={styles.site}>
         <Navbar />
-        <div className={styles.siteBanner}>
-          <Margins>
-            <UpdateCheckBanner
-              updateCheck={updateCheckState.context.updateCheck}
-            />
-          </Margins>
-        </div>
+        {updateCheckState.context.show && (
+          <div className={styles.updateCheckBanner}>
+            <Margins>
+              <UpdateCheckBanner
                updateCheck={updateCheckState.context.updateCheck}
+                error={updateCheckState.context.error}
+                onDismiss={() => updateCheckSend("DISMISS")}
+              />
+            </Margins>
+          </div>
+        )}
         <div className={styles.siteContent}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </div>
@@ -48,12 +63,15 @@ const useStyles = makeStyles((theme) => ({
     minHeight: "100vh",
     flexDirection: "column",
   },
-  siteBanner: {
+  updateCheckBanner: {
+    // Add spacing at the top and remove some from the bottom. Removal
+    // is necessary to avoid a visual jerk when the banner is dismissed.
+    // It also give a more pleasant distance to the site content when
+    // the banner is visible.
     marginTop: theme.spacing(2),
+    marginBottom: -theme.spacing(2),
   },
   siteContent: {
     flex: 1,
-    // Accommodate for banner margin since it is dismissible.
-    marginTop: -theme.spacing(2),
   },
 }))
@@ -5,17 +5,19 @@ import * as TypesGen from "api/typesGenerated"
 
 export interface UpdateCheckBannerProps {
   updateCheck?: TypesGen.UpdateCheckResponse
+  error?: Error | unknown
+  onDismiss?: () => void
 }
 
 export const UpdateCheckBanner: React.FC<
   React.PropsWithChildren<UpdateCheckBannerProps>
-> = ({ updateCheck }) => {
+> = ({ updateCheck, error, onDismiss }) => {
   const { t } = useTranslation("common")
 
   return (
     <>
-      {updateCheck && !updateCheck.current && (
-        <AlertBanner severity="info" dismissible>
+      {!error && updateCheck && !updateCheck.current && (
+        <AlertBanner severity="info" onDismiss={onDismiss} dismissible>
           <div>
             <Trans
               t={t}
@@ -32,6 +34,15 @@ export const UpdateCheckBanner: React.FC<
           </div>
         </AlertBanner>
       )}
+      {error && (
+        <AlertBanner
+          severity="error"
+          error={error}
+          text={t("updateCheck.error")}
+          onDismiss={onDismiss}
+          dismissible
+        />
+      )}
     </>
   )
 }
@@ -37,6 +37,7 @@
     "select": "Select emoji"
   },
   "updateCheck": {
-    "message": "Coder {{version}} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information."
+    "message": "Coder {{version}} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information.",
+    "error": "Coder update check failed."
   }
 }
@@ -1,85 +1,172 @@
 import { assign, createMachine } from "xstate"
-import * as API from "api/api"
-import * as TypesGen from "api/typesGenerated"
+import { checkAuthorization, getUpdateCheck } from "api/api"
+import { AuthorizationResponse, UpdateCheckResponse } from "api/typesGenerated"
 
-export const Language = {
-  updateAvailable: "New version available",
-  updateAvailableMessage: (
-    version: string,
-    url: string,
-    upgrade_instructions_url: string,
-  ): string =>
-    `Coder ${version} is now available at ${url}. See ${upgrade_instructions_url} for information on how to upgrade.`,
-}
+export const checks = {
+  viewUpdateCheck: "viewUpdateCheck",
+} as const
+
+export const permissionsToCheck = {
+  [checks.viewUpdateCheck]: {
+    object: {
+      resource_type: "update_check",
+    },
+    action: "read",
+  },
+} as const
+
+export type Permissions = Record<keyof typeof permissionsToCheck, boolean>
 
 export interface UpdateCheckContext {
-  getUpdateCheckError?: Error | unknown
-  updateCheck?: TypesGen.UpdateCheckResponse
+  show: boolean
+  updateCheck?: UpdateCheckResponse
+  permissions?: Permissions
+  error?: Error | unknown
 }
 
+export type UpdateCheckEvent =
+  | { type: "CHECK" }
+  | { type: "CLEAR" }
+  | { type: "DISMISS" }
+
 export const updateCheckMachine = createMachine(
   {
     id: "updateCheckState",
     predictableActionArguments: true,
     tsTypes: {} as import("./updateCheckXService.typegen").Typegen0,
     schema: {
       context: {} as UpdateCheckContext,
+      events: {} as UpdateCheckEvent,
       services: {} as {
+        checkPermissions: {
+          data: AuthorizationResponse
+        }
         getUpdateCheck: {
-          data: TypesGen.UpdateCheckResponse
+          data: UpdateCheckResponse
         }
       },
     },
     context: {
-      updateCheck: undefined,
+      show: false,
     },
-    initial: "gettingUpdateCheck",
+    initial: "idle",
     states: {
-      gettingUpdateCheck: {
+      idle: {
+        on: {
+          CHECK: {
+            target: "fetchingPermissions",
+          },
+        },
+      },
+      fetchingPermissions: {
+        invoke: {
+          src: "checkPermissions",
+          id: "checkPermissions",
+          onDone: [
+            {
+              actions: ["assignPermissions"],
+              target: "checkingPermissions",
+            },
+          ],
+          onError: [
+            {
+              actions: ["assignError"],
+              target: "show",
+            },
+          ],
+        },
+      },
+      checkingPermissions: {
+        always: [
+          {
+            target: "fetchingUpdateCheck",
+            cond: "canViewUpdateCheck",
+          },
+          {
+            target: "dismissOrClear",
+            cond: "canNotViewUpdateCheck",
+          },
+        ],
+      },
+      fetchingUpdateCheck: {
         invoke: {
           src: "getUpdateCheck",
           id: "getUpdateCheck",
           onDone: [
             {
-              actions: ["assignUpdateCheck", "clearGetUpdateCheckError"],
-              target: "#updateCheckState.success",
+              actions: ["assignUpdateCheck", "clearError"],
+              target: "show",
             },
           ],
           onError: [
             {
-              actions: ["assignGetUpdateCheckError", "clearUpdateCheck"],
-              target: "#updateCheckState.failure",
+              actions: ["assignError", "clearUpdateCheck"],
+              target: "show",
             },
           ],
         },
       },
-      success: {
-        type: "final",
+      show: {
+        entry: "assignShow",
+        always: [
+          {
+            target: "dismissOrClear",
+          },
+        ],
+      },
+      dismissOrClear: {
+        on: {
+          DISMISS: {
+            actions: ["assignHide"],
+            target: "dismissed",
+          },
+          CLEAR: {
+            actions: ["clearUpdateCheck", "clearError", "assignHide"],
+            target: "idle",
+          },
+        },
       },
-      failure: {
+      dismissed: {
         type: "final",
       },
     },
   },
   {
     services: {
-      getUpdateCheck: API.getUpdateCheck,
+      checkPermissions: async () =>
+        checkAuthorization({ checks: permissionsToCheck }),
+      getUpdateCheck: getUpdateCheck,
179B    },
     actions: {
+      assignPermissions: assign({
+        permissions: (_, event) => event.data as Permissions,
+      }),
+      assignShow: assign({
+        show: true,
+      }),
+      assignHide: assign({
+        show: false,
+      }),
       assignUpdateCheck: assign({
         updateCheck: (_, event) => event.data,
       }),
-      clearUpdateCheck: assign((context: UpdateCheckContext) => ({
+      clearUpdateCheck: assign((context) => ({
         ...context,
         updateCheck: undefined,
       })),
-      assignGetUpdateCheckError: assign({
-        getUpdateCheckError: (_, event) => event.data,
+      assignError: assign({
+        error: (_, event) => event.data,
       }),
-      clearGetUpdateCheckError: assign((context: UpdateCheckContext) => ({
+      clearError: assign((context) => ({
         ...context,
-        getUpdateCheckError: undefined,
+        error: undefined,
       })),
     },
+    guards: {
+      canViewUpdateCheck: (context) =>
+        context.permissions?.[checks.viewUpdateCheck] || false,
+      canNotViewUpdateCheck: (context) =>
+        !context.permissions?.[checks.viewUpdateCheck],
+    },
   },
 )