Fix dropdown/multiselect add option (#10243)

* fix not able to add option in Dropdown and multiselect

* fix multiselect default value

* fix options not updating on dropdown component change

* Fix icon visibility issue in inspector

* fix

* fix

frontend/src/Editor/CodeBuilder/Elements/Visibility.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { resolveReferences } from '@/_helpers/utils';
 
 export const Visibility = ({ onVisibilityChange, styleDefinition }) => {
-  const iconVisibility = styleDefinition?.iconVisibility?.value || false;
+  const iconVisibility = resolveReferences(styleDefinition?.iconVisibility?.value) || false;
 
   return (
     <div
@@ -11,7 +12,7 @@ export const Visibility = ({ onVisibilityChange, styleDefinition }) => {
       style={{ top: iconVisibility && '42%' }}
       onClick={(e) => {
         e.stopPropagation();
-        onVisibilityChange(!iconVisibility);
+        onVisibilityChange(`{{${!iconVisibility}}}`);
       }}
     >
       <SolidIcon name={iconVisibility ? 'eye1' : 'eyedisable'} width="20" fill={'var(--slate8)'} />

frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx

@@ -60,16 +60,7 @@ export const DropdownV2 = ({
   dataCy,
   isEditorReady,
 }) => {
-  const {
-    label,
-    value,
-    advanced,
-    schema,
-    placeholder,
-    loadingState: dropdownLoadingState,
-    disabledState,
-    options,
-  } = properties;
+  const { label, value, advanced, schema, placeholder, loadingState: dropdownLoadingState, disabledState } = properties;
   const {
     selectedTextColor,
     fieldBorderRadius,
@@ -93,6 +84,7 @@ export const DropdownV2 = ({
   const { value: exposedValue } = exposedVariables;
   const currentState = useCurrentState();
   const isMandatory = resolveReferences(component?.definition?.validation?.mandatory?.value, currentState);
+  const options = component?.definition?.properties?.options?.value;
   const validationData = validate(currentValue);
   const { isValid, validationError } = validationData;
   const ref = React.useRef(null);
@@ -103,7 +95,6 @@ export const DropdownV2 = ({
   const [searchInputValue, setSearchInputValue] = useState('');
   const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
   const labelRef = useRef();
-
   function findDefaultItem(schema) {
     let _schema = schema;
     if (!Array.isArray(schema)) {
@@ -112,15 +103,16 @@ export const DropdownV2 = ({
     const foundItem = _schema?.find((item) => item?.default === true);
     return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined;
   }
-
   const selectOptions = useMemo(() => {
     let _options = advanced ? schema : options;
     if (Array.isArray(_options)) {
       let _selectOptions = _options
-        .filter((data) => data?.visible?.value)
-        .map((value) => ({
-          ...value,
-          isDisabled: value?.disable?.value,
+        .filter((data) => resolveReferences(advanced ? data?.visible : data?.visible?.value, currentState))
+        .map((data) => ({
+          ...data,
+          label: resolveReferences(data?.label, currentState),
+          value: resolveReferences(data?.value, currentState),
+          isDisabled: resolveReferences(advanced ? data?.disable : data?.disable?.value, currentState),
         }));
       return _selectOptions;
     } else {

frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx

@@ -31,8 +31,6 @@ export const MultiselectV2 = ({
 }) => {
   let {
     label,
-    values,
-    options,
     showAllOption,
     disabledState,
     advanced,
@@ -62,6 +60,8 @@ export const MultiselectV2 = ({
   const [selected, setSelected] = useState([]);
   const currentState = useCurrentState();
   const isMandatory = resolveReferences(component?.definition?.validation?.mandatory?.value, currentState);
+  const options = component?.definition?.properties?.options?.value;
+  const values = component?.definition?.properties?.values?.value;
   const multiselectRef = React.useRef(null);
   const labelRef = React.useRef(null);
   const validationData = validate(selected?.length ? selected?.map((option) => option.value) : null);
@@ -87,10 +87,12 @@ export const MultiselectV2 = ({
     const _options = advanced ? schema : options;
     let _selectOptions = Array.isArray(_options)
       ? _options
-          .filter((data) => data?.visible?.value)
-          .map((value) => ({
-            ...value,
-            isDisabled: value?.disable?.value,
+          .filter((data) => resolveReferences(advanced ? data?.visible : data?.visible?.value, currentState))
+          .map((data) => ({
+            ...data,
+            label: resolveReferences(data?.label, currentState),
+            value: resolveReferences(data?.value, currentState),
+            isDisabled: resolveReferences(advanced ? data?.disable : data?.disable?.value, currentState),
           }))
       : [];
     return _selectOptions;
@@ -365,6 +367,7 @@ export const MultiselectV2 = ({
     }),
   };
   const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
+
   return (
     <>
       <div

frontend/src/Editor/Inspector/Components/Select.jsx

@@ -42,17 +42,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
     if (isDynamicOptionsEnabled || typeof optionsValue === 'string') {
       options = resolveReferences(optionsValue, currentState);
     } else {
-      options = optionsValue?.map((option) => {
-        const newOption = { ...option };
-
-        valuesToResolve.forEach((key) => {
-          if (option[key]) {
-            newOption[key] = resolveReferences(option[key], currentState);
-          }
-        });
-
-        return newOption;
-      });
+      options = optionsValue?.map((option) => option);
     }
 
     return options.map((option) => {
@@ -271,7 +261,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
 
   useEffect(() => {
     setOptions(constructOptions());
-  }, [isMultiSelect]);
+  }, [isMultiSelect, component?.id]);
 
   const _renderOverlay = (item, index) => {
     return (
@@ -310,7 +300,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
           <div className="field mb-2" data-cy={`input-and-label-column-name`}>
             <CodeHinter
               currentState={currentState}
-              initialValue={item?.default?.value}
+              initialValue={isMultiSelect ? `{{${markedAsDefault.includes(item.value)}}}` : item?.default?.value}
               theme={darkMode ? 'monokai' : 'default'}
               mode="javascript"
               lineNumbers={false}
@@ -416,7 +406,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
                                     <SortableList.DragHandle show />
                                   </div>
                                   <div className="col text-truncate cursor-pointer" style={{ padding: '0px' }}>
-                                    {item.label}
+                                    {resolveReferences(item.label, currentState)}
                                   </div>
                                   <div className="col-auto">
                                     {index === hoveredOptionIndex && (

frontend/src/Editor/WidgetManager/configs/dropdownV2.js

@@ -46,21 +46,6 @@ export const dropdownV2Config = {
       },
       accordian: 'Options',
     },
-    value: {
-      type: 'code',
-      displayName: 'Default value',
-      conditionallyRender: {
-        key: 'advanced',
-        value: false,
-      },
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }],
-        },
-      },
-      accordian: 'Options',
-    },
     schema: {
       type: 'code',
       displayName: 'Schema',
@@ -286,11 +271,32 @@ export const dropdownV2Config = {
       advanced: { value: `{{false}}` },
       schema: {
         value:
-          "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true  },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true}  },{label: 'option3',value: '3',disable: {value: false },visible: {value:true  },default: {value: false}  }\t]}}",
+          "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}",
       },
       options: {
-        value:
-          "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true  },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true}  },{label: 'option3',value: '3',disable: {value: false },visible: {value:true  },default: {value: false}  }\t]}}",
+        value: [
+          {
+            label: 'option1',
+            value: '1',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: false },
+          },
+          {
+            label: 'option2',
+            value: '2',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: true },
+          },
+          {
+            label: 'option3',
+            value: '3',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: false },
+          },
+        ],
       },
       label: { value: 'Select' },
       value: { value: '{{"2"}}' },
@@ -299,8 +305,6 @@ export const dropdownV2Config = {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
-      optionVisibility: { value: '{{[true, true, true]}}' },
-      optionDisable: { value: '{{[false, false, false]}}' },
       tooltip: { value: '' },
     },
     events: [],

frontend/src/Editor/WidgetManager/configs/multiselectV2.js

@@ -309,8 +309,7 @@ export const multiselectV2Config = {
     },
     properties: {
       label: { value: 'Select' },
-      // value: { value: '{{["1","2"]}}' },
-      values: { value: '{{["1","2"]}}' },
+      values: { value: ['1', '2'] },
       advanced: { value: `{{false}}` },
       showAllOption: { value: '{{false}}' },
       optionsLoadingState: { value: '{{false}}' },
@@ -320,11 +319,32 @@ export const multiselectV2Config = {
       loadingState: { value: '{{false}}' },
       schema: {
         value:
-          "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true  },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true}  },{label: 'option3',value: '3',disable: {value: false },visible: {value:true  },default: {value: false}  }\t]}}",
+          "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}",
       },
       options: {
-        value:
-          "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true  },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true}  },{label: 'option3',value: '3',disable: {value: false },visible: {value:true  },default: {value: false}  }\t]}}",
+        value: [
+          {
+            label: 'option1',
+            value: '1',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: false },
+          },
+          {
+            label: 'option2',
+            value: '2',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: true },
+          },
+          {
+            label: 'option3',
+            value: '3',
+            disable: { value: false },
+            visible: { value: true },
+            default: { value: false },
+          },
+        ],
       },
       tooltip: { value: '' },
     },