From 359812b35b8892382e249514038442fcd554b0e0 Mon Sep 17 00:00:00 2001 From: Todd Schiller Date: Mon, 8 Jul 2024 11:10:16 -0400 Subject: [PATCH] #8759: always show mod variable data panel in the Page Editor (#8760) --- .../__snapshots__/EditorPane.test.tsx.snap | 17 +++++- src/pageEditor/tabs/editTab/EditTab.tsx | 4 +- .../tabs/editTab/dataPanel/DataPanel.tsx | 39 ++++++-------- ...est.tsx => StarterBrickDataPanel.test.tsx} | 6 +-- ...ataPanel.tsx => StarterBrickDataPanel.tsx} | 40 +++++++------- .../__snapshots__/DataPanel.test.tsx.snap | 4 +- ...ap => StarterBrickDataPanel.test.tsx.snap} | 6 +-- .../tabs/editTab/dataPanel/dataPanelTypes.ts | 8 +-- ...ionTab.tsx => BrickConfigFormStateTab.tsx} | 16 ++++-- ...teTab.tsx => ModComponentFormStateTab.tsx} | 14 +++-- ...eTab.test.tsx => ModVariablesTab.test.tsx} | 8 +-- .../{PageStateTab.tsx => ModVariablesTab.tsx} | 54 ++++++++++--------- ...tsx.snap => ModVariablesTab.test.tsx.snap} | 22 ++++---- .../factories/pageEditorFactories.ts | 2 +- src/tsconfig.strictNullChecks.json | 6 +-- 15 files changed, 136 insertions(+), 110 deletions(-) rename src/pageEditor/tabs/editTab/dataPanel/{FoundationDataPanel.test.tsx => StarterBrickDataPanel.test.tsx} (91%) rename src/pageEditor/tabs/editTab/dataPanel/{FoundationDataPanel.tsx => StarterBrickDataPanel.tsx} (80%) rename src/pageEditor/tabs/editTab/dataPanel/__snapshots__/{FoundationDataPanel.test.tsx.snap => StarterBrickDataPanel.test.tsx.snap} (98%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/{ConfigurationTab.tsx => BrickConfigFormStateTab.tsx} (73%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/{StateTab.tsx => ModComponentFormStateTab.tsx} (81%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/{PageStateTab.test.tsx => ModVariablesTab.test.tsx} (92%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/{PageStateTab.tsx => ModVariablesTab.tsx} (77%) rename src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/{PageStateTab.test.tsx.snap => ModVariablesTab.test.tsx.snap} (98%) 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 3627cf0efd..70c6b1acd0 100644 --- 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 = () => { Context - {showPageState && ( - - - Page State - - - )} + + + Mod Variables + + {showDeveloperTabs && ( <> - State + + Mod Component State + - - Raw Brick + + Brick Config State @@ -268,11 +261,11 @@ const DataPanel: React.FC = () => { label="Context" /> - {showPageState && } + {showDeveloperTabs && ( <> - - + + )} diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx similarity index 91% rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx index 111b6cb711..c1b063fecf 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx +++ b/src/pageEditor/tabs/editTab/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(, { + 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 80% rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx index 4e184150e1..bb4d168959 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx +++ b/src/pageEditor/tabs/editTab/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 && ( <> - State + + Mod Component State + - - Raw Foundation + + Brick Config State @@ -79,7 +81,9 @@ const FoundationDataPanel: React.FC = () => { Preview - Page State + + Mod Variables + @@ -94,8 +98,8 @@ const FoundationDataPanel: React.FC = () => { {showDeveloperTabs && ( <> - - + + )} { mountOnEnter unmountOnExit > - {firstBlockTraceRecord ? ( + {firstBrickTraceRecord ? ( { modComponentFormState={activeModComponentFormState} /> - + ); }; -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 cce3d3b11c..89e947cd78 100644 --- 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/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigFormStateTab.tsx similarity index 73% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx rename to src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigFormStateTab.tsx index abe657ccd6..0dcb529e4b 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx +++ b/src/pageEditor/tabs/editTab/dataPanel/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 }) => ( - +/** + * 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 }) => ( +
This tab is only visible to developers
); -export default ConfigurationTab; +export default BrickConfigFormStateTab; diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/StateTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx similarity index 81% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/StateTab.tsx rename to src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx index 43bd154e31..a79768d8f1 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/StateTab.tsx +++ b/src/pageEditor/tabs/editTab/dataPanel/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,7 +43,7 @@ const StateTab: React.FC = () => { ); return ( - +
This tab is only visible to developers @@ -47,11 +51,11 @@ const StateTab: React.FC = () => { ); }; -export default StateTab; +export default ModComponentFormStateTab; diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx similarity index 92% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.test.tsx rename to src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx index 958a1d4f0b..61e9052a5c 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.test.tsx +++ b/src/pageEditor/tabs/editTab/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( - - + + , { setupRedux(dispatch) { diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx similarity index 77% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.tsx rename to src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx index 9e636a3279..48825209e8 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/PageStateTab.tsx +++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx @@ -30,50 +30,54 @@ 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; +}; + +/** + * Data panel tab displaying mod variables, and private/public state. + */ +const ModVariablesTab: React.VFC = () => { const activeModComponentFormState = useSelector( selectActiveModComponentFormState, ); - const state = useAsyncState<{ - Private: UnknownObject | string; - Mod: UnknownObject | string; - Public: UnknownObject | string; - }>( + const state = useAsyncState( 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({ + 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; }, [], { @@ -86,7 +90,7 @@ const PageStateTab: React.VFC = () => { ); return ( - +
@@ -127,4 +131,4 @@ const PageStateTab: React.VFC = () => { ); }; -export default PageStateTab; +export default ModVariablesTab; diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap similarity index 98% rename from src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap rename to src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap index fa8d823f0c..420fd19b87 100644 --- a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap +++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PageStateTab it renders with mod's mod component 1`] = ` +exports[`ModVariablesTab it renders with mod's mod component 1`] = `
@@ -57,7 +57,7 @@ exports[`PageStateTab it renders with mod's mod component 1`] = ` fill="currentColor" /> -  Learn more about Page State +  Learn more about Mod Variables
@@ -90,7 +90,7 @@ exports[`PageStateTab it renders with mod's mod component 1`] = ` style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;" > - Private: + Public: - Public: + Private: `; -exports[`PageStateTab it renders with standalone mod component 1`] = ` +exports[`ModVariablesTab it renders with standalone mod component 1`] = `
@@ -343,7 +343,7 @@ exports[`PageStateTab it renders with standalone mod component 1`] = ` fill="currentColor" /> -  Learn more about Page State +  Learn more about Mod Variables
@@ -376,7 +376,7 @@ exports[`PageStateTab it renders with standalone mod component 1`] = ` style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;" > - Private: + Public: - "Starter Brick is not in a mod" + "Starter Brick is not in a mod package"
  • - Public: + Private: ({ apiVersion: "v3" as ApiVersion, uuid: uuidSequence, installed: true, - optionsArgs: {} as OptionsArgs, + optionsArgs: () => ({}) as OptionsArgs, integrationDependencies(): IntegrationDependency[] { return []; }, diff --git a/src/tsconfig.strictNullChecks.json b/src/tsconfig.strictNullChecks.json index 0c56742690..521b09c632 100644 --- a/src/tsconfig.strictNullChecks.json +++ b/src/tsconfig.strictNullChecks.json @@ -1172,9 +1172,9 @@ "./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/PageStateTab.tsx", - "./pageEditor/tabs/editTab/dataPanel/tabs/StateTab.tsx", + "./pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigFormStateTab.tsx", + "./pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx", + "./pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx", "./pageEditor/tabs/editTab/dataPanel/useDataPanelActiveTabKey.ts", "./pageEditor/tabs/editTab/editHelpers.ts", "./pageEditor/tabs/editTab/editTabTypes.ts",