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

fix: improve responsiveness of the canary UI #1501

Merged
merged 1 commit into from
Nov 14, 2023
Merged

fix: improve responsiveness of the canary UI #1501

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
61 changes: 55 additions & 6 deletions src/components/Canary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ import {
separateLabelsByBooleanType
} from "./labels";
import { decodeUrlSearchParams, useUpdateParams } from "./url";
import { IconButton } from "../IconButton";
import { FaFilter } from "react-icons/fa";

const FilterKeyToLabelMap = {
environment: "Environment",
Expand Down Expand Up @@ -74,6 +76,7 @@ export function Canary({
const tabBy = searchParams.get("tabBy");
const groupBy = searchParams.get("groupBy");
const refreshInterval = useRefreshRateFromLocalStorage();
const [isMenuItemOpen, setIsMenuItemOpen] = useState(false);

const [isLoading, setIsLoading] = useState(true);

Expand Down Expand Up @@ -217,10 +220,15 @@ export function Canary({
<div
className={clsx(
"flex flex-row place-content-center w-full",
isCanaryUI ? " h-screen overflow-y-auto" : "h-full overflow-y-auto"
isCanaryUI
? "h-screen min-w-[800px] overflow-auto"
: "h-full overflow-y-auto"
)}
>
<SidebarSticky>
<SidebarSticky
isMenuItemOpen={isMenuItemOpen}
setMenuItemOpen={setIsMenuItemOpen}
>
<div className="flex flex-col gap-4">
<StatCard
title="All Checks"
Expand Down Expand Up @@ -299,8 +307,17 @@ export function Canary({
</div>
</SidebarSticky>

<div className="flex flex-col h-full flex-grow p-6 max-w-7xl">
<div className="flex flex-col h-full overflow-y-auto flex-grow p-6 max-w-7xl">
<div className="flex flex-wrap mb-2">
<div className="w-auto flex items-center px-4 lg:hidden">
<IconButton
onClick={() => {
setIsMenuItemOpen((prev) => !prev);
}}
title="filter"
icon={<FaFilter />}
/>
</div>
<div className="flex-1">
<CanarySearchBar
onChange={(e) => handleSearch(e.target.value)}
Expand Down Expand Up @@ -630,20 +647,52 @@ type SidebarStickyProps = {
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
isMenuItemOpen?: boolean;
setMenuItemOpen?: (isOpen: boolean) => void;
};

function SidebarSticky({
className,
style,
children,
isMenuItemOpen = false,
setMenuItemOpen = () => {},
...props
}: SidebarStickyProps) {
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
function handleClickOutside(event: any) {
if (ref.current && !ref.current.contains(event.target)) {
setMenuItemOpen(false);
}
}

function keyPress(e: KeyboardEvent) {
if (e.key === "Escape") {
setMenuItemOpen(false);
}
}

document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", keyPress);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", keyPress);
};
}, [ref, setMenuItemOpen]);

return (
<div
className={
ref={ref}
className={clsx(
className ||
"flex flex-col h-full overflow-y-auto overflow-x-hidden w-80 border-r gap-4"
}
"lg:flex lg:flex-col h-full overflow-y-auto overflow-x-hidden w-80 border-r gap-4",
// for mobile, float the sidebar on top of the content
"top-0 left-0 fixed z-50 bg-white shadow-md lg:static lg:shadow-none lg:bg-transparent lg:border-none lg:w-auto lg:h-auto lg:overflow-y-auto lg:overflow-x-hidden lg:flex lg:flex-col lg:gap-4",
// for mobile, hide the sidebar when the menu is closed
isMenuItemOpen ? "flex" : "hidden"
)}
{...props}
>
<div
Expand Down
Loading