binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[ENG-37] chore: sidebar help section revamp. (#5495)

Browse source 
* [ENG-37] chore: sidebar help section revamp.

* fix: lint error.
This commit is contained in:
Prateek Shourya 2024-09-02 21:29:09 +05:30 • committed by GitHub
parent e9f486eec6
commit a11c12cd7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 132 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/app/[workspaceSlug]/(projects)/header.tsx
View file

@ -2,7 +2,7 @@
import Image from "next/image";
import { useTheme } from "next-themes";
import { Home, Zap } from "lucide-react";
import { Home } from "lucide-react";
// images
import githubBlackImage from "/public/logos/github-black.png";
import githubWhiteImage from "/public/logos/github-white.png";
@ -11,7 +11,7 @@ import { Breadcrumbs } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// constants
import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-tracker";
import { GITHUB_REDIRECTED } from "@/constants/event-tracker";
// hooks
import { useEventTracker } from "@/hooks/store";
@ -34,20 +34,6 @@ export const WorkspaceDashboardHeader = () => {
</div>
</div>
<div className="flex items-center gap-3 px-3">
<a
onClick={() =>
captureEvent(CHANGELOG_REDIRECTED, {
element: "navbar",
})
}
href="https://plane.so/changelog"
target="_blank"
rel="noopener noreferrer"
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
>
<Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
<span className="hidden text-xs font-medium sm:hidden md:block">{"What's new?"}</span>
</a>
<a
onClick={() =>
captureEvent(GITHUB_REDIRECTED, {

2
web/ce/components/global/index.ts
View file

@ -1 +1,3 @@
export * from "./version-number";
export * from "./product-updates";
export * from "./product-updates-modal";

9
web/ce/components/global/product-updates-modal.tsx Normal file
View file

@ -0,0 +1,9 @@
import { FC } from "react";
import { observer } from "mobx-react";
export type ProductUpdatesModalProps = {
isOpen: boolean;
handleClose: () => void;
};
export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer(() => <></>);

21
web/ce/components/global/product-updates.tsx Normal file
View file

@ -0,0 +1,21 @@
import { FC } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
// ui
import { CustomMenu } from "@plane/ui";
export type ProductUpdatesProps = {
setIsChangeLogOpen: (isOpen: boolean) => void;
};
export const ProductUpdates: FC<ProductUpdatesProps> = observer(() => (
<CustomMenu.MenuItem>
<Link
href="https://go.plane.so/p-changelog"
target="_blank"
className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
>
<span className="text-xs">What&apos;s new?</span>
</Link>
</CustomMenu.MenuItem>
));

2
web/ce/components/workspace/edition-badge.tsx
View file

@ -24,7 +24,7 @@ export const WorkspaceEditionBadge = observer(() => {
<Button
tabIndex={-1}
variant="accent-primary"
className="w-full cursor-pointer rounded-2xl px-4 py-1.5 text-center text-sm font-medium outline-none"
className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
>
Upgrade

209
web/core/components/workspace/sidebar/help-section.tsx
View file

@ -1,40 +1,20 @@
"use client";
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
import { Transition } from "@headlessui/react";
import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
// ui
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
import { CustomMenu, Tooltip } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useCommandPalette, useInstance, useTransient } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";
// components
import { PlaneVersionNumber } from "@/plane-web/components/global";
// plane web components
import { PlaneVersionNumber, ProductUpdates, ProductUpdatesModal } from "@/plane-web/components/global";
import { WorkspaceEditionBadge } from "@/plane-web/components/workspace";
const HELP_OPTIONS = [
{
name: "Documentation",
href: "https://docs.plane.so/",
Icon: FileText,
},
{
name: "Join our Discord",
href: "https://discord.com/invite/A92xrEGCge",
Icon: DiscordIcon,
},
{
name: "Report a bug",
href: "https://github.com/makeplane/plane/issues/new/choose",
Icon: GithubIcon,
},
];
export interface WorkspaceHelpSectionProps {
setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
}
@ -48,125 +28,130 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
const { isIntercomToggle, toggleIntercom } = useTransient();
// states
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
// refs
const helpOptionsRef = useRef<HTMLDivElement | null>(null);
const [isChangeLogOpen, setIsChangeLogOpen] = useState(false);
const handleCrispWindowShow = () => {
toggleIntercom(!isIntercomToggle);
};
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const isCollapsed = sidebarCollapsed || false;
return (
<>
<ProductUpdatesModal isOpen={isChangeLogOpen} handleClose={() => setIsChangeLogOpen(false)} />
<div
className={cn(
"flex w-full items-center justify-between px-4 gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-14 flex-shrink-0",
"flex w-full items-center justify-between px-2 gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0",
{
"flex-col h-auto py-1.5": isCollapsed,
}
)}
>
<div
className={cn("w-3/5", {
className={`relative flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
>
<CustomMenu
customButton={
<button
type="button"
className={cn(
"grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
{
"bg-custom-background-90": isNeedHelpOpen,
}
)}
>
<Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
<HelpCircle className="h-[18px] w-[18px] outline-none" />
</Tooltip>
</button>
}
customButtonClassName={`relative grid place-items-center rounded-md p-1.5 outline-none ${isCollapsed ? "w-full" : ""}`}
menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
onMenuClose={() => setIsNeedHelpOpen(false)}
placement={isCollapsed ? "left-end" : "top-end"}
maxHeight="lg"
closeOnSelect
>
<CustomMenu.MenuItem>
<Link
href="https://go.plane.so/p-docs"
target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
>
<FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
<span className="text-xs">Documentation</span>
</Link>
</CustomMenu.MenuItem>
{config?.intercom_app_id && config?.is_intercom_enabled && (
<CustomMenu.MenuItem>
<button
type="button"
onClick={handleCrispWindowShow}
className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
>
<MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
<span className="text-xs">Message support</span>
</button>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem>
<Link
href="mailto:sales@plane.so"
target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
>
<User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
<span className="text-xs">Contact sales</span>
</Link>
</CustomMenu.MenuItem>
<div className="my-1 border-t border-custom-border-200" />
<CustomMenu.MenuItem>
<button
type="button"
onClick={() => toggleShortcutModal(true)}
className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
>
<span className="text-xs">Keyboard shortcuts</span>
</button>
</CustomMenu.MenuItem>
<ProductUpdates setIsChangeLogOpen={setIsChangeLogOpen} />
<CustomMenu.MenuItem>
<Link
href="https://go.plane.so/p-discord"
target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
>
<span className="text-xs">Community</span>
</Link>
</CustomMenu.MenuItem>
<div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
<PlaneVersionNumber />
</div>
</CustomMenu>
</div>
<div
className={cn("w-full flex-grow px-0.5", {
hidden: isCollapsed,
})}
>
<WorkspaceEditionBadge />
</div>
<div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-2/5 justify-evenly"}`}>
<Tooltip tooltipContent="Shortcuts" isMobile={isMobile}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleShortcutModal(true)}
>
<Zap className="h-3.5 w-3.5" />
</button>
</Tooltip>
<Tooltip tooltipContent="Help" isMobile={isMobile}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
>
<HelpCircle className="h-3.5 w-3.5" />
</button>
</Tooltip>
<button
type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
onClick={() => toggleSidebar()}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<div
className={`flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
>
<Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
<button
type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
className={`grid place-items-center rounded-md p-1 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
<MoveLeft className={`h-4 w-4 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button>
</Tooltip>
</div>
<div className="relative">
<Transition
show={isNeedHelpOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div
className={`absolute bottom-2 min-w-[10rem] z-[15] ${
isCollapsed ? "left-full" : "-left-[75px]"
} divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
ref={helpOptionsRef}
>
<div className="space-y-1 pb-2">
{HELP_OPTIONS.map(({ name, Icon, href }) => (
<Link href={href} key={name} target="_blank">
<span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
<div className="grid flex-shrink-0 place-items-center">
<Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
</div>
<span className="text-xs">{name}</span>
</span>
</Link>
))}
{config?.intercom_app_id && config?.is_intercom_enabled && (
<button
type="button"
onClick={handleCrispWindowShow}
className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
>
<div className="grid flex-shrink-0 place-items-center">
<MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
</div>
<span className="text-xs">Chat with us</span>
</button>
)}
</div>
<div className="px-2 pb-1 pt-2 text-[10px]">
<PlaneVersionNumber />
</div>
</div>
</Transition>
</div>
</div>
</>
);