style(FR-1795): fix value content style of Select when dropdown opens (#4866)

# Enhance BAISelect Component with Custom Styling

Improves the visual feedback in dropdown selects by:

1. Moving custom select styles from CSS file to the BAISelect component
2. Adding opacity effect to images and tags when dropdown is open
3. Replacing standard Select with BAISelect in ImageEnvironmentSelectFormItems
4. Adding proper spacing with gap property to tag containers

|  Before  | After    |
|---------|--------|
|     ![image.png](https://app.graphite.com/user-attachments/assets/66baf591-c1b9-4158-be12-441ec7cdfa3f.png)        |   ![image.png](https://app.graphite.com/user-attachments/assets/7d31ccd2-fb0e-450b-8264-f305962b7b76.png) |

Author: yomybaby

packages/backend.ai-ui/setupTests.ts

@@ -4,3 +4,10 @@
 // learn more: https://github.com/testing-library/jest-dom
 import './src/__test__/matchMedia.mock';
 import '@testing-library/jest-dom';
+
+// Mock ResizeObserver for Ant Design v6 components
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

packages/backend.ai-ui/src/components/BAISelect.tsx

@@ -37,6 +37,33 @@ const useStyles = createStyles(({ css, token }) => ({
       }
     }
   `,
+  customStyle: css`
+    /* Change the opacity of images and tags in the select option when the dropdown is open */
+    &.ant-select-open .ant-select-content .ant-select-content-value img,
+    &.ant-select-open
+      .ant-select-content
+      .ant-select-content-value
+      span.ant-tag {
+      opacity: 0.5;
+    }
+
+    /* TODO: re-enable this style after fixing flickering when theme changes */
+    /* Add a gradient effect to the right side of the dropdown to indicate more content */
+    /* & .ant-select-content::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 10px;
+      background: linear-gradient(
+        to right,
+        transparent,
+        ${token.colorBgContainer}
+      );
+      z-index: 2;
+    } */
+  `,
 }));
 
 export interface BAISelectProps<
@@ -131,11 +158,11 @@ function BAISelect<
           });
         }}
         ref={ref}
-        className={
-          ghost
-            ? classNames(styles.ghostSelect, selectProps.className)
-            : selectProps.className
-        }
+        className={classNames(
+          selectProps.className,
+          styles.customStyle,
+          ghost && styles.ghostSelect,
+        )}
         onPopupScroll={(e) => {
           if (atBottomStateChange || endReached) handlePopupScroll(e);
           selectProps.onPopupScroll?.(e);

packages/backend.ai-ui/src/components/BAIStatistic.test.tsx

@@ -1,6 +1,5 @@
 import BAIStatistic from './BAIStatistic';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 // Mock useTranslation
 jest.mock('react-i18next', () => ({
@@ -408,7 +407,6 @@ describe('BAIStatistic', () => {
 
   describe('Tooltip Content', () => {
     it('should show tooltip with current/total when hovering over progress bar', async () => {
-      const user = userEvent.setup();
       const { container } = render(
         <BAIStatistic
           title="Memory"
@@ -423,14 +421,14 @@ describe('BAIStatistic', () => {
       const progressBar = container.querySelector('.ant-progress');
       expect(progressBar).toBeInTheDocument();
 
-      // Hover over the progress bar to trigger tooltip
-      await user.hover(progressBar!);
+      // Hover over the progress bar to trigger tooltip using fireEvent
+      // Note: userEvent.hover() doesn't work well with Ant Design tooltips
+      // due to pointer-events: none on child elements
+      fireEvent.mouseOver(progressBar!);
 
       // Wait for tooltip to appear and verify content
-      await waitFor(() => {
-        const tooltipContent = screen.getByText('4 GB / 8 GB');
-        expect(tooltipContent).toBeInTheDocument();
-      });
+      const tooltipContent = await screen.findByText('4 GB / 8 GB');
+      expect(tooltipContent).toBeInTheDocument();
     });
 
     it('should not show tooltip when progressMode is hidden', () => {

react/src/components/ImageEnvironmentSelectFormItems.css

@@ -14,7 +14,6 @@ import {
 import { useThemeMode } from '../hooks/useThemeMode';
 import DoubleTag from './DoubleTag';
 // @ts-ignore
-import cssRaw from './ImageEnvironmentSelectFormItems.css?raw';
 import ImageMetaIcon from './ImageMetaIcon';
 import { ImageTags } from './ImageTags';
 import TextHighlighter from './TextHighlighter';
@@ -28,7 +27,7 @@ import {
   theme,
   Typography,
 } from 'antd';
-import { BAIFlex } from 'backend.ai-ui';
+import { BAIFlex, BAISelect } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -349,7 +348,6 @@ const ImageEnvironmentSelectFormItems: React.FC<
 
   return (
     <>
-      <style>{cssRaw}</style>
       <Form.Item
         className="image-environment-select-form-item"
         name={['environments', 'environment']}
@@ -375,7 +373,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
         ]}
         style={{ marginBottom: 10 }}
       >
-        <Select
+        <BAISelect
           ref={envSelectRef}
           showSearch={{
             searchValue: environmentSearch,
@@ -543,7 +541,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
               );
             })
           )}
-        </Select>
+        </BAISelect>
       </Form.Item>
       <Form.Item
         noStyle
@@ -581,7 +579,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
                 },
               ]}
             >
-              <Select
+              <BAISelect
                 ref={versionSelectRef}
                 popupMatchSelectWidth={false}
                 onChange={(value) => {
@@ -797,7 +795,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
                     );
                   },
                 )}
-              </Select>
+              </BAISelect>
             </Form.Item>
           );
         }}