Merge pull request #878 from DiscourseGraphs/eng-735-remove-ui-from-settings-pages

ENG-735: Remove inline settings UI from config pages

Author: sid597

apps/roam/src/components/LeftSidebarView.tsx

@@ -58,7 +58,7 @@ import { SettingsDialog } from "./settings/Settings";
 import { OnloadArgs } from "roamjs-components/types";
 import renderOverlay from "roamjs-components/util/renderOverlay";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings";
 import posthog from "posthog-js";

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

@@ -19,7 +19,7 @@ import type { RoamBasicNode } from "roamjs-components/types";
 import { extractRef, getSubTree } from "roamjs-components/util";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import discourseConfigRef from "~/utils/discourseConfigRef";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import {
   getLeftSidebarGlobalSectionConfig,
   mergeGlobalSectionWithAccessor,

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

@@ -38,7 +38,7 @@ import {
 import { extractRef, getSubTree } from "roamjs-components/util";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { refreshAndNotify } from "~/components/LeftSidebarView";

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

@@ -5,7 +5,7 @@ import discourseConfigRef from "~/utils/discourseConfigRef";
 import PageGroupsPanel from "./PageGroupPanel";
 import createBlock from "roamjs-components/writes/createBlock";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import { createOrUpdateDiscourseEmbedding } from "~/utils/syncDgNodesToSupabase";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import { GlobalFlagPanel } from "./components/BlockPropSettingPanels";

apps/roam/src/index.ts

@@ -105,7 +105,7 @@ export default runExtension(async (onloadArgs) => {
     streamlineStyleElement.id = "streamline-styling";
   }
 
-  const { observers, listeners } = await initObservers({ onloadArgs });
+  const { observers, listeners } = initObservers({ onloadArgs });
   const {
     pageActionListener,
     hashChangeListener,

apps/roam/src/utils/configPageTabs.ts

@@ -8,18 +8,13 @@ import {
   renderCanvasReferences,
   renderDiscourseContext,
 } from "~/utils/renderLinkedReferenceAdditions";
-import { createConfigObserver } from "roamjs-components/components/ConfigPage";
 import {
   renderTldrawCanvas,
   renderTldrawCanvasInSidebar,
 } from "~/components/canvas/Tldraw";
 import { renderQueryPage, renderQueryBlock } from "~/components/QueryBuilder";
-import {
-  DISCOURSE_CONFIG_PAGE_TITLE,
-  renderNodeConfigPage,
-} from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import { isCurrentPageCanvas, isSidebarCanvas } from "~/utils/isCanvasPage";
-import { isDiscourseNodeConfigPage as isNodeConfigPage } from "~/utils/isDiscourseNodeConfigPage";
 import { isQueryPage } from "~/utils/isQueryPage";
 import {
   enablePageRefObserver,
@@ -39,7 +34,6 @@ import {
   render as renderDiscourseNodeMenu,
 } from "~/components/DiscourseNodeMenu";
 import { IKeyCombo } from "@blueprintjs/core";
-import { configPageTabs } from "~/utils/configPageTabs";
 import { renderDiscourseNodeSearchMenu } from "~/components/DiscourseNodeSearchMenu";
 import {
   renderTextSelectionPopup,
@@ -88,11 +82,11 @@ const getTitleAndUidFromHeader = (h1: HTMLHeadingElement) => {
   return { title, uid };
 };
 
-export const initObservers = async ({
+export const initObservers = ({
   onloadArgs,
 }: {
   onloadArgs: OnloadArgs;
-}): Promise<{
+}): {
   observers: MutationObserver[];
   listeners: {
     pageActionListener: EventListener;
@@ -101,7 +95,7 @@ export const initObservers = async ({
     discourseNodeSearchTriggerListener: EventListener;
     nodeCreationPopoverListener: EventListener;
   };
-}> => {
+} => {
   const pageTitleObserver = createHTMLObserver({
     tag: "H1",
     className: "rm-title-display",
@@ -127,8 +121,7 @@ export const initObservers = async ({
         }
       }
 
-      if (isNodeConfigPage(title)) renderNodeConfigPage(props);
-      else if (isQueryPage({ title })) renderQueryPage(props);
+      if (isQueryPage({ title })) renderQueryPage(props);
       else if (isCurrentPageCanvas(props)) renderTldrawCanvas(props);
       else if (isSidebarCanvas(props)) renderTldrawCanvasInSidebar(props);
     },
@@ -234,22 +227,14 @@ export const initObservers = async ({
   }
   if (getPageRefObserversSize()) enablePageRefObserver();
 
-  const { pageUid: configPageUid, observer: configPageObserver } =
-    await createConfigObserver({
-      title: DISCOURSE_CONFIG_PAGE_TITLE,
-      config: {
-        tabs: configPageTabs(onloadArgs),
-      },
-    });
-  // refresh config tree after config page is created
-  refreshConfigTree();
+  const configPageUid = getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE);
 
   const hashChangeListener = (e: Event) => {
     const evt = e as HashChangeEvent;
     // Attempt to refresh config navigating away from config page
     // doesn't work if they update via sidebar
     if (
-      evt.oldURL.endsWith(configPageUid) ||
+      (configPageUid && evt.oldURL.endsWith(configPageUid)) ||
       getDiscourseNodes().some(({ type }) => evt.oldURL.endsWith(type))
     ) {
       refreshConfigTree();
@@ -417,7 +402,6 @@ export const initObservers = async ({
     observers: [
       pageTitleObserver,
       queryBlockObserver,
-      configPageObserver,
       graphOverviewExportObserver,
       nodeTagPopupButtonObserver,
       leftSidebarObserver,

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -4,7 +4,7 @@ import updateBlock from "roamjs-components/writes/updateBlock";
 import createBlock from "roamjs-components/writes/createBlock";
 import discourseConfigRef from "./discourseConfigRef";
 import { getLeftSidebarSettings } from "./getLeftSidebarSettings";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "./renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import refreshConfigTree from "./refreshConfigTree";
 
 const migrateSectionChildren = async (
@@ -54,8 +54,7 @@ export const migrateLeftSidebarSettings = async () => {
 
   const allPersonalSections = leftSidebarSettings.allPersonalSections;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention
-  for (const [_, userPersonalSection] of Object.entries(allPersonalSections)) {
+  for (const userPersonalSection of Object.values(allPersonalSections)) {
     for (const section of userPersonalSection.sections) {
       const children = section.children || [];
       if (children.length > 0) {

apps/roam/src/utils/isDiscourseNodeConfigPage.ts

@@ -5,7 +5,7 @@ import discourseConfigRef from "./discourseConfigRef";
 import registerDiscourseDatalogTranslators from "./registerDiscourseDatalogTranslators";
 import { unregisterDatalogTranslator } from "./conditionToDatalog";
 import type { PullBlock } from "roamjs-components/types/native";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 
 const getPagesStartingWithPrefix = (prefix: string) =>
   (