feat: add filter select picker

Author: eshankvaish

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { useEffect, useState } from 'react'
+import SelectPicker from './SelectPicker.component'
+import { FilterSelectPickerProps, SelectPickerProps } from './type'
+
+const FilterSelectPicker = ({ appliedFilterOptions, handleApplyFilter, ...props }: FilterSelectPickerProps) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false)
+    const [selectedOptions, setSelectedOptions] = useState<FilterSelectPickerProps['options']>()
+
+    const resetSelectedOptions = () => {
+        setSelectedOptions(structuredClone(appliedFilterOptions))
+    }
+
+    useEffect(() => {
+        resetSelectedOptions()
+    }, [appliedFilterOptions])
+
+    const openMenu = () => {
+        setIsMenuOpen(true)
+    }
+
+    const closeMenu = () => {
+        setIsMenuOpen(false)
+    }
+
+    const handleSelectOnChange: SelectPickerProps['onChange'] = (selectedOptionsToUpdate) => {
+        setSelectedOptions(structuredClone(selectedOptionsToUpdate))
+    }
+
+    const handleMenuClose = () => {
+        closeMenu()
+        resetSelectedOptions()
+    }
+
+    const handleApplyClick = () => {
+        handleApplyFilter(selectedOptions)
+        closeMenu()
+    }
+
+    const renderApplyButton = () => (
+        <div className="p-8 dc__border-top-n1">
+            <button
+                type="button"
+                className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                onClick={handleApplyClick}
+                aria-label="Apply filters"
+            >
+                Apply
+            </button>
+        </div>
+    )
+
+    return (
+        <div>
+            <SelectPicker
+                {...props}
+                isMulti
+                menuIsOpen={isMenuOpen}
+                onMenuOpen={openMenu}
+                onMenuClose={handleMenuClose}
+                onChange={handleSelectOnChange}
+                renderMenuListFooter={renderApplyButton}
+            />
+        </div>
+    )
+}
+
+export default FilterSelectPicker

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -228,7 +228,6 @@ const SelectPicker = ({
     )
 
     // Used to show the create new option for creatable select
-    // TODO: FilterButton; Target Platform
     const isValidNewOption = (inputValue: string) =>
         isCreatable &&
         !!inputValue?.trim() &&

src/Shared/Components/SelectPicker/index.ts

@@ -15,4 +15,5 @@
  */
 
 export { default as SelectPicker } from './SelectPicker.component'
+export { default as FilterSelectPicker } from './FilterSelectPicker'
 export * from './type'

src/Shared/Components/SelectPicker/type.ts

@@ -67,6 +67,7 @@ export type SelectPickerProps = Pick<
     | 'menuIsOpen'
     | 'onMenuOpen'
     | 'onMenuClose'
+    | 'autoFocus'
 > &
     Required<Pick<SelectProps, 'inputId'>> & {
         /**
@@ -193,3 +194,10 @@ export type SelectPickerProps = Pick<
               renderCustomOptions?: never
           }
     )
+
+export interface FilterSelectPickerProps
+    extends Required<Pick<SelectPickerProps, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>,
+        Pick<SelectPickerProps, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus'> {
+    appliedFilterOptions: SelectPickerProps['options']
+    handleApplyFilter: (filtersToApply: SelectPickerProps['options']) => void
+}