#8611 Rename UIState types

src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx

@@ -1,22 +1,22 @@
 /* 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";
 
 type SourceLabelProps = {
   source: string;
   extensionPointLabel: string;
-  blocksInfo: BlockInfo[];
-  allBlocks: TypedBrickMap;
+  nodes: NodeInfo[];
+  allBricks: TypedBrickMap;
 };
 
 const SourceLabel: React.FunctionComponent<SourceLabelProps> = ({
   source,
   extensionPointLabel,
-  blocksInfo,
-  allBlocks,
+  nodes,
+  allBricks,
 }) => {
   const [kind] = source.split(":");
   let label: string;
@@ -42,14 +42,14 @@ const SourceLabel: React.FunctionComponent<SourceLabelProps> = ({
     }
 
     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;
       }
     }

src/components/fields/schemaFields/widgets/varPopup/VarMenu.tsx

@@ -255,8 +255,8 @@ const VarMenu: React.FunctionComponent<VarMenuProps> = ({
                 <SourceLabel
                   source={source}
                   extensionPointLabel={starterBrickLabel}
-                  blocksInfo={blocksInfo}
-                  allBlocks={allBricks}
+                  nodes={blocksInfo}
+                  allBricks={allBricks}
                 />
                 <VariablesTree
                   vars={vars}
@@ -273,8 +273,8 @@ const VarMenu: React.FunctionComponent<VarMenuProps> = ({
             <SourceLabel
               source={source}
               extensionPointLabel={starterBrickLabel}
-              blocksInfo={blocksInfo}
-              allBlocks={allBricks}
+              nodes={blocksInfo}
+              allBricks={allBricks}
             />
             <VariablesTree
               vars={filterVarMapByVariable(vars, likelyVariable)}

src/pageEditor/documentBuilder/preview/DocumentPreview.tsx

@@ -30,7 +30,7 @@ import useDocumentPreviewRunBlock from "@/pageEditor/tabs/effect/useDocumentPrev
 import { useSelector } from "react-redux";
 import {
   selectActiveNodeId,
-  selectParentBlockInfo,
+  selectParentNodeInfo,
 } from "@/pageEditor/slices/editorSelectors";
 import { Button } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -78,9 +78,9 @@ const DocumentPreview = ({
   };
 
   const activeNodeId = useSelector(selectActiveNodeId);
-  const parentBlockInfo = useSelector(selectParentBlockInfo(activeNodeId));
+  const parentNodeInfo = useSelector(selectParentNodeInfo(activeNodeId));
   const showPreviewButton =
-    parentBlockInfo?.blockId === DisplayTemporaryInfo.BRICK_ID;
+    parentNodeInfo?.blockId === DisplayTemporaryInfo.BRICK_ID;
 
   const {
     error: previewError,

src/pageEditor/fields/ConnectedCollapsibleFieldSection.tsx

@@ -1,6 +1,6 @@
 import CollapsibleFieldSection from "@/pageEditor/fields/CollapsibleFieldSection";
 import { useDispatch, useSelector } from "react-redux";
-import { selectActiveNodeUIState } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBrickConfigurationUIState } from "@/pageEditor/slices/editorSelectors";
 import { actions } from "@/pageEditor/slices/editorSlice";
 import React from "react";
 
@@ -15,9 +15,13 @@ const ConnectedCollapsibleFieldSection = ({
   initialExpanded?: boolean;
 }) => {
   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 (
     <CollapsibleFieldSection

src/pageEditor/slices/editorSelectors.ts

@@ -27,7 +27,7 @@ import { compact, flatMap, isEmpty, sortBy, uniqBy } from "lodash";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import {
   type BrickPipelineUIState,
-  type TabUIState,
+  type DataPanelTabUIState,
 } from "@/pageEditor/uiState/uiStateTypes";
 import { type ModComponentsRootState } from "@/store/extensionsTypes";
 import { type ModComponentFormState } from "@/pageEditor/starterBricks/formStateTypes";
@@ -285,7 +285,7 @@ export function selectActiveBrickPipelineUIState({
   return editor.brickPipelineUIStateById[editor.activeModComponentId];
 }
 
-export const selectActiveNodeUIState = createSelector(
+export const selectActiveBrickConfigurationUIState = createSelector(
   selectActiveBrickPipelineUIState,
   (brickPipelineUIState) =>
     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<DataPanelTabKey> = createSelector(
-  selectActiveNodeUIState,
-  (nodeUIState) => nodeUIState?.dataPanel.activeTabKey,
+  selectActiveBrickConfigurationUIState,
+  (brickConfigurationUIState) =>
+    brickConfigurationUIState?.dataPanel.activeTabKey,
 );
 
 export function selectNodeDataPanelTabState(
   rootState: EditorRootState,
   tabKey: DataPanelTabKey,
-): Nullishable<TabUIState> {
-  const nodeUIState = selectActiveNodeUIState(rootState);
+): Nullishable<DataPanelTabUIState> {
+  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];
 }
 
 /**

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<ModComponentFormState>;
       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<DataPanelTabKey>) {
-      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<string | null>,
     ) {
       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<BrickConfig>) {
@@ -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<UUID>) {
       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<UUID>) {
       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<EditorState>) {
   return brickPipelineUIState;
 }
 
-function validateNodeUIState(state: Draft<EditorState>) {
+function validateBrickConfigurationUIState(state: Draft<EditorState>) {
   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;
 }