refactor rename activeDocumentOrFormPreviewElement -> activeDocumentP…

…reviewElement

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";
@@ -273,8 +273,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";
@@ -173,13 +173,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}`)
@@ -372,14 +370,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}
                   />
                 )}
@@ -412,8 +410,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";
@@ -212,7 +212,7 @@ const usePipelineNodes = (): {
     selectExtensionAnnotations(activeModComponentFormState.uuid),
   );
   const activeNodePreviewElementId = useSelector(
-    selectActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
   );
 
   const isApiAtLeastV2 = useApiVersionAtLeast("v2");
@@ -319,7 +319,7 @@ const usePipelineNodes = (): {
 
     const onClick = () => {
       if (activeNodePreviewElementId) {
-        dispatch(actions.setActiveDocumentOrFormPreviewElement(null));
+        dispatch(actions.setActiveBuilderPreviewElement(null));
 
         if (isNodeActive) {
           return;
@@ -521,7 +521,7 @@ const usePipelineNodes = (): {
                 focus() {
                   setActiveNodeId(blockConfig.instanceId);
                   dispatch(
-                    editorActions.setActiveDocumentOrFormPreviewElement(
+                    editorActions.setActiveBuilderPreviewElement(
                       nodePreviewElementId,
                     ),
                   );

src/pageEditor/tabs/editTab/editorNodes/brickNode/BrickNode.tsx

@@ -30,15 +30,15 @@ import {
   RunStatus,
 } from "@/pageEditor/tabs/editTab/editTabTypes";
 import { useSelector } from "react-redux";
-import { selectActiveDocumentOrFormPreviewElement } from "@/pageEditor/slices/editorSelectors";
+import { selectActiveBuilderPreviewElement } from "@/pageEditor/slices/editorSelectors";
 
 const useScrollIntoViewEffect = (
   active = false,
   isSubPipelineHeaderActive = false,
 ) => {
   const nodeRef = useRef<HTMLDivElement>(null);
   const activeNodePreviewElementId = useSelector(
-    selectActiveDocumentOrFormPreviewElement,
+    selectActiveBuilderPreviewElement,
   );
 
   useEffect(() => {