ENG-2185 Move export settings out of Settings into the Export panel

apps/roam/src/components/Export.tsx

@@ -9,14 +9,13 @@ import {
   ProgressBar,
   Toaster,
   Toast,
-  Tooltip,
   Tab,
   Tabs,
   RadioGroup,
   Radio,
-  FormGroup,
+  Collapse,
 } from "@blueprintjs/core";
-import React, { useState, useEffect, useMemo, FormEvent } from "react";
+import React, { useState, useEffect, useMemo, useRef, FormEvent } from "react";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import { saveAs } from "file-saver";
 import { Result } from "roamjs-components/types/query-builder";
@@ -93,7 +92,13 @@ import {
 } from "~/utils/publishNodesToGroups";
 import { summarizeAssetResults } from "~/utils/publishNodeAssets";
 import { getLoggedInClient, getSupabaseContext } from "~/utils/supabaseContext";
-import { isNodeSharingEnabled } from "~/components/settings/utils/accessors";
+import {
+  bulkReadSettings,
+  isNodeSharingEnabled,
+} from "~/components/settings/utils/accessors";
+import refreshConfigTree from "~/utils/refreshConfigTree";
+import ExportOptions from "./ExportOptions";
+import Description from "~/components/settings/SettingsDescription";
 
 const ExportProgress = ({ id }: { id: string }) => {
   const [progress, setProgress] = useState(0);
@@ -227,6 +232,21 @@ const ExportDialog: ExportDialogComponent = ({
     if (initialPanel) setSelectedTabId(INITIAL_PANEL_TO_TAB_ID[initialPanel]);
   }, [initialPanel, sharingEnabled]);
   const [includeDiscourseContext, setIncludeDiscourseContext] = useState(false);
+  const [exportOptionsOpen, setExportOptionsOpen] = useState(false);
+  const exportOptionsOpened = useRef(false);
+  // Collapse unmounts the panels while closed, so each open seeds them from current values.
+  const exportGlobalSettings = useMemo(
+    () => bulkReadSettings().globalSettings,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [exportOptionsOpen],
+  );
+
+  // Option panels also write legacy config blocks, so refresh the tree as SettingsDialog
+  // does, but only if they were opened: refreshConfigTree re-reads every node page.
+  const closeDialog = (): void => {
+    if (exportOptionsOpened.current) refreshConfigTree();
+    onClose();
+  };
   const [gitHubAccessToken, setGitHubAccessToken] = useState<string | null>(
     getSetting<string | null>("oauth-github", null),
   );
@@ -758,7 +778,7 @@ const ExportDialog: ExportDialogComponent = ({
       });
     } finally {
       setLoading(false);
-      onClose();
+      closeDialog();
     }
   };
 
@@ -798,7 +818,7 @@ const ExportDialog: ExportDialogComponent = ({
           fileCount: files.length,
         });
       }
