fix: update selected options on url change

Author: arunjaindev

src/Shared/Components/FilterButton/FilterButton.tsx

@@ -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/types.tsx

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

src/Shared/Components/FilterButton/utils.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',
     }),
 })