feat: add custom ValueContainer for PluginTagSelect

Author: AbhishekA1509

src/Assets/Icon/ic-filter-applied.svg

@@ -46,7 +46,9 @@ const PluginListContainer = ({
         parentFilters || structuredClone(DEFAULT_PLUGIN_LIST_FILTERS),
     )
     // Have to make a state to trigger clear filters, since filters are not on URL
-    const [clearFiltersTrigger, setClearFiltersTrigger] = useState<boolean>(false)
+    // TODO: Ask should it be number since in case of large state it can be a problem
+    const [clearSearchTrigger, setClearSearchTrigger] = useState<boolean>(false)
+    const [clearTagFilterTrigger, setClearTagFiltersTrigger] = useState<boolean>(false)
 
     const handlePluginListUpdate = (updatedPluginList: PluginListItemType[]) => {
         setPluginList(updatedPluginList)
@@ -148,7 +150,8 @@ const PluginListContainer = ({
             showSelectedPlugins: false,
         })
 
-        setClearFiltersTrigger((prev) => !prev)
+        setClearSearchTrigger((prev) => !prev)
+        setClearTagFiltersTrigger((prev) => !prev)
         handlePersistFiltersChange()
     }
 
@@ -176,6 +179,7 @@ const PluginListContainer = ({
             selectedTags: filterConfig.selectedTags,
         })
 
+        setClearTagFiltersTrigger((prev) => !prev)
         handlePersistFiltersChange()
     }
 
