Skip to content

Commit b6d7e87

Browse files
sid597sid597
authored
ENG-1272 Migrate all small global settings components (#688)
* ENG-1272 Migrate all small global settings components * suggestive mode flags migrate * prettier * address review * add comments for testing * add comment for testing * remove comments * remove init stub * address review * lint fix * prettier * dummy * pass initialvalue to featureflag
1 parent 52bf496 commit b6d7e87

6 files changed

Lines changed: 120 additions & 122 deletions

File tree

‎apps/roam/src/components/settings/ExportSettings.tsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,87 @@
11
import React from "react";
22
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
3-
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
4-
import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel";
5-
import MultiTextPanel from "roamjs-components/components/ConfigPanels/MultiTextPanel";
6-
import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
3+
import {
4+
GlobalFlagPanel,
5+
GlobalNumberPanel,
6+
GlobalMultiTextPanel,
7+
GlobalSelectPanel,
8+
} from "./components/BlockPropSettingPanels";
79

8-
const DiscourseGraphExport = ({}: {}) => {
10+
const DiscourseGraphExport = () => {
911
const settings = getFormattedConfigTree();
1012
const exportSettings = settings.export;
1113
const parentUid = settings.export.exportUid;
1214
return (
1315
<div className="flex flex-col gap-4 p-1">
1416
<div>
15-
<FlagPanel
17+
<GlobalFlagPanel
1618
title="remove special characters"
1719
description="Whether or not to remove the special characters in a file name"
20+
settingKeys={["Export", "Remove Special Characters"]}
21+
initialValue={exportSettings.removeSpecialCharacters.value}
1822
order={1}
1923
uid={exportSettings.removeSpecialCharacters.uid}
2024
parentUid={parentUid}
21-
value={exportSettings.removeSpecialCharacters.value || false}
2225
/>
2326

24-
<FlagPanel
27+
<GlobalFlagPanel
2528
title="resolve block references"
2629
description="Replaces block references in the markdown content with the block's content"
30+
settingKeys={["Export", "Resolve Block References"]}
31+
initialValue={exportSettings.optsRefs.value}
2732
order={3}
2833
uid={exportSettings.optsRefs.uid}
2934
parentUid={parentUid}
30-
value={exportSettings.optsRefs.value || false}
3135
/>
32-
<FlagPanel
36+
<GlobalFlagPanel
3337
title="resolve block embeds"
3438
description="Replaces block embeds in the markdown content with the block's content tree"
39+
settingKeys={["Export", "Resolve Block Embeds"]}
40+
initialValue={exportSettings.optsEmbeds.value}
3541
order={4}
3642
uid={exportSettings.optsEmbeds.uid}
3743
parentUid={parentUid}
38-
value={exportSettings.optsEmbeds.value || false}
3944
/>
4045

41-
<FlagPanel
46+
<GlobalFlagPanel
4247
title="append referenced node"
4348
description="If a referenced node is defined in a node's format, it will be appended to the discourse context"
49+
settingKeys={["Export", "Append Referenced Node"]}
50+
initialValue={exportSettings.appendRefNodeContext.value}
4451
order={6}
4552
uid={exportSettings.appendRefNodeContext.uid}
4653
parentUid={parentUid}
47-
value={exportSettings.appendRefNodeContext.value || false}
4854
/>
4955
</div>
5056
<div className="link-type-select-wrapper">
51-
<SelectPanel
57+
<GlobalSelectPanel
5258
title="link type"
5359
description="How to format links that appear in your export."
60+
settingKeys={["Export", "Link Type"]}
61+
initialValue={exportSettings.linkType.value || "alias"}
5462
order={5}
55-
options={{
56-
items: ["alias", "wikilinks", "roam url"],
57-
}}
63+
options={["alias", "wikilinks", "roam url"]}
5864
uid={exportSettings.linkType.uid}
5965
parentUid={parentUid}
60-
value={exportSettings.linkType.value || "alias"}
6166
/>
6267
</div>
63-
<NumberPanel
68+
<GlobalNumberPanel
6469
title="max filename length"
6570
description="Set the maximum name length for markdown file exports"
71+
settingKeys={["Export", "Max Filename Length"]}
72+
initialValue={exportSettings.maxFilenameLength.value || 64}
6673
order={0}
6774
uid={exportSettings.maxFilenameLength.uid}
6875
parentUid={parentUid}
69-
value={exportSettings.maxFilenameLength.value || 64}
7076
/>
71-
<MultiTextPanel
77+
<GlobalMultiTextPanel
7278
title="frontmatter"
7379
description="Specify all the lines that should go to the Frontmatter of the markdown file"
80+
settingKeys={["Export", "Frontmatter"]}
81+
initialValue={exportSettings.frontmatter.values}
7482
order={2}
7583
uid={exportSettings.frontmatter.uid}
7684
parentUid={parentUid}
77-
value={exportSettings.frontmatter.values || []}
7885
/>
7986
</div>
8087
);

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useMemo, useState } from "react";
2-
import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
3-
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
42
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
53
import refreshConfigTree from "~/utils/refreshConfigTree";
64
import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
75
import { Alert, Intent } from "@blueprintjs/core";
6+
import {
7+
GlobalTextPanel,
8+
FeatureFlagPanel,
9+
} from "./components/BlockPropSettingPanels";
810

911
const DiscourseGraphHome = () => {
1012
const settings = useMemo(() => {
@@ -13,39 +15,40 @@ const DiscourseGraphHome = () => {
1315
}, []);
1416

1517
const [isAlertOpen, setIsAlertOpen] = useState(false);
16-
1718
return (
1819
<div className="flex flex-col gap-4 p-1">
19-
<TextPanel
20+
<GlobalTextPanel
2021
title="trigger"
2122
description="The trigger to create the node menu."
23+
settingKeys={["Trigger"]}
24+
initialValue={settings.trigger.value || "\\"}
2225
order={0}
2326
uid={settings.trigger.uid}
2427
parentUid={settings.settingsUid}
25-
value={settings.trigger.value}
2628
/>
27-
<TextPanel
29+
<GlobalTextPanel
2830
title="Canvas Page Format"
2931
description="The page format for canvas pages"
32+
settingKeys={["Canvas Page Format"]}
33+
initialValue={
34+
settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT
35+
}
3036
order={1}
3137
uid={settings.canvasPageFormat.uid}
3238
parentUid={settings.settingsUid}
33-
value={settings.canvasPageFormat.value}
34-
defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
3539
/>
36-
<FlagPanel
40+
<FeatureFlagPanel
3741
title="(BETA) Left Sidebar"
3842
description="Whether or not to enable the left sidebar."
43+
featureKey="Enable Left Sidebar"
44+
initialValue={settings.leftSidebarEnabled.value}
3945
order={2}
4046
uid={settings.leftSidebarEnabled.uid}
4147
parentUid={settings.settingsUid}
42-
value={settings.leftSidebarEnabled.value || false}
43-
options={{
44-
onChange: (checked: boolean) => {
45-
if (checked) {
46-
setIsAlertOpen(true);
47-
}
48-
},
48+
onAfterChange={(checked: boolean) => {
49+
if (checked) {
50+
setIsAlertOpen(true);
51+
}
4952
}}
5053
/>
5154
<Alert

‎apps/roam/src/components/settings/SuggestiveModeSettings.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import React, { useEffect, useState } from "react";
33
import { Button, Intent, Tabs, Tab, TabId } from "@blueprintjs/core";
44
import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
5-
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
65
import PageGroupsPanel from "./PageGroupPanel";
76
import createBlock from "roamjs-components/writes/createBlock";
87
import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
98
import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
109
import { createOrUpdateDiscourseEmbedding } from "~/utils/syncDgNodesToSupabase";
1110
import { render as renderToast } from "roamjs-components/components/Toast";
11+
import { GlobalFlagPanel } from "./components/BlockPropSettingPanels";
1212

1313
const SuggestiveModeSettings = () => {
1414
const settings = getFormattedConfigTree();
@@ -64,35 +64,40 @@ const SuggestiveModeSettings = () => {
6464
panel={
6565
<div className="flex flex-col gap-4 p-1">
6666
<div className="sync-config-settings">
67-
<FlagPanel
67+
<GlobalFlagPanel
6868
title="Include Current Page Relations"
6969
description="Include relations from pages referenced on the current page"
70+
settingKeys={[
71+
"Suggestive Mode",
72+
"Include Current Page Relations",
73+
]}
74+
initialValue={
75+
settings.suggestiveMode.includePageRelations.value
76+
}
7077
order={0}
7178
uid={settings.suggestiveMode.includePageRelations.uid}
7279
parentUid={effectiveSuggestiveModeUid}
73-
value={includePageRelations}
74-
options={{
75-
onChange: (checked: boolean) => {
76-
setIncludePageRelations(checked);
77-
},
78-
}}
80+
onChange={setIncludePageRelations}
7981
/>
8082

81-
<FlagPanel
83+
<GlobalFlagPanel
8284
title="Include Parent And Child Blocks"
8385
description={
8486
includePageRelations
8587
? "Include relations from parent and child blocks (automatically enabled when including page relations)"
8688
: "Include relations from parent and child blocks"
8789
}
90+
settingKeys={[
91+
"Suggestive Mode",
92+
"Include Parent And Child Blocks",
93+
]}
94+
initialValue={
95+
settings.suggestiveMode.includeParentAndChildren.value
96+
}
97+
value={includePageRelations ? true : undefined}
8898
order={1}
8999
uid={settings.suggestiveMode.includeParentAndChildren.uid}
90100
parentUid={effectiveSuggestiveModeUid}
91-
value={
92-
includePageRelations
93-
? true
94-
: settings.suggestiveMode.includeParentAndChildren.value
95-
}
96101
disabled={includePageRelations}
97102
/>
98103
</div>

0 commit comments

Comments
 (0)