#34 feat: add show all button when tags more than 3

webui/src/modules/replicaset/replicasetsPage/ReplecasetsContent/TopBar/FilterBy/FilterByModal/DomainField/DomainField.tsx

@@ -45,6 +45,10 @@ export const DomainField: React.FC<DomainFieldProps> = (props) => {
     [values]
   );
 
+  const domainValuesValue = useMemo(() => {
+    return domainValuesOptions.filter((o) => filter.value?.includes(o.value));
+  }, [domainValuesOptions, filter.value]);
+
   return (
     <div className={className}>
       <div className={styles.keyValueField}>
@@ -71,9 +75,7 @@ export const DomainField: React.FC<DomainFieldProps> = (props) => {
           options={domainValuesOptions}
           classNames={{ container: () => styles.valueSelect }}
           isMulti
-          value={domainValuesOptions.filter((o) =>
-            filter.value?.includes(o.value)
-          )}
+          value={domainValuesValue}
           onChange={(newOptions) => {
             if (!newOptions || !Array.isArray(newOptions)) return;
 

webui/src/modules/replicaset/replicasetsPage/ReplecasetsContent/TopBar/Filters/Filters.tsx

@@ -50,7 +50,8 @@ export const Filters: React.FC<FiltersProps> = (props) => {
             key={label}
             theme="secondary"
             size="extraSmall"
-            onIconClick={() => deleteItem(domain)}
+            closeIcon
+            onClose={() => deleteItem(domain)}
           >
             {label}
           </Tag>

webui/src/shared/ui/Select/Select.tsx

 import { useMemo } from "react";
-import RNSelect, { Props as RNSelectProps } from "react-select";
+import RNSelect, { MultiValue, Props as RNSelectProps } from "react-select";
 import cn from "classnames";
 
+import { CircleCloseIcon } from "shared/icons/CircleCloseIcon";
+
 import { Option } from "../Option/Option";
 import { Tag } from "../Tag/Tag";
 
@@ -11,12 +13,18 @@ import styles from "./Select.module.scss";
 
 export type { TOption };
 
-type SelectProps<T> = RNSelectProps<T> & {
+type SelectProps<T extends TOption> = RNSelectProps<T> & {
   size?: "normal";
+  showMoreButtonCount?: number;
 };
 
-export const Select = <T,>(props: SelectProps<T>) => {
-  const { size = "normal", classNames: classNamesProps = {}, ...other } = props;
+export const Select = <T extends TOption>(props: SelectProps<T>) => {
+  const {
+    size = "normal",
+    classNames: classNamesProps = {},
+    showMoreButtonCount = 3,
+    ...other
+  } = props;
 
   const classNames = useMemo<SelectProps<T>["classNames"]>(() => {
     return {
@@ -46,6 +54,7 @@ export const Select = <T,>(props: SelectProps<T>) => {
 
   return (
     <RNSelect
+      closeMenuOnSelect={other.isMulti ? false : true}
       {...other}
       classNames={classNames}
       components={{
@@ -55,15 +64,41 @@ export const Select = <T,>(props: SelectProps<T>) => {
           </Option>
         ),
         IndicatorSeparator: null,
-        MultiValue: (args) => (
-          <Tag
-            size="extraSmall"
-            onIconClick={args.removeProps.onClick}
-            className={args.innerProps?.className}
-          >
-            {args.children}
-          </Tag>
-        ),
+        MultiValue: (args) => {
+          const value = args.selectProps.value as MultiValue<T>;
+
+          if (!args.selectProps.menuIsOpen) {
+            if (args.index > showMoreButtonCount) {
+              return null;
+            }
+
+            if (args.index === showMoreButtonCount) {
+              return (
+                <Tag
+                  size="extraSmall"
+                  theme="secondary"
+                  className={args.innerProps?.className}
+                >
+                  See all ({value.length})
+                </Tag>
+              );
+            }
+          }
+
+          return (
+            <Tag
+              size="extraSmall"
+              className={args.innerProps?.className}
+              rightIcon={
+                <div {...args.removeProps}>
+                  <CircleCloseIcon />
+                </div>
+              }
+            >
+              {args.children}
+            </Tag>
+          );
+        },
       }}
     />
   );

webui/src/shared/ui/Tag/Tag.tsx

@@ -7,30 +7,30 @@ import { Button, ButtonProps } from "../Button/Button";
 import styles from "./Tag.module.scss";
 
 type TagProps = ButtonProps & {
-  onIconClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  closeIcon?: boolean;
+  onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 };
 
 export const Tag: React.FC<TagProps> = (props) => {
-  const { onIconClick, ...other } = props;
+  const { closeIcon, rightIcon: RightIcon, onClose, ...other } = props;
 
-  return (
-    <Button
-      {...other}
-      rightIcon={
+  const renderIcon = () => {
+    if (RightIcon) return RightIcon;
+
+    if (closeIcon)
+      return (
         <div
-          onClick={
-            onIconClick
-              ? (event) => {
-                  event.stopPropagation();
-                  onIconClick?.(event);
-                }
-              : undefined
-          }
+          onClick={(event) => {
+            event.stopPropagation();
+            onClose?.(event);
+          }}
         >
           <CircleCloseIcon />
         </div>
-      }
-      className={styles.button}
-    />
+      );
+  };
+
+  return (
+    <Button {...other} rightIcon={renderIcon()} className={styles.button} />
   );
 };