fix: Filter and Metric popovers not closing after clicking Save (#11607)

* Fix filter popover not closing

* Fix metric popover not closing

* Add e2e tests

superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts

@@ -111,4 +111,18 @@ describe('AdhocFilters', () => {
       chartSelector: 'svg',
     });
   });
+
+  it('Click save without making any changes', () => {
+    cy.get('[data-test=adhoc_filters]').within(() => {
+      cy.get('.Select__control').scrollIntoView().click();
+      cy.get('input[type=text]').focus().type('name{enter}');
+    });
+
+    cy.get('[data-test=filter-edit-popover]').should('be.visible');
+    cy.get('[data-test="adhoc-filter-edit-popover-save-button"]').click();
+
+    cy.wait(1000);
+
+    cy.get('[data-test=filter-edit-popover]').should('not.be.visible');
+  });
 });

superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts

@@ -137,4 +137,22 @@ describe('AdhocMetrics', () => {
       chartSelector: 'svg',
     });
   });
+
+  it('Click save without making any changes', () => {
+    cy.get('[data-test=metrics]')
+      .find('.Select__control input')
+      .type('sum_girls', { force: true });
+
+    cy.get('[data-test=metrics]')
+      .find('.Select__option--is-focused')
+      .trigger('mousedown')
+      .click();
+
+    cy.get('[data-test=metrics-edit-popover]').should('be.visible');
+    cy.get('[data-test="AdhocMetricEdit#save"]').click();
+
+    cy.wait(1000);
+
+    cy.get('[data-test=metrics-edit-popover]').should('not.be.visible');
+  });
 });

superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx

@@ -85,7 +85,8 @@ export default class AdhocFilterEditPopover extends React.Component {
   }
 
   onSave() {
-    this.props.onChange(this.state.adhocFilter);
+    // unset isNew here in case save button was clicked when no changes were made
+    this.props.onChange({ ...this.state.adhocFilter, isNew: false });
     this.props.onClose();
   }
 
@@ -163,7 +164,7 @@ export default class AdhocFilterEditPopover extends React.Component {
               datasource={datasource}
               onHeightChange={this.adjustHeight}
               partitionColumn={partitionColumn}
-              popoverRef={this.popoverContentRef}
+              popoverRef={this.popoverContentRef.current}
             />
           </Tabs.TabPane>
           <Tabs.TabPane

superset-frontend/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx

@@ -100,7 +100,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     };
 
     this.menuPortalProps = {
-      menuPortalTarget: props.popoverRef?.current || document.body,
+      menuPortalTarget: props.popoverRef,
       menuPosition: 'fixed',
       menuPlacement: 'bottom',
     };

superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx

@@ -100,9 +100,11 @@ export default class AdhocMetricEditPopover extends React.Component {
   }
 
   onSave() {
+    // unset isNew here in case save button was clicked when no changes were made
     this.props.onChange({
       ...this.state.adhocMetric,
       ...this.props.title,
+      isNew: false,
     });
     this.props.onClose();
   }