🪟 🐛 Fix ResizablePanel component (#22214)

airbytehq · Feb 2, 2023 · bb12599 · bb12599
1 parent 29cbc0a
commit bb12599
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 31 deletions.
diff --git a/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.module.scss b/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.module.scss
@@ -71,8 +71,17 @@
   height: 3px;
 }
 
+.fullWidth {
+  // Overwrite the flex-grow set by the react-reflex to stretch a container to full width
+  flex-grow: 1 !important;
+}
+
 .splitter {
   // !important is necessary to override the default reflex styles
   border: 0 !important;
   background-color: transparent !important;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx b/airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx
@@ -75,7 +75,7 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
   return (
     <ReflexContainer className={className} orientation={orientation}>
       <ReflexElement
-        className={classNames(styles.panelStyle, firstPanel.className)}
+        className={classNames(styles.panelStyle, firstPanel.className, { [styles.fullWidth]: hideSecondPanel })}
         propagateDimensions
         minSize={firstPanel.minWidth}
         flex={firstPanel.flex}
@@ -85,37 +85,34 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
       >
         <PanelContainer overlay={firstPanel.overlay}>{firstPanel.children}</PanelContainer>
       </ReflexElement>
-      {/* NOTE: ReflexElement will not load its contents if wrapped in an empty jsx tag along with ReflexSplitter.  They must be evaluated/rendered separately. */}
-      {!hideSecondPanel && (
-        <ReflexSplitter className={styles.splitter}>
+      <ReflexSplitter className={classNames(styles.splitter, { [styles.hidden]: hideSecondPanel })}>
+        <div
+          className={classNames({
+            [styles.panelGrabberVertical]: orientation === "vertical",
+            [styles.panelGrabberHorizontal]: orientation === "horizontal",
+          })}
+        >
           <div
-            className={classNames({
-              [styles.panelGrabberVertical]: orientation === "vertical",
-              [styles.panelGrabberHorizontal]: orientation === "horizontal",
+            className={classNames(styles.handleIcon, {
+              [styles.handleIconVertical]: orientation === "vertical",
+              [styles.handleIconHorizontal]: orientation === "horizontal",
             })}
-          >
-            <div
-              className={classNames(styles.handleIcon, {
-                [styles.handleIconVertical]: orientation === "vertical",
-                [styles.handleIconHorizontal]: orientation === "horizontal",
-              })}
-            />
-          </div>
-        </ReflexSplitter>
-      )}
-      {!hideSecondPanel && (
-        <ReflexElement
-          className={classNames(styles.panelStyle, secondPanel.className)}
-          propagateDimensions
-          minSize={secondPanel.minWidth}
-          flex={secondPanel.flex}
-          onStopResize={(args) => {
-            secondPanel.onStopResize?.(args.component.props.flex);
-          }}
-        >
-          <PanelContainer overlay={secondPanel.overlay}>{secondPanel.children}</PanelContainer>
-        </ReflexElement>
-      )}
+          />
+        </div>
+      </ReflexSplitter>
+      <ReflexElement
+        className={classNames(styles.panelStyle, secondPanel.className, {
+          [styles.hidden]: hideSecondPanel,
+        })}
+        propagateDimensions
+        minSize={secondPanel.minWidth}
+        flex={secondPanel.flex}
+        onStopResize={(args) => {
+          secondPanel.onStopResize?.(args.component.props.flex);
+        }}
+      >
+        {!hideSecondPanel && <PanelContainer overlay={secondPanel.overlay}>{secondPanel.children}</PanelContainer>}
+      </ReflexElement>
     </ReflexContainer>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx b/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx
@@ -44,7 +44,7 @@ export const StepsIndicator: React.FC<StepsIndicatorProps> = ({ className, steps
   return (
     <div className={classNames(className, styles.steps)}>
       {steps.map((step, index) => (
-        <StepIndicator step={step} isCurrent={activeStep === step.id} isCompleted={index < activeIndex} />
+        <StepIndicator key={step.id} step={step} isCurrent={activeStep === step.id} isCompleted={index < activeIndex} />
       ))}
     </div>
   );