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

[WEB-2221] fix: app sidebar and favorites improvement (#5357)

Browse source 
* fix: project collapsible toggle

* fix: project favorite redirection

* chore: favorite redirection scroll into view implementation

* fix: use favorite item details project details
This commit is contained in:
Anmol Singh Bhatia 2024-08-14 12:53:53 +05:30 • committed by GitHub
parent edb04a33fd
commit d9c9d85d38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
View file

@ -3,6 +3,7 @@ import React, { FC } from "react";
import Link from "next/link";
type Props = {
projectId: string | null;
href: string;
title: string;
icon: JSX.Element;
@ -10,14 +11,21 @@ type Props = {
};
export const FavoriteItemTitle: FC<Props> = (props) => {
const { href, title, icon, isSidebarCollapsed } = props;
const { projectId, href, title, icon, isSidebarCollapsed } = props;
const linkClass = "flex items-center gap-1.5 truncate w-full";
const collapsedClass =
"group/project-item cursor-pointer relative group w-full flex items-center justify-center gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90 truncate p-0 size-8 aspect-square mx-auto";
const handleOnClick = () => {
if (projectId) {
const projectItem = document.getElementById(`${projectId}`);
projectItem?.scrollIntoView({ behavior: "smooth" });
}
};
return (
<Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable>
<Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
<span className="flex items-center justify-center size-5">{icon}</span>
{!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
</Link>

2
web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
View file

@ -44,6 +44,6 @@ const entityPaths: Record<string, string> = {
export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => {
const entityPath = entityPaths[favorite.entity_type];
return entityPath
? `/${workspaceSlug}/projects/${favorite.project_id}/${entityPath}/${favorite.entity_identifier || ""}`
? `/${workspaceSlug}/projects/${favorite.project_id}/${entityPath}/${entityPath === "issues" ? "" : favorite.entity_identifier || ""}`
: `/${workspaceSlug}`;
};

8
web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
View file

@ -90,7 +90,13 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
<>
<FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive} sidebarCollapsed={sidebarCollapsed}>
{!sidebarCollapsed && <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />}
<FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} isSidebarCollapsed={!!sidebarCollapsed} />
<FavoriteItemTitle
href={itemLink}
projectId={favorite.project_id}
icon={itemIcon}
title={itemTitle}
isSidebarCollapsed={!!sidebarCollapsed}
/>
{!sidebarCollapsed && (
<FavoriteItemQuickAction
favorite={favorite}

2
web/core/components/workspace/sidebar/projects-list-item.tsx
View file

@ -269,6 +269,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
useEffect(() => {
if (URLProjectId === project.id) setIsProjectListOpen(true);
else setIsProjectListOpen(false);
}, [URLProjectId]);
return (
@ -291,6 +292,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
"p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
}
)}
id={`${project?.id}`}
>
{!disableDrag && (
<Tooltip

4
web/core/hooks/use-favorite-item-details.tsx
View file

@ -13,7 +13,7 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
// store hooks
const { getViewById } = useProjectView();
const { currentProjectDetails } = useProject();
const { getProjectById } = useProject();
const { getCycleById } = useCycle();
const { getModuleById } = useModule();
@ -23,6 +23,8 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
const cycleDetail = getCycleById(favoriteItemId ?? "");
const moduleDetail = getModuleById(favoriteItemId ?? "");
const currentProjectDetails = getProjectById(favorite.project_id ?? "");
let itemIcon;
let itemTitle;
const itemLink = generateFavoriteItemLink(workspaceSlug.toString(), favorite);