Merge branch 'feat/filter-button' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/security-scan

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.15-beta-8",
+    "version": "0.1.15-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -26,6 +26,7 @@ export interface ApiResourceGroupType {
     gvk: GVKType
     namespaced: boolean
     isGrouped?: boolean
+    shortNames?: string[] | null
 }
 
 export interface ApiResourceType {

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import React, { cloneElement, useState } from 'react'
+import React, { cloneElement, useEffect, useState } from 'react'
 import ReactSelect, { MenuListProps, components } from 'react-select'
 import { Option } from '@Common/MultiSelectCustomization'
 import { OptionType } from '@Common/Types'
@@ -74,12 +74,22 @@ const FilterButton: React.FC<FilterButtonPropsType> = ({
     handleApplyChange,
     getFormattedFilterLabelValue,
     menuAlignFromRight,
+    controlWidth,
 }) => {
     const [menuIsOpen, setMenuIsOpen] = useState<boolean>(false)
     const [selectedOptions, setSelectedOptions] = useState<OptionType[]>(
         appliedFilters.map((filter) => ({ value: filter, label: getFormattedFilterLabelValue?.(filter) || filter })),
     )
 
+    useEffect(() => {
+        setSelectedOptions(
+            appliedFilters.map((filter) => ({
+                value: filter,
+                label: getFormattedFilterLabelValue?.(filter) || filter,
+            })),
+        )
+    }, [appliedFilters])
+
     const handleMenuOpen = () => {
         setMenuIsOpen(true)
     }
@@ -117,7 +127,7 @@ const FilterButton: React.FC<FilterButtonPropsType> = ({
                 Option,
                 ValueContainer,
             }}
-            styles={getFilterStyle(menuAlignFromRight)}
+            styles={getFilterStyle(controlWidth, menuAlignFromRight)}
             // @ts-ignore NOTE: passing this to use in FilterSelectMenuList
             handleApplyFilter={handleApply}
             menuIsOpen={menuIsOpen}

src/Shared/Components/FilterButton/FilterButton.tsx

@@ -8,4 +8,5 @@ export interface FilterButtonPropsType {
     disabled?: boolean
     getFormattedFilterLabelValue?: (identifier: string) => string
     menuAlignFromRight?: boolean
+    controlWidth?: string
 }

src/Shared/Components/FilterButton/types.tsx

@@ -1,6 +1,6 @@
 import { CommonGroupedDropdownStyles } from '../ReactSelect'
 
-export const getFilterStyle = (menuAlignFromRight: boolean) => ({
+export const getFilterStyle = (controlWidth?: string, menuAlignFromRight?: boolean) => ({
     ...CommonGroupedDropdownStyles,
     menu: (base) => ({
         ...base,
@@ -9,8 +9,16 @@ export const getFilterStyle = (menuAlignFromRight: boolean) => ({
     }),
     control: (base, state) => ({
         ...CommonGroupedDropdownStyles.control(base, state),
-        width: 'max-content',
-        maxWidth: '200px',
-        minWidth: '150px',
+        maxHeight: '36px',
+        minHeight: '36px',
+        fontSize: '12px',
+        paddingLeft: '8px',
+        width: controlWidth || '150px',
+    }),
+    container: (base) => ({
+        ...base,
+        height: '36px',
+        width: controlWidth || '150px',
+        maxHeight: '36px',
     }),
 })