From 9424e1394663a4e80d8c6097ccee5841cc134f6e Mon Sep 17 00:00:00 2001 From: Todd Schiller Date: Sat, 6 Jul 2024 15:45:12 -0400 Subject: [PATCH] #8759: fix snapshots and panel names --- .../__snapshots__/EditorPane.test.tsx.snap | 17 +- src/pageEditor/tabs/editTab/EditTab.tsx | 4 +- .../tabs/editTab/dataPanel/DataPanel.tsx | 10 +- ...est.tsx => StarterBrickDataPanel.test.tsx} | 4 +- ...ataPanel.tsx => StarterBrickDataPanel.tsx} | 28 +- .../__snapshots__/DataPanel.test.tsx.snap | 4 +- ...ap => StarterBrickDataPanel.test.tsx.snap} | 4 +- .../tabs/editTab/dataPanel/dataPanelTypes.ts | 6 +- ...onfigurationTab.tsx => BrickConfigTab.tsx} | 8 +- .../tabs/ModComponentFormStateTab.tsx | 6 +- .../dataPanel/tabs/ModVariablesTab.tsx | 3 + .../__snapshots__/PageStateTab.test.tsx.snap | 521 ------------------ src/tsconfig.strictNullChecks.json | 2 +- 13 files changed, 61 insertions(+), 556 deletions(-) rename src/pageEditor/tabs/editTab/dataPanel/{FoundationDataPanel.test.tsx => StarterBrickDataPanel.test.tsx} (92%) rename src/pageEditor/tabs/editTab/dataPanel/{FoundationDataPanel.tsx => StarterBrickDataPanel.tsx} (87%) rename src/pageEditor/tabs/editTab/dataPanel/__snapshots__/{FoundationDataPanel.test.tsx.snap => StarterBrickDataPanel.test.tsx.snap} (99%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/{ConfigurationTab.tsx => BrickConfigTab.tsx} (85%) delete mode 100644 src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap index 133e565b24..07679f5184 100644 --- a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap +++ b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap @@ -1242,11 +1242,11 @@ exports[`renders a mod component with sub pipeline 1`] = ` - Page State + Mod Variables @@ -2072,6 +2072,19 @@ exports[`renders the first selected node 1`] = ` Context +
+ + Mod Variables + +
diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx index 61cb74572c..37df4a3d91 100644 --- 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<{
{activeNodeId === FOUNDATION_NODE_ID ? ( - + ) : ( )} diff --git a/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx index 1789488c15..c6825d606d 100644 --- 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 && ( <> - State + + Editor State + - Raw Brick + Brick Config @@ -263,7 +265,7 @@ const DataPanel: React.FC = () => { {showDeveloperTabs && ( <> - + )} diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx similarity index 92% rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx index 111b6cb711..94afd88230 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx +++ b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx @@ -21,7 +21,7 @@ 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", () => { @@ -29,7 +29,7 @@ describe("FoundationDataPanel", () => { const { formState, records } = formStateWithTraceDataFactory(); const modComponentId = formState.uuid; const { instanceId } = formState.modComponent.brickPipeline[0]; - const { asFragment } = render(, { + const { asFragment } = render(, { initialValues: formState, setupRedux(dispatch) { dispatch(editorActions.addModComponentFormState(formState)); diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx similarity index 87% rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx index 3b66d1ee13..da712b0eb0 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx +++ b/src/pageEditor/tabs/editTab/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 && ( <> - State + + Editor State + - Raw Foundation + Brick Config @@ -80,7 +82,7 @@ const FoundationDataPanel: React.FC = () => { - Page State + Mod Variables @@ -97,7 +99,7 @@ const FoundationDataPanel: React.FC = () => { {showDeveloperTabs && ( <> - + )} { mountOnEnter unmountOnExit > - {firstBlockTraceRecord ? ( + {firstBrickTraceRecord ? ( { ); }; -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 index 9668c80468..7fca15f1d9 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap +++ b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap @@ -29,11 +29,11 @@ exports[`DataPanel it renders with form state and trace data 1`] = ` - Page State + Mod Variables
diff --git a/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts b/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts index 460eb3cbf8..24c7c33279 100644 --- 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/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx similarity index 85% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx rename to src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx index abe657ccd6..02aafbfe13 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx +++ b/src/pageEditor/tabs/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 }) => (
This tab is only visible to @@ -36,4 +40,4 @@ const ConfigurationTab: React.FC<{ config: unknown }> = ({ config }) => ( ); -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 index b9fa38b149..55555789df 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx +++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx @@ -39,7 +39,7 @@ const ModComponentFormStateTab: React.FC = () => { ); return ( - +
This tab is only visible to developers @@ -47,8 +47,8 @@ const ModComponentFormStateTab: React.FC = () => { ); diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx index eb101e1748..48825209e8 100644 --- 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, diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap deleted file mode 100644 index fa8d823f0c..0000000000 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap +++ /dev/null @@ -1,521 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PageStateTab it renders with mod's mod component 1`] = ` - -
-
-
- -
-
- - - -  Learn more about Page State - - -
-
-
-
    -
  • -
      -
    • -
      -
      - ▶ -
      -
      - - - - - {} - - 2 keys - - -
        -
      • - - - "bar" - -
        • -
      • - - - 32 - -
        • -
      -
      • -
    • -
      -
      - ▶ -
      -
      - - - - - {} - - 2 keys - - -
        -
      • - - - "bar" - -
        • -
      • - - - 32 - -
        • -
      -
      • -
    • -
      -
      - ▶ -
      -
      - - - - - {} - - 2 keys - - -
        -
      • - - - "bar" - -
        • -
      • - - - 32 - -
        • -
      -
      • -
    -
    • -
-
-
- -`; - -exports[`PageStateTab it renders with standalone mod component 1`] = ` - -
-
-
- -
-
- - - -  Learn more about Page State - - -
-
-
-
    -
  • -
      -
    • -
      -
      - ▶ -
      -
      - - - - - {} - - 2 keys - - -
        -
      • - - - "bar" - -
        • -
      • - - - 32 - -
        • -
      -
      • -
    • - - - "Starter Brick is not in a mod" - -
      • -
    • -
      -
      - ▶ -
      -
      - - - - - {} - - 2 keys - - -
        -
      • - - - "bar" - -
        • -
      • - - - 32 - -
        • -
      -
      • -
    -
    • -
-
-
- -`; diff --git a/src/tsconfig.strictNullChecks.json b/src/tsconfig.strictNullChecks.json index cdff66a424..081e3f70f5 100644 --- a/src/tsconfig.strictNullChecks.json +++ b/src/tsconfig.strictNullChecks.json @@ -1172,7 +1172,7 @@ "./pageEditor/tabs/editTab/dataPanel/DataTabJsonTree.tsx", "./pageEditor/tabs/editTab/dataPanel/ErrorDisplay.tsx", "./pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts", - "./pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx", + "./pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx", "./pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx", "./pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx", "./pageEditor/tabs/editTab/dataPanel/useDataPanelActiveTabKey.ts",