fix: state management for selectable filters in plugin

Author: AbhishekA1509

src/Common/Constants.ts

@@ -92,7 +92,7 @@ export const ROUTES = {
     CONFIG_CD_PIPELINE: 'config/cd-pipeline',
     MODULE_CONFIGURED: 'module/config',
     RESOURCE_HISTORY_DEPLOYMENT: 'resource/history/deployment',
-    PLUGIN_GLOBAL_DETAIL_V2: 'plugin/global/detail/v2',
+    PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
 }

src/Shared/Components/Plugin/PluginCard.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, CHECKBOX_VALUE, noop } from '../../../Common'
+import { Checkbox, CHECKBOX_VALUE } from '../../../Common'
 import { ImageWithFallback } from '../ImageWithFallback'
 import { PluginCardProps } from './types'
 import { ReactComponent as ICLegoBlock } from '../../../Assets/Icon/ic-lego-block.svg'
@@ -9,6 +9,7 @@ const PluginCard = ({
     handlePluginSelection,
     parentPluginId,
     isSelected,
+    showCardBorder,
 }: PluginCardProps) => {
     const latestPluginId = pluginDataStore.parentPluginStore[parentPluginId].latestVersionId
     const { icon, name, description, tags, pluginVersion, updatedBy } =
@@ -19,26 +20,33 @@ const PluginCard = ({
     }
 
     return (
-        <div className="p-12 flexbox dc__gap-16 dc__tab-focus" role="button" tabIndex={0} onClick={handleSelection}>
-            {isSelectable ? (
-                <div className="dc__no-shrink icon-dim-40 p-8">
+        <div
+            className={`p-12 flexbox dc__gap-16 dc__tab-focus dc__visible-hover dc__visible-hover--parent ${showCardBorder ? 'dc__border br-4 dc__hover-n50' : ''}`}
+            role="button"
+            tabIndex={0}
+            onClick={handleSelection}
+        >
+            {isSelectable && (
+                <div className={`dc__no-shrink icon-dim-40 p-8 ${!isSelected ? 'dc__visible-hover--child' : ''}`}>
                     <Checkbox
                         isChecked={isSelected}
-                        onChange={noop}
+                        onChange={handleSelection}
                         rootClassName="icon-dim-40 p-8 w-100 mb-0 dc__no-shrink"
                         value={CHECKBOX_VALUE.CHECKED}
                     />
                 </div>
-            ) : (
-                // TODO: Test multiple cards with fallback since has if in LegoBlock
+            )}
+
+            {/* TODO: Test multiple cards with fallback since has if in LegoBlock */}
+            {!isSelected && (
                 <ImageWithFallback
-                    fallbackImage={<ICLegoBlock className="dc__no-shrink icon-dim-40" />}
+                    fallbackImage={<ICLegoBlock className="dc__no-shrink dc__visible-hover--hide-child icon-dim-40" />}
                     imageProps={{
                         src: icon,
                         alt: `${name} logo`,
                         width: 40,
                         height: 40,
-                        className: 'p-4 dc__no-shrink',
+                        className: 'p-4 dc__no-shrink dc__visible-hover--hide-child',
                     }}
                 />
             )}
@@ -47,9 +55,9 @@ const PluginCard = ({
                 <div className="flexbox-col dc__gap-8">
                     <div className="flexbox-col dc__gap-4">
                         <div className="flexbox dc__gap-4">
-                            <h4 className="m-0 dc__truncate--clamp-3 cn-9 fs-13 fw-6 lh-20">{name}</h4>
+                            <h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20">{name}</h4>
                             {!isSelectable && (
-                                <span className="dc__truncate--clamp-3 cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
+                                <span className="dc__truncate cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
                             )}
                         </div>
 

src/Shared/Components/Plugin/PluginList.tsx

@@ -16,6 +16,7 @@ const PluginList = ({
     selectedPluginsMap,
     isSelectable,
     handleClearFilters,
+    showCardBorder,
 }: PluginListProps) => {
     const { appId } = useParams<PluginListParamsType>()
 
@@ -49,17 +50,20 @@ const PluginList = ({
         )
     }
 
-    // selectedPluginsMap should always be present if s
+    // selectedPluginsMap should always be present if isSelectable is true
     if (showSelectedPlugins) {
+        // TODO: Ask with product, filters and search can cause conflicting state
+
         return (
             <>
-                {Object.keys(selectedPluginsMap).map((pluginId) => (
+                {Object.keys(selectedPluginsMap).map((parentPluginId) => (
                     <PluginCard
-                        key={pluginId}
-                        parentPluginId={+pluginId}
+                        key={parentPluginId}
+                        parentPluginId={+parentPluginId}
                         isSelectable={isSelectable}
                         pluginDataStore={pluginDataStore}
                         handlePluginSelection={handlePluginSelection}
+                        showCardBorder={showCardBorder}
                         isSelected
                     />
                 ))}
@@ -77,6 +81,7 @@ const PluginList = ({
                     pluginDataStore={pluginDataStore}
                     handlePluginSelection={handlePluginSelection}
                     isSelected={!!selectedPluginsMap[plugin.parentPluginId]}
+                    showCardBorder={showCardBorder}
                 />
             ))}
 

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -13,9 +13,9 @@ import {
     PluginListFiltersType,
     PluginListItemType,
 } from './types'
+import { DEFAULT_PLUGIN_LIST_FILTERS } from './constants'
 import { ReactComponent as ICCross } from '../../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as ICVisibility } from '../../../Assets/Icon/ic-visibility-on.svg'
-import { DEFAULT_PLUGIN_LIST_FILTERS } from './constants'
 
 const PluginListContainer = ({
     availableTags,
@@ -34,14 +34,19 @@ const PluginListContainer = ({
     handleParentTotalCount,
     parentFilters,
     handleUpdateParentFilters,
+    rootClassName,
+    showCardBorder,
 }: Readonly<PluginListContainerProps>) => {
     const { appId } = useParams<PluginListParamsType>()
 
     const [pluginList, setPluginList] = useState<PluginListItemType[]>(parentPluginList || [])
     const [totalCount, setTotalCount] = useState<number>(parentTotalCount || 0)
+    // TODO: Maybe structuredClone is not required
     const [filters, setFilters] = useState<PluginListFiltersType>(
         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)
 
     const handlePluginListUpdate = (updatedPluginList: PluginListItemType[]) => {
         setPluginList(updatedPluginList)
@@ -129,12 +134,22 @@ const PluginListContainer = ({
         }
     }, [isLoadingPluginData, pluginData, pluginDataError])
 
+    const handlePersistFiltersChange = () => {
+        // Doing this since in case of persistence of filter we have should run as plugin length
+        if (persistFilters) {
+            handlePluginListUpdate([])
+        }
+    }
+
     const handleClearFilters = () => {
         handleUpdateFilters({
             searchKey: '',
             selectedTags: [],
             showSelectedPlugins: false,
         })
+
+        setClearFiltersTrigger((prev) => !prev)
+        handlePersistFiltersChange()
     }
 
     const handleSearch = (searchText: string) => {
@@ -143,9 +158,7 @@ const PluginListContainer = ({
             searchKey: searchText,
         })
 
-        if (persistFilters) {
-            handlePluginListUpdate([])
-        }
+        handlePersistFiltersChange()
     }
 
     const handleUpdateSelectedTags = (updatedTags: string[]) => {
@@ -154,9 +167,16 @@ const PluginListContainer = ({
             selectedTags: updatedTags,
         })
 
-        if (persistFilters) {
-            handlePluginListUpdate([])
-        }
+        handlePersistFiltersChange()
+    }
+
+    const handleRemoveSelectedTag = (filterConfig: Pick<PluginListFiltersType, 'selectedTags'>) => {
+        handleUpdateFilters({
+            ...filters,
+            selectedTags: filterConfig.selectedTags,
+        })
+
+        handlePersistFiltersChange()
     }
 
     const handleShowSelectedPlugins = () => {
@@ -173,24 +193,26 @@ const PluginListContainer = ({
         })
     }
 
-    const handleRemoveSelectedTag = (filterConfig: Pick<PluginListFiltersType, 'selectedTags'>) => {
-        handleUpdateFilters({
-            ...filters,
-            selectedTags: filterConfig.selectedTags,
-        })
+    const handlePluginSelectionWrapper: PluginListProps['handlePluginSelection'] = (parentPluginId) => {
+        const isCurrentPluginSelected = isSelectable && selectedPluginsMap[parentPluginId]
+        if (isCurrentPluginSelected && Object.keys(selectedPluginsMap).length === 1) {
+            handleHideSelectedPlugins()
+        }
+
+        handlePluginSelection(parentPluginId)
     }
 
-    // TODO: Be remember to turn showSelectedPluginFilter as false if count becomes 0
     const showSelectedPluginFilter = useMemo(
         () => isSelectable && selectedPluginsMap && Object.keys(selectedPluginsMap).length > 0,
         [selectedPluginsMap, isSelectable],
     )
 
     return (
-        <div className="flexbox-col dc__overflow-scroll w-100 h-100">
+        <div className={`flexbox-col w-100 ${rootClassName}`}>
             {/* Filters section */}
-            <div className="w-100 flexbox dc__gap-12 py-12">
+            <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)}`}
                     containerClassName="flex-grow-1"
                     handleEnter={handleSearch}
                     inputProps={{
@@ -199,6 +221,7 @@ const PluginListContainer = ({
                 />
 
                 <PluginTagSelect
+                    key={`plugin-tag-select-key-${Number(clearFiltersTrigger)}`}
                     availableTags={availableTags}
                     handleUpdateSelectedTags={handleUpdateSelectedTags}
                     selectedTags={selectedTags}
@@ -209,8 +232,8 @@ const PluginListContainer = ({
 
                 {showSelectedPluginFilter && (
                     <button
-                        className={`py-6 px-8 dc__gap-12 flex dc__no-border dc__no-background dc__outline-none-imp dc__tab-focus dc__tab-focus ${
-                            showSelectedPlugins ? 'bc-n50 dc__border-n1' : ''
+                        className={`py-6 px-8 dc__gap-12 flex dc__outline-none-imp dc__tab-focus dc__tab-focus ${
+                            showSelectedPlugins ? 'bc-n50 dc__border-n1' : 'dc__no-border dc__no-background'
                         }`}
                         data-testid="view-only-selected"
                         type="button"
@@ -253,10 +276,11 @@ const PluginListContainer = ({
                     totalCount={totalCount}
                     handleDataUpdateForPluginResponse={handleDataUpdateForPluginResponse}
                     filters={filters}
-                    handlePluginSelection={handlePluginSelection}
+                    handlePluginSelection={handlePluginSelectionWrapper}
                     selectedPluginsMap={selectedPluginsMap}
                     isSelectable={isSelectable}
                     handleClearFilters={handleClearFilters}
+                    showCardBorder={showCardBorder}
                 />
             </APIResponseHandler>
         </div>

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -66,7 +66,8 @@ const PluginTagSelect = ({
             closeMenuOnSelect={false}
             controlShouldRenderValue={false}
             hideSelectedOptions={false}
-            maxMenuHeight={300}
+            blurInputOnSelect={false}
+            maxMenuHeight={250}
             onMenuClose={handleMenuClose}
             inputId="plugin-tag-select"
             className="w-200"

src/Shared/Components/Plugin/service.tsx

@@ -1,4 +1,5 @@
 import { get, getUrlWithSearchParams, ResponseType, ROUTES, showError } from '../../../Common'
+import { stringComparatorBySortOrder } from '../../Helpers'
 import {
     GetPluginListPayloadType,
     GetPluginStoreDataReturnType,
@@ -13,16 +14,15 @@ export const getPluginsDetail = async ({
     appId,
     parentPluginId,
     pluginId,
-    // TODO: Can make it true by default
-    fetchLatestVersionDetails,
 }: PluginDetailPayloadType): Promise<PluginDetailDTO> => {
     try {
+        // TODO: Add type for payload as well and return parsed data itself
+        // Can parse the response here itself
         const { result } = (await get(
-            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_DETAIL, {
+            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_LIST_DETAIL_V2, {
                 appId,
                 parentPluginId,
                 pluginId,
-                fetchLatestVersionDetails,
             }),
         )) as ResponseType<PluginDetailDTO>
         return result
@@ -34,17 +34,16 @@ export const getPluginsDetail = async ({
 
 export const getPluginStoreData = async ({
     searchKey,
-    offset = 0,
     selectedTags,
     appId,
+    offset = 0,
 }: GetPluginStoreDataServiceParamsType): Promise<GetPluginStoreDataReturnType> => {
     try {
         const payload: GetPluginListPayloadType = {
             searchKey,
             offset,
             appId,
             size: 20,
-            fetchLatestVersionDetails: true,
             tag: selectedTags,
         }
         const { result } = (await get(
@@ -62,13 +61,15 @@ export const getPluginStoreData = async ({
     }
 }
 
-export const getAvailablePluginTags = async (): Promise<string[]> => {
+export const getAvailablePluginTags = async (appId: number): Promise<string[]> => {
     try {
-        const { result } = (await get(ROUTES.PLUGIN_GLOBAL_LIST_TAGS)) as ResponseType<PluginTagNamesDTO>
+        const { result } = (await get(
+            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_LIST_TAGS, { appId }),
+        )) as ResponseType<PluginTagNamesDTO>
         if (!result?.tagNames) {
             return []
         }
-        return result.tagNames
+        return result.tagNames.sort(stringComparatorBySortOrder)
     } catch (error) {
         showError(error)
         throw error

src/Shared/Components/Plugin/types.ts

@@ -52,7 +52,6 @@ export interface PluginDetailDTO {
 
 export interface PluginDetailPayloadType {
     appId: number
-    fetchLatestVersionDetails: boolean
     pluginId?: number[]
     parentPluginId?: number[]
 }
@@ -92,6 +91,8 @@ interface BasePluginListContainerProps {
     handlePluginSelection: (parentPluginId: PluginDetailType['parentPluginId']) => void
     pluginDataStore: PluginDataStoreType
     handlePluginDataStoreUpdate: (pluginStore: PluginDataStoreType) => void
+    rootClassName?: string
+    showCardBorder?: boolean
 }
 
 type PluginListType =
@@ -134,15 +135,14 @@ export type PluginListContainerProps = BasePluginListContainerProps &
     )
 
 export interface GetPluginStoreDataServiceParamsType extends Pick<PluginListFiltersType, 'searchKey' | 'selectedTags'> {
-    offset: number
     appId: number
+    offset?: number
 }
 
 export interface GetPluginListPayloadType
     extends Pick<GetPluginStoreDataServiceParamsType, 'searchKey' | 'offset' | 'appId'> {
     tag: PluginListFiltersType['selectedTags']
     size: number
-    fetchLatestVersionDetails: boolean
 }
 
 export interface GetPluginStoreDataReturnType {
@@ -165,7 +165,7 @@ export interface PluginTagSelectProps extends Pick<BasePluginListContainerProps,
 export interface PluginListProps
     extends Pick<
         PluginListContainerProps,
-        'pluginDataStore' | 'handlePluginSelection' | 'selectedPluginsMap' | 'isSelectable'
+        'pluginDataStore' | 'handlePluginSelection' | 'selectedPluginsMap' | 'isSelectable' | 'showCardBorder'
     > {
     handleDataUpdateForPluginResponse: (pluginResponse: Awaited<ReturnType<typeof getPluginStoreData>>) => void
     handleClearFilters: () => void
@@ -175,7 +175,7 @@ export interface PluginListProps
 }
 
 export interface PluginCardProps
-    extends Pick<PluginListProps, 'isSelectable' | 'pluginDataStore' | 'handlePluginSelection'> {
+    extends Pick<PluginListProps, 'isSelectable' | 'pluginDataStore' | 'handlePluginSelection' | 'showCardBorder'> {
     parentPluginId: PluginDetailType['parentPluginId']
     isSelected: boolean
 }