ENG-1154: Reload graph when left sidebar is enabled (#605)

* show alert to reload the graph when left sidebar is enabled

* use flag panel instead of checkbox

Author: sid597

apps/roam/src/components/settings/GeneralSettings.tsx

@@ -1,16 +1,19 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
+import { Alert, Intent } from "@blueprintjs/core";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
     refreshConfigTree();
     return getFormattedConfigTree();
   }, []);
 
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+
   return (
     <div className="flex flex-col gap-4 p-1">
       <TextPanel
@@ -37,7 +40,25 @@ const DiscourseGraphHome = () => {
         uid={settings.leftSidebarEnabled.uid}
         parentUid={settings.settingsUid}
         value={settings.leftSidebarEnabled.value || false}
+        options={{
+          onChange: (checked: boolean) => {
+            if (checked) {
+              setIsAlertOpen(true);
+            }
+          },
+        }}
       />
+      <Alert
+        isOpen={isAlertOpen}
+        onConfirm={() => window.location.reload()}
+        onCancel={() => setIsAlertOpen(false)}
+        confirmButtonText="Reload Graph"
+        cancelButtonText="Later"
+        intent={Intent.PRIMARY}
+      >
+        <p>Enabling the Left Sidebar requires a graph reload to take effect.</p>
+        <p>Would you like to reload now?</p>
+      </Alert>
     </div>
   );
 };