@@ -212,7 +216,7 @@ const PluginListContainer = ({
             {/* Filters section */}
             <div className="w-100 flexbox dc__gap-12 py-12 dc__position-sticky dc__top-0 bcn-0 dc__zi-1">
                 <SearchBar
-                    key={`search-bar-key-${Number(clearFiltersTrigger)}`}
+                    key={`search-bar-key-${Number(clearSearchTrigger)}`}
                     containerClassName="flex-grow-1"
                     handleEnter={handleSearch}
                     inputProps={{
@@ -221,7 +225,7 @@ const PluginListContainer = ({
                 />
 
                 <PluginTagSelect
-                    key={`plugin-tag-select-key-${Number(clearFiltersTrigger)}`}
+                    key={`plugin-tag-select-key-${Number(clearTagFilterTrigger)}`}
                     availableTags={availableTags}
                     handleUpdateSelectedTags={handleUpdateSelectedTags}
                     selectedTags={selectedTags}
@@ -232,7 +236,7 @@ const PluginListContainer = ({
 
                 {showSelectedPluginFilter && (
                     <button
-                        className={`py-6 px-8 dc__gap-12 flex dc__outline-none-imp dc__tab-focus dc__tab-focus ${
+                        className={`py-6 px-8 dc__gap-12 flex dc__outline-none-imp dc__tab-focus dc__tab-focus dc__no-shrink ${
                             showSelectedPlugins ? 'bc-n50 dc__border-n1' : 'dc__no-border dc__no-background'
                         }`}
                         data-testid="view-only-selected"

src/Assets/Icon/ic-filter.svg

@@ -1,9 +1,10 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import ReactSelect, { MenuListProps } from 'react-select'
 import { Option, OptionType } from '../../../Common'
 import { commonSelectStyles, LoadingIndicator, MenuListWithApplyButton } from '../ReactSelect'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import { PluginTagSelectProps } from './types'
+import { PluginTagSelectValueContainer } from './utils'
 
 const PluginTagSelect = ({
     availableTags,
@@ -26,24 +27,28 @@ const PluginTagSelect = ({
         setLocalSelectedOptions(selectedOptions)
     }
 
-    const handleApplyFilters = () => {
-        handleUpdateSelectedTags(localSelectedOptions.map((option) => option.label))
-    }
-
     const handleMenuClose = () => {
         setLocalSelectedOptions(selectedTags?.map((tag) => ({ label: tag, value: tag })) ?? [])
     }
 
     const renderNoOptionsMessage = () => {
         if (hasError) {
-            return <GenericSectionErrorState withBorder reload={reloadTags} />
+            return <GenericSectionErrorState reload={reloadTags} />
         }
         return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No tags found</p>
     }
 
-    const renderMenuList = (props: MenuListProps) => (
-        <MenuListWithApplyButton {...props} handleApplyFilter={handleApplyFilters} />
-    )
+    // TODO: Should i add handleUpdateSelectedTags as dependency?
+    const renderMenuList = useCallback((props: MenuListProps) => {
+        const selectedOptions: any = props.selectProps.value
+
+        //  TODO: Should we create function here or inside MenuListWithApplyButton?
+        const handleApplyFilters = () => {
+            handleUpdateSelectedTags(selectedOptions.map((option) => option.value))
+        }
+
+        return <MenuListWithApplyButton {...props} handleApplyFilter={handleApplyFilters} />
+    }, [])
 
     // TODO: Look if should close menu on apply
     return (
@@ -59,18 +64,20 @@ const PluginTagSelect = ({
                 NoOptionsMessage: renderNoOptionsMessage,
                 MenuList: renderMenuList,
                 Option,
+                ValueContainer: PluginTagSelectValueContainer,
             }}
             isLoading={isLoading}
             onChange={handleLocalSelection}
-            escapeClearsValue={false}
+            backspaceRemovesValue={false}
             closeMenuOnSelect={false}
             controlShouldRenderValue={false}
             hideSelectedOptions={false}
             blurInputOnSelect={false}
             maxMenuHeight={250}
             onMenuClose={handleMenuClose}
+            placeholder="Select tags"
             inputId="plugin-tag-select"
-            className="w-200"
+            className="w-150"
         />
     )
 }

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -1,4 +1,10 @@
+import { cloneElement } from 'react'
+import { components, ValueContainerProps } from 'react-select'
 import { ParentPluginDTO, PluginCreationType, PluginDataStoreType } from './types'
+import { ReactComponent as ICSearch } from '../../../Assets/Icon/ic-search.svg'
+import { ReactComponent as ICFilter } from '../../../Assets/Icon/ic-filter.svg'
+import { ReactComponent as ICFilterApplied } from '../../../Assets/Icon/ic-filter-applied.svg'
+import { OptionType } from '../../../Common'
 
 const parseMinimalPluginVersionsDTO = (
     pluginVersionData: ParentPluginDTO['pluginVersions']['minimalPluginVersionData'],
@@ -67,3 +73,47 @@ export const parsePluginDetailsDTOIntoPluginStore = (pluginData: ParentPluginDTO
         pluginVersionStore,
     }
 }
+
+export const PluginTagSelectValueContainer = (props: ValueContainerProps<OptionType[]>) => {
+    const { children, selectProps } = props
+
+    const renderContainer = () => {
+        if (selectProps.menuIsOpen) {
+            if (!selectProps.inputValue) {
+                return (
+                    <>
+                        <ICSearch className="icon-dim-16 dc__no-shrink mr-4 mw-18" />
+                        <span className="dc__position-abs dc__left-35 cn-5 ml-2">{selectProps.placeholder}</span>
+                    </>
+                )
+            }
+
+            return <ICSearch className="icon-dim-16 dc__no-shrink mr-4 mw-18" />
+        }
+
+        if (selectProps.value.length) {
+            return (
+                <>
+                    <ICFilterApplied className="icon-dim-16 dc__no-shrink mr-4 mw-18" />
+                    <span className="dc__position-abs dc__left-35 cn-9 fs-13 fw-4 lh-20">Category</span>
+                </>
+            )
+        }
+
+        return (
+            <>
+                <ICFilter className="icon-dim-16 dc__no-shrink mr-4 mw-18" />
+                <span className="dc__position-abs dc__left-35 cn-5 fs-13 fw-4 lh-20">Category</span>
+            </>
+        )
+    }
+
+    return (
+        <components.ValueContainer {...props}>
+            <div className="flexbox dc__align-items-center">
+                {renderContainer()}
+                {cloneElement(children[1])}
+            </div>
+        </components.ValueContainer>
+    )
+}

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -191,7 +191,7 @@ export const MenuListWithApplyButton = ({
 }: MenuListProps & { handleApplyFilter: () => void }) => (
     <>
         <components.MenuList {...props} />
-        <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0">
+        <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
             <button
                 type="button"
                 className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"