fix(report): dropdown filter not work in report (#1023)

* fix(report): dropdown filter not work in report

* fix(report): add gap between loading text and icon

Author: quanru

apps/chrome-extension/src/components/playground.less

@@ -154,12 +154,6 @@
     color: rgba(0, 0, 0, 0.85);
   }
 
-  .loading-progress-text {
-    margin-top: 8px;
-    color: #888;
-    font-size: 12px;
-  }
-
   .new-conversation-separator {
     flex-shrink: 0;
     padding: 20px 0;

apps/report/rsbuild.config.ts

@@ -100,18 +100,13 @@ const copyReportTemplate = () => ({
   },
 });
 
-let tooManyCases = allTestData;
-for (let i = 0; i < 3; i++) {
-  tooManyCases = tooManyCases.concat(tooManyCases);
-}
-
 export default defineConfig({
   html: {
     template: './template/index.html',
     inject: 'body',
     tags:
       process.env.NODE_ENV === 'development'
-        ? tooManyCases.map((item, index) => ({
+        ? allTestData.map((item, index) => ({
             tag: 'script',
             attrs: {
               type: 'midscene_web_dump',

apps/report/src/components/PlaywrightCaseSelector.less

@@ -167,9 +167,8 @@
         cursor: pointer;
         transition: background-color 0.2s ease;
         line-height: 32px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        white-space: normal;
+        overflow: visible;
 
         &:hover {
           background: #f8f9fa;
@@ -195,6 +194,8 @@
           flex: 1;
           font-size: 14px;
           color: #333;
+          white-space: normal;
+          word-wrap: break-word;
 
           .cost-str {
             color: #999;

apps/report/src/components/PlaywrightCaseSelector.tsx

@@ -46,10 +46,15 @@ export function PlaywrightCaseSelector({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      // Check if click is on Select dropdown
+      const target = event.target as HTMLElement;
+      const isSelectDropdown = target.closest('.ant-select-dropdown');
+
       if (
         isExpanded &&
         selectorRef.current &&
-        !selectorRef.current.contains(event.target as Node)
+        !selectorRef.current.contains(event.target as Node) &&
+        !isSelectDropdown
       ) {
         setIsExpanded(false);
       }
@@ -180,17 +185,19 @@ export function PlaywrightCaseSelector({
           }}
         >
           {/* Filter Controls */}
-          <div className="filter-controls">
+          <div className="filter-controls" onClick={(e) => e.stopPropagation()}>
             <div
               className={`search-container ${hasSearchText ? 'has-content' : ''}`}
             >
               <Select
                 value={statusFilter}
                 onChange={handleStatusChange}
-                style={{ width: 80 }}
+                style={{ width: 120 }}
                 options={TEST_STATUS_OPTIONS}
                 size="small"
                 variant="borderless"
+                popupMatchSelectWidth={false}
+                getPopupContainer={() => document.body}
               />
               <div className="search-input-container">
                 <Input

packages/visualizer/src/component/playground/index.less

@@ -326,6 +326,12 @@ body {
 
   .loading-container {
     text-align: center;
+
+    .loading-progress-text {
+      margin-top: 8px;
+      color: #888;
+      font-size: 12px;
+    }
   }
 
   pre {