#8759: fix snapshots and panel names

pixiebrix · Jul 6, 2024 · 9424e13 · 9424e13
1 parent 11ee187
commit 9424e13
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 556 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
@@ -52,7 +52,7 @@ import { DocumentRenderer } from "@/bricks/renderers/document";
 import DocumentOutline from "@/pageEditor/documentBuilder/outline/DocumentOutline";
 import useAllBricks from "@/bricks/hooks/useAllBricks";
 import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
-import ConfigurationTab from "./tabs/ConfigurationTab";
+import BrickConfigTab from "./tabs/BrickConfigTab";
 import { contextAsPlainObject } from "@/runtime/extendModVariableContext";
 import { joinPathParts } from "@/utils/formUtils";
 import CommentsTab from "@/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab";
@@ -217,11 +217,13 @@ const DataPanel: React.FC = () => {
           {showDeveloperTabs && (
             <>
               <Nav.Item className={dataPanelStyles.tabNav}>
-                <Nav.Link eventKey={DataPanelTabKey.State}>State</Nav.Link>
+                <Nav.Link eventKey={DataPanelTabKey.ModComponentFormState}>
+                  Editor State
+                </Nav.Link>
               </Nav.Item>
               <Nav.Item className={dataPanelStyles.tabNav}>
                 <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                  Raw Brick
+                  Brick Config
                 </Nav.Link>
               </Nav.Item>
             </>
@@ -263,7 +265,7 @@ const DataPanel: React.FC = () => {
           {showDeveloperTabs && (
             <>
               <ModComponentFormStateTab />
-              <ConfigurationTab config={brickConfig} />
+              <BrickConfigTab 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", () => {
   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
@@ -27,10 +27,10 @@ import ModVariablesTab from "./tabs/ModVariablesTab";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import DataTabJsonTree from "./DataTabJsonTree";
 import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
-import ConfigurationTab from "./tabs/ConfigurationTab";
+import BrickConfigTab from "./tabs/BrickConfigTab";
 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}>
+                Editor State
+              </Nav.Link>
             </Nav.Item>
             <Nav.Item className={dataPanelStyles.tabNav}>
               <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                Raw Foundation
+                Brick Config
               </Nav.Link>
             </Nav.Item>
           </>
@@ -80,7 +82,7 @@ const FoundationDataPanel: React.FC = () => {
         </Nav.Item>
         <Nav.Item className={dataPanelStyles.tabNav}>
           <Nav.Link eventKey={DataPanelTabKey.ModVariables}>
-            Page State
+            Mod Variables
           </Nav.Link>
         </Nav.Item>
       </Nav>
@@ -97,7 +99,7 @@ const FoundationDataPanel: React.FC = () => {
         {showDeveloperTabs && (
           <>
             <ModComponentFormStateTab />
-            <ConfigurationTab config={starterBrick} />
+            <BrickConfigTab config={starterBrick} />
           </>
         )}
         <Tab.Pane
@@ -115,9 +117,9 @@ const FoundationDataPanel: React.FC = () => {
           mountOnEnter
           unmountOnExit
         >
-          {firstBlockTraceRecord ? (
+          {firstBrickTraceRecord ? (
             <DataTabJsonTree
-              data={firstBlockTraceRecord.templateContext}
+              data={firstBrickTraceRecord.templateContext}
               copyable
               searchable
               tabKey={DataPanelTabKey.Output}
@@ -146,4 +148,4 @@ const FoundationDataPanel: React.FC = () => {
   );
 };
 
-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
@@ -18,11 +18,13 @@
 export enum DataPanelTabKey {
   Context = "context",
   ModVariables = "modVariables",
-  State = "state",
-  BrickConfig = "blockConfig",
   Rendered = "rendered",
   Output = "output",
   Preview = "preview",
   Outline = "outline",
   Comments = "comments",
+
+  // Developer-only tabs
+  ModComponentFormState = "modComponentFormState",
+  BrickConfig = "brickConfig",
 }
diff --git a/...itTab/dataPanel/tabs/ConfigurationTab.tsx → ...editTab/dataPanel/tabs/BrickConfigTab.tsx b/...itTab/dataPanel/tabs/ConfigurationTab.tsx → ...editTab/dataPanel/tabs/BrickConfigTab.tsx
@@ -22,7 +22,11 @@ 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 }) => (
+/**
+ * Developer-only data panel tab for viewing the underlying brick configuration JSON. Used to debug brick configuration
+ * UI issues.
+ */
+const BrickConfigTab: React.FC<{ config: unknown }> = ({ config }) => (
   <DataTab eventKey={DataPanelTabKey.BrickConfig}>
     <div className="text-info">
       <FontAwesomeIcon icon={faInfoCircle} /> This tab is only visible to
@@ -36,4 +40,4 @@ const ConfigurationTab: React.FC<{ config: unknown }> = ({ config }) => (
   </DataTab>
 );
 
-export default ConfigurationTab;
+export default BrickConfigTab;
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx
@@ -39,16 +39,16 @@ const ModComponentFormStateTab: 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="Editor State"
       />
     </DataTab>
   );

diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx
@@ -46,6 +46,9 @@ type StateValues = {
   Public: UnknownObject | string;
 };
 
+/**
+ * Data panel tab displaying mod variables, and private/public state.
+ */
 const ModVariablesTab: React.VFC = () => {
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,