Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar headless UI menu #16333

Merged
merged 33 commits into from
Sep 22, 2022
Merged

Sidebar headless UI menu #16333

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
0ce16e0
Replaced sidebar menu with headlessui
matter-q Sep 2, 2022
9afa61d
Removed unnecessary tag li
matter-q Sep 2, 2022
cbd8379
Removed unnecessary Sidebar Popout
matter-q Sep 5, 2022
eac803e
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 5, 2022
6fa718c
Changed export type
matter-q Sep 5, 2022
77a9f28
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 6, 2022
8e27b07
Added keyboard support
matter-q Sep 7, 2022
87c0335
Removed styled-components
matter-q Sep 7, 2022
0e979cc
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 7, 2022
63b3cdd
Removed commented code
matter-q Sep 7, 2022
59f7f6b
Disabled ESLint rule css-modules/no-undef-class
matter-q Sep 8, 2022
58686c4
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 8, 2022
2244756
Review fixes
matter-q Sep 12, 2022
e4732af
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 12, 2022
9cf2cbb
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 12, 2022
d48ae79
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 12, 2022
cf70811
Fixed shorthand property
matter-q Sep 12, 2022
0002fde
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 13, 2022
49039c8
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 16, 2022
689d84f
Review fixes
matter-q Sep 16, 2022
5b13cea
Review fixes #2
matter-q Sep 16, 2022
ef9c35d
Review fixes #3
matter-q Sep 16, 2022
ccb2826
Review fixes #4
matter-q Sep 16, 2022
1cf690f
Review fixes #5
matter-q Sep 16, 2022
d0b408e
Review fixes #6
matter-q Sep 19, 2022
39b5977
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 19, 2022
906ae37
Review fixes #7
matter-q Sep 19, 2022
830a923
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 20, 2022
a3fa773
Update airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar…
Sep 20, 2022
ebb0f97
Update airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar…
Sep 20, 2022
4b1416c
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 22, 2022
682401f
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 22, 2022
dc10ac7
Merge branch 'master' into mark/sidebar-headless-ui-menu
matter-q Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@use "../../../../../scss/colors";
dizel852 marked this conversation as resolved.
Show resolved Hide resolved

.navBar {
z-index: 9999;
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 3px 15px 4px;
dizel852 marked this conversation as resolved.
Show resolved Hide resolved
text-align: center;
}

.menu {
width: 100%;
padding: 0;
margin: 20px 0 0;
}

.workspaceButton {
overflow: hidden;
cursor: pointer;
display: block;
height: 21px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
matter-q marked this conversation as resolved.
Show resolved Hide resolved
matter-q marked this conversation as resolved.
Show resolved Hide resolved
margin-top: 13px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's not critical to use 13px or 10px, I'd prefer the last one, since we have it in variables file

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ I'd bet we can use one of the variables

padding: 0 8px;
matter-q marked this conversation as resolved.
Show resolved Hide resolved
line-height: 21px;
font-size: 9px;
font-weight: 400;
matter-q marked this conversation as resolved.
Show resolved Hide resolved
color: colors.$white;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}

.text {
margin-top: 7px;
}
221 changes: 105 additions & 116 deletions airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,191 +1,180 @@
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 { useIntercom } from "react-use-intercom";
dizel852 marked this conversation as resolved.
Show resolved Hide resolved

import { Link } from "components";
import { CreditsIcon } from "components/icons/CreditsIcon";

import { FeatureItem, IfFeatureEnabled } from "hooks/services/Feature";
import { useCurrentWorkspace } from "hooks/services/useWorkspace";
import { CloudRoutes } from "packages/cloud/cloudRoutes";
import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService";
import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout";
import ChatIcon from "views/layout/SideBar/components/ChatIcon";
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 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, getPopoutStyles } from "views/layout/SideBar/SideBar";
import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar";

