#8609 Rename nodePreviewElement -> builderPreviewElement

src/pageEditor/documentBuilder/edit/DocumentOptions.test.tsx

@@ -78,7 +78,7 @@ describe("DocumentOptions", () => {
             ),
           );
           dispatch(
-            actions.setActiveDocumentOrFormPreviewElement(initialActiveElement),
+            actions.setActiveBuilderPreviewElement(initialActiveElement),
           );
         },
       },

src/pageEditor/documentBuilder/edit/DocumentOptions.tsx

@@ -22,7 +22,7 @@ import ConfigErrorBoundary from "@/pageEditor/fields/ConfigErrorBoundary";
 import { joinName } from "@/utils/formUtils";
 import useAsyncEffect from "use-async-effect";
 import { useSelector } from "react-redux";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import ElementEditor from "@/pageEditor/documentBuilder/edit/ElementEditor";
 import ConnectedCollapsibleFieldSection from "@/pageEditor/fields/ConnectedCollapsibleFieldSection";
 import SchemaField from "@/components/fields/schemaFields/SchemaField";
@@ -37,7 +37,7 @@ const DocumentOptions: React.FC<{
   const documentConfigName = joinName(name, configKey);
   const documentBodyName = joinName(documentConfigName, "body");
 
-  const activeElement = useSelector(selectActiveDocumentOrFormPreviewElement);
+  const activeElement = useSelector(selectActiveBuilderPreviewElement);
 
   const [{ value: bodyValue }, , { setValue: setBodyValue }] =
     useField<DocumentBuilderElement[]>(documentBodyName);

src/pageEditor/documentBuilder/edit/ElementEditor.tsx

@@ -23,7 +23,7 @@ import MoveElement from "./MoveElement";
 import documentBuilderElementTypeLabels from "@/pageEditor/documentBuilder/elementTypeLabels";
 import useElementOptions from "@/pageEditor/documentBuilder/edit/useElementOptions";
 import { useSelector } from "react-redux";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { getProperty } from "@/utils/objectUtils";
 import ConnectedCollapsibleFieldSection from "@/pageEditor/fields/ConnectedCollapsibleFieldSection";
 import { joinName } from "@/utils/formUtils";
@@ -34,7 +34,7 @@ type ElementEditorProps = {
 };
 
 const ElementEditor: React.FC<ElementEditorProps> = ({ documentBodyName }) => {
-  const activeElement = useSelector(selectActiveDocumentOrFormPreviewElement);
+  const activeElement = useSelector(selectActiveBuilderPreviewElement);
   const elementName = `${documentBodyName}.${activeElement}`;
   const [{ value: documentBuilderElement }] =
     useField<DocumentBuilderElement>(elementName);

src/pageEditor/documentBuilder/edit/RemoveElement.tsx

@@ -20,15 +20,15 @@ import { Button } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import useDeleteElement from "@/pageEditor/documentBuilder/hooks/useDeleteElement";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { useSelector } from "react-redux";
 
 type RemoveElementProps = {
   documentBodyName: string;
 };
 
 const RemoveElement: React.FC<RemoveElementProps> = ({ documentBodyName }) => {
-  const activeElement = useSelector(selectActiveDocumentOrFormPreviewElement);
+  const activeElement = useSelector(selectActiveBuilderPreviewElement);
   const deleteElement = useDeleteElement(documentBodyName);
   const onDelete = async () => {
     await deleteElement(activeElement);

src/pageEditor/documentBuilder/hooks/useDeleteElement.ts

@@ -32,7 +32,7 @@ function useDeleteElement(documentBodyName: string) {
 
   return useCallback(
     async (elementName: string) => {
-      dispatch(editorActions.setActiveDocumentOrFormPreviewElement(null));
+      dispatch(editorActions.setActiveBuilderPreviewElement(null));
 
       const { collectionName, elementIndex } = getElementCollectionName(
         [documentBodyName, elementName].join("."),

src/pageEditor/documentBuilder/hooks/useMoveElement.ts

@@ -25,7 +25,7 @@ import { getIn, useField } from "formik";
 import { getAllowedChildTypes } from "@/pageEditor/documentBuilder/allowedElementTypes";
 import { useCallback } from "react";
 import useReduxState from "@/hooks/useReduxState";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 
 // https://stackoverflow.com/a/6470794/402560
@@ -114,8 +114,8 @@ function useMoveElement(documentBodyName: string) {
     useField<DocumentBuilderElement[]>(documentBodyName);
 
   const [, setActiveElement] = useReduxState(
-    selectActiveDocumentOrFormPreviewElement,
-    editorActions.setActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
+    editorActions.setActiveBuilderPreviewElement,
   );
 
   return useCallback(

src/pageEditor/documentBuilder/hooks/useMoveWithinParent.ts

@@ -16,7 +16,7 @@
  */
 
 import useReduxState from "@/hooks/useReduxState";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { actions } from "@/pageEditor/slices/editorSlice";
 import { useField } from "formik";
 import { type DocumentBuilderElement } from "@/pageEditor/documentBuilder/documentBuilderTypes";
@@ -33,8 +33,8 @@ type MoveWithinParent = {
 
 function useMoveWithinParent(documentBodyName: string): MoveWithinParent {
   const [activeElement, setActiveElement] = useReduxState(
-    selectActiveDocumentOrFormPreviewElement,
-    actions.setActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
+    actions.setActiveBuilderPreviewElement,
   );
 
   assertNotNullish(activeElement, "No active element found");

src/pageEditor/documentBuilder/hooks/useSelectParentElement.ts

@@ -36,9 +36,7 @@ function useSelectParentElement() {
   const dispatch = useDispatch();
   return (elementName: string) => {
     const parentElementName = getParentElementName(elementName);
-    dispatch(
-      editorActions.setActiveDocumentOrFormPreviewElement(parentElementName),
-    );
+    dispatch(editorActions.setActiveBuilderPreviewElement(parentElementName));
   };
 }
 

src/pageEditor/documentBuilder/preview/ElementPreview.test.tsx

@@ -78,7 +78,7 @@ const renderElementPreview = (
           formState.extension.blockPipeline[0].instanceId,
         ),
       );
-      dispatch(actions.setActiveDocumentOrFormPreviewElement("0"));
+      dispatch(actions.setActiveBuilderPreviewElement("0"));
     },
   });
 };

src/pageEditor/fields/FormModalOptions.tsx

@@ -23,7 +23,7 @@ import FormEditor from "@/components/formBuilder/edit/FormEditor";
 import FormIntroFields from "@/components/formBuilder/edit/FormIntroFields";
 import useReduxState from "@/hooks/useReduxState";
 import ConfigErrorBoundary from "@/pageEditor/fields/ConfigErrorBoundary";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 import FORM_FIELD_TYPE_OPTIONS from "@/pageEditor/fields/formFieldTypeOptions";
 import ConnectedCollapsibleFieldSection from "@/pageEditor/fields/ConnectedCollapsibleFieldSection";
@@ -63,8 +63,8 @@ const FormModalOptions: React.FC<{
   const configName = partial(joinName, baseName);
 
   const [activeElement, setActiveElement] = useReduxState(
-    selectActiveDocumentOrFormPreviewElement,
-    editorActions.setActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
+    editorActions.setActiveBuilderPreviewElement,
   );
 
   return (

src/pageEditor/fields/FormRendererOptions.tsx

@@ -22,7 +22,7 @@ import FormEditor from "@/components/formBuilder/edit/FormEditor";
 import FormIntroFields from "@/components/formBuilder/edit/FormIntroFields";
 import useReduxState from "@/hooks/useReduxState";
 import ConfigErrorBoundary from "@/pageEditor/fields/ConfigErrorBoundary";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 import { useField, useFormikContext } from "formik";
 import { partial } from "lodash";
@@ -274,8 +274,8 @@ const FormRendererOptions: React.FC<{
   const configName = makeName();
 
   const [activeElement, setActiveElement] = useReduxState(
-    selectActiveDocumentOrFormPreviewElement,
-    editorActions.setActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
+    editorActions.setActiveBuilderPreviewElement,
   );
 
   return (

src/pageEditor/slices/editorSelectors.ts

@@ -389,7 +389,7 @@ export function selectNodeDataPanelTabState(
 /**
  * Selects the active element of the Document or Form builder on the Preview tab
  */
-export function selectActiveDocumentOrFormPreviewElement(
+export function selectActiveBuilderPreviewElement(
   state: EditorRootState,
 ): Nullishable<string> {
   return selectNodeDataPanelTabState(state, DataPanelTabKey.Preview)

src/pageEditor/slices/editorSlice.test.ts

@@ -115,7 +115,7 @@ describe("DataPanel state", () => {
   test("should set the active element", () => {
     const editorState = editorSlice.reducer(
       state,
-      actions.setActiveDocumentOrFormPreviewElement("test-field"),
+      actions.setActiveBuilderPreviewElement("test-field"),
     );
 
     expect(

src/pageEditor/slices/editorSlice.ts

@@ -511,7 +511,7 @@ export const editorSlice = createSlice({
       const nodeUIState = validateNodeUIState(state);
       nodeUIState.dataPanel[tabKey].treeExpandedState = expandedState;
     },
-    setActiveDocumentOrFormPreviewElement(
+    setActiveBuilderPreviewElement(
       state,
       action: PayloadAction<string | null>,
     ) {

src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx

@@ -42,7 +42,7 @@ import {
   selectActiveModComponentFormState,
   selectActiveNodeId,
   selectActiveNodeInfo,
-  selectActiveDocumentOrFormPreviewElement,
+  selectActiveBuilderPreviewElement,
 } from "@/pageEditor/slices/editorSelectors";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 import Alert from "@/components/Alert";
@@ -174,13 +174,11 @@ const DataPanel: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to report when `activeTabKey` changes
   }, [activeTabKey]);
 
-  const [
-    activeDocumentOrFormPreviewElement,
-    setActiveDocumentOrFormPreviewElement,
-  ] = useReduxState(
-    selectActiveDocumentOrFormPreviewElement,
-    editorActions.setActiveDocumentOrFormPreviewElement,
-  );
+  const [activeBuilderPreviewElement, setActiveBuilderPreviewElement] =
+    useReduxState(
+      selectActiveBuilderPreviewElement,
+      editorActions.setActiveBuilderPreviewElement,
+    );
 
   const popupBoundary = showDocumentPreview
     ? document.querySelector(`.${dataPanelStyles.tabContent}`)
@@ -373,14 +371,14 @@ const DataPanel: React.FC = () => {
                 {showFormPreview ? (
                   <FormPreview
                     rjsfSchema={brickConfig?.config as RJSFSchema}
-                    activeField={activeDocumentOrFormPreviewElement}
-                    setActiveField={setActiveDocumentOrFormPreviewElement}
+                    activeField={activeBuilderPreviewElement}
+                    setActiveField={setActiveBuilderPreviewElement}
                   />
                 ) : (
                   <DocumentPreview
                     documentBodyName={documentBodyFieldName}
-                    activeElement={activeDocumentOrFormPreviewElement}
-                    setActiveElement={setActiveDocumentOrFormPreviewElement}
+                    activeElement={activeBuilderPreviewElement}
+                    setActiveElement={setActiveBuilderPreviewElement}
                     menuBoundary={popupBoundary}
                   />
                 )}
@@ -413,8 +411,8 @@ const DataPanel: React.FC = () => {
               )}
               <DocumentOutline
                 documentBodyName={documentBodyFieldName}
-                activeElement={activeDocumentOrFormPreviewElement}
-                setActiveElement={setActiveDocumentOrFormPreviewElement}
+                activeElement={activeBuilderPreviewElement}
+                setActiveElement={setActiveBuilderPreviewElement}
               />
             </ErrorBoundary>
           </DataTab>

src/pageEditor/tabs/editTab/editorNodeLayout/usePipelineNodes.tsx

@@ -64,7 +64,7 @@ import {
   selectActiveModComponentFormState,
   selectActiveNodeId,
   selectCollapsedNodes,
-  selectActiveDocumentOrFormPreviewElement,
+  selectActiveBuilderPreviewElement,
   selectPipelineMap,
 } from "@/pageEditor/slices/editorSelectors";
 import { getRootPipelineFlavor } from "@/bricks/brickFilterHelpers";
@@ -108,7 +108,7 @@ type SubPipeline = {
   inputKey?: string;
 };
 
-function getNodePreviewElementId(
+function getBuilderPreviewElementId(
   brickConfig: BrickConfig,
   path: string,
 ): string | null {
@@ -212,8 +212,8 @@ const usePipelineNodes = (): {
   const annotations = useSelector(
     selectExtensionAnnotations(activeModComponentFormState.uuid),
   );
-  const activeNodePreviewElementId = useSelector(
-    selectActiveDocumentOrFormPreviewElement,
+  const activeBuilderPreviewElementId = useSelector(
+    selectActiveBuilderPreviewElement,
   );
 
   const isApiAtLeastV2 = useApiVersionAtLeast("v2");
@@ -319,8 +319,8 @@ const usePipelineNodes = (): {
     const expanded = hasSubPipelines && !collapsed;
 
     const onClick = () => {
-      if (activeNodePreviewElementId) {
-        dispatch(actions.setActiveDocumentOrFormPreviewElement(null));
+      if (activeBuilderPreviewElementId) {
+        dispatch(actions.setActiveBuilderPreviewElement(null));
 
         if (isNodeActive) {
           return;
@@ -430,12 +430,12 @@ const usePipelineNodes = (): {
     }
 
     const isSubPipelineHeaderActive =
-      activeNodePreviewElementId == null
+      activeBuilderPreviewElementId == null
         ? false
         : subPipelines.some(
             ({ path }) =>
-              activeNodePreviewElementId ===
-              getNodePreviewElementId(blockConfig, path),
+              activeBuilderPreviewElementId ===
+              getBuilderPreviewElementId(blockConfig, path),
           );
 
     const restBrickNodeProps: Except<
@@ -474,10 +474,13 @@ const usePipelineNodes = (): {
       } of subPipelines) {
         const headerName = `${nodeId}-header`;
         const fullSubPath = joinPathParts(pipelinePath, index, path);
-        const nodePreviewElementId = getNodePreviewElementId(blockConfig, path);
+        const builderPreviewElementId = getBuilderPreviewElementId(
+          blockConfig,
+          path,
+        );
         const isHeaderNodeActive =
-          activeNodePreviewElementId &&
-          nodePreviewElementId === activeNodePreviewElementId;
+          activeBuilderPreviewElementId &&
+          builderPreviewElementId === activeBuilderPreviewElementId;
         const isSiblingHeaderActive = isSubPipelineHeaderActive;
 
         const headerActions: NodeAction[] = [
@@ -516,23 +519,24 @@ const usePipelineNodes = (): {
           active: isHeaderNodeActive,
           isParentActive: !isSiblingHeaderActive && isNodeActive,
           isAncestorActive: !isSiblingHeaderActive && isParentActive,
-          nodePreviewElement: nodePreviewElementId
+          builderPreviewElement: builderPreviewElementId
             ? {
-                name: nodePreviewElementId,
+                name: builderPreviewElementId,
                 focus() {
                   setActiveNodeId(blockConfig.instanceId);
                   dispatch(
-                    editorActions.setActiveDocumentOrFormPreviewElement(
-                      nodePreviewElementId,
+                    editorActions.setActiveBuilderPreviewElement(
+                      builderPreviewElementId,
                     ),
                   );
                   window.dispatchEvent(
                     new Event(
-                      `${SCROLL_TO_DOCUMENT_PREVIEW_ELEMENT_EVENT}-${nodePreviewElementId}`,
+                      `${SCROLL_TO_DOCUMENT_PREVIEW_ELEMENT_EVENT}-${builderPreviewElementId}`,
                     ),
                   );
                 },
-                active: nodePreviewElementId === activeNodePreviewElementId,
+                active:
+                  builderPreviewElementId === activeBuilderPreviewElementId,
               }
             : null,
           isPipelineLoading: isLoading,