[ui] Replace Blueprint Collapse with Radix Collapsible (#22072)

## Summary & Motivation

This PR migrates from Blueprint.js `Collapse` component to Radix UI's `react-collapsible` component across the codebase. The changes replace `@blueprintjs/core` Collapse usage with `@radix-ui/react-collapsible` in three components:

- `AgentContent.tsx` - Updates the inactive agents collapsible section
- `LargeCollapsibleSection.tsx` - Migrates the main collapsible section component
- `SidebarComponents.tsx` - Updates the sidebar section collapse functionality

The migration maintains the same functionality while moving to a more modern, accessible component library.

## Test Plan

- Verify that collapsible sections in the agent health page expand/collapse correctly
- Test that large collapsible sections throughout the app maintain their expand/collapse state
- Ensure sidebar sections can be toggled open and closed as expected

Internal-RevId: e2d04fa44c19f76e973e4164f96e840c2d2aee6b

Author: hellendag

js_modules/ui-core/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@koale/useworker": "^4.1.2",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-virtual": "^3.0.1",
     "@testing-library/react-hooks": "^7.0.2",

js_modules/ui-core/src/assets/LargeCollapsibleSection.tsx

@@ -1,6 +1,5 @@
-// eslint-disable-next-line no-restricted-imports
-import {Collapse} from '@blueprintjs/core';
 import {Box, Icon, IconName, Subtitle1, UnstyledButton} from '@dagster-io/ui-components';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import React from 'react';
 
 import {useStateWithStorage} from '../hooks/useStateWithStorage';
@@ -31,29 +30,35 @@ export const LargeCollapsibleSection = ({
   );
 
   return (
-    <Box flex={{direction: 'column'}}>
-      <UnstyledButton onClick={() => setIsCollapsed(!isCollapsed)}>
-        <Box
-          flex={{direction: 'row', alignItems: 'center', gap: 6}}
-          padding={{vertical: 12, right: 12, left: padHeader ? 24 : 0}}
-          border="bottom"
-        >
-          {icon && <Icon size={20} name={icon} />}
-          <Subtitle1 style={{flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}>
-            {header}
-            {count !== undefined ? ` (${count.toLocaleString()})` : ''}
-          </Subtitle1>
-          {right}
-          <Icon
-            name="arrow_drop_down"
-            size={20}
-            style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
-          />
-        </Box>
-      </UnstyledButton>
-      <Collapse isOpen={!isCollapsed}>
-        <Box padding={{vertical: padChildren ? 12 : 0}}>{children}</Box>
-      </Collapse>
-    </Box>
+    <Collapsible.Root open={!isCollapsed} onOpenChange={(open) => setIsCollapsed(!open)}>
+      <Box flex={{direction: 'column'}}>
+        <Collapsible.Trigger asChild>
+          <UnstyledButton>
+            <Box
+              flex={{direction: 'row', alignItems: 'center', gap: 6}}
+              padding={{vertical: 12, right: 12, left: padHeader ? 24 : 0}}
+              border="bottom"
+            >
+              {icon && <Icon size={20} name={icon} />}
+              <Subtitle1
+                style={{flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}
+              >
+                {header}
+                {count !== undefined ? ` (${count.toLocaleString()})` : ''}
+              </Subtitle1>
+              {right}
+              <Icon
+                name="arrow_drop_down"
+                size={20}
+                style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
+              />
+            </Box>
+          </UnstyledButton>
+        </Collapsible.Trigger>
+        <Collapsible.Content style={{overflowX: 'auto'}}>
+          <Box padding={{vertical: padChildren ? 12 : 0}}>{children}</Box>
+        </Collapsible.Content>
+      </Box>
+    </Collapsible.Root>
   );
 };

js_modules/ui-core/src/pipelines/SidebarComponents.tsx

@@ -1,6 +1,5 @@
-// eslint-disable-next-line no-restricted-imports
-import {Collapse} from '@blueprintjs/core';
 import {Colors, FontFamily, Icon} from '@dagster-io/ui-components';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -18,24 +17,22 @@ export const SidebarSection = (props: ISidebarSectionProps) => {
     storedValue === true || storedValue === false ? storedValue : !collapsedByDefault,
   );
 
-  const onToggle = React.useCallback(() => {
-    setOpen((o) => !o);
-  }, [setOpen]);
-
   return (
-    <>
-      <CollapsingHeaderBar onClick={onToggle}>
-        <SidebarTitleTextWrap>{title}</SidebarTitleTextWrap>
-        <Icon
-          size={24}
-          name="arrow_drop_down"
-          style={{transform: open ? 'rotate(0)' : 'rotate(-90deg)'}}
-        />
-      </CollapsingHeaderBar>
-      <Collapse isOpen={open}>
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Collapsible.Trigger asChild>
+        <CollapsingHeaderBar>
+          <SidebarTitleTextWrap>{title}</SidebarTitleTextWrap>
+          <Icon
+            size={24}
+            name="arrow_drop_down"
+            style={{transform: open ? 'rotate(0)' : 'rotate(-90deg)'}}
+          />
+        </CollapsingHeaderBar>
+      </Collapsible.Trigger>
+      <Collapsible.Content style={{overflowX: 'auto'}}>
         <div>{children}</div>
-      </Collapse>
-    </>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 };