Added custom input for Select, Multi select (#507)

* custom element added * add test for custom values editor * options update * rename allowCustomValue * add migration * Updates --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Oct 3, 2024 · 91b24fb · 91b24fb
1 parent 4ee439b
commit 91b24fb
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Features / Enhancements
 
 - Updated Autosize Code Editor toolbar (#506)
+- Added custom input for Select, Multi select (#507)
 
 ## 4.6.0 (2024-09-28)
 

diff --git a/src/__mocks__/@grafana/ui.tsx b/src/__mocks__/@grafana/ui.tsx
@@ -102,7 +102,7 @@ const TimeOfDayPicker = jest.fn(TimeOfDayPickerMock);
 /**
  * Mock Select component
  */
-const SelectMock = ({ options, onChange, value, isMulti, isClearable, ...restProps }: any) => (
+const SelectMock = ({ options, onChange, value, isMulti, isClearable, allowCustomValue, ...restProps }: any) => (
   <select
     onChange={(event: any) => {
       if (onChange) {

diff --git a/src/components/ElementEditor/ElementEditor.tsx b/src/components/ElementEditor/ElementEditor.tsx
@@ -20,6 +20,7 @@ import {
   CODE_LANGUAGE_OPTIONS,
   CUSTOM_BUTTON_SIZE_OPTIONS,
   CUSTOM_BUTTON_VARIANT_OPTIONS,
+  CUSTOM_VALUE_OPTIONS,
   FORM_ELEMENT_TYPE_OPTIONS,
   FormElementType,
   LINK_TARGET_OPTIONS,
@@ -590,6 +591,18 @@ export const ElementEditor: React.FC<Props> = ({ element, onChange, onChangeOpti
         isFormElementType(element, FormElementType.DISABLED) ||
         isFormElementType(element, FormElementType.CHECKBOX_LIST)) && (
         <>
+          <InlineField label="Custom values" labelWidth={14}>
+            <RadioButtonGroup
+              options={CUSTOM_VALUE_OPTIONS}
+              value={!!element.allowCustomValue}
+              onChange={(value) => {
+                onChange({
+                  ...element,
+                  allowCustomValue: value,
+                });
+              }}
+            />
+          </InlineField>
           <InlineFieldRow>
             <InlineField label="Options Source" labelWidth={14}>
               <RadioButtonGroup

diff --git a/src/components/FormElement/components/SelectElement/SelectElement.tsx b/src/components/FormElement/components/SelectElement/SelectElement.tsx
@@ -48,6 +48,7 @@ export const SelectElement: React.FC<Props> = ({ element, onChange, highlightCla
         isMulti={element.type === FormElementType.MULTISELECT}
         aria-label={TEST_IDS.formElements.fieldSelect}
         value={element.value !== undefined ? element.value : null}
+        allowCustomValue={element.allowCustomValue}
         onChange={(event) => {
           onChange<typeof element>({
             ...element,

diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
@@ -1016,6 +1016,37 @@ describe('Form Elements Editor', () => {
       });
     });
 
+    it('Should allow custom values', async () => {
+      const element = {
+        ...FORM_ELEMENT_DEFAULT,
+        id: 'id',
+        type: FormElementType.SELECT,
+        optionsSource: undefined,
+      };
+      const elements = [element];
+
+      render(
+        getComponent({
+          value: elements,
+          onChange,
+          context: {
+            data: [],
+          },
+        })
+      );
+
+      /**
+       * Open id element
+       */
+      const elementSelectors = openElement(element.id, element.type);
+
+      expect(elementSelectors.optionsCustomValues(false, 'Allow')).not.toBeChecked();
+
+      await act(() => fireEvent.click(elementSelectors.optionsCustomValues(false, 'Allow')));
+
+      expect(elementSelectors.optionsCustomValues(false, 'Allow')).toBeChecked();
+    });
+
     it('Should update Width', async () => {
       const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id', width: 100 }];
 

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -144,6 +144,7 @@ export const TEXTAREA_DEFAULT: TextareaOptions = {
  */
 export const SELECT_DEFAULT: SelectOptions = {
   options: [],
+  allowCustomValue: false,
   optionsSource: OptionsSource.CUSTOM,
 };
 

diff --git a/src/constants/form-element.ts b/src/constants/form-element.ts
@@ -308,3 +308,21 @@ export const CUSTOM_BUTTON_VARIANT_OPTIONS: SelectableValue[] = [
     label: 'Custom',
   },
 ];
+
+/**
+ * Custom Value Options
+ */
+export const CUSTOM_VALUE_OPTIONS = [
+  {
+    label: 'Allow',
+    value: true,
+    ariaLabel: TEST_IDS.formElementsEditor.optionsCustomValues('Allow'),
+    icon: 'keyboard',
+  },
+  {
+    label: 'Disallow',
+    value: false,
+    ariaLabel: TEST_IDS.formElementsEditor.optionsCustomValues('Disallow'),
+    icon: 'times',
+  },
+];
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
@@ -137,6 +137,7 @@ export const TEST_IDS = {
     fieldLinkText: 'data-testid form-elements-editor field-link-text',
     fieldGetOptions: 'form-elements-editor field-get-options',
     fileMultipleOption: (name: unknown) => `form-elements-editor file-multiple-option-${name}`,
+    optionsCustomValues: (value: unknown) => `form-elements-editor options-source-option-${value}`,
   },
   formElementsSection: {
     sectionContent: (id: string, name: string) => `data-testid form-elements-section section-content-${id}-${name}`,

diff --git a/src/migration.test.ts b/src/migration.test.ts
@@ -671,4 +671,46 @@ describe('Migration', () => {
       });
     });
   });
+
+  it('Should return allowCustom property for select and multiselect elements if not specified', () => {
+    const options: Partial<PanelOptions> = {
+      sync: true,
+      initial: {} as any,
+      update: {} as any,
+      resetAction: {} as any,
+      elements: [
+        {
+          type: FormElementType.MULTISELECT,
+        },
+        {
+          type: FormElementType.SELECT,
+        },
+        {
+          allowCustomValue: true,
+          type: FormElementType.SELECT,
+        },
+        {
+          allowCustomValue: false,
+          type: FormElementType.MULTISELECT,
+        },
+        {
+          type: FormElementType.STRING,
+        },
+      ] as any,
+    };
+
+    const result = getMigratedOptions({
+      options: options as any,
+    } as any);
+
+    const elements: any = result.elements;
+
+    expect(elements[0].allowCustomValue).toBeDefined();
+    expect(elements[0].allowCustomValue).toEqual(false);
+    expect(elements[1].allowCustomValue).toBeDefined();
+    expect(elements[1].allowCustomValue).toEqual(false);
+    expect(elements[2].allowCustomValue).toEqual(true);
+    expect(elements[3].allowCustomValue).toEqual(false);
+    expect(elements[4].allowCustomValue).toBeUndefined();
+  });
 });
diff --git a/src/migration.ts b/src/migration.ts
@@ -253,5 +253,19 @@ export const getMigratedOptions = (panel: PanelModel<OutdatedPanelOptions>): Pan
     );
   }
 
+  /**
+   * Normalize allowCustomValue for Select and Multiselect Type
+   */
+  if (options.elements && options.elements.length > 0) {
+    options.elements.forEach((element) => {
+      if (
+        (element.type === FormElementType.SELECT || element.type === FormElementType.MULTISELECT) &&
+        !element.hasOwnProperty('allowCustomValue')
+      ) {
+        element.allowCustomValue = false;
+      }
+    });
+  }
+
   return options as PanelOptions;
 };
diff --git a/src/types/form-element.ts b/src/types/form-element.ts
@@ -323,6 +323,13 @@ export interface SelectOptions {
    * @type {string}
    */
   getOptions?: string;
+
+  /**
+   * Allow Custom values
+   *
+   * @type {boolean}
+   */
+  allowCustomValue: boolean;
 }
 
 /**

diff --git a/src/utils/form-element.ts b/src/utils/form-element.ts
@@ -135,6 +135,7 @@ export const getElementWithNewType = (
         return {
           ...baseValues,
           ...selectOptions,
+          allowCustomValue: false,
           type: newType,
           value: Array.isArray(baseValues) ? baseValues : [],
         };
@@ -143,6 +144,7 @@ export const getElementWithNewType = (
       return {
         ...baseValues,
         ...selectOptions,
+        allowCustomValue: false,
         type: newType,
       };
     }
@@ -462,7 +464,7 @@ export const convertToElementValue = (
     case FormElementType.LINK: {
       return {
         ...element,
-        value: typeof value === 'string' ? value : value?.toString() ?? '',
+        value: typeof value === 'string' ? value : (value?.toString() ?? ''),
       };
     }
     case FormElementType.NUMBER: