fix #345 - Filters - Fix bug: Only one filterKey can render icons

src/components/Filters/FilterUnit/ValuesMultiSelect/ClientSide.tsx

@@ -31,7 +31,7 @@ export const ClientSideValuesMS: FC<ValuesMultiSelectProps> = ({
 		<MultiSelect
 			{...getMultiSelectProps({
 				id,
-				multiSelectProps: { options },
+				multiSelectProps: { options, optionsConfig },
 				onFilterChange,
 				selectedValues
 			})}

src/components/Filters/FilterUnit/ValuesMultiSelect/ServerSide.tsx

@@ -141,7 +141,11 @@ export const ServerSideValuesMS: FC<Props> = ({
 		<MultiSelect
 			{...getMultiSelectProps({
 				id,
-				multiSelectProps: { options, ...dynamicFilterProps },
+				multiSelectProps: {
+					options,
+					optionsConfig,
+					...dynamicFilterProps
+				},
 				onFilterChange,
 				selectedValues
 			})}

src/components/Filters/FilterUnit/index.tsx

@@ -34,7 +34,7 @@ const FilterUnit: FC<FilterUnitProps> = ({
 	selectedValues,
 	staticFilter
 }: FilterUnitProps) => {
-	const { allFilters, config, mode } = useFiltersContext()
+	const { allFilters, config = {}, mode } = useFiltersContext()
 
 	const classes = useFilterUnitStyles()
 
@@ -62,15 +62,13 @@ const FilterUnit: FC<FilterUnitProps> = ({
 	}, [id, selectedKey])
 
 	useEffect(() => {
-		const iconConfig = config?.iconConfig
-
-		// if iconConfig exists in FiltersConfig and the filterKey in the
-		// iconConfig matches the selectedKey, use iconConfig.iconMap
-		// to define optionsConfig and save it to state. It'll be passed to
-		// Filter Values MultiSelect (rendered in renderValues()).
-		if (iconConfig && selectedKey === iconConfig.filterKey) {
+		// if  config[selectedKey] and config[selectedKey].iconMap exists,
+		// use config[selectedKey].iconMap  to define optionsConfig
+		// and save it to state. It'll be passed to Filter Values MultiSelect
+		// (rendered in renderValues()).
+		if (selectedKey && config[selectedKey] && config[selectedKey].iconMap) {
 			setOptionsConfig({
-				iconMap: iconConfig.iconMap
+				iconMap: config[selectedKey].iconMap
 			})
 		}
 	}, [config, selectedKey])

src/components/Filters/FiltersSummary.tsx

@@ -50,7 +50,7 @@ interface FiltersSummaryProps {
 const FiltersSummary: FC<FiltersSummaryProps> = ({
 	filtersList
 }: FiltersSummaryProps) => {
-	const { allFilters, config } = useFiltersContext()
+	const { allFilters, config = {} } = useFiltersContext()
 
 	const classes = useStyles()
 
@@ -64,12 +64,9 @@ const FiltersSummary: FC<FiltersSummaryProps> = ({
 				}) => {
 					let values: string[] | ReactNode[]
 
-					const iconConfig = config?.iconConfig
-
-					// If config.iconConfig exists and the filterKey in that config
-					// matches the current config, render icons.
-					if (iconConfig && iconConfig.filterKey === selectedKey) {
-						const iconMap = iconConfig.iconMap
+					// If selectedKey and config[selectedKey].iconMap exists, render icons
+					if (config[selectedKey] && config[selectedKey].iconMap) {
+						const iconMap = config[selectedKey].iconMap || {}
 
 						values = selectedValues.map(({ text, value }) =>
 							// If value exists in the iconMap, render the icon.

src/components/Filters/fixtures/0_sample_data.ts

@@ -68,8 +68,7 @@ export const mockFilterOptions: FilterOptions = [
 ]
 
 export const filtersConfig: FiltersConfig = {
-	iconConfig: {
-		filterKey: 'vendors',
+	key4: {
 		iconMap: {
 			aws: 'https://dummyimage.com/400x400/ff9900/fff&text=A',
 			azure: 'https://dummyimage.com/400x400/0072c6/fff&text=A'

src/components/Filters/types.ts

@@ -21,9 +21,8 @@ export interface ProcessedFilters {
 }
 
 export interface FiltersConfig {
-	iconConfig?: {
-		filterKey: string
-		iconMap: {
+	[filterKey: string]: {
+		iconMap?: {
 			[key: string]: string
 		}
 	}