From 2ce4e454c24d664e97972edbb98e3deed2623af6 Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Fri, 8 Jul 2022 13:29:33 -0400
Subject: [PATCH] popout menu gets hover state when open

---
 airbyte-webapp/src/components/base/Popout/Popout.tsx  | 10 +++++++---
 .../packages/cloud/views/layout/SideBar/SideBar.tsx   | 11 +++++------
 .../src/views/layout/SideBar/SideBar.module.scss      |  5 +++++
 airbyte-webapp/src/views/layout/SideBar/SideBar.tsx   |  8 ++++++--
 .../views/layout/SideBar/components/SidebarPopout.tsx |  9 +++++++--
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/airbyte-webapp/src/components/base/Popout/Popout.tsx b/airbyte-webapp/src/components/base/Popout/Popout.tsx
index 915501ca19b6..28053686cab3 100644
--- a/airbyte-webapp/src/components/base/Popout/Popout.tsx
+++ b/airbyte-webapp/src/components/base/Popout/Popout.tsx
@@ -22,14 +22,15 @@ const ControlComponent = (props: ControlProps<Value, false>) => (
   <div ref={props.innerRef}>
     {props.selectProps.selectProps.targetComponent({
       onOpen: props.selectProps.selectProps.onOpen,
+      isOpen: props.selectProps.menuIsOpen,
       value: props.selectProps.value,
     })}
   </div>
 );
 
-type PopoutProps = DropdownProps & {
+interface PopoutProps extends DropdownProps {
   targetComponent: (props: { onOpen: () => void; isOpen?: boolean; value: Value }) => ReactNode;
-};
+}
 
 const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
   const [isOpen, toggleOpen] = useToggle(false);
@@ -61,7 +62,10 @@ const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props })
   return (
     <>
       <DropDown
-        selectProps={{ targetComponent, onOpen: toggleOpen }}
+        selectProps={{
+          targetComponent,
+          onOpen: toggleOpen,
+        }}
         autoFocus
         backspaceRemovesValue={false}
         controlShouldRenderValue={false}
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
index f754ed965796..aa3e24384812 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -23,10 +23,9 @@ import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
 import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
-import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar";
+import { useCalculateSidebarStyles, getPopoutStyles } from "views/layout/SideBar/SideBar";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
-import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; // eslint-disable-line
 
 const CreditsIcon = styled(FontAwesomeIcon)`
   font-size: 21px;
@@ -140,8 +139,8 @@ const SideBar: React.FC = () => {
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
@@ -167,8 +166,8 @@ const SideBar: React.FC = () => {
               },
             ]}
           >
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
                 <Text>
                   <FormattedMessage id="sidebar.support" />
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
index 181acc9136e6..ce6754aa1d73 100644
--- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -47,4 +47,9 @@
       background: colors.$dark-blue-400;
     }
   }
+
+  &.popoutOpen {
+    background: colors.$dark-blue-600;
+    transition: variables.$transition-out;
+  }
 }
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
index ad85cb5959b2..893a6c65fbe6 100644
--- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
@@ -64,6 +64,10 @@ export const useCalculateSidebarStyles = () => {
   return ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive);
 };
 
+export const getPopoutStyles = (isOpen?: boolean) => {
+  return classnames(styles.menuItem, { [styles.popoutOpen]: isOpen });
+};
+
 const SideBar: React.FC = () => {
   const config = useConfig();
   const workspace = useCurrentWorkspace();
@@ -124,8 +128,8 @@ const SideBar: React.FC = () => {
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <div className={styles.menuItem} onClick={onOpen}>
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
index 6bd93af12a3b..842732987692 100644
--- a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
@@ -29,7 +29,7 @@ export const Icon = styled.div`
 `;
 
 const SidebarPopout: React.FC<{
-  children: (props: { onOpen: () => void }) => React.ReactNode;
+  children: (props: { onOpen: () => void; isOpen?: boolean }) => React.ReactNode;
   options: Array<{ value: string; label?: React.ReactNode }>;
 }> = ({ children, options }) => {
   const config = useConfig();
@@ -110,7 +110,12 @@ const SidebarPopout: React.FC<{
 
   return (
     <Popout
-      targetComponent={(targetProps) => children({ onOpen: targetProps.onOpen })}
+      targetComponent={(targetProps) =>
+        children({
+          onOpen: targetProps.onOpen,
+          isOpen: targetProps.isOpen,
+        })
+      }
       styles={{
         menuPortal: (base) => ({
           ...base,