feat: Add oneLine mode to AsyncSelect (#22379)

superset-frontend/src/components/Select/AsyncSelect.tsx

@@ -71,6 +71,7 @@ import {
   TOKEN_SEPARATORS,
   DEFAULT_SORT_COMPARATOR,
 } from './constants';
+import { oneLineTagRender } from './CustomTag';
 
 const Error = ({ error }: { error: string }) => (
   <StyledError>
@@ -125,6 +126,8 @@ const AsyncSelect = forwardRef(
       tokenSeparators,
       value,
       getPopupContainer,
+      oneLine,
+      maxTagCount: propsMaxTagCount,
       ...props
     }: AsyncSelectProps,
     ref: RefObject<AsyncSelectRef>,
@@ -148,6 +151,16 @@ const AsyncSelect = forwardRef(
       : 'multiple';
     const allowFetch = !fetchOnlyOnSearch || inputValue;
 
+    const [maxTagCount, setMaxTagCount] = useState(
+      propsMaxTagCount ?? MAX_TAG_COUNT,
+    );
+
+    useEffect(() => {
+      if (oneLine) {
+        setMaxTagCount(isDropdownVisible ? 0 : 1);
+      }
+    }, [isDropdownVisible, oneLine]);
+
     useEffect(() => {
       selectValueRef.current = selectValue;
     }, [selectValue]);
@@ -487,7 +500,7 @@ const AsyncSelect = forwardRef(
           }
           headerPosition={headerPosition}
           labelInValue
-          maxTagCount={MAX_TAG_COUNT}
+          maxTagCount={maxTagCount}
           mode={mappedMode}
           notFoundContent={isLoading ? t('Loading...') : notFoundContent}
           onDeselect={handleOnDeselect}
@@ -513,6 +526,8 @@ const AsyncSelect = forwardRef(
               <StyledCheckOutlined iconSize="m" />
             )
           }
+          oneLine={oneLine}
+          tagRender={oneLine ? oneLineTagRender : undefined}
           {...props}
           ref={ref}
         >