Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
trangdoan982 wants to merge 5 commits into
base: eng-2186-grammar-nodes-drill-down-and-settings-navigation-primitive
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1d925d
ENG-2185 Move export settings out of Settings into the Export panel
trangdoan982 Aug 31, 2026
6a2aa71
Drop the stale Settings screenshot from the sharing guide
trangdoan982 Aug 31, 2026
a60e3a1
ENG-2185 Commit and settle deferred option writes before the export r…
trangdoan982 Sep 1, 2026
7eaf604
ENG-2185 Put Export options beside the result count and re-read on open
trangdoan982 Sep 4, 2026
a0293d1
ENG-2185 Discourse context on its own line above the export options row
trangdoan982 Sep 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 87 additions & 35 deletions apps/roam/src/components/Export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ import {
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";
Expand Down Expand Up @@ -91,7 +92,13 @@ import {
type NodeUidWithType,
} from "~/utils/publishNodesToGroups";
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 { flushPendingSettingWrites } from "~/utils/pendingSettingWrites";
import ExportOptions from "./ExportOptions";

const ExportProgress = ({ id }: { id: string }) => {
const [progress, setProgress] = useState(0);
Expand Down Expand Up @@ -225,6 +232,26 @@ 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);
// Re-read on every open rather than once at mount: Collapse unmounts the option
// panels while closed, so each open seeds them from the current stored values
// instead of whatever the dialog saw when it first rendered.
const exportGlobalSettings = useMemo(
() => bulkReadSettings().globalSettings,
// eslint-disable-next-line react-hooks/exhaustive-deps
[exportOptionsOpen],
);

// The export option panels write legacy config blocks alongside block props, so
// the cached config tree has to be refreshed the way SettingsDialog does. Gated
// on the section having been opened because refreshConfigTree re-reads every
// node page and re-registers the datalog translators, which is too heavy to run
// on every close of a dialog that is opened for each export.
const closeDialog = (): void => {
if (exportOptionsOpened.current) refreshConfigTree();
onClose();
};
const [gitHubAccessToken, setGitHubAccessToken] = useState<string | null>(
getSetting<string | null>("oauth-github", null),
);
Expand Down Expand Up @@ -756,7 +783,7 @@ const ExportDialog: ExportDialogComponent = ({
});
} finally {
setLoading(false);
onClose();
closeDialog();
}
};

Expand Down Expand Up @@ -796,7 +823,7 @@ const ExportDialog: ExportDialogComponent = ({
fileCount: files.length,
});
}
onClose();
closeDialog();
} catch (e) {
setError("Failed to export files.");
posthog.capture("Export Dialog: Export Failed", {
Expand Down Expand Up @@ -888,7 +915,7 @@ const ExportDialog: ExportDialogComponent = ({
: "success",
id: "query-builder-publish-success",
});
if (hasPublishedNodes) onClose();
if (hasPublishedNodes) closeDialog();
} catch (e) {
internalError({
error: e as Error,
Expand Down Expand Up @@ -951,41 +978,60 @@ const ExportDialog: ExportDialogComponent = ({
/>
</Label>

<div className="flex items-end justify-between">
<div className="mt-2 flex justify-end">
<FormGroup className={`m-0`} inline>
<Checkbox
alignIndicator={"right"}
checked={includeDiscourseContext}
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>
}
/>
</FormGroup>
</div>
<div className="mt-1 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>
<Checkbox
alignIndicator={"right"}
checked={includeDiscourseContext}
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>
}
/>
</FormGroup>
</div>
</div>
<Collapse isOpen={exportOptionsOpen}>
<div className="max-h-64 overflow-y-auto">
<ExportOptions globalSettings={exportGlobalSettings} />
</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}
Expand All @@ -1009,6 +1055,12 @@ const ExportDialog: ExportDialogComponent = ({
// eslint-disable-next-line @typescript-eslint/no-misused-promises
setTimeout(async () => {
try {
// The export reads settings inside its callback, and the number
// and select panels defer their write behind a short timer. The
// await matters as much as the flush: committing only starts the
// Roam block update, so an option edited a moment ago would
// otherwise still read as its previous value here.
await flushPendingSettingWrites();
const exportType = exportTypes.find(
(e) => e.name === activeExportType,
);
Expand Down Expand Up @@ -1052,7 +1104,7 @@ const ExportDialog: ExportDialogComponent = ({
destination: activeExportDestination,
fileCount: files.length,
});
onClose();
closeDialog();
}
} catch (error) {
const e = error as Error;
Expand All @@ -1072,7 +1124,7 @@ const ExportDialog: ExportDialogComponent = ({
destination: activeExportDestination,
fileCount: files.length,
});
onClose();
closeDialog();
return;
}

Expand All @@ -1089,7 +1141,7 @@ const ExportDialog: ExportDialogComponent = ({
destination: activeExportDestination,
fileCount: files.length,
});
onClose();
closeDialog();
});
} else {
setError(`Unsupported export type: ${exportType}`);
Expand Down Expand Up @@ -1164,7 +1216,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
Expand Down Expand Up @@ -1224,7 +1276,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}
Expand Down
10 changes: 5 additions & 5 deletions ...rc/components/settings/ExportSettings.tsx → apps/roam/src/components/ExportOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down Expand Up @@ -123,4 +123,4 @@ const DiscourseGraphExport = ({
);
};

export default DiscourseGraphExport;
export default ExportOptions;
10 changes: 0 additions & 10 deletions apps/roam/src/components/settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -282,15 +281,6 @@ export const SettingsDialog = ({
/>
}
/>
{/* Leaves Settings entirely in ENG-2185. */}
<Tab
id={SETTINGS_TAB_IDS.advancedExport}
title="Export"
className="overflow-y-auto"
panel={
<DiscourseGraphExport globalSettings={settings.globalSettings} />
}
/>
<Tabs.Expander />
{/* Secret Admin Panel */}
<Tab
Expand Down
4 changes: 2 additions & 2 deletions apps/roam/src/components/settings/utils/settingsTabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -24,7 +23,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 left Settings in ENG-2185; they 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,
};
Expand Down
4 changes: 1 addition & 3 deletions apps/website/content/roam/guides/sharing-discourse-graph.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
Binary file removed apps/website/public/docs/roam/settings-export.png
View file
Open in desktop
Binary file not shown.