Sidebar headless UI menu (#16333)

* Replaced sidebar menu with headlessui * Removed unnecessary tag li * Removed unnecessary Sidebar Popout * Changed export type * Added keyboard support * Removed styled-components * Removed commented code * Disabled ESLint rule css-modules/no-undef-class * Review fixes * Fixed shorthand property * Review fixes * Review fixes #2 * Review fixes #3 * Review fixes #4 * Review fixes #5 * Review fixes #6 * Review fixes #7 * Update airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss Co-authored-by: Vladimir <[email protected]> * Update airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss Co-authored-by: Vladimir <[email protected]> Co-authored-by: Vladimir <[email protected]>
airbytehq · Sep 22, 2022 · e685883 · e685883
1 parent e662cf0
commit e685883
Show file tree

Hide file tree

Showing 11 changed files with 336 additions and 297 deletions.
diff --git a/airbyte-webapp/.eslintrc b/airbyte-webapp/.eslintrc
@@ -19,7 +19,7 @@
   "rules": {
     "jsx-a11y/label-has-associated-control": "error",
     "curly": "warn",
-    "css-modules/no-undef-class": ["error", { "camelCase": true }],
+    "css-modules/no-undef-class": "off",
     "css-modules/no-unused-class": ["error", { "camelCase": true }],
     "dot-location": "warn",
     "dot-notation": "warn",

diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss
@@ -0,0 +1,26 @@
+@use "../../../../../scss/colors";
+@use "../../../../../scss/variables";
+@forward "../../../../../views/layout/SideBar/SideBar.module.scss";
+
+$sidebar-workspace-font-size: 9px;
+$sidebar-workspace-font-weight: 400;
+
+.workspaceButton {
+  overflow: hidden;
+  cursor: pointer;
+  display: block;
+  height: 21px;
+  width: 100%;
+  border: 0;
+  border-radius: variables.$border-radius-md;
+  background-color: rgba(255, 255, 255, 20%);
+  margin-top: variables.$spacing-md;
+  padding: 0 variables.$spacing-md;
+  font-size: $sidebar-workspace-font-size;
+  font-weight: $sidebar-workspace-font-weight;
+  color: colors.$white;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  outline: none;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -1,13 +1,16 @@
-import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
-import styled from "styled-components";
 
 import { Link } from "components";
+import { Text } from "components/base/Text";
 import { CreditsIcon } from "components/icons/CreditsIcon";
 
+import { useConfig } from "config";
 import { FeatureItem, IfFeatureEnabled } from "hooks/services/Feature";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
@@ -19,79 +22,44 @@ import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
 import DestinationIcon from "views/layout/SideBar/components/DestinationIcon";
 import DocsIcon from "views/layout/SideBar/components/DocsIcon";
 import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon";
+import RecipesIcon from "views/layout/SideBar/components/RecipesIcon";
 import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
-import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout";
+import { SidebarDropdownMenu, SidebarDropdownMenuItemType } from "views/layout/SideBar/components/SidebarDropdownMenu";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
+import StatusIcon from "views/layout/SideBar/components/StatusIcon";
 import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
-import { useCalculateSidebarStyles, getPopoutStyles } from "views/layout/SideBar/SideBar";
+import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
-
-const Bar = styled.nav`
-  width: 100px;
-  min-width: 65px;
-  height: 100%;
-  background: ${({ theme }) => theme.darkPrimaryColor};
-  padding: 23px 3px 15px 4px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  position: relative;
-  z-index: 9999;
-`;
-
-const Menu = styled.ul`
-  padding: 0;
-  margin: 20px 0 0;
-  width: 100%;
-`;
-
-const Text = styled.div`
-  margin-top: 7px;
-`;
-
-const WorkspaceButton = styled.div`
-  font-size: 9px;
-  line-height: 21px;
-  font-weight: 400;
-  height: 21px;
-  color: ${({ theme }) => theme.whiteColor};
-  border-radius: 10px;
-  margin-top: 13px;
-  background: rgba(255, 255, 255, 0.2);
-  cursor: pointer;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 8px;
-  text-align: center;
-`;
+import styles from "./SideBar.module.scss";
 
 const SideBar: React.FC = () => {
+  const navLinkClassName = useCalculateSidebarStyles();
   const workspace = useCurrentWorkspace();
   const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
+  const config = useConfig();
   const { show } = useIntercom();
   const handleChatUs = () => show();
 
-  const navLinkClassName = useCalculateSidebarStyles();
-
   return (
-    <Bar>
+    <nav className={styles.nav}>
       <div>
         <Link to={workspace.displaySetupWizard ? RoutePaths.Onboarding : RoutePaths.Connections}>
           <img src="/simpleLogo.svg" alt="logo" height={33} width={33} />
         </Link>
         <WorkspacePopout>
-          {({ onOpen, value }) => <WorkspaceButton onClick={onOpen}>{value}</WorkspaceButton>}
+          {({ onOpen, value }) => (
+            <button className={styles.workspaceButton} onClick={onOpen}>
+              {value}
+            </button>
+          )}
         </WorkspacePopout>
-        <Menu>
+        <ul className={styles.menu}>
           {workspace.displaySetupWizard ? (
             <li>
               <NavLink className={navLinkClassName} to={RoutePaths.Onboarding}>
                 <OnboardingIcon />
-                <Text>
+                <Text className={styles.text} size="sm">
                   <FormattedMessage id="sidebar.onboarding" />
                 </Text>
               </NavLink>
@@ -100,76 +68,90 @@ const SideBar: React.FC = () => {
           <li>
             <NavLink className={navLinkClassName} to={RoutePaths.Connections}>
               <ConnectionsIcon />
-              <Text>
+              <Text className={styles.text} size="sm">
                 <FormattedMessage id="sidebar.connections" />
               </Text>
             </NavLink>
           </li>
           <li>
             <NavLink className={navLinkClassName} to={RoutePaths.Source}>
               <SourceIcon />
-              <Text>
+              <Text className={styles.text} size="sm">
                 <FormattedMessage id="sidebar.sources" />
               </Text>
             </NavLink>
           </li>
           <li>
             <NavLink className={navLinkClassName} to={RoutePaths.Destination}>
               <DestinationIcon />
-              <Text>
+              <Text className={styles.text} size="sm">
                 <FormattedMessage id="sidebar.destinations" />
               </Text>
             </NavLink>
           </li>
-        </Menu>
+        </ul>
       </div>
-      <Menu>
+      <ul className={styles.menu}>
         <li>
           <NavLink className={navLinkClassName} to={CloudRoutes.Credits}>
             <CreditsIcon />
-            <Text>
+            <Text className={styles.text} size="sm">
               <FormattedNumber value={cloudWorkspace.remainingCredits} />
             </Text>
           </NavLink>
         </li>
         <li>
-          <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
-            {({ onOpen, isOpen }) => (
-              <button className={getPopoutStyles(isOpen)} onClick={onOpen}>
-                <DocsIcon />
-                <Text>
-                  <FormattedMessage id="sidebar.resources" />
-                </Text>
-              </button>
-            )}
-          </SidebarPopout>
+          <SidebarDropdownMenu
+            label={{ icon: <DocsIcon />, displayName: <FormattedMessage id="sidebar.resources" /> }}
+            options={[
+              {
+                type: SidebarDropdownMenuItemType.LINK,
+                href: config.links.docsLink,
+                icon: <DocsIcon />,
+                displayName: <FormattedMessage id="sidebar.documentation" />,
+              },
+              {
+                type: SidebarDropdownMenuItemType.LINK,
+                href: config.links.slackLink,
+                icon: <FontAwesomeIcon icon={faSlack} />,
+                displayName: <FormattedMessage id="sidebar.joinSlack" />,
+              },
+              {
+                type: SidebarDropdownMenuItemType.LINK,
+                href: config.links.statusLink,
+                icon: <StatusIcon />,
+                displayName: <FormattedMessage id="sidebar.status" />,
+              },
+              {
+                type: SidebarDropdownMenuItemType.LINK,
+                href: config.links.recipesLink,
+                icon: <RecipesIcon />,
+                displayName: <FormattedMessage id="sidebar.recipes" />,
+              },
+            ]}
+          />
         </li>
         <li>
-          <SidebarPopout
+          <SidebarDropdownMenu
+            label={{
+              icon: <FontAwesomeIcon icon={faQuestionCircle} size="2x" />,
+              displayName: <FormattedMessage id="sidebar.support" />,
+            }}
             options={[
-              { value: "ticket" },
               {
-                value: "chat",
-                label: (
-                  <Item onClick={handleChatUs}>
-                    <Icon>
-                      <ChatIcon />
-                    </Icon>
-                    <FormattedMessage id="sidebar.chat" />
-                  </Item>
-                ),
+                type: SidebarDropdownMenuItemType.LINK,
+                href: config.links.supportTicketLink,
+                icon: <FontAwesomeIcon icon={faEnvelope} />,
+                displayName: <FormattedMessage id="sidebar.supportTicket" />,
+              },
+              {
+                type: SidebarDropdownMenuItemType.BUTTON,
+                onClick: handleChatUs,
+                icon: <ChatIcon />,
+                displayName: <FormattedMessage id="sidebar.chat" />,
               },
             ]}
-          >
-            {({ onOpen, isOpen }) => (
-              <button className={getPopoutStyles(isOpen)} onClick={onOpen} role="menu">
-                <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
-                <Text>
-                  <FormattedMessage id="sidebar.support" />
-                </Text>
-              </button>
-            )}
-          </SidebarPopout>
+          />
         </li>
         <li>
           <NavLink className={navLinkClassName} to={RoutePaths.Settings}>
@@ -179,13 +161,13 @@ const SideBar: React.FC = () => {
               </React.Suspense>
             </IfFeatureEnabled>
             <SettingsIcon />
-            <Text>
+            <Text className={styles.text} size="sm">
               <FormattedMessage id="sidebar.settings" />
             </Text>
           </NavLink>
         </li>
-      </Menu>
-    </Bar>
+      </ul>
+    </nav>
   );
 };
 

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx
@@ -25,10 +25,8 @@ export const DiffAccordionHeader: React.FC<DiffAccordionHeaderProps> = ({
   newCount,
   changedCount,
 }) => {
-  // eslint-disable-next-line css-modules/no-undef-class
   const nameCellStyle = classnames(styles.nameCell, styles.row);
 
-  // eslint-disable-next-line css-modules/no-undef-class
   const namespaceCellStyles = classnames(styles.nameCell, styles.row, styles.namespace);
 
   const { formatMessage } = useIntl();

diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx
@@ -15,9 +15,7 @@ interface FieldSectionProps {
 export const FieldSection: React.FC<FieldSectionProps> = ({ streams, diffVerb }) => {
   const { formatMessage } = useIntl();
   return (
-    // eslint-disable-next-line css-modules/no-undef-class
     <div className={styles.sectionContainer}>
-      {/* eslint-disable-next-line css-modules/no-undef-class */}
       <div className={styles.fieldHeader}>
         <DiffHeader diffCount={streams.length} diffVerb={diffVerb} diffType="stream" />
       </div>

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx
@@ -94,8 +94,6 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
     [styles.purpleBackground]: isSelected,
     [styles.redBorder]: hasError,
   });
-  //  FIXME: find out why checkboxCell warns as unused
-  // eslint-disable-next-line css-modules/no-undef-class
   const checkboxCellCustomStyle = classnames(styles.checkboxCell, { [styles.streamRowCheckboxCell]: true });
 
   return (

diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -1,5 +1,40 @@
 @use "../../../scss/colors";
 @use "../../../scss/variables";
+@use "../../../scss/z-indices";
+
+.nav {
+  z-index: z-indices.$sidebar;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 100px;
+  min-width: 65px;
+  background-color: colors.$dark-blue;
+  padding: 23px 4px 15px;
+  text-align: center;
+}
+
+.text {
+  margin-top: 7px;
+  color: colors.$white;
+}
+
+.helpIcon {
+  font-size: 21px;
+  line-height: 21px;
+}
+
+.menu {
+  width: 100%;
+  padding: 0;
+  margin: variables.$spacing-xl 0 0;
+
+  li {
+    margin-top: 7px;
+  }
+}
 
 .menuItem {
   background-color: transparent;
@@ -17,7 +52,6 @@
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
-  margin-top: 7px;
   text-decoration: none;
   position: relative;
 
@@ -50,9 +84,4 @@
       background: colors.$dark-blue-400;
     }
   }
-
-  &.popoutOpen {
-    background: colors.$dark-blue-600;
-    transition: variables.$transition-out;
-  }
 }