fix(FE): variables with multiple values are merged into one string (#2960)

* fix: variables with multiple values are merged into one string

* fix: variables with multiple values are merged into one string

* fix: used memo

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Marco Schlicht 2023-08-02 12:09:49 +02:00 committed by GitHub
parent 5bf64053b7
commit aada9060da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,7 +5,7 @@ import query from 'api/dashboard/variables/query';
import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser'; import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
import sortValues from 'lib/dashbaordVariables/sortVariableValues'; import sortValues from 'lib/dashbaordVariables/sortVariableValues';
import map from 'lodash-es/map'; import map from 'lodash-es/map';
import { memo, useCallback, useEffect, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { IDashboardVariable } from 'types/api/dashboard/getAll'; import { IDashboardVariable } from 'types/api/dashboard/getAll';
import { variablePropsToPayloadVariables } from '../utils'; import { variablePropsToPayloadVariables } from '../utils';
@ -24,6 +24,16 @@ interface VariableItemProps {
onAllSelectedUpdate: (name: string, arg1: boolean) => void; onAllSelectedUpdate: (name: string, arg1: boolean) => void;
lastUpdatedVar: string; lastUpdatedVar: string;
} }
const getSelectValue = (
selectedValue: IDashboardVariable['selectedValue'],
): string | string[] => {
if (Array.isArray(selectedValue)) {
return selectedValue.map((item) => item.toString());
}
return selectedValue?.toString() || '';
};
function VariableItem({ function VariableItem({
variableData, variableData,
existingVariables, existingVariables,
@ -141,9 +151,15 @@ function VariableItem({
} }
}; };
const { selectedValue } = variableData;
const selectedValueStringified = useMemo(() => getSelectValue(selectedValue), [
selectedValue,
]);
const selectValue = variableData.allSelected const selectValue = variableData.allSelected
? 'ALL' ? 'ALL'
: variableData.selectedValue?.toString() || ''; : selectedValueStringified;
const mode = const mode =
variableData.multiSelect && !variableData.allSelected variableData.multiSelect && !variableData.allSelected
? 'multiple' ? 'multiple'