Merge branch 'main' into feature/6284-generic-refresh-token

pixiebrix · Aug 21, 2023 · 225fabc · 225fabc
2 parents 5f177aa + 716ccfa
commit 225fabc
Show file tree

Hide file tree

Showing 21 changed files with 332 additions and 361 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
     "@atlaskit/tree": "^8.8.5",
     "@cfworker/json-schema": "^1.12.7",
-    "@datadog/browser-rum": "^4.46.0",
+    "@datadog/browser-rum": "^4.47.0",
     "@emotion/react": "^11.11.1",
     "@floating-ui/dom": "^1.5.1",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -47,14 +47,14 @@
     "@uipath/robot": "1.3.1",
     "@vespaiach/axios-fetch-adapter": "^0.3.1",
     "@xobotyi/scrollbar-width": "^1.9.5",
-    "ace-builds": "^1.24.0",
+    "ace-builds": "^1.24.1",
     "autocompleter": "^9.0.1",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.0",
     "bootstrap-icons": "^1.10.5",
     "bootstrap-switch-button-react": "^1.2.0",
     "canvas-confetti": "^1.4.0",
-    "chrono-node": "^2.6.4",
+    "chrono-node": "^2.6.5",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.1",
     "copy-text-to-clipboard": "^3.2.0",
@@ -90,9 +90,9 @@
     "json-stringify-safe": "^5.0.1",
     "json5": "^2.2.3",
     "jsonpath-plus": "^7.0.0",
-    "kbar": "^0.1.0-beta.41",
+    "kbar": "^0.1.0-beta.43",
     "lodash-es": "^4.17.21",
-    "marked": "^7.0.2",
+    "marked": "^7.0.4",
     "memoize-one": "^6.0.0",
     "mustache": "^4.2.0",
     "nunjucks": "^3.2.4",
@@ -170,15 +170,15 @@
     "@fortawesome/fontawesome-common-types": "^0.2.36",
     "@shopify/jest-dom-mocks": "^5.0.0",
     "@sindresorhus/tsconfig": "^4.0.0",
-    "@sinonjs/fake-timers": "^11.0.0",
+    "@sinonjs/fake-timers": "^11.1.0",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-storyshots": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@svgr/webpack": "^8.0.1",
+    "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.3.76",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/src/pageEditor/tabs/editTab/editTabTypes.ts b/src/pageEditor/tabs/editTab/editTabTypes.ts
@@ -59,12 +59,13 @@ export type BrickNodeProps = BrickNodeContentProps &
   MoveBrickControlProps & {
     onClick?: () => void;
     active?: boolean;
-    parentIsActive?: boolean;
+    isParentActive?: boolean;
     onHoverChange: (hovered: boolean) => void;
     nestingLevel: number;
     hasSubPipelines?: boolean;
     collapsed?: boolean;
     nodeActions: NodeAction[];
     showBiggerActions?: boolean;
     trailingMessage?: string;
+    isSubPipelineHeaderActive?: boolean;
   };
