feat: Make token editor form submit on onSubmit event (#2531)

src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -447,6 +447,7 @@ Object {
     "awsui_token-editor-field-operator_1heb1",
     "awsui_token-editor-field-property_1heb1",
     "awsui_token-editor-field-value_1heb1",
+    "awsui_token-editor-form_1wzqe",
     "awsui_token-editor-submit_1heb1",
   ],
   "radio-group": Array [

src/property-filter/__tests__/property-filter-token-editor.test.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 
 import PropertyFilter from '../../../lib/components/property-filter';
 import {
@@ -90,6 +90,7 @@ function findEditor(tokenIndex: number, { expandToViewport }: { expandToViewport
         valueAutosuggest: editor.findValueField().findControl()!.findAutosuggest()!,
         cancelButton: editor.findCancelButton(),
         submitButton: editor.findSubmitButton(),
+        form: editor.findForm(),
       }
     : null;
 }
@@ -255,5 +256,27 @@ describe.each([false, true])('token editor, expandToViewport=%s', expandToViewpo
         })
       );
     });
+
+    test('form submit closes the popover and saves the changes', () => {
+      const handleChange = jest.fn();
+      renderComponent({
+        onChange: handleChange,
+        query: { tokens: [{ propertyKey: 'string', value: 'first', operator: '!:' }], operation: 'or' },
+      });
+      const editor = openEditor(0, { expandToViewport });
+
+      act(() => editor.operatorSelect.openDropdown());
+      act(() => editor.operatorSelect.selectOption(1));
+      act(() => editor.propertySelect.openDropdown());
+      act(() => editor.propertySelect.selectOption(1));
+      act(() => editor.valueAutosuggest.setInputValue('123'));
+      fireEvent.submit(editor.form!.getElement());
+      expect(findEditor(0, { expandToViewport })).toBeNull();
+      expect(handleChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          detail: { operation: 'or', tokens: [{ operator: ':', propertyKey: undefined, value: '123' }] },
+        })
+      );
+    });
   });
 });

src/property-filter/token-editor.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React, { FormEvent } from 'react';
 import clsx from 'clsx';
 
 import InternalAutosuggest from '../autosuggest/internal';
@@ -225,9 +225,19 @@ export function TokenEditor({
     onChangeTemporaryToken({ ...temporaryToken, value: newValue });
   };
 
+  const onApply = () => {
+    setToken(matchTokenValue(temporaryToken, filteringOptions));
+    onDismiss();
+  };
+
+  const onFormSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    onApply();
+  };
+
   return (
     <div className={styles['token-editor']}>
-      <div className={styles['token-editor-form']}>
+      <form className={styles['token-editor-form']} onSubmit={onFormSubmit}>
         <InternalFormField
           label={i18nStrings.propertyText}
           className={clsx(styles['token-editor-field-property'], testUtilStyles['token-editor-field-property'])}
@@ -272,7 +282,7 @@ export function TokenEditor({
             i18nStrings={i18nStrings}
           />
         </InternalFormField>
-      </div>
+      </form>
 
       <div className={styles['token-editor-actions']}>
         <InternalButton
@@ -286,10 +296,7 @@ export function TokenEditor({
         <InternalButton
           className={clsx(styles['token-editor-submit'], testUtilStyles['token-editor-submit'])}
           formAction="none"
-          onClick={() => {
-            setToken(matchTokenValue(temporaryToken, filteringOptions));
-            onDismiss();
-          }}
+          onClick={onApply}
         >
           {i18nStrings.applyActionText}
         </InternalButton>

src/test-utils/dom/property-filter/index.ts

@@ -126,6 +126,10 @@ export class PropertyFilterEditorDropdownWrapper extends ComponentWrapper {
     return this.findComponent(`.${popoverStyles['dismiss-control']}`, ButtonWrapper)!;
   }
 
+  findForm(): ElementWrapper {
+    return this.findByClassName(styles['token-editor-form'])!;
+  }
+
   findPropertyField(): FormFieldWrapper {
     return this.findComponent(`.${testUtilStyles['token-editor-field-property']}`, FormFieldWrapper)!;
   }