Feat: Wrap DynamicVariableForm with Collapsible. #3221 (#5440)

### What problem does this PR solve?

Feat: Wrap DynamicVariableForm with Collapsible. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/assets/icon/Icon.tsx

@@ -1,5 +1,7 @@
+import { cn } from '@/lib/utils';
 import Icon from '@ant-design/icons';
 import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { ChevronDown } from 'lucide-react';
 
 type IconComponentProps = CustomIconComponentProps;
 const currentColor = 'currentColor';
@@ -276,3 +278,14 @@ export const SemicolonIcon = (props: Partial<IconComponentProps>) => (
 export const CommaIcon = (props: Partial<IconComponentProps>) => (
   <Icon component={CommaSvg} {...props} />
 );
+
+export function SideDown({ className }: { className?: string }) {
+  return (
+    <ChevronDown
+      className={cn(
+        'transition-transform group-data-[state=open]/collapsible:rotate-180',
+        className,
+      )}
+    />
+  );
+}