Skip to content

[WEB-2725] chore: app sidebar add issue button improvement #5921

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

Merged
pushya22 merged 1 commit into from
Oct 29, 2024
Merged

[WEB-2725] chore: app sidebar add issue button improvement #5921

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: 13 additions & 48 deletions web/core/components/workspace/sidebar/quick-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,62 +73,27 @@ export const SidebarQuickActions = observer(() => {
"flex-col gap-0": isSidebarCollapsed,
})}
>
<div
<button
type="button"
className={cn(
"relative flex-grow flex items-center justify-between gap-1 rounded h-8 hover:bg-custom-sidebar-background-90",
"relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90",
{
"size-8 aspect-square": isSidebarCollapsed,
"justify-center size-8 aspect-square": isSidebarCollapsed,
"cursor-not-allowed opacity-50 ": disabled,
"px-3 border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
}
)}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
toggleCreateIssueModal(true);
}}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
Comment on lines 90 to 91
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Remove unused mouse event handlers

These handlers appear to be related to the removed draft feature and are no longer needed.

-  onMouseEnter={handleMouseEnter}
-  onMouseLeave={handleMouseLeave}

Also remove the related handleMouseEnter, handleMouseLeave functions and timeoutRef.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}

disabled={disabled}
>
<button
type="button"
className={cn(
"relative flex flex-shrink-0 flex-grow items-center gap-2 text-custom-sidebar-text-300 rounded outline-none",
{
"justify-center": isSidebarCollapsed,
"cursor-not-allowed opacity-50": disabled,
}
)}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
toggleCreateIssueModal(true);
}}
disabled={disabled}
>
<PenSquare className="size-4" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
</button>
{/* {!disabled && workspaceDraftIssue && (
<>
{!isSidebarCollapsed && (
<button type="button" className="grid place-items-center">
<ChevronUp
className={cn("size-4 transform !text-custom-sidebar-text-300 transition-transform duration-300", {
"rotate-180": isDraftButtonOpen,
})}
/>
</button>
)}
{isDraftButtonOpen && (
<div className="absolute mt-0 h-10 w-[220px] pt-2 z-[16] top-8 left-0">
<div className="h-full w-full">
<button
onClick={() => setIsDraftIssueModalOpen(true)}
className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
>
<PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
Last drafted issue
</button>
</div>
</div>
)}
</>
)} */}
</div>
<PenSquare className="size-4" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
</button>
Comment on lines +76 to +96
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Enhance accessibility with ARIA attributes and tooltip

The conversion to a semantic button element is great for accessibility. Consider these additional improvements:

 <button
   type="button"
+  aria-label={isSidebarCollapsed ? "New issue" : undefined}
+  title={disabled ? "You need to join a project or have proper permissions to create issues" : "Create new issue"}
   className={cn(
     "relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90",
     {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button
type="button"
className={cn(
"relative flex-grow flex items-center justify-between gap-1 rounded h-8 hover:bg-custom-sidebar-background-90",
"relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90",
{
"size-8 aspect-square": isSidebarCollapsed,
"justify-center size-8 aspect-square": isSidebarCollapsed,
"cursor-not-allowed opacity-50 ": disabled,
"px-3 border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
}
)}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
toggleCreateIssueModal(true);
}}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
disabled={disabled}
>
<button
type="button"
className={cn(
"relative flex flex-shrink-0 flex-grow items-center gap-2 text-custom-sidebar-text-300 rounded outline-none",
{
"justify-center": isSidebarCollapsed,
"cursor-not-allowed opacity-50": disabled,
}
)}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
toggleCreateIssueModal(true);
}}
disabled={disabled}
>
<PenSquare className="size-4" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
</button>
{/* {!disabled && workspaceDraftIssue && (
<>
{!isSidebarCollapsed && (
<button type="button" className="grid place-items-center">
<ChevronUp
className={cn("size-4 transform !text-custom-sidebar-text-300 transition-transform duration-300", {
"rotate-180": isDraftButtonOpen,
})}
/>
</button>
)}
{isDraftButtonOpen && (
<div className="absolute mt-0 h-10 w-[220px] pt-2 z-[16] top-8 left-0">
<div className="h-full w-full">
<button
onClick={() => setIsDraftIssueModalOpen(true)}
className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
>
<PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
Last drafted issue
</button>
</div>
</div>
)}
</>
)} */}
</div>
<PenSquare className="size-4" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
</button>
<button
type="button"
aria-label={isSidebarCollapsed ? "New issue" : undefined}
title={disabled ? "You need to join a project or have proper permissions to create issues" : "Create new issue"}
className={cn(
"relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90",
{
"justify-center size-8 aspect-square": isSidebarCollapsed,
"cursor-not-allowed opacity-50 ": disabled,
"px-3 border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
}
)}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
toggleCreateIssueModal(true);
}}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
disabled={disabled}
>
<PenSquare className="size-4" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
</button>

<button
className={cn(
"flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
Expand Down