[dashboard] Fix URLShortLinkButton position after click anchor link (#7812)

superset/assets/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx

@@ -131,6 +131,17 @@ describe('Tabs', () => {
     expect(onChangeTab.callCount).toBe(1);
   });
 
+  it('should not call onChangeTab when anchor link is clicked', () => {
+    const onChangeTab = sinon.spy();
+    const wrapper = setup({ editMode: true, onChangeTab });
+    wrapper
+      .find('.dashboard-component-tabs .nav-tabs a .short-link-trigger')
+      .at(1) // will not call if it is already selected
+      .simulate('click');
+
+    expect(onChangeTab.callCount).toBe(0);
+  });
+
   it('should render a HoverMenu in editMode', () => {
     let wrapper = setup();
     expect(wrapper.find(HoverMenu)).toHaveLength(0);

superset/assets/src/components/AnchorLink.jsx

@@ -38,11 +38,6 @@ const defaultProps = {
 
 
 class AnchorLink extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.handleClickAnchorLink = this.handleClickAnchorLink.bind(this);
-  }
 
   componentDidMount() {
     const hash = this.getLocationHash();
@@ -65,17 +60,12 @@ class AnchorLink extends React.PureComponent {
     return (window.location.hash || '').substring(1);
   }
 
-  handleClickAnchorLink(ev) {
-    ev.stopPropagation();
-  }
-
   render() {
     const { anchorLinkId, filters, showShortLinkButton, placement } = this.props;
     return (
       <span
         className="anchor-link-container"
         id={anchorLinkId}
-        onClick={this.handleClickAnchorLink}
       >
         {showShortLinkButton &&
         <URLShortLinkButton

superset/assets/src/components/URLShortLinkButton.jsx

@@ -78,8 +78,8 @@ class URLShortLinkButton extends React.Component {
         onEnter={this.getCopyUrl}
         overlay={this.renderPopover()}
       >
-        <span className="btn btn-default btn-sm" data-test="short-link-button">
-          <i className="fa fa-link" />&nbsp;
+        <span className="short-link-trigger btn btn-default btn-sm" data-test="short-link-button">
+          <i className="short-link-trigger fa fa-link" />&nbsp;
         </span>
       </OverlayTrigger>
     );

superset/assets/src/dashboard/components/gridComponents/Tabs.jsx

@@ -100,7 +100,14 @@ class Tabs extends React.PureComponent {
     }
   }
 
-  handleClickTab(tabIndex) {
+  handleClickTab(tabIndex, ev) {
+    const target = ev.target;
+    // special handler for clicking on anchor link icon (or whitespace nearby):
+    // will show short link popover but do not change tab
+    if (target.classList.contains('short-link-trigger')) {
+      return;
+    }
+
     const { component, createComponent } = this.props;
 
     if (tabIndex === NEW_TAB_INDEX) {