feat: make pluginList prop type generic

Author: AbhishekA1509

src/Shared/Components/FilterChips/FilterChips.component.tsx

@@ -34,11 +34,14 @@ const FilterChip = ({
     const valueToDisplay = getFormattedValue(label, value) ?? value
 
     return (
-        labelToDisplay &&
         valueToDisplay && (
             <div className="flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4 dc__ellipsis-right">
-                <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
-                <span className="dc__divider h-24" />
+                {labelToDisplay && (
+                    <>
+                        <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
+                        <span className="dc__divider h-24" />
+                    </>
+                )}
                 <span className="dc__ellipsis-right">{valueToDisplay}</span>
                 <button
                     type="button"

src/Shared/Components/FilterChips/types.ts

@@ -20,7 +20,7 @@ export interface FilterChipProps {
     /**
      * Filter label
      */
-    label: string
+    label?: string
     /**
      * Corresponding value of the filter
      */

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -1,33 +1,65 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router'
 import { APIResponseHandler } from '../APIResponseHandler'
 import PluginTagSelect from './PluginTagSelect'
+import PluginList from './PluginList'
+import { FilterChips } from '../FilterChips'
 import { SearchBar, useAsync } from '../../../Common'
 import { getAvailablePluginTags, getPluginStoreData } from './service'
-import { PluginListParamsType, PluginListContainerProps, PluginListProps } from './types'
+import {
+    PluginListParamsType,
+    PluginListContainerProps,
+    PluginListProps,
+    PluginListFiltersType,
+    PluginListItemType,
+} from './types'
 import { ReactComponent as ICCross } from '../../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as ICVisibility } from '../../../Assets/Icon/ic-visibility-on.svg'
-import PluginList from './PluginList'
+import { DEFAULT_PLUGIN_LIST_FILTERS } from './constants'
 
 const PluginListContainer = ({
-    pluginList,
-    handlePluginListUpdate,
-    filters,
-    handleUpdateFilters,
-    isSelectable,
     availableTags,
     handleUpdateAvailableTags,
     pluginDataStore,
     handlePluginDataStoreUpdate,
-    totalCount,
-    handleUpdateTotalCount,
-    persistFilters,
-    selectedPluginsMap,
     handlePluginSelection,
+    // Selected plugins Section
+    isSelectable,
+    selectedPluginsMap,
+    // Plugin list Section
+    persistFilters,
+    parentPluginList,
+    handleParentPluginListUpdate,
+    parentTotalCount,
+    handleParentTotalCount,
+    parentFilters,
+    handleUpdateParentFilters,
 }: Readonly<PluginListContainerProps>) => {
-    const { searchKey, selectedTags, showSelectedPlugins } = filters
     const { appId } = useParams<PluginListParamsType>()
 
+    const [pluginList, setPluginList] = useState<PluginListItemType[]>(parentPluginList || [])
+    const [totalCount, setTotalCount] = useState<number>(parentTotalCount || 0)
+    const [filters, setFilters] = useState<PluginListFiltersType>(
+        parentFilters || structuredClone(DEFAULT_PLUGIN_LIST_FILTERS),
+    )
+
+    const handlePluginListUpdate = (updatedPluginList: PluginListItemType[]) => {
+        setPluginList(updatedPluginList)
+        handleParentPluginListUpdate?.(updatedPluginList)
+    }
+
+    const handleUpdateTotalCount = (updatedTotalCount: number) => {
+        setTotalCount(updatedTotalCount)
+        handleParentTotalCount?.(updatedTotalCount)
+    }
+
+    const handleUpdateFilters = (updatedFilters: PluginListFiltersType) => {
+        setFilters(updatedFilters)
+        handleUpdateParentFilters?.(updatedFilters)
+    }
+
+    const { searchKey, selectedTags, showSelectedPlugins } = filters || {}
+
     const pluginDataDependency = persistFilters ? [pluginList] : [searchKey, appId, selectedTags]
     // TODO: Add abortController as well
     const [isLoadingPluginData, pluginData, pluginDataError, reloadPluginData] = useAsync(
@@ -36,7 +68,7 @@ const PluginListContainer = ({
                 searchKey,
                 selectedTags,
                 offset: 0,
-                appId: appId ? +appId : undefined,
+                appId: appId ? +appId : null,
             }),
         pluginDataDependency,
         persistFilters ? !pluginList.length : true,
@@ -99,16 +131,6 @@ const PluginListContainer = ({
         })
     }
 
-    useEffect(
-        // TODO: Test this persistFilters value on unmount
-        () => () => {
-            if (!persistFilters) {
-                handleClearFilters()
-            }
-        },
-        [],
-    )
-
     const handleSearch = (searchText: string) => {
         handleUpdateFilters({
             ...filters,
@@ -145,6 +167,13 @@ const PluginListContainer = ({
         })
     }
 
+    const handleRemoveSelectedTag = (filterConfig: Pick<PluginListFiltersType, 'selectedTags'>) => {
+        handleUpdateFilters({
+            ...filters,
+            selectedTags: filterConfig.selectedTags,
+        })
+    }
+
     // TODO: Be remember to turn showSelectedPluginFilter as false if count becomes 0
     const showSelectedPluginFilter = useMemo(
         () => isSelectable && selectedPluginsMap && Object.keys(selectedPluginsMap).length > 0,
@@ -191,6 +220,18 @@ const PluginListContainer = ({
                 )}
             </div>
 
+            {!!selectedTags.length && (
+                <FilterChips<Pick<PluginListFiltersType, 'selectedTags'>>
+                    filterConfig={{
+                        selectedTags,
+                    }}
+                    onRemoveFilter={handleRemoveSelectedTag}
+                    clearFilters={handleClearFilters}
+                    className="p-0 w-100 pt-4"
+                    clearButtonClassName="dc__no-background-imp dc__no-border-imp dc__tab-focus"
+                />
+            )}
+
             <APIResponseHandler
                 isLoading={isLoadingPluginData}
                 error={pluginDataError}

src/Shared/Components/Plugin/index.ts

@@ -2,4 +2,4 @@ export * from './types'
 export * from './service'
 export * from './utils'
 export * from './constants'
-export * from './PluginListContainer'
+export { default as PluginListContainer } from './PluginListContainer'

src/Shared/Components/Plugin/types.ts

@@ -84,23 +84,38 @@ export interface PluginDataStoreType {
 
 // TODO: Deprecate this type
 export interface PluginDetailType extends DetailedPluginVersionType {}
+export type PluginListItemType = Pick<PluginDetailType, 'parentPluginId'>
 
 interface BasePluginListContainerProps {
-    filters: PluginListFiltersType
-    handleUpdateFilters: (filters: PluginListFiltersType) => void
     availableTags: string[]
     handleUpdateAvailableTags: (tags: string[]) => void
     handlePluginSelection: (parentPluginId: PluginDetailType['parentPluginId']) => void
     pluginDataStore: PluginDataStoreType
     handlePluginDataStoreUpdate: (pluginStore: PluginDataStoreType) => void
-    totalCount: number
-    handleUpdateTotalCount: (totalCount: number) => void
-    persistFilters?: boolean
-    pluginList: Pick<PluginDetailType, 'parentPluginId'>[]
-    handlePluginListUpdate: (pluginList: Pick<PluginDetailType, 'parentPluginId'>[]) => void
 }
 
+type PluginListType =
+    | {
+          persistFilters: true
+          parentPluginList: PluginListItemType[]
+          handleParentPluginListUpdate: (pluginList: PluginListItemType[]) => void
+          parentTotalCount: number
+          handleParentTotalCount: (totalCount: number) => void
+          parentFilters: PluginListFiltersType
+          handleUpdateParentFilters: (filters: PluginListFiltersType) => void
+      }
+    | {
+          persistFilters: false
+          parentPluginList?: never
+          handleParentPluginListUpdate?: never
+          parentTotalCount?: never
+          handleParentTotalCount?: never
+          parentFilters?: never
+          handleUpdateParentFilters?: never
+      }
+
 export type PluginListContainerProps = BasePluginListContainerProps &
+    PluginListType &
     (
         | {
               /**
@@ -140,7 +155,7 @@ export interface PluginListParamsType {
 }
 
 export interface PluginTagSelectProps extends Pick<BasePluginListContainerProps, 'availableTags'> {
-    selectedTags: BasePluginListContainerProps['filters']['selectedTags']
+    selectedTags: PluginListContainerProps['parentFilters']['selectedTags']
     isLoading: boolean
     hasError: boolean
     reloadTags: () => void
@@ -150,16 +165,13 @@ export interface PluginTagSelectProps extends Pick<BasePluginListContainerProps,
 export interface PluginListProps
     extends Pick<
         PluginListContainerProps,
-        | 'pluginDataStore'
-        | 'pluginList'
-        | 'totalCount'
-        | 'filters'
-        | 'handlePluginSelection'
-        | 'selectedPluginsMap'
-        | 'isSelectable'
+        'pluginDataStore' | 'handlePluginSelection' | 'selectedPluginsMap' | 'isSelectable'
     > {
     handleDataUpdateForPluginResponse: (pluginResponse: Awaited<ReturnType<typeof getPluginStoreData>>) => void
     handleClearFilters: () => void
+    pluginList: PluginListContainerProps['parentPluginList']
+    totalCount: PluginListContainerProps['parentTotalCount']
+    filters: PluginListContainerProps['parentFilters']
 }
 
 export interface PluginCardProps