chore: Rename Tooltip2 to Tooltip (#13238)

Remove the old Tooltip implementation as it is no longer in use.
Update tests for tooltip component to test new behavior and mock
popper to avoid errors with document.createRange()

Refs SEN-633

docs-ui/components/tooltip.stories.js

@@ -4,7 +4,6 @@ import {withInfo} from '@storybook/addon-info';
 import {text, boolean, select} from '@storybook/addon-knobs';
 
 import Tooltip from 'app/components/tooltip';
-import Tooltip2 from 'app/components/tooltip2';
 import Button from 'app/components/button';
 
 class CustomThing extends React.Component {
@@ -16,40 +15,6 @@ class CustomThing extends React.Component {
 storiesOf('UI|Tooltip', module)
   .add(
     'Tooltip',
-    withInfo({
-      text: 'Adds a tool to any component',
-      propTablesExclude: [Button],
-    })(() => {
-      const title = text('My tooltip', 'My tooltip');
-      const disabled = boolean('Disabled', false);
-
-      return (
-        <div>
-          <p>Test</p>
-          <div>
-            <Tooltip title={title} disabled={disabled}>
-              <Button>Custom React Component</Button>
-            </Tooltip>
-          </div>
-          <p>Test with options</p>
-
-          <div>
-            <Tooltip
-              title={title}
-              disabled={disabled}
-              tooltipOptions={{
-                placement: 'bottom',
-              }}
-            >
-              <button>Native button</button>
-            </Tooltip>
-          </div>
-        </div>
-      );
-    })
-  )
-  .add(
-    'Tooltip v2',
     withInfo({
       text: 'Adds a tooltip to any component,',
       propTablesExclude: [CustomThing, Button, 'Button'],
@@ -67,16 +32,16 @@ storiesOf('UI|Tooltip', module)
         <React.Fragment>
           <h3>With styled component trigger</h3>
           <p>
-            <Tooltip2 title={title} position={position} disabled={disabled} containerDisplayMode={displayMode}>
+            <Tooltip title={title} position={position} disabled={disabled} containerDisplayMode={displayMode}>
               <Button>Styled button</Button>
-            </Tooltip2>
+            </Tooltip>
           </p>
 
           <h3>With class component trigger</h3>
           <p>
-            <Tooltip2 title={title} position={position} disabled={disabled}>
+            <Tooltip title={title} position={position} disabled={disabled}>
               <CustomThing>Custom React Component</CustomThing>
-            </Tooltip2>
+            </Tooltip>
           </p>
 
           <h3>With an SVG element trigger</h3>
@@ -87,15 +52,15 @@ storiesOf('UI|Tooltip', module)
               height="100"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <Tooltip2 title={title} position={position} disabled={disabled} containerDisplayMode={displayMode}>
+              <Tooltip title={title} position={position} disabled={disabled} containerDisplayMode={displayMode}>
                 <circle cx="50" cy="50" r="50" />
-              </Tooltip2>
+              </Tooltip>
             </svg>
           </p>
 
           <h3>With element title and native html element</h3>
           <p>
-            <Tooltip2
+            <Tooltip
               title={
                 <span>
                   <em>so strong</em>
@@ -106,7 +71,7 @@ storiesOf('UI|Tooltip', module)
               disabled={disabled}
             >
               <button>Native button</button>
-            </Tooltip2>
+            </Tooltip>
           </p>
         </React.Fragment>
       );

src/sentry/static/sentry/app/components/actions/ignore.jsx

@@ -9,7 +9,7 @@ import Duration from 'app/components/duration';
 import CustomIgnoreCountModal from 'app/components/customIgnoreCountModal';
 import CustomIgnoreDurationModal from 'app/components/customIgnoreDurationModal';
 import ActionLink from 'app/components/actions/actionLink';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 import GuideAnchor from 'app/components/assistant/guideAnchor';
 
 export default class IgnoreActions extends React.Component {
@@ -82,7 +82,7 @@ export default class IgnoreActions extends React.Component {
     if (isIgnored) {
       return (
         <div className="btn-group">
-          <Tooltip2 title={t('Change status to unresolved')}>
+          <Tooltip title={t('Change status to unresolved')}>
             <a
               className={linkClassName}
               data-test-id="button-unresolve"
@@ -90,7 +90,7 @@ export default class IgnoreActions extends React.Component {
             >
               <span className="icon-ban" />
             </a>
-          </Tooltip2>
+          </Tooltip>
         </div>
       );
     }

src/sentry/static/sentry/app/components/actions/resolve.jsx

@@ -7,7 +7,7 @@ import CustomResolutionModal from 'app/components/customResolutionModal';
 import MenuItem from 'app/components/menuItem';
 import DropdownLink from 'app/components/dropdownLink';
 import ActionLink from 'app/components/actions/actionLink';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 import GuideAnchor from 'app/components/assistant/guideAnchor';
 
 export default class ResolveActions extends React.Component {
@@ -57,7 +57,7 @@ export default class ResolveActions extends React.Component {
     if (isAutoResolved) {
       return (
         <div className="btn-group">
-          <Tooltip2
+          <Tooltip
             title={t(
               'This event is resolved due to the Auto Resolve configuration for this project'
             )}
@@ -65,13 +65,13 @@ export default class ResolveActions extends React.Component {
             <a className={this.getButtonClass('active')}>
               <span className="icon-checkmark" />
             </a>
-          </Tooltip2>
+          </Tooltip>
         </div>
       );
     } else {
       return (
         <div className="btn-group">
-          <Tooltip2 title={t('Unresolve')}>
+          <Tooltip title={t('Unresolve')}>
             <a
               data-test-id="button-unresolve"
               className={this.getButtonClass('active')}
@@ -79,7 +79,7 @@ export default class ResolveActions extends React.Component {
             >
               <span className="icon-checkmark" />
             </a>
-          </Tooltip2>
+          </Tooltip>
         </div>
       );
     }
@@ -148,7 +148,7 @@ export default class ResolveActions extends React.Component {
           >
             <MenuItem header={true}>{t('Resolved In')}</MenuItem>
             <MenuItem noAnchor={true}>
-              <Tooltip2 title={actionTitle} containerDisplayMode="block">
+              <Tooltip title={actionTitle} containerDisplayMode="block">
                 <ActionLink
                   {...actionLinkProps}
                   onAction={() => {
@@ -165,8 +165,8 @@ export default class ResolveActions extends React.Component {
                 >
                   {t('The next release')}
                 </ActionLink>
-              </Tooltip2>
-              <Tooltip2 title={actionTitle} containerDisplayMode="block">
+              </Tooltip>
+              <Tooltip title={actionTitle} containerDisplayMode="block">
                 <ActionLink
                   {...actionLinkProps}
                   onAction={() => {
@@ -188,8 +188,8 @@ export default class ResolveActions extends React.Component {
                       )
                     : t('The current release')}
                 </ActionLink>
-              </Tooltip2>
-              <Tooltip2 title={actionTitle} containerDisplayMode="block">
+              </Tooltip>
+              <Tooltip title={actionTitle} containerDisplayMode="block">
                 <ActionLink
                   {...actionLinkProps}
                   onAction={() => hasRelease && this.setState({modal: true})}
@@ -197,7 +197,7 @@ export default class ResolveActions extends React.Component {
                 >
                   {t('Another version\u2026')}
                 </ActionLink>
-              </Tooltip2>
+              </Tooltip>
             </MenuItem>
           </DropdownLink>
         </div>

src/sentry/static/sentry/app/components/avatar/avatarList.jsx

@@ -5,7 +5,7 @@ import {Flex} from 'grid-emotion';
 
 import SentryTypes from 'app/sentryTypes';
 import Avatar from 'app/components/avatar';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 
 export default class AvatarList extends React.Component {
   static propTypes = {
@@ -44,12 +44,12 @@ export default class AvatarList extends React.Component {
     return (
       <Flex direction="row-reverse">
         {!!numCollapsedUsers && (
-          <Tooltip2 title={`${numCollapsedUsers} other ${typeMembers}`}>
+          <Tooltip title={`${numCollapsedUsers} other ${typeMembers}`}>
             <CollapsedUsers size={avatarSize}>
               {numCollapsedUsers < 99 && <Plus>+</Plus>}
               {numCollapsedUsers}
             </CollapsedUsers>
-          </Tooltip2>
+          </Tooltip>
         )}
         {visibleUsers.map(user => {
           return (

src/sentry/static/sentry/app/components/avatar/baseAvatar.jsx

@@ -5,7 +5,7 @@ import qs from 'query-string';
 import styled from 'react-emotion';
 
 import LetterAvatar from 'app/components/letterAvatar';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 
 import {imageStyle} from './styles';
 import Gravatar from './gravatar';
@@ -163,7 +163,7 @@ class BaseAvatar extends React.Component {
     }
 
     return (
-      <Tooltip2 title={tooltip} disabled={!hasTooltip} {...tooltipOptions}>
+      <Tooltip title={tooltip} disabled={!hasTooltip} {...tooltipOptions}>
         <StyledBaseAvatar
           loaded={this.state.hasLoaded}
           className={classNames('avatar', className)}
@@ -176,7 +176,7 @@ class BaseAvatar extends React.Component {
           {this.state.showBackupAvatar && this.renderLetterAvatar()}
           {this.renderImg()}
         </StyledBaseAvatar>
-      </Tooltip2>
+      </Tooltip>
     );
   }
 }

src/sentry/static/sentry/app/components/betaTag.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import styled from 'react-emotion';
 import Tag from 'app/views/settings/components/tag';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 import space from 'app/styles/space';
 import {t} from 'app/locale';
 
 const BetaTag = () => (
-  <Tooltip2
+  <Tooltip
     title={t('This feature is in beta and may change in the future.')}
     position="right"
   >
     <StyledTag priority="beta" size="small">
       beta
     </StyledTag>
-  </Tooltip2>
+  </Tooltip>
 );
 
 const StyledTag = styled(Tag)`

src/sentry/static/sentry/app/components/button.jsx

@@ -7,7 +7,7 @@ import {pickBy} from 'lodash';
 
 import ExternalLink from 'app/components/links/externalLink';
 import InlineSvg from 'app/components/inlineSvg';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 
 class Button extends React.Component {
   static propTypes = {
@@ -132,7 +132,7 @@ class Button extends React.Component {
 
     // Doing this instead of using `Tooltip`'s `disabled` prop so that we can minimize snapshot nesting
     if (title) {
-      return <Tooltip2 title={title}>{button}</Tooltip2>;
+      return <Tooltip title={title}>{button}</Tooltip>;
     }
 
     return button;

src/sentry/static/sentry/app/components/createProject.jsx

@@ -16,7 +16,7 @@ import PlatformPicker from 'app/components/platformPicker';
 import ProjectActions from 'app/actions/projectActions';
 import SelectControl from 'app/components/forms/selectControl';
 import SentryTypes from 'app/sentryTypes';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 import getPlatformName from 'app/utils/getPlatformName';
 import space from 'app/styles/space';
 import withApi from 'app/utils/withApi';
@@ -178,7 +178,7 @@ class CreateProject extends React.Component {
                     value: slug,
                   }))}
                 />
-                <Tooltip2 title={t('Create a team')}>
+                <Tooltip title={t('Create a team')}>
                   <Button
                     borderless
                     data-test-id="create-team"
@@ -191,7 +191,7 @@ class CreateProject extends React.Component {
                       })
                     }
                   />
-                </Tooltip2>
+                </Tooltip>
               </TeamSelectInput>
             </div>
             <div>

src/sentry/static/sentry/app/components/eventOrGroupHeader.jsx

@@ -8,7 +8,7 @@ import {capitalize} from 'lodash';
 import ProjectLink from 'app/components/projectLink';
 import {Metadata} from 'app/sentryTypes';
 import EventOrGroupTitle from 'app/components/eventOrGroupTitle';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 import {isNativePlatform} from 'app/utils/platform';
 
 /**
@@ -110,9 +110,9 @@ class EventOrGroupHeader extends React.Component {
       >
         {!hideLevel && level && (
           <GroupLevel level={data.level}>
-            <Tooltip2 title={`Error level: ${capitalize(level)}`}>
+            <Tooltip title={`Error level: ${capitalize(level)}`}>
               <span />
-            </Tooltip2>
+            </Tooltip>
           </GroupLevel>
         )}
         {!hideIcons && data.status === 'ignored' && <Muted className="icon-soundoff" />}

src/sentry/static/sentry/app/components/events/groupingInfo.jsx

@@ -5,7 +5,7 @@ import {isObject} from 'lodash';
 import AsyncComponent from 'app/components/asyncComponent';
 import DropdownAutoComplete from 'app/components/dropdownAutoComplete';
 import DropdownButton from 'app/components/dropdownButton';
-import Tooltip2 from 'app/components/tooltip2';
+import Tooltip from 'app/components/tooltip';
 
 import EventDataSection from 'app/components/events/eventDataSection';
 import SentryTypes from 'app/sentryTypes';
@@ -233,11 +233,11 @@ class GroupingConfigSelect extends AsyncComponent {
         })}
       >
         {({isOpen}) => (
-          <Tooltip2 title="Click here to experiment with other grouping configs">
+          <Tooltip title="Click here to experiment with other grouping configs">
             <DropdownButton isOpen={isOpen} size="small" style={{fontWeight: 'inherit'}}>
               {renderIdLabel(configId)}
             </DropdownButton>
-          </Tooltip2>
+          </Tooltip>
         )}
       </DropdownAutoComplete>
     );