diff --git a/src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx b/src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx index 0e13d9d931..03e53420db 100644 --- a/src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx +++ b/src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison -- It seems to be the correct option for now */ import React from "react"; -import { type BlockInfo } from "@/pageEditor/uiState/uiStateTypes"; +import { type NodeInfo } from "@/pageEditor/uiState/uiStateTypes"; import { KnownSources } from "@/analysis/analysisVisitors/varAnalysis/varAnalysis"; import styles from "./SourceLabel.module.scss"; import { type TypedBrickMap } from "@/bricks/registry"; @@ -8,15 +8,15 @@ import { type TypedBrickMap } from "@/bricks/registry"; type SourceLabelProps = { source: string; extensionPointLabel: string; - blocksInfo: BlockInfo[]; - allBlocks: TypedBrickMap; + nodes: NodeInfo[]; + allBricks: TypedBrickMap; }; const SourceLabel: React.FunctionComponent = ({ source, extensionPointLabel, - blocksInfo, - allBlocks, + nodes, + allBricks, }) => { const [kind] = source.split(":"); let label: string; @@ -42,14 +42,14 @@ const SourceLabel: React.FunctionComponent = ({ } default: { - const blockConfig = blocksInfo.find((block) => block.path === source) + const brickConfig = nodes.find((node) => node.path === source) ?.blockConfig; - if (blockConfig == null) { + if (brickConfig == null) { label = source; } else { label = - blockConfig.label ?? - allBlocks.get(blockConfig.id)?.block?.name ?? + brickConfig.label ?? + allBricks.get(brickConfig.id)?.block?.name ?? source; } } diff --git a/src/components/fields/schemaFields/widgets/varPopup/VarMenu.tsx b/src/components/fields/schemaFields/widgets/varPopup/VarMenu.tsx index dc1c33996d..541416fd31 100644 --- a/src/components/fields/schemaFields/widgets/varPopup/VarMenu.tsx +++ b/src/components/fields/schemaFields/widgets/varPopup/VarMenu.tsx @@ -255,8 +255,8 @@ const VarMenu: React.FunctionComponent = ({ = ({ { const dispatch = useDispatch(); - const UIState = useSelector(selectActiveNodeUIState); + const brickConfigurationUIState = useSelector( + selectActiveBrickConfigurationUIState, + ); // Allow to fail gracefully using nullish coalescing operator - const isExpanded = UIState?.expandedFieldSections?.[title] ?? initialExpanded; + const isExpanded = + brickConfigurationUIState?.expandedFieldSections?.[title] ?? + initialExpanded; return ( brickPipelineUIState?.nodeUIStates[brickPipelineUIState.activeNodeId], @@ -343,47 +343,49 @@ export const selectActiveModComponentNodeInfo = (instanceId: UUID) => (state: EditorRootState) => activeModComponentNodeInfoSelector(state, instanceId); -const parentBlockInfoSelector = createSelector( +const parentNodeInfoSelector = createSelector( selectActiveBrickPipelineUIState, - (state: EditorRootState, instanceId: UUID) => instanceId, - (uiState: BrickPipelineUIState, instanceId: UUID) => { - if (uiState == null) { + (state: EditorRootState, nodeId: UUID) => nodeId, + (brickPipelineUIState: BrickPipelineUIState, nodeId: UUID) => { + if (brickPipelineUIState == null) { return null; } // eslint-disable-next-line security/detect-object-injection -- UUID - const { parentNodeId } = uiState.pipelineMap[instanceId] ?? {}; + const { parentNodeId } = brickPipelineUIState.pipelineMap[nodeId] ?? {}; if (!parentNodeId) { return null; } // eslint-disable-next-line security/detect-object-injection -- UUID - return uiState.pipelineMap[parentNodeId]; + return brickPipelineUIState.pipelineMap[parentNodeId]; }, ); /** - * Return the block with the pipeline that contains the given node. - * @param instanceId the block instanceId + * Return the brick with the pipeline that contains the given node. + * @param nodeId the instance id of the brick pipeline node */ -export const selectParentBlockInfo = - (instanceId: UUID) => (state: EditorRootState) => - parentBlockInfoSelector(state, instanceId); +export const selectParentNodeInfo = + (nodeId: UUID) => (state: EditorRootState) => + parentNodeInfoSelector(state, nodeId); export const selectNodeDataPanelTabSelected: ( rootState: EditorRootState, ) => Nullishable = createSelector( - selectActiveNodeUIState, - (nodeUIState) => nodeUIState?.dataPanel.activeTabKey, + selectActiveBrickConfigurationUIState, + (brickConfigurationUIState) => + brickConfigurationUIState?.dataPanel.activeTabKey, ); export function selectNodeDataPanelTabState( rootState: EditorRootState, tabKey: DataPanelTabKey, -): Nullishable { - const nodeUIState = selectActiveNodeUIState(rootState); +): Nullishable { + const brickConfigurationUIState = + selectActiveBrickConfigurationUIState(rootState); // eslint-disable-next-line security/detect-object-injection -- tabKeys will be hard-coded strings - return nodeUIState?.dataPanel[tabKey]; + return brickConfigurationUIState?.dataPanel[tabKey]; } /** diff --git a/src/pageEditor/slices/editorSlice.ts b/src/pageEditor/slices/editorSlice.ts index 328a62ad7e..cda386ad25 100644 --- a/src/pageEditor/slices/editorSlice.ts +++ b/src/pageEditor/slices/editorSlice.ts @@ -39,7 +39,7 @@ import { getInvalidPath } from "@/utils/debugUtils"; import { selectActiveModComponentFormState, selectActiveBrickPipelineUIState, - selectActiveNodeUIState, + selectActiveBrickConfigurationUIState, selectNotDeletedModComponentFormStates, selectNotDeletedActivatedModComponents, } from "./editorSelectors"; @@ -57,7 +57,7 @@ import { removeModData, setActiveModId, setActiveNodeId, - syncNodeUIStates, + syncBrickConfigurationUIStates, } from "@/pageEditor/slices/editorSliceHelpers"; import { type Draft, produce } from "immer"; import { normalizePipelineForEditor } from "@/pageEditor/starterBricks/pipelineMapping"; @@ -380,7 +380,7 @@ export const editorSlice = createSlice({ // Make sure we're not keeping any private data around from Page Editor sessions void clearModComponentTraces(modComponentFormState.uuid); - syncNodeUIStates(state, modComponentFormState); + syncBrickConfigurationUIStates(state, modComponentFormState); }, showHomePane(state) { state.activeModComponentId = null; @@ -441,7 +441,7 @@ export const editorSlice = createSlice({ modComponentFormState as Draft; state.dirty[modComponentFormState.uuid] = true; - syncNodeUIStates(state, modComponentFormState); + syncBrickConfigurationUIStates(state, modComponentFormState); }, partialUpdateModComponentFormState( state, @@ -479,8 +479,9 @@ export const editorSlice = createSlice({ setActiveNodeId(state, action.payload); }, setNodeDataPanelTabSelected(state, action: PayloadAction) { - const nodeUIState = validateNodeUIState(state); - nodeUIState.dataPanel.activeTabKey = action.payload; + const brickConfigurationUIState = + validateBrickConfigurationUIState(state); + brickConfigurationUIState.dataPanel.activeTabKey = action.payload; }, /** @@ -492,9 +493,10 @@ export const editorSlice = createSlice({ ) { const { tabKey, query } = action.payload; - const nodeUIState = validateNodeUIState(state); + const brickConfigurationUIState = + validateBrickConfigurationUIState(state); - nodeUIState.dataPanel[tabKey].query = query; + brickConfigurationUIState.dataPanel[tabKey].query = query; }, /** @@ -508,21 +510,26 @@ export const editorSlice = createSlice({ }>, ) { const { tabKey, expandedState } = action.payload; - const nodeUIState = validateNodeUIState(state); - nodeUIState.dataPanel[tabKey].treeExpandedState = expandedState; + const brickConfigurationUIState = + validateBrickConfigurationUIState(state); + brickConfigurationUIState.dataPanel[tabKey].treeExpandedState = + expandedState; }, setActiveBuilderPreviewElement( state, action: PayloadAction, ) { const activeElement = action.payload; - const nodeUIState = validateNodeUIState(state); + const brickConfigurationUIState = + validateBrickConfigurationUIState(state); - nodeUIState.dataPanel[DataPanelTabKey.Preview].activeElement = - activeElement; + brickConfigurationUIState.dataPanel[ + DataPanelTabKey.Preview + ].activeElement = activeElement; - nodeUIState.dataPanel[DataPanelTabKey.Outline].activeElement = - activeElement; + brickConfigurationUIState.dataPanel[ + DataPanelTabKey.Outline + ].activeElement = activeElement; }, copyBlockConfig(state, action: PayloadAction) { @@ -744,7 +751,7 @@ export const editorSlice = createSlice({ } pipeline.splice(pipelineIndex, 0, block); - syncNodeUIStates(state, modComponentFormState); + syncBrickConfigurationUIStates(state, modComponentFormState); assertNotNullish(block.instanceId, "Block instanceId not found"); setActiveNodeId(state, block.instanceId); state.dirty[modComponentFormState.uuid] = true; @@ -793,7 +800,7 @@ export const editorSlice = createSlice({ } // Make sure the pipeline map is updated - syncNodeUIStates(state, activeModComponentFormState); + syncBrickConfigurationUIStates(state, activeModComponentFormState); // This change should re-initialize the Page Editor Formik form state.selectionSeq++; @@ -837,7 +844,7 @@ export const editorSlice = createSlice({ removeUnusedDependencies(activeModComponentFormState); - syncNodeUIStates(state, activeModComponentFormState); + syncBrickConfigurationUIStates(state, activeModComponentFormState); activeBrickPipelineUIState.activeNodeId = nextActiveNode?.instanceId ?? FOUNDATION_NODE_ID; @@ -880,7 +887,7 @@ export const editorSlice = createSlice({ state, { payload }: PayloadAction<{ id: string; isExpanded: boolean }>, ) { - const uiState = selectActiveNodeUIState({ + const uiState = selectActiveBrickConfigurationUIState({ editor: state, }); assertNotNullish(uiState, "Active node UI state not found"); @@ -895,22 +902,25 @@ export const editorSlice = createSlice({ expandBrickPipelineNode(state, action: PayloadAction) { const nodeId = action.payload; const brickPipelineUIState = validateBrickPipelineUIState(state); - const nodeUIState = brickPipelineUIState.nodeUIStates[nodeId]; + const brickConfigurationUIState = + brickPipelineUIState.nodeUIStates[nodeId]; assertNotNullish( - nodeUIState, + brickConfigurationUIState, `Node UI state not found for id: ${nodeId}`, ); - nodeUIState.collapsed = false; + brickConfigurationUIState.collapsed = false; }, toggleCollapseBrickPipelineNode(state, action: PayloadAction) { const nodeId = action.payload; const brickPipelineUIState = validateBrickPipelineUIState(state); - const nodeUIState = brickPipelineUIState.nodeUIStates[nodeId]; + const brickConfigurationUIState = + brickPipelineUIState.nodeUIStates[nodeId]; assertNotNullish( - nodeUIState, + brickConfigurationUIState, `Node UI state not found for id: ${nodeId}`, ); - nodeUIState.collapsed = !nodeUIState.collapsed; + brickConfigurationUIState.collapsed = + !brickConfigurationUIState.collapsed; }, setDataSectionExpanded( state, @@ -1035,15 +1045,15 @@ function validateBrickPipelineUIState(state: Draft) { return brickPipelineUIState; } -function validateNodeUIState(state: Draft) { +function validateBrickConfigurationUIState(state: Draft) { const brickPipelineUIState = validateBrickPipelineUIState(state); - const nodeUIState = + const brickConfigurationUIState = brickPipelineUIState.nodeUIStates[brickPipelineUIState.activeNodeId]; assertNotNullish( - nodeUIState, + brickConfigurationUIState, `Brick Pipeline UI state not found for activeNodeId: ${brickPipelineUIState.activeNodeId}`, ); - return nodeUIState; + return brickConfigurationUIState; } diff --git a/src/pageEditor/slices/editorSliceHelpers.test.ts b/src/pageEditor/slices/editorSliceHelpers.test.ts index 0ea598ba02..33d6dd3398 100644 --- a/src/pageEditor/slices/editorSliceHelpers.test.ts +++ b/src/pageEditor/slices/editorSliceHelpers.test.ts @@ -20,22 +20,22 @@ import { initialState } from "@/pageEditor/slices/editorSlice"; import { FOUNDATION_NODE_ID, makeInitialBrickPipelineUIState, - makeInitialNodeUIState, + makeInitialBrickConfigurationUIState, } from "@/pageEditor/uiState/uiState"; import { getPipelineMap } from "@/pageEditor/tabs/editTab/editHelpers"; import { ensureBrickPipelineUIState, - ensureNodeUIState, + ensureBrickConfigurationUIState, removeModComponentFormState, removeModData, setActiveModId, setActiveNodeId, - syncNodeUIStates, + syncBrickConfigurationUIStates, } from "@/pageEditor/slices/editorSliceHelpers"; import { produce } from "immer"; import { type BrickPipelineUIState, - type NodeUIState, + type BrickConfigurationUIState, } from "@/pageEditor/uiState/uiStateTypes"; import { uuidv4 } from "@/types/helpers"; import { @@ -85,7 +85,7 @@ describe("ensureBrickPipelineUIState", () => { }); }); -describe("ensureNodeUIState", () => { +describe("ensureBrickConfigurationUIState", () => { test("does not affect existing node state", () => { const formState = formStateFactory(); const nodeId = formState.modComponent.brickPipeline[0].instanceId; @@ -94,7 +94,8 @@ describe("ensureNodeUIState", () => { pipelineMap: getPipelineMap(formState.modComponent.brickPipeline), activeNodeId: nodeId, }; - const nodeState: NodeUIState = makeInitialNodeUIState(nodeId); + const nodeState: BrickConfigurationUIState = + makeInitialBrickConfigurationUIState(nodeId); uiState.nodeUIStates = { ...uiState.nodeUIStates, [nodeId]: { @@ -106,7 +107,7 @@ describe("ensureNodeUIState", () => { }, }; const newUiState = produce(uiState, (draft) => { - ensureNodeUIState(draft, nodeId); + ensureBrickConfigurationUIState(draft, nodeId); }); expect(newUiState).toEqual(uiState); @@ -122,8 +123,8 @@ describe("ensureNodeUIState", () => { activeNodeId: node1Id, }; const newUiState = produce(uiState, (draft) => { - ensureNodeUIState(draft, node1Id); - ensureNodeUIState(draft, node2Id); + ensureBrickConfigurationUIState(draft, node1Id); + ensureBrickConfigurationUIState(draft, node2Id); }); expect(newUiState.nodeUIStates).toContainKeys([node1Id, node2Id]); @@ -140,7 +141,7 @@ describe("syncNodeUIStates", () => { pipelineMap: getPipelineMap(formState.modComponent.brickPipeline), activeNodeId: invalidNodeId, }; - const nodeState = makeInitialNodeUIState(nodeId); + const nodeState = makeInitialBrickConfigurationUIState(nodeId); uiState.nodeUIStates = { ...uiState.nodeUIStates, [nodeId]: { @@ -150,7 +151,7 @@ describe("syncNodeUIStates", () => { activeTabKey: "rendered", }, }, - [invalidNodeId]: makeInitialNodeUIState(invalidNodeId), + [invalidNodeId]: makeInitialBrickConfigurationUIState(invalidNodeId), }; const editorState: EditorState = { ...initialState, @@ -161,7 +162,7 @@ describe("syncNodeUIStates", () => { activeModComponentId: formState.uuid, }; const newEditorState = produce(editorState, (draft) => { - syncNodeUIStates(draft, formState); + syncBrickConfigurationUIStates(draft, formState); }); expect(selectActiveNodeId({ editor: newEditorState })).toEqual( @@ -188,7 +189,7 @@ describe("syncNodeUIStates", () => { }, }; const newEditorState = produce(editorState, (draft) => { - syncNodeUIStates(draft, formState); + syncBrickConfigurationUIStates(draft, formState); }); // Maintains the foundation node state and adds the block node state for both blocks in the pipeline @@ -235,7 +236,7 @@ describe("setActiveNodeId", () => { ...makeInitialBrickPipelineUIState(), pipelineMap: getPipelineMap(formState.modComponent.brickPipeline), }; - const nodeState = makeInitialNodeUIState(nodeId); + const nodeState = makeInitialBrickConfigurationUIState(nodeId); uiState.nodeUIStates = { ...uiState.nodeUIStates, [nodeId]: { diff --git a/src/pageEditor/slices/editorSliceHelpers.ts b/src/pageEditor/slices/editorSliceHelpers.ts index 89070fbfa9..db649ba6ab 100644 --- a/src/pageEditor/slices/editorSliceHelpers.ts +++ b/src/pageEditor/slices/editorSliceHelpers.ts @@ -25,7 +25,7 @@ import { type RegistryId } from "@/types/registryTypes"; import { FOUNDATION_NODE_ID, makeInitialBrickPipelineUIState, - makeInitialNodeUIState, + makeInitialBrickConfigurationUIState, } from "@/pageEditor/uiState/uiState"; import { getPipelineMap } from "@/pageEditor/tabs/editTab/editHelpers"; import { type BrickPipelineUIState } from "@/pageEditor/uiState/uiStateTypes"; @@ -57,14 +57,14 @@ export function ensureBrickPipelineUIState( } } -export function ensureNodeUIState( +export function ensureBrickConfigurationUIState( state: Draft, nodeId: UUID, ) { - state.nodeUIStates[nodeId] ??= makeInitialNodeUIState(nodeId); + state.nodeUIStates[nodeId] ??= makeInitialBrickConfigurationUIState(nodeId); } -export function syncNodeUIStates( +export function syncBrickConfigurationUIStates( state: Draft, modComponentFormState: ModComponentFormState, ) { @@ -87,19 +87,19 @@ export function syncNodeUIStates( brickPipelineUIState.activeNodeId = FOUNDATION_NODE_ID; } - // Remove NodeUIStates for invalid IDs + // Remove BrickConfigurationUIStates for invalid node IDs for (const nodeId of Object.keys( brickPipelineUIState.nodeUIStates, ) as UUID[]) { - // Don't remove the foundation NodeUIState + // Don't remove the foundation BrickConfigurationUIState if (nodeId !== FOUNDATION_NODE_ID && pipelineMap[nodeId] == null) { delete brickPipelineUIState.nodeUIStates[nodeId]; } } - // Add missing NodeUIStates + // Add missing BrickConfigurationUIStates for (const nodeId of Object.keys(pipelineMap) as UUID[]) { - ensureNodeUIState(brickPipelineUIState, nodeId); + ensureBrickConfigurationUIState(brickPipelineUIState, nodeId); } } @@ -115,7 +115,7 @@ export function setActiveNodeId(state: Draft, nodeId: UUID) { brickPipelineUIState, `No Brick Pipeline UI state found for active mod component: ${state.activeModComponentId}`, ); - ensureNodeUIState(brickPipelineUIState, nodeId); + ensureBrickConfigurationUIState(brickPipelineUIState, nodeId); brickPipelineUIState.activeNodeId = nodeId; } diff --git a/src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts b/src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts index d934c0ac8a..7db8527e43 100644 --- a/src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts +++ b/src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts @@ -22,7 +22,7 @@ import { useSelector } from "react-redux"; import { selectActiveModComponentFormState, selectActiveModComponentNodeInfo, - selectParentBlockInfo, + selectParentNodeInfo, } from "@/pageEditor/slices/editorSelectors"; import { getErrorMessage, type SimpleErrorObject } from "@/errors/errorHelpers"; import { type SerializableResponse } from "@/types/messengerTypes"; @@ -95,11 +95,11 @@ const previewSlice = createSlice({ }); /** - * Get a handler to run a "preview" of a document renderer block. - * @param blockInstanceId the instance id (node id) of the block to run + * Get a handler to run a "preview" of a document renderer brick. + * @param brickInstanceId the node id of the brick to run */ export default function useDocumentPreviewRunBlock( - blockInstanceId: UUID, + brickInstanceId: UUID, ): BlockPreviewRunBlock { const [state, dispatch] = useReducer(previewSlice.reducer, initialState); @@ -111,33 +111,33 @@ export default function useDocumentPreviewRunBlock( starterBrick, } = useSelector(selectActiveModComponentFormState); - const { blockConfig } = useSelector( - selectActiveModComponentNodeInfo(blockInstanceId), + const { blockConfig: brickConfig } = useSelector( + selectActiveModComponentNodeInfo(brickInstanceId), ); const { - data: blockInfo, - isLoading: isBlockLoading, - error: blockError, - } = usePreviewInfo(blockConfig.id); + data: previewInfo, + isLoading: isPreviewInfoLoading, + error: previewInfoError, + } = usePreviewInfo(brickConfig.id); useEffect(() => { - if (blockError) { + if (previewInfoError) { dispatch( previewSlice.actions.setError({ error: { name: "BlockRegistryError", message: `Error loading brick from registry\n${getErrorMessage( - blockError, + previewInfoError, )}`, }, }), ); } - }, [blockError]); + }, [previewInfoError]); const traceRecord = useSelector( - selectActiveModComponentTraceForBrick(blockInstanceId), + selectActiveModComponentTraceForBrick(brickInstanceId), ); const { data: serviceContext, isLoading: isLoadingServiceContext } = useAsyncState( @@ -150,16 +150,16 @@ export default function useDocumentPreviewRunBlock( } as BrickArgsContext; // This defaults to "inherit" as described in the doc, see BrickConfig.rootMode - const blockRootMode = blockConfig.rootMode ?? "inherit"; + const blockRootMode = brickConfig.rootMode ?? "inherit"; const shouldUseStarterBrickRoot = - blockInfo?.isRootAware && + previewInfo?.isRootAware && blockRootMode === "inherit" && isTriggerStarterBrick(starterBrick); - const parentBlockInfo = useSelector(selectParentBlockInfo(blockInstanceId)); + const parentNodeInfo = useSelector(selectParentNodeInfo(brickInstanceId)); // Assume the parent is a temp display brick for now - const titleField = parentBlockInfo?.blockConfig?.config?.title ?? ""; + const titleField = parentNodeInfo?.blockConfig?.config?.title ?? ""; const titleValue = isExpression(titleField) ? titleField.__value__ : titleField; @@ -167,7 +167,7 @@ export default function useDocumentPreviewRunBlock( const debouncedRun = useDebouncedCallback( async () => { - if (isLoadingServiceContext || isBlockLoading) { + if (isLoadingServiceContext || isPreviewInfoLoading) { return; } @@ -187,7 +187,7 @@ export default function useDocumentPreviewRunBlock( // `panel` was the default before we added the location field const location: Location = - (parentBlockInfo?.blockConfig.config.location as Location) ?? "panel"; + (parentNodeInfo?.blockConfig.config.location as Location) ?? "panel"; try { await runRendererBrick(inspectedTab, { @@ -198,7 +198,7 @@ export default function useDocumentPreviewRunBlock( args: { apiVersion, blockConfig: { - ...removeEmptyValues(blockConfig), + ...removeEmptyValues(brickConfig), if: undefined, }, context, diff --git a/src/pageEditor/uiState/uiState.ts b/src/pageEditor/uiState/uiState.ts index 798c362036..66cc32c8be 100644 --- a/src/pageEditor/uiState/uiState.ts +++ b/src/pageEditor/uiState/uiState.ts @@ -18,14 +18,14 @@ import { type UUID } from "@/types/stringTypes"; import { type BrickPipelineUIState, - type NodeUIState, - type TabUIState, + type BrickConfigurationUIState, + type DataPanelTabUIState, } from "@/pageEditor/uiState/uiStateTypes"; import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes"; export const FOUNDATION_NODE_ID = "foundation" as UUID; -function makeInitialDataTabState(): TabUIState { +function makeInitialDataTabState(): DataPanelTabUIState { return { query: "", treeExpandedState: {}, @@ -33,8 +33,10 @@ function makeInitialDataTabState(): TabUIState { }; } -export function makeInitialNodeUIState(nodeId: UUID): NodeUIState { - const nodeUIState: NodeUIState = { +export function makeInitialBrickConfigurationUIState( + nodeId: UUID, +): BrickConfigurationUIState { + const brickConfigurationUIState: BrickConfigurationUIState = { nodeId, // @ts-expect-error -- initializing the Tab states down below dataPanel: { @@ -46,10 +48,10 @@ export function makeInitialNodeUIState(nodeId: UUID): NodeUIState { for (const tab of Object.values(DataPanelTabKey)) { // eslint-disable-next-line security/detect-object-injection -- tab comes from a known enum - nodeUIState.dataPanel[tab] = makeInitialDataTabState(); + brickConfigurationUIState.dataPanel[tab] = makeInitialDataTabState(); } - return nodeUIState; + return brickConfigurationUIState; } export function makeInitialBrickPipelineUIState(): BrickPipelineUIState { @@ -57,7 +59,8 @@ export function makeInitialBrickPipelineUIState(): BrickPipelineUIState { pipelineMap: {}, activeNodeId: FOUNDATION_NODE_ID, nodeUIStates: { - [FOUNDATION_NODE_ID]: makeInitialNodeUIState(FOUNDATION_NODE_ID), + [FOUNDATION_NODE_ID]: + makeInitialBrickConfigurationUIState(FOUNDATION_NODE_ID), }, }; } diff --git a/src/pageEditor/uiState/uiStateTypes.ts b/src/pageEditor/uiState/uiStateTypes.ts index 45cef421ed..5820edd027 100644 --- a/src/pageEditor/uiState/uiStateTypes.ts +++ b/src/pageEditor/uiState/uiStateTypes.ts @@ -22,7 +22,7 @@ import { type RegistryId } from "@/types/registryTypes"; import { type BrickConfig, type BrickPipeline } from "@/bricks/types"; import { type Nullishable } from "@/utils/nullishUtils"; -export type BlockInfo = { +export type NodeInfo = { blockId: RegistryId; /** @@ -56,9 +56,9 @@ export type BlockInfo = { /** * The map of pipeline blocks. The key is the instanceId of the block. */ -export type PipelineMap = Record; +export type PipelineMap = Record; -export type TabUIState = { +export type DataPanelTabUIState = { /** * The filter query of the JsonTree component */ @@ -75,7 +75,7 @@ export type TabUIState = { activeElement: string | null; }; -export type NodeUIState = { +export type BrickConfigurationUIState = { /** * Identifier for the node in the editor, either the foundation or a block uuid */ @@ -84,7 +84,7 @@ export type NodeUIState = { /** * UI state of the Tabs in the data panel */ - dataPanel: Record & { + dataPanel: Record & { /** * Which tab is active in the data panel of the editor UI */ @@ -119,5 +119,5 @@ export type BrickPipelineUIState = { /** * UI state of bricks in the mod component pipeline, including the starter brick */ - nodeUIStates: Record; + nodeUIStates: Record; }; diff --git a/src/store/editorStorage.test.ts b/src/store/editorStorage.test.ts index 2926ce06a6..cbfe721fa1 100644 --- a/src/store/editorStorage.test.ts +++ b/src/store/editorStorage.test.ts @@ -18,7 +18,7 @@ import { type EditorState } from "@/pageEditor/pageEditorTypes"; import { initialState } from "@/pageEditor/slices/editorSlice"; import { type UUID } from "@/types/stringTypes"; -import { type NodeUIState } from "@/pageEditor/uiState/uiStateTypes"; +import { type BrickConfigurationUIState } from "@/pageEditor/uiState/uiStateTypes"; import { getPipelineMap } from "@/pageEditor/tabs/editTab/editHelpers"; import { getEditorState, @@ -53,14 +53,15 @@ const currentPersistenceVersion = getMaxMigrationsVersion(migrations); describe("draftModComponentStorage", () => { test("removes one active form state", async () => { const formState = formStateFactory(); - const nodeUIStates: Record = { - [formState.uuid]: { - nodeId: formState.modComponent.brickPipeline[0].instanceId, - dataPanel: { - activeTabKey: null, - }, - } as NodeUIState, - }; + const brickConfigurationUIStates: Record = + { + [formState.uuid]: { + nodeId: formState.modComponent.brickPipeline[0].instanceId, + dataPanel: { + activeTabKey: null, + }, + } as BrickConfigurationUIState, + }; const state: EditorState = { ...initialState, activeModComponentId: formState.uuid, @@ -72,7 +73,7 @@ describe("draftModComponentStorage", () => { [formState.uuid]: { pipelineMap: getPipelineMap(formState.modComponent.brickPipeline), activeNodeId: formState.modComponent.brickPipeline[0].instanceId, - nodeUIStates, + nodeUIStates: brickConfigurationUIStates, }, }, availableDraftModComponentIds: [formState.uuid], @@ -90,22 +91,28 @@ describe("draftModComponentStorage", () => { test("removes inactive formState", async () => { const inactiveFormState = formStateFactory(); - const inactiveNodeUIStates: Record = { + const inactiveBrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [inactiveFormState.uuid]: { nodeId: inactiveFormState.modComponent.brickPipeline[1].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const activeFormState = formStateFactory(); - const activeNodeUIStates: Record = { + const activeBrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [activeFormState.uuid]: { nodeId: activeFormState.modComponent.brickPipeline[0].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const baseState: EditorState = { ...initialState, @@ -121,7 +128,7 @@ describe("draftModComponentStorage", () => { ), activeNodeId: activeFormState.modComponent.brickPipeline[0].instanceId, - nodeUIStates: activeNodeUIStates, + nodeUIStates: activeBrickConfigurationUIStates, }, }, availableDraftModComponentIds: [activeFormState.uuid], @@ -140,7 +147,7 @@ describe("draftModComponentStorage", () => { ), activeNodeId: inactiveFormState.modComponent.brickPipeline[0].instanceId, - nodeUIStates: inactiveNodeUIStates, + nodeUIStates: inactiveBrickConfigurationUIStates, }, }, availableDraftModComponentIds: [ @@ -164,33 +171,42 @@ describe("draftModComponentStorage", () => { const formState1 = formStateFactory({ modMetadata: mod, }); - const formState1NodeUIStates: Record = { + const formState1BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState1.uuid]: { nodeId: formState1.modComponent.brickPipeline[0].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const formState2 = formStateFactory({ modMetadata: mod, }); - const formState2NodeUIStates: Record = { + const formState2BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState2.uuid]: { nodeId: formState2.modComponent.brickPipeline[0].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const formState3 = formStateFactory(); - const formState3NodeUIStates: Record = { + const formState3BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState3.uuid]: { nodeId: formState3.modComponent.brickPipeline[1].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const baseState: EditorState = { ...initialState, @@ -199,7 +215,7 @@ describe("draftModComponentStorage", () => { [formState3.uuid]: { pipelineMap: getPipelineMap(formState3.modComponent.brickPipeline), activeNodeId: formState3.modComponent.brickPipeline[0].instanceId, - nodeUIStates: formState3NodeUIStates, + nodeUIStates: formState3BrickConfigurationUIStates, }, }, availableDraftModComponentIds: [formState3.uuid], @@ -226,12 +242,12 @@ describe("draftModComponentStorage", () => { [formState1.uuid]: { pipelineMap: getPipelineMap(formState1.modComponent.brickPipeline), activeNodeId: formState1.modComponent.brickPipeline[1].instanceId, - nodeUIStates: formState1NodeUIStates, + nodeUIStates: formState1BrickConfigurationUIStates, }, [formState2.uuid]: { pipelineMap: getPipelineMap(formState2.modComponent.brickPipeline), activeNodeId: formState2.modComponent.brickPipeline[0].instanceId, - nodeUIStates: formState2NodeUIStates, + nodeUIStates: formState2BrickConfigurationUIStates, }, }, availableDraftModComponentIds: [ @@ -256,33 +272,42 @@ describe("draftModComponentStorage", () => { const formState1 = formStateFactory({ modMetadata: mod, }); - const formState1NodeUIStates: Record = { + const formState1BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState1.uuid]: { nodeId: formState1.modComponent.brickPipeline[0].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const formState2 = formStateFactory({ modMetadata: mod, }); - const formState2NodeUIStates: Record = { + const formState2BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState2.uuid]: { nodeId: formState2.modComponent.brickPipeline[0].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const formState3 = formStateFactory(); - const formState3NodeUIStates: Record = { + const formState3BrickConfigurationUIStates: Record< + UUID, + BrickConfigurationUIState + > = { [formState3.uuid]: { nodeId: formState3.modComponent.brickPipeline[1].instanceId, dataPanel: { activeTabKey: null, }, - } as NodeUIState, + } as BrickConfigurationUIState, }; const baseState: EditorState = { ...initialState, @@ -292,7 +317,7 @@ describe("draftModComponentStorage", () => { [formState3.uuid]: { pipelineMap: getPipelineMap(formState3.modComponent.brickPipeline), activeNodeId: formState3.modComponent.brickPipeline[0].instanceId, - nodeUIStates: formState3NodeUIStates, + nodeUIStates: formState3BrickConfigurationUIStates, }, }, availableDraftModComponentIds: [formState3.uuid], @@ -318,12 +343,12 @@ describe("draftModComponentStorage", () => { [formState1.uuid]: { pipelineMap: getPipelineMap(formState1.modComponent.brickPipeline), activeNodeId: formState1.modComponent.brickPipeline[1].instanceId, - nodeUIStates: formState1NodeUIStates, + nodeUIStates: formState1BrickConfigurationUIStates, }, [formState2.uuid]: { pipelineMap: getPipelineMap(formState2.modComponent.brickPipeline), activeNodeId: formState2.modComponent.brickPipeline[0].instanceId, - nodeUIStates: formState2NodeUIStates, + nodeUIStates: formState2BrickConfigurationUIStates, }, }, availableDraftModComponentIds: [