diff --git a/src/pageEditor/tabs/editTab/editorNodeLayout/usePipelineNodes.tsx b/src/pageEditor/tabs/editTab/editorNodeLayout/usePipelineNodes.tsx
@@ -274,7 +274,8 @@ const usePipelineNodes = (): {
     lastIndex,
     isRootPipeline,
     showAppend,
-    parentIsActive,
+    isParentActive,
+    isAncestorActive,
     nestingLevel,
     extensionHasTraces: extensionHasTracesInput,
   }: {
@@ -286,13 +287,14 @@ const usePipelineNodes = (): {
     lastIndex: number;
     isRootPipeline: boolean;
     showAppend: boolean;
-    parentIsActive: boolean;
+    isParentActive: boolean;
+    isAncestorActive: boolean;
     nestingLevel: number;
     extensionHasTraces?: boolean;
   }): MapOutput {
     const nodes: EditorNodeProps[] = [];
     const block = allBlocks.get(blockConfig.id)?.block;
-    const nodeIsActive = blockConfig.instanceId === activeNodeId;
+    const isNodeActive = blockConfig.instanceId === activeNodeId;
 
     const traceRecords = filterTracesByCall(
       traces.filter(
@@ -326,14 +328,23 @@ const usePipelineNodes = (): {
     const expanded = hasSubPipelines && !collapsed;
 
     const onClick = () => {
-      if (nodeIsActive) {
-        if (hasSubPipelines) {
-          dispatch(
-            actions.toggleCollapseBrickPipelineNode(blockConfig.instanceId)
-          );
+      if (activeNodePreviewElementId) {
+        dispatch(actions.setNodePreviewActiveElement(null));
+
+        if (isNodeActive) {
+          return;
         }
-      } else {
+      }
+
+      if (!isNodeActive) {
         setActiveNodeId(blockConfig.instanceId);
+        return;
+      }
+
+      if (hasSubPipelines) {
+        dispatch(
+          actions.toggleCollapseBrickPipelineNode(blockConfig.instanceId)
+        );
       }
     };
 
@@ -426,22 +437,32 @@ const usePipelineNodes = (): {
       };
     }
 
+    const isSubPipelineHeaderActive =
+      activeNodePreviewElementId === null
+        ? false
+        : subPipelines.some(
+            ({ path }) =>
+              activeNodePreviewElementId ===
+              getNodePreviewElementId(blockConfig, path)
+          );
+
     const restBrickNodeProps: Except<
       BrickNodeProps,
       keyof BrickNodeContentProps
     > = {
       onClickMoveUp,
       onClickMoveDown,
       onClick,
-      active: nodeIsActive,
+      active: !isSubPipelineHeaderActive && isNodeActive,
       onHoverChange,
-      parentIsActive,
+      isParentActive,
       nestingLevel,
       hasSubPipelines,
       collapsed,
       nodeActions: expanded ? [] : brickNodeActions,
       showBiggerActions,
       trailingMessage,
+      isSubPipelineHeaderActive,
     };
 
     nodes.push({
@@ -462,6 +483,10 @@ const usePipelineNodes = (): {
         const headerName = `${nodeId}-header`;
         const fullSubPath = joinPathParts(pipelinePath, index, path);
         const nodePreviewElementId = getNodePreviewElementId(blockConfig, path);
+        const isHeaderNodeActive =
+          activeNodePreviewElementId &&
+          nodePreviewElementId === activeNodePreviewElementId;
+        const isSiblingHeaderActive = isSubPipelineHeaderActive;
 
         const headerActions: NodeAction[] = [
           {
@@ -496,8 +521,9 @@ const usePipelineNodes = (): {
           nestingLevel,
           nodeActions: headerActions,
           pipelineInputKey: inputKey,
-          active: nodeIsActive,
-          nestedActive: parentIsActive,
+          active: isHeaderNodeActive,
+          isParentActive: !isSiblingHeaderActive && isNodeActive,
+          isAncestorActive: !isSiblingHeaderActive && isParentActive,
           nodePreviewElement: nodePreviewElementId
             ? {
                 name: nodePreviewElementId,
@@ -528,7 +554,12 @@ const usePipelineNodes = (): {
           flavor,
           pipelinePath: fullSubPath,
           nestingLevel: nestingLevel + 1,
-          parentIsActive: nodeIsActive || parentIsActive,
+          isParentActive: isSiblingHeaderActive
+            ? isHeaderNodeActive
+            : isNodeActive || isParentActive,
+          isAncestorActive: isSiblingHeaderActive
+            ? isHeaderNodeActive
+            : isParentActive || isAncestorActive,
         });
 
         nodes.push(
@@ -549,8 +580,8 @@ const usePipelineNodes = (): {
         showBiggerActions,
         trailingMessage,
         nestingLevel,
-        active: nodeIsActive,
-        nestedActive: parentIsActive,
+        active: !isSubPipelineHeaderActive && isNodeActive,
+        nestedActive: isParentActive,
         hovered,
         onHoverChange,
         onClick,
@@ -573,13 +604,15 @@ const usePipelineNodes = (): {
     flavor,
     pipelinePath = PIPELINE_BLOCKS_FIELD_NAME,
     nestingLevel = 0,
-    parentIsActive = false,
+    isParentActive = false,
+    isAncestorActive = false,
   }: {
     pipeline: BrickPipeline;
     flavor: PipelineFlavor;
     pipelinePath?: string;
     nestingLevel?: number;
-    parentIsActive?: boolean;
+    isParentActive?: boolean;
+    isAncestorActive?: boolean;
   }): MapOutput {
     const isRootPipeline = pipelinePath === PIPELINE_BLOCKS_FIELD_NAME;
     const lastIndex = pipeline.length - 1;
@@ -614,7 +647,8 @@ const usePipelineNodes = (): {
           lastIndex,
           isRootPipeline,
           showAppend,
-          parentIsActive,
+          isParentActive,
+          isAncestorActive,
           nestingLevel,
           extensionHasTraces,
         });

diff --git a/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.module.scss b/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.module.scss
@@ -24,24 +24,23 @@ $headerOffsetY: 0.5rem;
 $headerPipeLineHeight: 4px;
 
 .root {
-  display: flex;
-  border-bottom: 1px solid lightgrey;
+  background: $defaultHeaderColor;
   padding: 0;
+  display: flex;
+
+  &.parentNodeActive {
+    background: $activeHeaderColor;
+  }
+
+  &.ancestorActive {
+    background: $nestedActiveColor;
+  }
 }
 
 .header {
   flex-grow: 1;
   position: relative; // Allow children to position relative to this element
-  background: $defaultHeaderColor;
   padding: $headerOffsetY 0 0 $headerOffsetX;
-
-  &.active {
-    background-color: $activeHeaderColor;
-  }
-
-  &.nestedActive {
-    background-color: $nestedActiveColor;
-  }
 }
 
 .headerContent {
@@ -56,7 +55,6 @@ $headerPipeLineHeight: 4px;
 .documentPreviewIcon {
   margin-top: 2px;
   margin-right: 4px;
-  color: $bs-dark-grey;
 }
 
 .subPipelineLabel {
@@ -82,6 +80,10 @@ $headerPipeLineHeight: 4px;
   width: $pipeLineOffset;
   height: $headerPipeLineHeight;
   border-right: $pipeLineBorderWidth solid black;
+
+  &.active {
+    border-color: white;
+  }
 }
 
 .headerPipeLineBottom {
@@ -91,4 +93,8 @@ $headerPipeLineHeight: 4px;
   width: $pipeLineOffset;
   height: $headerPipeLineHeight;
   border-right: $pipeLineBorderWidth solid black;
+
+  &.active {
+    border-color: white;
+  }
 }
diff --git a/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.tsx b/src/pageEditor/tabs/editTab/editorNodes/PipelineHeaderNode.tsx
@@ -39,7 +39,8 @@ export type PipelineHeaderNodeProps = {
   } | null;
   pipelineInputKey?: string;
   active?: boolean;
-  nestedActive?: boolean;
+  isParentActive?: boolean;
+  isAncestorActive?: boolean;
   isPipelineLoading: boolean;
 };
 
@@ -49,7 +50,8 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
   nodeActions,
   pipelineInputKey,
   active,
-  nestedActive,
+  isParentActive,
+  isAncestorActive,
   nodePreviewElement,
   isPipelineLoading,
 }) => {
@@ -88,25 +90,27 @@ const PipelineHeaderNode: React.VFC<PipelineHeaderNodeProps> = ({
   return (
     <>
       <ListGroup.Item
+        active={active}
         className={cx(styles.root, {
           [styles.clickable]: Boolean(nodePreviewElement),
+          [styles.parentNodeActive]: isParentActive,
+          [styles.ancestorActive]: isAncestorActive,
         })}
         onClick={nodePreviewElement?.focus}
         ref={nodeRef}
       >
-        <PipelineOffsetView
-          nestingLevel={nestingLevel}
-          nestedActive={active || nestedActive} // Color for this offset-view is chosen using the header flag
-          isHeader={!nestedActive} // Don't color deeply-nested pipeline headers as active headers
-        />
-        <div
-          className={cx(styles.header, {
-            [styles.active]: active,
-            [styles.nestedActive]: nestedActive,
-          })}
-        >
-          <div className={styles.headerPipeLineTop} />
-          <div className={styles.headerPipeLineBottom} />
+        <PipelineOffsetView nestingLevel={nestingLevel} active={active} />
+        <div className={styles.header}>
+          <div
+            className={cx(styles.headerPipeLineTop, {
+              [styles.active]: active,
+            })}
+          />
+          <div
+            className={cx(styles.headerPipeLineBottom, {
+              [styles.active]: active,
+            })}
+          />
           <div className={styles.headerContent}>
             <div className={styles.labelAndInputKey}>
               <div className={styles.subPipelineLabel}>{headerLabel}</div>

diff --git a/src/pageEditor/tabs/editTab/editorNodes/PipelineOffsetView.module.scss b/src/pageEditor/tabs/editTab/editorNodes/PipelineOffsetView.module.scss
@@ -22,20 +22,9 @@
   border-right: $pipeLineBorderWidth solid black;
   flex-shrink: 0;
   flex-grow: 0;
+  background-color: transparent;
 
   &.active {
     border-color: white;
   }
-
-  &.nestedActive {
-    background-color: $nestedActiveColor;
-  }
-
-  &.isHeader {
-    background-color: $defaultHeaderColor;
-
-    &.nestedActive {
-      background-color: $activeHeaderColor;
-    }
-  }
 }