#8759: always show mod variable data panel in the Page Editor (#8760)

pixiebrix · Jul 8, 2024 · 359812b · 359812b
1 parent d59a323
commit 359812b
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 110 deletions.
diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx
@@ -23,7 +23,7 @@ import styles from "./EditTab.module.scss";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import DataPanel from "@/pageEditor/tabs/editTab/dataPanel/DataPanel";
 import useModComponentTrace from "@/pageEditor/hooks/useModComponentTrace";
-import FoundationDataPanel from "@/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel";
+import StarterBrickDataPanel from "@/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel";
 import { useDispatch, useSelector } from "react-redux";
 import { FOUNDATION_NODE_ID } from "@/pageEditor/store/editor/uiState";
 import {
@@ -159,7 +159,7 @@ const EditTab: React.FC<{
             <div className={styles.dataPanelWrapper}>
               <div className={styles.dataPanel}>
                 {activeNodeId === FOUNDATION_NODE_ID ? (
-                  <FoundationDataPanel />
+                  <StarterBrickDataPanel />
                 ) : (
                   <DataPanel key={activeNodeId} />
                 )}

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 ConfigurationTab from "./tabs/ConfigurationTab";
-import useAsyncState from "@/hooks/useAsyncState";
-import { fallbackValue } from "@/utils/asyncStateUtils";
+import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
+import BrickConfigFormStateTab from "./tabs/BrickConfigFormStateTab";
 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,21 +209,21 @@ 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}>
-                <Nav.Link eventKey={DataPanelTabKey.State}>State</Nav.Link>
+                <Nav.Link eventKey={DataPanelTabKey.ModComponentFormState}>
+                  Mod Component State
+                </Nav.Link>
               </Nav.Item>
               <Nav.Item className={dataPanelStyles.tabNav}>
-                <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                  Raw Brick
+                <Nav.Link eventKey={DataPanelTabKey.BrickConfigFormState}>
+                  Brick Config State
                 </Nav.Link>
               </Nav.Item>
             </>
@@ -268,11 +261,11 @@ const DataPanel: React.FC = () => {
               label="Context"
             />
           </DataTab>
-          {showPageState && <PageStateTab />}
+          <ModVariablesTab />
           {showDeveloperTabs && (
             <>
-              <StateTab />
-              <ConfigurationTab config={brickConfig} />
+              <ModComponentFormStateTab />
+              <BrickConfigFormStateTab config={brickConfig} />
             </>
           )}
           <DataTab eventKey={DataPanelTabKey.Rendered} isTraceEmpty={!record}>

diff --git a/...ab/dataPanel/FoundationDataPanel.test.tsx → .../dataPanel/StarterBrickDataPanel.test.tsx b/...ab/dataPanel/FoundationDataPanel.test.tsx → .../dataPanel/StarterBrickDataPanel.test.tsx
@@ -21,15 +21,15 @@ import { render } from "@/pageEditor/testHelpers";
 import { actions as editorActions } from "@/pageEditor/store/editor/editorSlice";
 import runtimeSlice from "@/pageEditor/store/runtime/runtimeSlice";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
-import FoundationDataPanel from "@/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel";
+import StarterBrickDataPanel from "@/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel";
 import { formStateWithTraceDataFactory } from "@/testUtils/factories/pageEditorFactories";
 
-describe("FoundationDataPanel", () => {
+describe("StarterBrickDataPanel", () => {
   test("it renders with form state and trace data", async () => {
     const { formState, records } = formStateWithTraceDataFactory();
     const modComponentId = formState.uuid;
     const { instanceId } = formState.modComponent.brickPipeline[0];
-    const { asFragment } = render(<FoundationDataPanel />, {
+    const { asFragment } = render(<StarterBrickDataPanel />, {
       initialValues: formState,
       setupRedux(dispatch) {
         dispatch(editorActions.addModComponentFormState(formState));

diff --git a/...editTab/dataPanel/FoundationDataPanel.tsx → ...itTab/dataPanel/StarterBrickDataPanel.tsx b/...editTab/dataPanel/FoundationDataPanel.tsx → ...itTab/dataPanel/StarterBrickDataPanel.tsx
@@ -23,14 +23,14 @@ 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 ConfigurationTab from "./tabs/ConfigurationTab";
+import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
+import BrickConfigFormStateTab from "./tabs/BrickConfigFormStateTab";
 import { selectActiveModComponentFormState } from "@/pageEditor/store/editor/editorSelectors";
 
-const FoundationDataPanel: React.FC = () => {
+const StarterBrickDataPanel: React.FC = () => {
   const { flagOn } = useFlags();
   const showDeveloperTabs = flagOn("page-editor-developer");
 
@@ -41,14 +41,14 @@ const FoundationDataPanel: React.FC = () => {
     modComponent: { brickPipeline },
     starterBrick,
   } = activeModComponentFormState;
-  const firstBlockInstanceId = brickPipeline[0]?.instanceId;
+  const firstBrickInstanceId = brickPipeline[0]?.instanceId;
 
-  const { record: firstBlockTraceRecord } = useSelector(
-    makeSelectBrickTrace(firstBlockInstanceId),
+  const { record: firstBrickTraceRecord } = useSelector(
+    makeSelectBrickTrace(firstBrickInstanceId),
   );
 
   const [activeTabKey, onSelectTab] = useDataPanelActiveTabKey(
-    firstBlockTraceRecord ? DataPanelTabKey.Output : DataPanelTabKey.Preview,
+    firstBrickTraceRecord ? DataPanelTabKey.Output : DataPanelTabKey.Preview,
   );
 
   return (
@@ -60,11 +60,13 @@ const FoundationDataPanel: React.FC = () => {
         {showDeveloperTabs && (
           <>
             <Nav.Item className={dataPanelStyles.tabNav}>
-              <Nav.Link eventKey={DataPanelTabKey.State}>State</Nav.Link>
+              <Nav.Link eventKey={DataPanelTabKey.ModComponentFormState}>
+                Mod Component State
+              </Nav.Link>
             </Nav.Item>
             <Nav.Item className={dataPanelStyles.tabNav}>
-              <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                Raw Foundation
+              <Nav.Link eventKey={DataPanelTabKey.BrickConfigFormState}>
+                Brick Config State
               </Nav.Link>
             </Nav.Item>
           </>
@@ -79,7 +81,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}>
+            Mod Variables
+          </Nav.Link>
         </Nav.Item>
       </Nav>
       <Tab.Content>
@@ -94,8 +98,8 @@ const FoundationDataPanel: React.FC = () => {
         </Tab.Pane>
         {showDeveloperTabs && (
           <>
-            <StateTab />
-            <ConfigurationTab config={starterBrick} />
+            <ModComponentFormStateTab />
+            <BrickConfigFormStateTab config={starterBrick} />
           </>
         )}
         <Tab.Pane
@@ -113,9 +117,9 @@ const FoundationDataPanel: React.FC = () => {
           mountOnEnter
           unmountOnExit
         >
-          {firstBlockTraceRecord ? (
+          {firstBrickTraceRecord ? (
             <DataTabJsonTree
-              data={firstBlockTraceRecord.templateContext}
+              data={firstBrickTraceRecord.templateContext}
               copyable
               searchable
               tabKey={DataPanelTabKey.Output}
@@ -138,10 +142,10 @@ const FoundationDataPanel: React.FC = () => {
             modComponentFormState={activeModComponentFormState}
           />
         </Tab.Pane>
-        <PageStateTab />
+        <ModVariablesTab />
       </Tab.Content>
     </Tab.Container>
   );
 };
 
-export default FoundationDataPanel;
+export default StarterBrickDataPanel;
diff --git a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap
diff --git a/...shots__/FoundationDataPanel.test.tsx.snap → ...ots__/StarterBrickDataPanel.test.tsx.snap b/...shots__/FoundationDataPanel.test.tsx.snap → ...ots__/StarterBrickDataPanel.test.tsx.snap
diff --git a/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts b/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts
@@ -17,12 +17,14 @@
 
 export enum DataPanelTabKey {
   Context = "context",
-  PageState = "pageState",
-  State = "state",
-  BrickConfig = "blockConfig",
+  ModVariables = "modVariables",
   Rendered = "rendered",
   Output = "output",
   Preview = "preview",
   Outline = "outline",
   Comments = "comments",
+
+  // Developer-only tabs
+  ModComponentFormState = "modComponentFormState",
+  BrickConfigFormState = "brickConfig",
 }
diff --git a/...itTab/dataPanel/tabs/ConfigurationTab.tsx → ...ataPanel/tabs/BrickConfigFormStateTab.tsx b/...itTab/dataPanel/tabs/ConfigurationTab.tsx → ...ataPanel/tabs/BrickConfigFormStateTab.tsx
@@ -22,18 +22,24 @@ import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTy
 import DataTab from "@/pageEditor/tabs/editTab/dataPanel/DataTab";
 import DataTabJsonTree from "@/pageEditor/tabs/editTab/dataPanel/DataTabJsonTree";
 
-const ConfigurationTab: React.FC<{ config: unknown }> = ({ config }) => (
-  <DataTab eventKey={DataPanelTabKey.BrickConfig}>
+/**
+ * Developer-only data panel tab for viewing the underlying brick configuration JSON. Used to debug brick configuration
+ * UI/functionality problems.
+ *
+ * @see ModComponentFormStateTab
+ */
+const BrickConfigFormStateTab: React.FC<{ config: unknown }> = ({ config }) => (
+  <DataTab eventKey={DataPanelTabKey.BrickConfigFormState}>
     <div className="text-info">
       <FontAwesomeIcon icon={faInfoCircle} /> This tab is only visible to
       developers
     </div>
     <DataTabJsonTree
       data={config ?? {}}
-      tabKey={DataPanelTabKey.BrickConfig}
-      label="Configuration"
+      tabKey={DataPanelTabKey.BrickConfigFormState}
+      label="Brick Config Form State"
     />
   </DataTab>
 );
 
-export default ConfigurationTab;
+export default BrickConfigFormStateTab;
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,11 @@ import DataTabJsonTree from "@/pageEditor/tabs/editTab/dataPanel/DataTabJsonTree
 import { selectModComponentAnnotations } from "@/analysis/analysisSelectors";
 import { assertNotNullish } from "@/utils/nullishUtils";
 
-const StateTab: React.FC = () => {
+/**
+ * Developer-only data panel tab for viewing the underlying mod component form state JSON. Used to debug mod component
+ * form state updates (e.g., automatic useEffect state transitions).
+ */
+const ModComponentFormStateTab: React.FC = () => {
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
   );
@@ -39,19 +43,19 @@ const StateTab: React.FC = () => {
   );
 
   return (
-    <DataTab eventKey={DataPanelTabKey.State}>
+    <DataTab eventKey={DataPanelTabKey.ModComponentFormState}>
       <div className="text-info">
         <FontAwesomeIcon icon={faInfoCircle} /> This tab is only visible to
         developers
       </div>
       <DataTabJsonTree
         data={{ activeElement: activeModComponentFormState, annotations }}
         searchable
-        tabKey={DataPanelTabKey.State}
-        label="Element State"
+        tabKey={DataPanelTabKey.ModComponentFormState}
+        label="Mod Component Form State"
       />
     </DataTab>
   );
 };
 
-export default StateTab;
+export default ModComponentFormStateTab;