Asset checks UI revamp

js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {Box} from './Box';
+import {Icon} from './Icon';
+
+export const CollapsibleSection = ({
+  header,
+  headerWrapperProps,
+  children,
+  isInitiallyCollapsed = false,
+}: {
+  header: React.ReactNode;
+  headerWrapperProps?: React.ComponentProps<typeof Box>;
+  children: React.ReactNode;
+  isInitiallyCollapsed?: boolean;
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(isInitiallyCollapsed);
+  return (
+    <Box flex={{direction: 'column'}}>
+      <Box
+        {...headerWrapperProps}
+        flex={{direction: 'row', alignItems: 'center', gap: 6, ...(headerWrapperProps?.flex || {})}}
+        onClick={() => {
+          setIsCollapsed(!isCollapsed);
+          headerWrapperProps?.onClick?.();
+        }}
+      >
+        <Icon
+          name="arrow_drop_down"
+          style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
+        />
+        <div>{header}</div>
+      </Box>
+      {isCollapsed ? null : children}
+    </Box>
+  );
+};

js_modules/dagster-ui/packages/ui-components/src/components/VirtualizedTable.tsx

@@ -52,7 +52,7 @@ export const Inner = styled.div.attrs<InnerProps>(({$totalHeight}) => ({
   width: 100%;
 `;
 
-type RowProps = {$height: number; $start: number};
+export type RowProps = {$height: number; $start: number};
 
 export const Row = styled.div.attrs<RowProps>(({$height, $start}) => ({
   style: {

js_modules/dagster-ui/packages/ui-components/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/Button';
 export * from './components/ButtonGroup';
 export * from './components/ButtonLink';
 export * from './components/Checkbox';
+export * from './components/CollapsibleSection';
 export * from './components/ConfigEditorDialog';
 export * from './components/ConfigEditorWithSchema';
 export * from './components/ConfigTypeSchema';

js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx

@@ -14,7 +14,7 @@ export type AssetViewFeatureInput = {
 type AssetFeatureContextType = {
   tabBuilder: (input: AssetTabConfigInput) => AssetTabConfig[];
   renderFeatureView: (input: AssetViewFeatureInput) => React.ReactNode;
-  AssetChecksBanner: React.ComponentType<Record<string, never>>;
+  AssetChecksBanner: React.ComponentType<{onClose: () => void}>;
 };
 
 export const AssetFeatureContext = React.createContext<AssetFeatureContextType>({

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx

@@ -75,7 +75,6 @@ export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, Ass
       id: 'checks',
       title: 'Checks',
       to: buildAssetViewParams({...params, view: 'checks'}),
-      hidden: !definition?.hasAssetChecks,
     },
     events: {
       id: 'events',

js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx

@@ -458,7 +458,6 @@ export const ASSET_VIEW_DEFINITION_QUERY = gql`
         name
       }
     }
-    hasAssetChecks
 
     ...AssetNodeInstigatorsFragment
     ...AssetNodeDefinitionFragment