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

app/react/components/form-components/FormSection/FormSection.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren, ReactNode, useState } from 'react';
-import { ChevronUp, ChevronRight } from 'lucide-react';
 
-import { Icon } from '@@/Icon';
+import { CollapseExpandButton } from '@@/CollapseExpandButton';
 
 import { FormSectionTitle } from '../FormSectionTitle';
 
@@ -26,30 +25,22 @@ export function FormSection({
   htmlFor = '',
 }: PropsWithChildren<Props>) {
   const [isExpanded, setIsExpanded] = useState(!defaultFolded);
+  const id = `foldingButton${title}`;
 
   return (
     <div className={className}>
       <FormSectionTitle
-        htmlFor={isFoldable ? `foldingButton${title}` : htmlFor}
+        htmlFor={isFoldable ? id : htmlFor}
         titleSize={titleSize}
         className={titleClassName}
       >
         {isFoldable && (
-          <button
-            id={`foldingButton${title}`}
-            type="button"
-            onClick={(e) => {
-              setIsExpanded(!isExpanded);
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-            className="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
-          >
-            <Icon
-              icon={isExpanded ? ChevronUp : ChevronRight}
-              className="shrink-0"
-            />
-          </button>
+          <CollapseExpandButton
+            isExpanded={isExpanded}
+            data-cy={id}
+            id={id}
+            onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
+          />
         )}
 
         {title}