Merge pull request #244 from devtron-labs/feat/multi-select-picker

feat: add support for multi select picker

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.12",
+    "version": "0.2.13",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -23,12 +23,12 @@
     ],
     "scripts": {
         "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
-        "lint": "tsc --noEmit && NODE_OPTIONS=--max_old_space_size=8192 eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint": "tsc --noEmit && NODE_OPTIONS=--max_old_space_size=3072 eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
         "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
-        "dev": "NODE_OPTIONS=--max_old_space_size=8192 vite",
-        "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap",
-        "build-watch": "NODE_OPTIONS=--max_old_space_size=8192 vite build --sourcemap --watch",
+        "dev": "NODE_OPTIONS=--max_old_space_size=3072 vite",
+        "build": "NODE_OPTIONS=--max_old_space_size=3072 vite build --sourcemap",
+        "build-watch": "NODE_OPTIONS=--max_old_space_size=3072 vite build --sourcemap --watch",
         "build-lib": "vite build",
         "preview": "vite preview",
         "lint-staged": "lint-staged"

package.json

@@ -69,10 +69,14 @@ export const DeploymentConfigDiffMain = ({
             }
 
             const { selectPickerProps } = configItem
+
             return (
                 <Fragment key={configItem.id}>
                     <div className="dc__mxw-300">
-                        <SelectPicker {...selectPickerProps} isDisabled={isLoading || selectPickerProps?.isDisabled} />
+                        <SelectPicker<string | number, false>
+                            {...selectPickerProps}
+                            isDisabled={isLoading || selectPickerProps?.isDisabled}
+                        />
                     </div>
                     {index !== list.length - 1 && <span className="cn-9 fs-13 lh-20">/</span>}
                 </Fragment>

src/Assets/Icon/ic-filter-applied.svg

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { useMemo, useState } from 'react'
+import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
+import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
+import SelectPicker from './SelectPicker.component'
+import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
+
+const FilterSelectPicker = ({
+    appliedFilterOptions,
+    handleApplyFilter,
+    options,
+    ...props
+}: FilterSelectPickerProps) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false)
+    const [selectedOptions, setSelectedOptions] = useState<SelectPickerOptionType[]>(
+        structuredClone(appliedFilterOptions ?? []),
+    )
+
+    const appliedFiltersCount = appliedFilterOptions?.length ?? 0
+
+    const filterIcon = useMemo(
+        () => (appliedFiltersCount ? <ICFilterApplied className="p-2" /> : <ICFilter className="p-2" />),
+        [appliedFiltersCount],
+    )
+
+    const openMenu = () => {
+        setIsMenuOpen(true)
+    }
+
+    const closeMenu = () => {
+        setIsMenuOpen(false)
+    }
+
+    const handleSelectOnChange: SelectPickerProps<number | string, true>['onChange'] = (selectedOptionsToUpdate) => {
+        setSelectedOptions(structuredClone(selectedOptionsToUpdate))
+    }
+
+    const handleMenuClose = () => {
+        closeMenu()
+        setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
+    }
+
+    const renderApplyButton = (optionsSelected: Parameters<FilterSelectPickerProps['handleApplyFilter']>[0]) => {
+        const handleApplyClick = () => {
+            handleApplyFilter(optionsSelected)
+            closeMenu()
+        }
+
+        return (
+            <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 className="dc__mxw-250">
+            <SelectPicker
+                {...props}
+                options={options}
+                value={selectedOptions}
+                isMulti
+                menuIsOpen={isMenuOpen}
+                onMenuOpen={openMenu}
+                onMenuClose={handleMenuClose}
+                onChange={handleSelectOnChange}
+                renderMenuListFooter={renderApplyButton}
+                controlShouldRenderValue={false}
+                showSelectedOptionsCount
+                isSearchable
+                isClearable={false}
+                customSelectedOptionsCount={appliedFiltersCount}
+                icon={filterIcon}
+            />
+        </div>
+    )
+}
+
+export default FilterSelectPicker