FE build fix

web/src/app/ee/admin/performance/custom-analytics/CustomAnalyticsUpdateForm.tsx

@@ -3,15 +3,12 @@
 import { Label, SubLabel } from "@/components/admin/connectors/Field";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
-import { Button, Text } from "@tremor/react";
+import { Button, Callout, Text } from "@tremor/react";
 import { useContext, useState } from "react";
 
 export function CustomAnalyticsUpdateForm() {
   const settings = useContext(SettingsContext);
-  if (!settings) {
-    return null;
-  }
-  const customAnalyticsScript = settings.customAnalyticsScript;
+  const customAnalyticsScript = settings?.customAnalyticsScript;
 
   const [newCustomAnalyticsScript, setNewCustomAnalyticsScript] =
     useState<string>(customAnalyticsScript || "");
@@ -19,63 +16,17 @@ export function CustomAnalyticsUpdateForm() {
 
   const { popup, setPopup } = usePopup();
 
+  if (!settings) {
+    return <Callout color="red" title="Failed to fetch settings"></Callout>;
+  }
+
   return (
     <div>
       {popup}
-      <div className="mb-4">
-        <Label>Script</Label>
-        <Text className="mb-3">
-          Specify the Javascript that should run on page load in order to
-          initialize your custom tracking/analytics.
-        </Text>
-        <Text className="mb-2">
-          Do not include the{" "}
-          <span className="font-mono">&lt;script&gt;&lt;/script&gt;</span> tags.
-          If you upload a script below but you are not recieving any events in
-          your analytics platform, try removing all extra whitespace before each
-          line of JavaScript.
-        </Text>
-        <textarea
-          className={`
-          border 
-          border-border 
-          rounded 
-          w-full 
-          py-2 
-          px-3 
-          mt-1
-          h-28`}
-          value={newCustomAnalyticsScript}
-          onChange={(e) => setNewCustomAnalyticsScript(e.target.value)}
-        />
-      </div>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
 
-      <Label>Secret Key</Label>
-      <SubLabel>
-        <>
-          For security reasons, you must provide a secret key to update this
-          script. This should be the value of the{" "}
-          <i>CUSTOM_ANALYTICS_SECRET_KEY</i> environment variable set when
-          initially setting up Danswer.
-        </>
-      </SubLabel>
-      <input
-        className={`
-          border 
-          border-border 
-          rounded 
-          w-full 
-          py-2 
-          px-3 
-          mt-1`}
-        type="password"
-        value={secretKey}
-        onChange={(e) => setSecretKey(e.target.value)}
-      />
-
-      <Button
-        className="mt-4"
-        onClick={async () => {
           const response = await fetch(
             "/api/admin/enterprise-settings/custom-analytics-script",
             {
@@ -84,7 +35,7 @@ export function CustomAnalyticsUpdateForm() {
                 "Content-Type": "application/json",
               },
               body: JSON.stringify({
-                script: newCustomAnalyticsScript,
+                script: newCustomAnalyticsScript.trim(),
                 secret_key: secretKey,
               }),
             }
@@ -104,8 +55,61 @@ export function CustomAnalyticsUpdateForm() {
           setSecretKey("");
         }}
       >
-        Update
-      </Button>
+        <div className="mb-4">
+          <Label>Script</Label>
+          <Text className="mb-3">
+            Specify the Javascript that should run on page load in order to
+            initialize your custom tracking/analytics.
+          </Text>
+          <Text className="mb-2">
+            Do not include the{" "}
+            <span className="font-mono">&lt;script&gt;&lt;/script&gt;</span>{" "}
+            tags. If you upload a script below but you are not recieving any
+            events in your analytics platform, try removing all extra whitespace
+            before each line of JavaScript.
+          </Text>
+          <textarea
+            className={`
+              border 
+              border-border 
+              rounded 
+              w-full 
+              py-2 
+              px-3 
+              mt-1
+              h-28`}
+            value={newCustomAnalyticsScript}
+            onChange={(e) => setNewCustomAnalyticsScript(e.target.value)}
+          />
+        </div>
+
+        <Label>Secret Key</Label>
+        <SubLabel>
+          <>
+            For security reasons, you must provide a secret key to update this
+            script. This should be the value of the{" "}
+            <i>CUSTOM_ANALYTICS_SECRET_KEY</i> environment variable set when
+            initially setting up Danswer.
+          </>
+        </SubLabel>
+        <input
+          className={`
+            border 
+            border-border 
+            rounded 
+            w-full 
+            py-2 
+            px-3 
+            mt-1`}
+          type="password"
+          value={secretKey}
+          onChange={(e) => setSecretKey(e.target.value)}
+        />
+
+        <Button className="mt-4" type="submit">
+          Update
+        </Button>
+      </form>
     </div>
   );
 }

web/src/app/ee/admin/performance/custom-analytics/page.tsx

@@ -23,8 +23,8 @@ function Main() {
     <div>
       <Text className="mb-8">
         This allows you to bring your own analytics tool to Danswer! Copy the
-        Web snippet from your analytics provider into the box below, and we'll
-        start sending usage events.
+        Web snippet from your analytics provider into the box below, and
+        we&apos;ll start sending usage events.
       </Text>
 
       <CustomAnalyticsUpdateForm />