Skip to content

Migrate small personal settings #690

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

Draft
sid597 wants to merge 1 commit into
base: eng-1272-migrate-all-small-global-settings-component
Choose a base branch
from
+77 −239
Draft

Migrate small personal settings #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion apps/roam/src/components/DiscourseFloatingMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from "@blueprintjs/core";
import { FeedbackWidget } from "./BirdEatsBugs";
import { render as renderSettings } from "~/components/settings/Settings";
import { getPersonalSetting } from "~/components/settings/utils/accessors";

type DiscourseFloatingMenuProps = {
// CSS placement class
Expand Down Expand Up @@ -118,7 +119,7 @@ export const installDiscourseFloatingMenu = (
floatingMenuAnchor.id = ANCHOR_ID;
document.getElementById("app")?.appendChild(floatingMenuAnchor);
}
if (onLoadArgs.extensionAPI.settings.get("hide-feedback-button") as boolean) {
if (getPersonalSetting<boolean>(["Hide Feedback Button"])) {
floatingMenuAnchor.classList.add("hidden");
}
ReactDOM.render(
Expand Down
281 changes: 61 additions & 220 deletions apps/roam/src/components/settings/HomePersonalSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { OnloadArgs } from "roamjs-components/types";
import { Label, Checkbox } from "@blueprintjs/core";
import { Label } from "@blueprintjs/core";
import Description from "roamjs-components/components/Description";
import { addStyle } from "roamjs-components/dom";
import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
Expand All @@ -15,19 +15,12 @@ import {
hideDiscourseFloatingMenu,
} from "~/components/DiscourseFloatingMenu";
import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
import {
AUTO_CANVAS_RELATIONS_KEY,
DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
DISCOURSE_TOOL_SHORTCUT_KEY,
STREAMLINE_STYLING_KEY,
DISALLOW_DIAGNOSTICS,
} from "~/data/userSettings";
import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
import { enablePostHog, disablePostHog } from "~/utils/posthog";
import internalError from "~/utils/internalError";
import KeyboardShortcutInput from "./KeyboardShortcutInput";
import { getSetting, setSetting } from "~/utils/extensionSettings";
import streamlineStyling from "~/styles/streamlineStyling";
import { useFeatureFlag } from "./utils/hooks";
import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";

const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
const extensionAPI = onloadArgs.extensionAPI;
Expand Down Expand Up @@ -61,246 +54,94 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
description="Set a single key to activate the Discourse Tool in tldraw. Only single keys (no modifiers) are supported. Leave empty for no shortcut."
placeholder="Click to set single key"
/>
<Checkbox
defaultChecked={
extensionAPI.settings.get("discourse-context-overlay") as boolean
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
extensionAPI.settings.set(
"discourse-context-overlay",
target.checked,
);

onPageRefObserverChange(overlayHandler)(target.checked);
<PersonalFlagPanel
title="Overlay"
description="Whether or not to overlay Discourse Context information over Discourse Node references."
settingKeys={["Discourse Context Overlay"]}
onChange={(checked) => {
onPageRefObserverChange(overlayHandler)(checked);
}}
labelElement={
<>
Overlay
<Description
description={
"Whether or not to overlay Discourse Context information over Discourse Node references."
}
/>
</>
}
/>
{suggestiveModeEnabled && (
<Checkbox
defaultChecked={
extensionAPI.settings.get("suggestive-mode-overlay") as boolean
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
void extensionAPI.settings.set(
"suggestive-mode-overlay",
target.checked,
);
<PersonalFlagPanel
title="Suggestive Mode Overlay"
description="Whether or not to overlay Suggestive Mode button over Discourse Node references."
settingKeys={["Suggestive Mode Overlay"]}
onChange={(checked) => {
onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))(
target.checked,
checked,
);
}}
labelElement={
<>
Suggestive Mode Overlay
<Description
description={
"Whether or not to overlay Suggestive Mode button over Discourse Node references."
}
/>
</>
}
/>
)}
<Checkbox
defaultChecked={
extensionAPI.settings.get("text-selection-popup") !== false
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
extensionAPI.settings.set("text-selection-popup", target.checked);
}}
labelElement={
<>
Text Selection Popup
<Description
description={
"Whether or not to show the Discourse Node Menu when selecting text."
}
/>
</>
}
<PersonalFlagPanel
title="Text Selection Popup"
description="Whether or not to show the Discourse Node Menu when selecting text."
settingKeys={["Text Selection Popup"]}
defaultValue={true}
/>
<Checkbox
defaultChecked={
extensionAPI.settings.get("disable-sidebar-open") as boolean
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
extensionAPI.settings.set("disable-sidebar-open", target.checked);
}}
labelElement={
<>
Disable Sidebar Open
<Description
description={
"Disable opening new nodes in the sidebar when created"
}
/>
</>
}
<PersonalFlagPanel
title="Disable Sidebar Open"
description="Disable opening new nodes in the sidebar when created"
settingKeys={["Disable Sidebar Open"]}
/>
<Checkbox
defaultChecked={extensionAPI.settings.get("page-preview") as boolean}
onChange={(e) => {
const target = e.target as HTMLInputElement;
extensionAPI.settings.set("page-preview", target.checked);
onPageRefObserverChange(previewPageRefHandler)(target.checked);
<PersonalFlagPanel
title="Preview"
description="Whether or not to display page previews when hovering over page refs"
settingKeys={["Page Preview"]}
onChange={(checked) => {
onPageRefObserverChange(previewPageRefHandler)(checked);
}}
labelElement={
<>
Preview
<Description
description={
"Whether or not to display page previews when hovering over page refs"
}
/>
</>
}
/>
<Checkbox
defaultChecked={
extensionAPI.settings.get("hide-feedback-button") as boolean
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
extensionAPI.settings.set("hide-feedback-button", target.checked);

if (target.checked) {
<PersonalFlagPanel
title="Hide Feedback Button"
description="Hide the 'Send feedback' button at the bottom right of the screen."
settingKeys={["Hide Feedback Button"]}
onChange={(checked) => {
if (checked) {
hideDiscourseFloatingMenu();
} else {
showDiscourseFloatingMenu();
}
}}
labelElement={
<>
Hide Feedback Button
<Description
description={
"Hide the 'Send feedback' button at the bottom right of the screen."
}
/>
</>
}
/>
<Checkbox
defaultChecked={
extensionAPI.settings.get(AUTO_CANVAS_RELATIONS_KEY) === true
}
onChange={(e) => {
const target = e.target as HTMLInputElement;
void extensionAPI.settings.set(
AUTO_CANVAS_RELATIONS_KEY,
target.checked,
);
}}
labelElement={
<>
Auto Canvas Relations
<Description
description={
"Automatically add discourse relations to canvas when a node is added"
}
/>
</>
}
<PersonalFlagPanel
title="Auto Canvas Relations"
description="Automatically add discourse relations to canvas when a node is added"
settingKeys={["Auto Canvas Relations"]}
/>
<Checkbox
defaultChecked={getSetting(
DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
false,
)}
onChange={(e) => {
const target = e.target as HTMLInputElement;
void setSetting(
DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
target.checked,
).catch(() => undefined);
}}
labelElement={
<>
(BETA) Overlay in Canvas
<Description
description={
"Whether or not to overlay Discourse Context information over Canvas Nodes."
}
/>
</>
}
<PersonalFlagPanel
title="(BETA) Overlay in Canvas"
description="Whether or not to overlay Discourse Context information over Canvas Nodes."
settingKeys={["Overlay in Canvas"]}
/>
<Checkbox
defaultChecked={getSetting(STREAMLINE_STYLING_KEY, false)}
onChange={(e) => {
const target = e.target as HTMLInputElement;
void setSetting(STREAMLINE_STYLING_KEY, target.checked).catch(
() => undefined,
);

// Load or unload the streamline styling
<PersonalFlagPanel
title="Streamline Styling"
description="Apply streamlined styling to your personal graph for a cleaner appearance."
settingKeys={["Streamline Styling"]}
onChange={(checked) => {
const existingStyleElement =
document.getElementById("streamline-styling");

if (target.checked && !existingStyleElement) {
// Load the styles
if (checked && !existingStyleElement) {
const styleElement = addStyle(streamlineStyling);
styleElement.id = "streamline-styling";
} else if (!target.checked && existingStyleElement) {
// Unload the styles
} else if (!checked && existingStyleElement) {
existingStyleElement.remove();
}
}}
labelElement={
<>
Streamline Styling
<Description
description={
"Apply streamlined styling to your personal graph for a cleaner appearance."
}
/>
</>
}
/>
<Checkbox
defaultChecked={getSetting(DISALLOW_DIAGNOSTICS, false)}
onChange={(e) => {
const target = e.target as HTMLInputElement;
const disallow = target.checked;
void setSetting(DISALLOW_DIAGNOSTICS, disallow)
.then(() => {
if (disallow) {
disablePostHog();
} else {
enablePostHog();
}
})
.catch((error) => {
target.checked = !disallow;
internalError({
error,
userMessage: "Could not change settings",
});
});
<PersonalFlagPanel
title="Disable Product Diagnostics"
description="Disable sending usage signals and error reports that help us improve the product."
settingKeys={["Disable Product Diagnostics"]}
onChange={(checked) => {
if (checked) {
disablePostHog();
} else {
enablePostHog();
}
}}
labelElement={
<>
Disable Product Diagnostics
<Description
description={
"Disable sending usage signals and error reports that help us improve the product."
}
/>
</>
}
/>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion apps/roam/src/utils/createDiscourseNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import getSubTree from "roamjs-components/util/getSubTree";
import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
import getDiscourseNodes from "./getDiscourseNodes";
import isFlagEnabled from "./isFlagEnabled";
import { getPersonalSetting } from "~/components/settings/utils/accessors";
import resolveQueryBuilderRef from "./resolveQueryBuilderRef";
import { OnloadArgs, RoamBasicNode } from "roamjs-components/types";
import runQuery from "./runQuery";
Expand All @@ -33,7 +34,7 @@ const createDiscourseNode = async ({
text: text,
});
const handleOpenInSidebar = (uid: string) => {
if (extensionAPI?.settings.get("disable-sidebar-open")) return;
if (getPersonalSetting<boolean>(["Disable Sidebar Open"])) return;
openBlockInSidebar(uid);
setTimeout(() => {
const sidebarTitle = document.querySelector(
Expand Down
Loading
Loading