feat: add shouldHideLabel in filter chips

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: 'plugin/global/detail',
+    PLUGIN_GLOBAL_DETAIL_V2: 'plugin/global/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
 }

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

@@ -24,6 +24,7 @@ const FilterChip = ({
     handleRemoveFilter,
     getFormattedLabel = noop,
     getFormattedValue = noop,
+    shouldHideLabel = false,
 }: FilterChipProps) => {
     const removeFilter = () => {
         handleRemoveFilter(label, value)
@@ -34,9 +35,10 @@ const FilterChip = ({
     const valueToDisplay = getFormattedValue(label, value) ?? value
 
     return (
+        (labelToDisplay || shouldHideLabel) &&
         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">
-                {labelToDisplay && (
+                {!shouldHideLabel && (
                     <>
                         <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
                         <span className="dc__divider h-24" />
@@ -67,6 +69,7 @@ const FilterChips = <T = Record<string, unknown>,>({
     getFormattedValue,
     className = '',
     clearButtonClassName = '',
+    shouldHideLabel,
 }: FilterChipsProps<T>) => {
     const handleRemoveFilter = (filterKey, valueToRemove) => {
         const updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig))
@@ -98,6 +101,7 @@ const FilterChips = <T = Record<string, unknown>,>({
                                 handleRemoveFilter={handleRemoveFilter}
                                 getFormattedLabel={getFormattedLabel}
                                 getFormattedValue={getFormattedValue}
+                                shouldHideLabel={shouldHideLabel}
                             />
                         ))
                     ) : (
@@ -108,6 +112,7 @@ const FilterChips = <T = Record<string, unknown>,>({
                             handleRemoveFilter={handleRemoveFilter}
                             getFormattedLabel={getFormattedLabel}
                             getFormattedValue={getFormattedValue}
+                            shouldHideLabel={shouldHideLabel}
                         />
                     ),
                 )}

src/Shared/Components/FilterChips/types.ts

@@ -37,10 +37,15 @@ export interface FilterChipProps {
      * If passed, the label will be formatted accordingly
      */
     getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode
+    /**
+     * If true, would hide the label
+     * @default false
+     */
+    shouldHideLabel?: boolean
 }
 
 export interface FilterChipsProps<T = Record<string, unknown>>
-    extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
+    extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue' | 'shouldHideLabel'> {
     /**
      * Current filter configuration
      */

src/Shared/Components/Plugin/PluginCard.tsx

@@ -46,13 +46,12 @@ const PluginCard = ({
             <div className="flexbox-col dc__gap-12">
                 <div className="flexbox-col dc__gap-8">
                     <div className="flexbox-col dc__gap-4">
-                        <h4 className="m-0 dc__truncate--clamp-3 cn-9 fs-13 fw-6 lh-20">
-                            {name}
-
+                        <div className="flexbox dc__gap-4">
+                            <h4 className="m-0 dc__truncate--clamp-3 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>
                             )}
-                        </h4>
+                        </div>
 
                         <span className="dc__truncate cn-7 fs-12 fw-4 lh-16">By {updatedBy || 'Devtron'}</span>
                     </div>
@@ -62,6 +61,7 @@ const PluginCard = ({
                 </div>
 
                 {/* Tag container */}
+                {/* TODO: Make component since re-usable */}
                 <div className="flexbox dc__gap-6 flex-wrap">
                     {tags.map((tag) => (
                         <div className="flexbox px-6 br-4 bcn-1 dc__align-items-center dc__mxw-160" key={tag}>

src/Shared/Components/Plugin/PluginList.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
-import { PluginListProps } from './types'
+import { useParams } from 'react-router'
+import PluginCard from './PluginCard'
 import { DetectBottom } from '../DetectBottom'
-import { GenericEmptyState, GenericFilterEmptyState, showError } from '../../../Common'
+import { PluginListParamsType, PluginListProps } from './types'
+import { GenericEmptyState, GenericFilterEmptyState, Progressing, showError } from '../../../Common'
 import { getPluginStoreData } from './service'
-import PluginCard from './PluginCard'
 
 const PluginList = ({
     pluginDataStore,
@@ -16,6 +17,8 @@ const PluginList = ({
     isSelectable,
     handleClearFilters,
 }: PluginListProps) => {
+    const { appId } = useParams<PluginListParamsType>()
+
     const [isLoadingMorePlugins, setIsLoadingMorePlugins] = useState<boolean>(false)
     const handleLoadMore = async () => {
         setIsLoadingMorePlugins(true)
@@ -24,7 +27,7 @@ const PluginList = ({
                 searchKey,
                 offset: pluginList.length,
                 selectedTags,
-                appId: undefined,
+                appId: appId ? +appId : null,
             })
 
             handleDataUpdateForPluginResponse(pluginDataResponse)
@@ -36,7 +39,7 @@ const PluginList = ({
     }
 
     if (!pluginList.length) {
-        if (!!searchKey || !selectedTags.length) {
+        if (!!searchKey || !!selectedTags.length) {
             return <GenericFilterEmptyState handleClearFilters={handleClearFilters} />
         }
 
@@ -77,6 +80,8 @@ const PluginList = ({
                 />
             ))}
 
+            {isLoadingMorePlugins && <Progressing />}
+
             {totalCount > pluginList.length && !isLoadingMorePlugins && <DetectBottom callback={handleLoadMore} />}
         </>
     )

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -25,7 +25,7 @@ const PluginListContainer = ({
     handlePluginSelection,
     // Selected plugins Section
     isSelectable,
-    selectedPluginsMap,
+    selectedPluginsMap = {},
     // Plugin list Section
     persistFilters,
     parentPluginList,
@@ -60,7 +60,6 @@ const PluginListContainer = ({
 
     const { searchKey, selectedTags, showSelectedPlugins } = filters || {}
 
-    const pluginDataDependency = persistFilters ? [pluginList] : [searchKey, appId, selectedTags]
     // TODO: Add abortController as well
     const [isLoadingPluginData, pluginData, pluginDataError, reloadPluginData] = useAsync(
         () =>
@@ -70,14 +69,19 @@ const PluginListContainer = ({
                 offset: 0,
                 appId: appId ? +appId : null,
             }),
-        pluginDataDependency,
+        // TODO: Test if this is correct since new reference is created every time
+        persistFilters ? [pluginList] : [searchKey, appId, selectedTags],
         persistFilters ? !pluginList.length : true,
     )
 
-    const [areTagsLoading, tags, tagsError, reloadTags] = useAsync(getAvailablePluginTags, [], !availableTags?.length)
+    const [areTagsLoading, tags, tagsError, reloadTags] = useAsync(
+        () => getAvailablePluginTags(appId ? +appId : null),
+        [],
+        !availableTags?.length,
+    )
 
     useEffect(() => {
-        if (!isLoadingPluginData && !tagsError && pluginData) {
+        if (!areTagsLoading && !tagsError && tags) {
             handleUpdateAvailableTags(tags)
         }
     }, [areTagsLoading, tags, tagsError])
@@ -105,7 +109,9 @@ const PluginListContainer = ({
         handleUpdateTotalCount(responseTotalCount)
 
         const newPluginList: typeof pluginList = structuredClone(pluginList)
+
         Object.keys(parentPluginStore).forEach((key) => {
+            // TODO: Can convert to map
             if (!newPluginList.find((plugin) => plugin.parentPluginId === +key)) {
                 newPluginList.push({
                     parentPluginId: +key,
@@ -229,6 +235,7 @@ const PluginListContainer = ({
                     clearFilters={handleClearFilters}
                     className="p-0 w-100 pt-4"
                     clearButtonClassName="dc__no-background-imp dc__no-border-imp dc__tab-focus"
+                    shouldHideLabel
                 />
             )}
 

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import ReactSelect, { MenuListProps } from 'react-select'
-import { OptionType } from '../../../Common'
+import { Option, OptionType } from '../../../Common'
 import { commonSelectStyles, LoadingIndicator, MenuListWithApplyButton } from '../ReactSelect'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import { PluginTagSelectProps } from './types'
@@ -45,6 +45,7 @@ const PluginTagSelect = ({
         <MenuListWithApplyButton {...props} handleApplyFilter={handleApplyFilters} />
     )
 
+    // TODO: Look if should close menu on apply
     return (
         <ReactSelect
             styles={commonSelectStyles}
@@ -57,6 +58,7 @@ const PluginTagSelect = ({
                 LoadingIndicator,
                 NoOptionsMessage: renderNoOptionsMessage,
                 MenuList: renderMenuList,
+                Option,
             }}
             isLoading={isLoading}
             onChange={handleLocalSelection}
@@ -67,6 +69,7 @@ const PluginTagSelect = ({
             maxMenuHeight={300}
             onMenuClose={handleMenuClose}
             inputId="plugin-tag-select"
+            className="w-200"
         />
     )
 }

src/Shared/Components/Plugin/types.ts

@@ -129,7 +129,7 @@ export type PluginListContainerProps = BasePluginListContainerProps &
               /**
                * Map of parentId to boolean
                */
-              selectedPluginsMap: Record<number, boolean>
+              selectedPluginsMap: Record<number, true>
           }
     )
 

src/Shared/Components/Plugin/utils.ts

@@ -12,7 +12,7 @@ const parseMinimalPluginVersionsDTO = (
         description: pluginVersion.description || '',
         name: pluginVersion.name || '',
         pluginVersion: pluginVersion.pluginVersion || '',
-        isLatest: false,
+        isLatest: pluginVersion.isLatest || false,
     }))
 }