-      onClose();
+      closeDialog();
     } catch (e) {
       setError("Failed to export files.");
       posthog.capture("Export Dialog: Export Failed", {
@@ -941,7 +961,7 @@ const ExportDialog: ExportDialogComponent = ({
             : "success",
         id: "query-builder-publish-success",
       });
-      if (hasPublishedNodes) onClose();
+      if (hasPublishedNodes) closeDialog();
     } catch (e) {
       internalError({
         error: e as Error,
@@ -1004,41 +1024,53 @@ const ExportDialog: ExportDialogComponent = ({
           />
         </Label>
 
-        <div className="flex items-end justify-between">
+        <div className="mt-2 flex items-center justify-between gap-4">
+          <Button
+            minimal={true}
+            small={true}
+            icon={exportOptionsOpen ? "chevron-down" : "chevron-right"}
+            text="Export options"
+            onClick={() => {
+              const nextOpen = !exportOptionsOpen;
+              setExportOptionsOpen(nextOpen);
+              if (nextOpen) exportOptionsOpened.current = true;
+              posthog.capture("Export Dialog: Options Toggled", {
+                open: nextOpen,
+              });
+            }}
+          />
           <span>
             {typeof results === "function"
               ? "Calculating number of results..."
               : `Exporting ${results.length} results`}
           </span>
-          <div className="flex flex-col items-end">
-            <FormGroup className={`m-0`} inline>
+        </div>
+        <Collapse isOpen={exportOptionsOpen}>
+          <div className="max-h-64 overflow-y-auto">
+            <div className="px-1 pt-1">
               <Checkbox
-                alignIndicator={"right"}
                 checked={includeDiscourseContext}
-                onChange={(e) => {
+                onChange={(e) =>
                   setIncludeDiscourseContext(
                     (e.target as HTMLInputElement).checked,
-                  );
-                }}
+                  )
+                }
                 labelElement={
-                  <Tooltip
-                    className="m-0"
-                    content={
-                      "Include the discourse context of each result in the export."
-                    }
-                  >
-                    <span>Discourse context</span>
-                  </Tooltip>
+                  <>
+                    Discourse context
+                    <Description description="Include the discourse context of each result in the export." />
+                  </>
                 }
               />
-            </FormGroup>
+            </div>
+            <ExportOptions globalSettings={exportGlobalSettings} />
           </div>
-        </div>
+        </Collapse>
       </div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
           <span className="text-red-700">{error}</span>
-          <Button text={"Cancel"} intent={Intent.NONE} onClick={onClose} />
+          <Button text={"Cancel"} intent={Intent.NONE} onClick={closeDialog} />
           <Button
             text={"Export"}
             intent={Intent.PRIMARY}
@@ -1105,7 +1137,7 @@ const ExportDialog: ExportDialogComponent = ({
                             destination: activeExportDestination,
                             fileCount: files.length,
                           });
-                          onClose();
+                          closeDialog();
                         }
                       } catch (error) {
                         const e = error as Error;
@@ -1125,7 +1157,7 @@ const ExportDialog: ExportDialogComponent = ({
                         destination: activeExportDestination,
                         fileCount: files.length,
                       });
-                      onClose();
+                      closeDialog();
                       return;
                     }
 
@@ -1142,7 +1174,7 @@ const ExportDialog: ExportDialogComponent = ({
                         destination: activeExportDestination,
                         fileCount: files.length,
                       });
-                      onClose();
+                      closeDialog();
                     });
                   } else {
                     setError(`Unsupported export type: ${exportType}`);
@@ -1217,7 +1249,7 @@ const ExportDialog: ExportDialogComponent = ({
       </div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button text={"Cancel"} intent={Intent.NONE} onClick={onClose} />
+          <Button text={"Cancel"} intent={Intent.NONE} onClick={closeDialog} />
           <Button
             text={`Send ${
               isSendToGraph ? livePages.length : results.length
@@ -1277,7 +1309,7 @@ const ExportDialog: ExportDialogComponent = ({
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
           <span className="text-red-700">{publishError}</span>
-          <Button text={"Cancel"} intent={Intent.NONE} onClick={onClose} />
+          <Button text={"Cancel"} intent={Intent.NONE} onClick={closeDialog} />
           <Button
             text={"Publish"}
             intent={Intent.PRIMARY}

apps/roam/src/components/settings/ExportSettings.tsx → apps/roam/src/components/ExportOptions.tsx

@@ -5,15 +5,15 @@ import {
   GlobalNumberPanel,
   GlobalMultiTextPanel,
   GlobalSelectPanel,
-} from "./components/BlockPropSettingPanels";
+} from "~/components/settings/components/BlockPropSettingPanels";
 import {
   GLOBAL_KEYS,
   EXPORT_KEYS,
 } from "~/components/settings/utils/settingKeys";
-import { type SettingsSnapshot } from "./utils/accessors";
-import { ROAM_DOCS, withDocsLink } from "./utils/docs";
+import { type SettingsSnapshot } from "~/components/settings/utils/accessors";
+import { ROAM_DOCS, withDocsLink } from "~/components/settings/utils/docs";
 
-const DiscourseGraphExport = ({
+const ExportOptions = ({
   globalSettings,
 }: {
   globalSettings: SettingsSnapshot["globalSettings"];
@@ -123,4 +123,4 @@ const DiscourseGraphExport = ({
   );
 };
 
-export default DiscourseGraphExport;
+export default ExportOptions;

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

@@ -20,7 +20,6 @@ import renderOverlay from "roamjs-components/util/renderOverlay";
 import DiscourseRelationConfigPanel from "./DiscourseRelationConfigPanel";
 import DEFAULT_RELATION_VALUES from "~/data/defaultDiscourseRelations";
 import discourseConfigRef from "~/utils/discourseConfigRef";
-import DiscourseGraphExport from "./ExportSettings";
 import QuerySettings from "./QuerySettings";
 import AdminPanel from "./AdminPanel";
 import PreferencesGeneral from "./PreferencesGeneral";
@@ -287,14 +286,6 @@ export const SettingsDialog = ({
               />
             }
           />
-          <Tab
-            id={SETTINGS_TAB_IDS.advancedExport}
-            title="Export"
-            className="overflow-y-auto"
-            panel={
-              <DiscourseGraphExport globalSettings={settings.globalSettings} />
-            }
-          />
           <Tabs.Expander />
           {/* Secret Admin Panel */}
           <Tab

apps/roam/src/components/settings/utils/settingsTabs.ts

@@ -9,7 +9,6 @@ export const SETTINGS_TAB_IDS = {
   grammarNodes: "grammar-nodes",
   grammarRelations: "grammar-relations",
   advancedQueries: "advanced-queries",
-  advancedExport: "advanced-export",
   admin: "secret-admin-panel",
 } as const;
 
@@ -25,7 +24,8 @@ export const SETTINGS_TAB_ALIASES: Record<string, TabId> = {
   "canvas-shortcuts-personal-settings": SETTINGS_TAB_IDS.featuresCanvas,
   "left-sidebar-personal-settings": SETTINGS_TAB_IDS.featuresLeftSidebar,
   "left-sidebar-global-settings": SETTINGS_TAB_IDS.featuresLeftSidebar,
-  "discourse-graph-export": SETTINGS_TAB_IDS.advancedExport,
+  // Export options now live in the Export dialog.
+  "discourse-graph-export": SETTINGS_TAB_IDS.preferencesGeneral,
   "discourse-nodes": SETTINGS_TAB_IDS.grammarNodes,
   "discourse-relations": SETTINGS_TAB_IDS.grammarRelations,
 };

apps/website/content/roam/guides/sharing-discourse-graph.md

@@ -17,9 +17,7 @@ Demo:
 
 ## Export Options
 
-We have a range of options for customizing the markdown export. These can be found on the `Export` tab of the discourse graph configuration.
-
-![](/docs/roam/settings-export.png)
+We have a range of options for customizing the markdown export. These can be found under `Export options` on the `Export` tab of the export dialog, alongside the export you are about to run.
 
 Here is a brief explanation of each option: