From 81d4eb0d65e193b62b0b816987fa26df67eabab9 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Mon, 28 Jul 2025 12:41:26 -0300
Subject: [PATCH] fix: prevent unintentional sidebar text selection (#8895)

* fix(frontend): make entire sidebar non-selectable, clean up redundant select-none, keep cursor-default on headers/labels

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
---
 src/frontend/src/App.css                                    | 6 ++++++
 .../flowSidebarComponent/components/bundleItems/index.tsx   | 2 +-
 .../components/categoryDisclouse/index.tsx                  | 2 +-
 .../components/featureTogglesComponent/index.tsx            | 2 +-
 .../components/sidebarBundles/index.tsx                     | 4 +++-
 .../flowSidebarComponent/components/sidebarHeader/index.tsx | 4 +++-
 .../FlowPage/components/flowSidebarComponent/index.tsx      | 2 +-
 7 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 3587b406f..afa8ed80f 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -217,3 +217,9 @@ code {
 .cm-gutters {
   display: none !important;
 }
+
+.user-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
index b1ab1576a..c1825db1a 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/bundleItems/index.tsx
@@ -48,7 +48,7 @@ export const BundleItem = memo(
               <div
                 tabIndex={0}
                 onKeyDown={(e) => handleKeyDownInput(e, item.name)}
-                className="flex cursor-pointer items-center gap-2"
+                className="user-select-none flex cursor-pointer items-center gap-2"
                 data-testid={`disclosure-bundles-${item.display_name.toLowerCase()}`}
               >
                 <ForwardedIconComponent
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
index 4960f645d..f1d7db283 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse/index.tsx
@@ -61,7 +61,7 @@ export const CategoryDisclosure = memo(function CategoryDisclosure({
               data-testid={`disclosure-${item.display_name.toLocaleLowerCase()}`}
               tabIndex={0}
               onKeyDown={handleKeyDownInput}
-              className="flex cursor-pointer items-center gap-2"
+              className="user-select-none flex cursor-pointer items-center gap-2"
             >
               <ForwardedIconComponent
                 name={item.icon}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx
index 0d7573ea6..b393fd3e9 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx
@@ -29,7 +29,7 @@ const FeatureToggles = ({
       {toggles.map((toggle) => (
         <div key={toggle.label} className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <span className="flex gap-2 text-sm font-medium">
+            <span className="flex cursor-default gap-2 text-sm font-medium">
               Show
               <Badge variant={toggle.badgeVariant} size="xq">
                 {toggle.label}
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
index b58f543d7..811a17ad2 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles/index.tsx
@@ -33,7 +33,9 @@ export const MemoizedSidebarGroup = memo(
 
     return (
       <SidebarGroup className="p-3">
-        <SidebarGroupLabel>Bundles</SidebarGroupLabel>
+        <SidebarGroupLabel className="cursor-default">
+          Bundles
+        </SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
             {sortedBundles.map((item) => (
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx
index 4c288f94e..494b297ec 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx
@@ -39,7 +39,9 @@ export const SidebarHeaderComponent = memo(function SidebarHeaderComponent({
           <SidebarTrigger className="text-muted-foreground">
             <ForwardedIconComponent name="PanelLeftClose" />
           </SidebarTrigger>
-          <h3 className="flex-1 text-sm font-semibold">Components</h3>
+          <h3 className="flex-1 cursor-default text-sm font-semibold">
+            Components
+          </h3>
           <DisclosureTrigger>
             <div>
               <ShadTooltip content="Component settings" styleClasses="z-50">
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index f250fdab3..3b354ec24 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -291,7 +291,7 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
     <Sidebar
       collapsible="offcanvas"
       data-testid="shad-sidebar"
-      className="noflow"
+      className="noflow select-none"
     >
       <SidebarHeaderComponent
         showConfig={showConfig}