import { useConfig } from "../../../../../config";
dizel852 marked this conversation as resolved.
Show resolved Hide resolved
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 ChatIcon from "../../../../../views/layout/SideBar/components/ChatIcon";
import DocsIcon from "../../../../../views/layout/SideBar/components/DocsIcon";
import RecipesIcon from "../../../../../views/layout/SideBar/components/RecipesIcon";
import {
SidebarDropdownMenu,
SidebarDropdownMenuItemType,
} from "../../../../../views/layout/SideBar/components/SidebarDropdownMenu";
import StatusIcon from "../../../../../views/layout/SideBar/components/StatusIcon";
matter-q marked this conversation as resolved.
Show resolved Hide resolved
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.navBar}>
<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 }) => (
<div className={styles.workspaceButton} onClick={onOpen}>
{value}
</div>
)}
</WorkspacePopout>
<Menu>
<div className={styles.menu}>
{workspace.displaySetupWizard ? (
<li>
<div>
matter-q marked this conversation as resolved.
Show resolved Hide resolved
<NavLink className={navLinkClassName} to={RoutePaths.Onboarding}>
<OnboardingIcon />
<Text>
<span className={styles.text}>
<FormattedMessage id="sidebar.onboarding" />
</Text>
</span>
</NavLink>
</li>
</div>
) : null}
<li>
<div>
<NavLink className={navLinkClassName} to={RoutePaths.Connections}>
<ConnectionsIcon />
<Text>
<span className={styles.text}>
<FormattedMessage id="sidebar.connections" />
</Text>
</span>
</NavLink>
</li>
<li>
</div>
<div>
<NavLink className={navLinkClassName} to={RoutePaths.Source}>
<SourceIcon />
<Text>
<span className={styles.text}>
<FormattedMessage id="sidebar.sources" />
</Text>
</span>
</NavLink>
</li>
<li>
</div>
<div>
<NavLink className={navLinkClassName} to={RoutePaths.Destination}>
<DestinationIcon />
<Text>
<span className={styles.text}>
<FormattedMessage id="sidebar.destinations" />
</Text>
</span>
</NavLink>
</li>
</Menu>
</div>
</div>
</div>
<Menu>
<li>
<div className={styles.menu}>
<div>
<NavLink className={navLinkClassName} to={CloudRoutes.Credits}>
<CreditsIcon />
<Text>
<span className={styles.text}>
<FormattedNumber value={cloudWorkspace.remainingCredits} />
</Text>
</span>
</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>
</li>
<li>
<SidebarPopout
</div>
<div>
<SidebarDropdownMenu
options={[
{ value: "ticket" },
{
value: "chat",
label: (
<Item onClick={handleChatUs}>
<Icon>
<ChatIcon />
</Icon>
<FormattedMessage id="sidebar.chat" />
</Item>
),
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" />,
},
]}
>
<DocsIcon />
<span>
<FormattedMessage id="sidebar.resources" />
</span>
</SidebarDropdownMenu>
</div>
<div>
<SidebarDropdownMenu
options={[
{
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>
<FontAwesomeIcon icon={faQuestionCircle} size="2x" />
<span>
<FormattedMessage id="sidebar.support" />
</span>
</SidebarDropdownMenu>
</div>
<div>
<NavLink className={navLinkClassName} to={RoutePaths.Settings}>
<IfFeatureEnabled feature={FeatureItem.AllowUpdateConnectors}>
<React.Suspense fallback={null}>
<NotificationIndicator />
</React.Suspense>
</IfFeatureEnabled>
<SettingsIcon />
<Text>
<span className={styles.text}>
<FormattedMessage id="sidebar.settings" />
</Text>
</span>
</NavLink>
</li>
</Menu>
</Bar>
</div>
</div>
</nav>
);
};

Expand Down
34 changes: 29 additions & 5 deletions airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,35 @@
@use "../../../scss/colors";
@use "../../../scss/variables";

.navBar {
z-index: 9999;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have a z-indices.scss file where we are keeping track of these globally. Please add a new sidebar variable and import it here.

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 3px 15px 4px;
dizel852 marked this conversation as resolved.
Show resolved Hide resolved
text-align: center;
}

.menu {
width: 100%;
padding: 0;
margin: 20px 0 0;
}

.text {
margin-top: 7px;
}

.helpIcon {
font-size: 21px;
line-height: 21px;
}

.menuItem {
background-color: transparent;
appearance: none;
Expand Down Expand Up @@ -50,9 +79,4 @@
background: colors.$dark-blue-400;
}
}

&.popoutOpen {
background: colors.$dark-blue-600;
transition: variables.$transition-out;
}
}
Loading