#8759: always show mod variable data panel

pixiebrix · Jul 6, 2024 · 11ee187 · 11ee187
1 parent 63ee7cf
commit 11ee187
Show file tree

Hide file tree

Showing 9 changed files with 573 additions and 58 deletions.
diff --git a/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx
@@ -35,7 +35,7 @@ import useDataPanelActiveTabKey from "@/pageEditor/tabs/editTab/dataPanel/useDat
 import DocumentPreview from "@/pageEditor/documentBuilder/preview/DocumentPreview";
 import useFlags from "@/hooks/useFlags";
 import ErrorDisplay from "./ErrorDisplay";
-import PageStateTab from "./tabs/PageStateTab";
+import ModVariablesTab from "./tabs/ModVariablesTab";
 import { DataPanelTabKey } from "./dataPanelTypes";
 import DataTabJsonTree from "./DataTabJsonTree";
 import {
@@ -51,10 +51,8 @@ import { FormTransformer } from "@/bricks/transformers/ephemeralForm/formTransfo
 import { DocumentRenderer } from "@/bricks/renderers/document";
 import DocumentOutline from "@/pageEditor/documentBuilder/outline/DocumentOutline";
 import useAllBricks from "@/bricks/hooks/useAllBricks";
-import StateTab from "./tabs/StateTab";
+import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
 import ConfigurationTab from "./tabs/ConfigurationTab";
-import useAsyncState from "@/hooks/useAsyncState";
-import { fallbackValue } from "@/utils/asyncStateUtils";
 import { contextAsPlainObject } from "@/runtime/extendModVariableContext";
 import { joinPathParts } from "@/utils/formUtils";
 import CommentsTab from "@/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab";
@@ -136,11 +134,6 @@ const DataPanel: React.FC = () => {
     [record?.templateContext],
   );
 
-  const { data: showPageState } = fallbackValue(
-    useAsyncState(async () => brick?.block.isPageStateAware() ?? true, [brick]),
-    true,
-  );
-
   const documentBodyFieldName = joinPathParts(brickPath, "config.body");
   const brickCommentsFieldName = joinPathParts(brickPath, "comments");
 
@@ -216,13 +209,11 @@ const DataPanel: React.FC = () => {
           <Nav.Item className={dataPanelStyles.tabNav}>
             <Nav.Link eventKey={DataPanelTabKey.Context}>Context</Nav.Link>
           </Nav.Item>
-          {showPageState && (
-            <Nav.Item className={dataPanelStyles.tabNav}>
-              <Nav.Link eventKey={DataPanelTabKey.PageState}>
-                Page State
-              </Nav.Link>
-            </Nav.Item>
-          )}
+          <Nav.Item className={dataPanelStyles.tabNav}>
+            <Nav.Link eventKey={DataPanelTabKey.ModVariables}>
+              Mod Variables
+            </Nav.Link>
+          </Nav.Item>
           {showDeveloperTabs && (
             <>
               <Nav.Item className={dataPanelStyles.tabNav}>
@@ -268,10 +259,10 @@ const DataPanel: React.FC = () => {
               label="Context"
             />
           </DataTab>
-          {showPageState && <PageStateTab />}
+          <ModVariablesTab />
           {showDeveloperTabs && (
             <>
-              <StateTab />
+              <ModComponentFormStateTab />
               <ConfigurationTab config={brickConfig} />
             </>
           )}

diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx
@@ -23,10 +23,10 @@ import dataPanelStyles from "@/pageEditor/tabs/dataPanelTabs.module.scss";
 import StarterBrickPreview from "@/pageEditor/tabs/effect/StarterBrickPreview";
 import useDataPanelActiveTabKey from "@/pageEditor/tabs/editTab/dataPanel/useDataPanelActiveTabKey";
 import useFlags from "@/hooks/useFlags";
-import PageStateTab from "./tabs/PageStateTab";
+import ModVariablesTab from "./tabs/ModVariablesTab";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import DataTabJsonTree from "./DataTabJsonTree";
-import StateTab from "./tabs/StateTab";
+import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
 import ConfigurationTab from "./tabs/ConfigurationTab";
 import { selectActiveModComponentFormState } from "@/pageEditor/store/editor/editorSelectors";
 
@@ -79,7 +79,9 @@ const FoundationDataPanel: React.FC = () => {
           <Nav.Link eventKey={DataPanelTabKey.Preview}>Preview</Nav.Link>
         </Nav.Item>
         <Nav.Item className={dataPanelStyles.tabNav}>
-          <Nav.Link eventKey={DataPanelTabKey.PageState}>Page State</Nav.Link>
+          <Nav.Link eventKey={DataPanelTabKey.ModVariables}>
+            Page State
+          </Nav.Link>
         </Nav.Item>
       </Nav>
       <Tab.Content>
@@ -94,7 +96,7 @@ const FoundationDataPanel: React.FC = () => {
         </Tab.Pane>
         {showDeveloperTabs && (
           <>
-            <StateTab />
+            <ModComponentFormStateTab />
             <ConfigurationTab config={starterBrick} />
           </>
         )}
@@ -138,7 +140,7 @@ const FoundationDataPanel: React.FC = () => {
             modComponentFormState={activeModComponentFormState}
           />
         </Tab.Pane>
-        <PageStateTab />
+        <ModVariablesTab />
       </Tab.Content>
     </Tab.Container>
   );

diff --git a/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts b/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts
@@ -17,7 +17,7 @@
 
 export enum DataPanelTabKey {
   Context = "context",
-  PageState = "pageState",
+  ModVariables = "modVariables",
   State = "state",
   BrickConfig = "blockConfig",
   Rendered = "rendered",

diff --git a/.../tabs/editTab/dataPanel/tabs/StateTab.tsx → ...taPanel/tabs/ModComponentFormStateTab.tsx b/.../tabs/editTab/dataPanel/tabs/StateTab.tsx → ...taPanel/tabs/ModComponentFormStateTab.tsx
@@ -26,7 +26,7 @@ import DataTabJsonTree from "@/pageEditor/tabs/editTab/dataPanel/DataTabJsonTree
 import { selectModComponentAnnotations } from "@/analysis/analysisSelectors";
 import { assertNotNullish } from "@/utils/nullishUtils";
 
-const StateTab: React.FC = () => {
+const ModComponentFormStateTab: React.FC = () => {
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
   );
@@ -54,4 +54,4 @@ const StateTab: React.FC = () => {
   );
 };
 
-export default StateTab;
+export default ModComponentFormStateTab;
diff --git a/...tTab/dataPanel/tabs/PageStateTab.test.tsx → ...b/dataPanel/tabs/ModVariablesTab.test.tsx b/...tTab/dataPanel/tabs/PageStateTab.test.tsx → ...b/dataPanel/tabs/ModVariablesTab.test.tsx
@@ -18,7 +18,7 @@
 import React from "react";
 import { waitForEffect } from "@/testUtils/testHelpers";
 import { render } from "@/pageEditor/testHelpers";
-import PageStateTab from "./PageStateTab";
+import ModVariablesTab from "./ModVariablesTab";
 import { actions } from "@/pageEditor/store/editor/editorSlice";
 import { getPageState } from "@/contentScript/messenger/api";
 import { type ModComponentFormState } from "@/pageEditor/starterBricks/formStateTypes";
@@ -27,7 +27,7 @@ import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTy
 import { modMetadataFactory } from "@/testUtils/factories/modComponentFactories";
 import { formStateFactory } from "@/testUtils/factories/pageEditorFactories";
 
-describe("PageStateTab", () => {
+describe("ModVariablesTab", () => {
   beforeAll(() => {
     jest.mocked(getPageState).mockResolvedValue({
       foo: "bar",
@@ -37,8 +37,8 @@ describe("PageStateTab", () => {
 
   async function renderPageStateTab(formState: ModComponentFormState) {
     const utils = render(
-      <Tab.Container activeKey={DataPanelTabKey.PageState}>
-        <PageStateTab />
+      <Tab.Container activeKey={DataPanelTabKey.ModVariables}>
+        <ModVariablesTab />
       </Tab.Container>,
       {
         setupRedux(dispatch) {

diff --git a/...s/editTab/dataPanel/tabs/PageStateTab.tsx → ...ditTab/dataPanel/tabs/ModVariablesTab.tsx b/...s/editTab/dataPanel/tabs/PageStateTab.tsx → ...ditTab/dataPanel/tabs/ModVariablesTab.tsx
@@ -30,50 +30,51 @@ import useAsyncState from "@/hooks/useAsyncState";
 import { type ShouldExpandNodeInitially } from "react-json-tree";
 import { inspectedTab } from "@/pageEditor/context/connection";
 import { StateNamespaces } from "@/platform/state/stateController";
+import { resolveObj } from "@/utils/promiseUtils";
 
 // We used to expand nodes initially. But makes state hard to read when using async state with long values, e.g.,
-// ChatGPT responses
-const expandTopLevelNodes: ShouldExpandNodeInitially = (keyPath, data, level) =>
-  level <= 1;
+// long ChatGPT responses
+const expandTopLevelNodes: ShouldExpandNodeInitially = (
+  _keyPath,
+  _data,
+  level,
+) => level <= 1;
 
-const PageStateTab: React.VFC = () => {
+type StateValues = {
+  Private: UnknownObject | string;
+  Mod: UnknownObject | string;
+  Public: UnknownObject | string;
+};
+
+const ModVariablesTab: React.VFC = () => {
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
   );
 
-  const state = useAsyncState<{
-    Private: UnknownObject | string;
-    Mod: UnknownObject | string;
-    Public: UnknownObject | string;
-  }>(
+  const state = useAsyncState<StateValues>(
     async () => {
       const context = {
         modComponentId: activeModComponentFormState?.uuid,
         modId: activeModComponentFormState?.modMetadata?.id,
       };
 
-      const [shared, mod, local] = await Promise.all([
-        getPageState(inspectedTab, {
+      // Cast because `resolveObj` doesn't keep track of the keys
+      return resolveObj<UnknownObject | string>({
+        Public: getPageState(inspectedTab, {
           namespace: StateNamespaces.PUBLIC,
           ...context,
         }),
-        activeModComponentFormState?.modMetadata
+        Mod: activeModComponentFormState?.modMetadata
           ? getPageState(inspectedTab, {
               namespace: StateNamespaces.MOD,
               ...context,
             })
-          : Promise.resolve("Starter Brick is not in a mod"),
-        getPageState(inspectedTab, {
+          : Promise.resolve("Starter Brick is not in a mod package"),
+        Private: getPageState(inspectedTab, {
           namespace: StateNamespaces.PRIVATE,
           ...context,
         }),
-      ]);
-
-      return {
-        Private: local,
-        Mod: mod,
-        Public: shared,
-      };
+      }) as Promise<StateValues>;
     },
     [],
     {
@@ -86,7 +87,7 @@ const PageStateTab: React.VFC = () => {
   );
 
   return (
-    <DataTab eventKey={DataPanelTabKey.PageState}>
+    <DataTab eventKey={DataPanelTabKey.ModVariables}>
       <div className="mb-1 d-flex">
         <div>
           <Button
@@ -100,13 +101,13 @@ const PageStateTab: React.VFC = () => {
         </div>
         <div className="ml-2">
           <a
-            href="https://docs.pixiebrix.com/developing-mods/developer-concepts/data-context/using-page-state-advanced"
+            href="https://docs.pixiebrix.com/developing-mods/developer-concepts/data-context/using-mod-variables"
             target="_blank"
             rel="noreferrer"
           >
             <small>
               <FontAwesomeIcon icon={faExternalLinkAlt} />
-              &nbsp;Learn more about Page State
+              &nbsp;Learn more about Mod Variables
             </small>
           </a>
         </div>
@@ -127,4 +128,4 @@ const PageStateTab: React.VFC = () => {
   );
 };
 
-export default PageStateTab;
+export default ModVariablesTab;