refactor replace remaining instances of nodePreview -> builderPreview

pixiebrix · Jun 27, 2024 · 3b6d29c · 3b6d29c
1 parent f065bbb
commit 3b6d29c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/src/pageEditor/tabs/editTab/editorNodeLayout/usePipelineNodes.tsx b/src/pageEditor/tabs/editTab/editorNodeLayout/usePipelineNodes.tsx
@@ -107,7 +107,7 @@ type SubPipeline = {
   inputKey?: string;
 };
 
-function getNodePreviewElementId(
+function getBuilderPreviewElementId(
   brickConfig: BrickConfig,
   path: string,
 ): string | null {
@@ -211,7 +211,7 @@ const usePipelineNodes = (): {
   const annotations = useSelector(
     selectExtensionAnnotations(activeModComponentFormState.uuid),
   );
-  const activeNodePreviewElementId = useSelector(
+  const activeBuilderPreviewElementId = useSelector(
     selectActiveBuilderPreviewElement,
   );
 
@@ -318,7 +318,7 @@ const usePipelineNodes = (): {
     const expanded = hasSubPipelines && !collapsed;
 
     const onClick = () => {
-      if (activeNodePreviewElementId) {
+      if (activeBuilderPreviewElementId) {
         dispatch(actions.setActiveBuilderPreviewElement(null));
 
         if (isNodeActive) {
@@ -429,12 +429,12 @@ const usePipelineNodes = (): {
     }
 
     const isSubPipelineHeaderActive =
-      activeNodePreviewElementId == null
+      activeBuilderPreviewElementId == null
         ? false
         : subPipelines.some(
             ({ path }) =>
-              activeNodePreviewElementId ===
-              getNodePreviewElementId(blockConfig, path),
+              activeBuilderPreviewElementId ===
+              getBuilderPreviewElementId(blockConfig, path),
           );
 
     const restBrickNodeProps: Except<
@@ -473,10 +473,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[] = [
@@ -515,23 +518,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.setActiveBuilderPreviewElement(
-                      nodePreviewElementId,
+                      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,

diff --git a/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.tsx b/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.tsx
@@ -32,7 +32,7 @@ export type PipelineHeaderNodeProps = {
   headerLabel: string;
   nestingLevel: number;
   nodeActions: NodeAction[];
-  nodePreviewElement: {
+  builderPreviewElement: {
     name: string;
     focus: () => void;
     active: boolean;
@@ -52,7 +52,7 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
   active,
   isParentActive,
   isAncestorActive,
-  nodePreviewElement,
+  builderPreviewElement,
   isPipelineLoading,
 }) => {
   const nodeRef = useRef<HTMLAnchorElement | null>(null);
@@ -65,22 +65,22 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
   };
 
   useEffect(() => {
-    if (!nodePreviewElement || isPipelineLoading) {
+    if (!builderPreviewElement || isPipelineLoading) {
       return;
     }
 
     window.addEventListener(
-      `${SCROLL_TO_HEADER_NODE_EVENT}-${nodePreviewElement.name}`,
+      `${SCROLL_TO_HEADER_NODE_EVENT}-${builderPreviewElement.name}`,
       scrollIntoView,
     );
 
-    if (nodePreviewElement?.active) {
+    if (builderPreviewElement?.active) {
       scrollIntoView();
     }
 
     return () => {
       window.removeEventListener(
-        `${SCROLL_TO_HEADER_NODE_EVENT}-${nodePreviewElement.name}`,
+        `${SCROLL_TO_HEADER_NODE_EVENT}-${builderPreviewElement.name}`,
         scrollIntoView,
       );
     };
@@ -92,11 +92,11 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
       <ListGroup.Item
         active={active}
         className={cx(styles.root, {
-          [styles.clickable ?? ""]: Boolean(nodePreviewElement),
+          [styles.clickable ?? ""]: Boolean(builderPreviewElement),
           [styles.parentNodeActive ?? ""]: isParentActive,
           [styles.ancestorActive ?? ""]: isAncestorActive,
         })}
-        onClick={nodePreviewElement?.focus}
+        onClick={builderPreviewElement?.focus}
         ref={nodeRef}
       >
         <PipelineOffsetView nestingLevel={nestingLevel} active={active} />
@@ -120,7 +120,7 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
                 </div>
               )}
             </div>
-            {nodePreviewElement && (
+            {builderPreviewElement && (
               <FontAwesomeIcon
                 icon={faSignInAlt}
                 size="sm"

diff --git a/src/pageEditor/tabs/editTab/editorNodes/brickNode/BrickNode.tsx b/src/pageEditor/tabs/editTab/editorNodes/brickNode/BrickNode.tsx
@@ -37,15 +37,15 @@ const useScrollIntoViewEffect = (
   isSubPipelineHeaderActive = false,
 ) => {
   const nodeRef = useRef<HTMLDivElement>(null);
-  const activeNodePreviewElementId = useSelector(
+  const activeBuilderPreviewElementId = useSelector(
     selectActiveBuilderPreviewElement,
   );
 
   useEffect(() => {
-    if (active && !isSubPipelineHeaderActive && activeNodePreviewElementId) {
+    if (active && !isSubPipelineHeaderActive && activeBuilderPreviewElementId) {
       nodeRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
     }
-  }, [activeNodePreviewElementId, isSubPipelineHeaderActive, active]);
+  }, [activeBuilderPreviewElementId, isSubPipelineHeaderActive, active]);
 
   return nodeRef;
 };