allow clickaway to escape consent options in UserSettings

src/components/AnalyticsConsent/AnalyticsConsent.tsx

@@ -1,34 +1,33 @@
-import { Button } from "@mui/material";
 import Drawer from "@mui/material/Drawer";
-import { ReactElement, useState } from "react";
+import { ReactElement } from "react";
 
 interface ConsentProps {
-  onChangeConsent: (consentVal: boolean) => void;
+  onChangeConsent: (consentVal: boolean | undefined) => void;
+  required: boolean;
 }
 
 export function AnalyticsConsent(props: ConsentProps): ReactElement {
-
-  const [responded, setResponded] = useState(false);
   const acceptAnalytics = (): void => {
-
-    setResponded(true);
     props.onChangeConsent(true);
   };
   const rejectAnalytics = (): void => {
-
-    setResponded(false);
     props.onChangeConsent(false);
   };
 
+  const clickedAway = (): void => {
+    props.onChangeConsent(undefined);
+  };
 
   return (
     <div>
-      <Drawer anchor={"bottom"} open={!responded}>
-        MyDrawer!
+      <Drawer
+        anchor={"bottom"}
+        open
+        onClose={!props.required ? clickedAway : undefined}
+      >
         <button onClick={acceptAnalytics}>Accept</button>
         <button onClick={rejectAnalytics}>Reject</button>
       </Drawer>
-
     </div>
   );
 }

src/components/App/AppLoggedIn.tsx

@@ -54,7 +54,9 @@ export default function AppWithBar(): ReactElement {
     getCurrentUser()?.answeredConsent
   );
 
-  async function handleConsentChange(otelConsent: boolean): Promise<void> {
+  async function handleConsentChange(
+    otelConsent: boolean | undefined
+  ): Promise<void> {
     await updateUser({
       ...getCurrentUser()!,
       otelConsent,
@@ -101,6 +103,7 @@ export default function AppWithBar(): ReactElement {
           {answeredConsent ? null : (
             <AnalyticsConsent
               onChangeConsent={handleConsentChange}
+              required
             ></AnalyticsConsent>
           )}
           <Routes>

src/components/UserSettings/UserSettings.tsx

@@ -79,8 +79,8 @@ export function UserSettings(props: {
   const [displayConsent, setDisplayConsent] = useState(false);
   const show = (): void => setDisplayConsent(true);
 
-  const handleConsentChange = (consentVal: boolean): void => {
-    setOtelConsent(consentVal);
+  const handleConsentChange = (consentVal: boolean | undefined): void => {
+    setOtelConsent(consentVal ?? otelConsent);
     setDisplayConsent(false);
   };
 
@@ -308,6 +308,7 @@ export function UserSettings(props: {
                   {displayConsent ? (
                     <AnalyticsConsent
                       onChangeConsent={handleConsentChange}
+                      required={false}
                     ></AnalyticsConsent>
                   ) : null}
                 </Grid>