fix(ui): use expand button in sidebar and tables [EE-6844] (#11608)

app/react/components/CollapseExpandButton.tsx

@@ -0,0 +1,41 @@
+import { ChevronDown } from 'lucide-react';
+import { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from './Icon';
+
+export function CollapseExpandButton({
+  onClick,
+  isExpanded,
+  ...props
+}: { isExpanded: boolean } & ComponentProps<'button'>) {
+  return (
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        onClick?.(e);
+      }}
+      color="none"
+      title={isExpanded ? 'Collapse' : 'Expand'}
+      aria-label={isExpanded ? 'Collapse' : 'Expand'}
+      aria-expanded={isExpanded}
+      type="button"
+      className="flex-none border-none bg-transparent flex items-center p-0 px-3 group"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <div className="flex items-center group-hover:bg-blue-5 be:group-hover:bg-gray-5 group-hover:th-dark:bg-gray-true-7 group-hover:bg-opacity-10 be:group-hover:bg-opacity-10 rounded-full p-[3px] transition ease-in-out">
+        <Icon
+          icon={ChevronDown}
+          size="md"
+          className={clsx('transition ease-in-out', {
+            'rotate-180': isExpanded,
+            'rotate-0': !isExpanded,
+          })}
+        />
+      </div>
+    </button>
+  );
+}