Browse Source

chore: Upgrade bootstrap (#13674)

Upgrade bootstrap to 3.4.0 as we are no longer using bootstrap for
tooltips. This lets us resolve a number of issues reported in snyk.

Remove the last vestigal uses of bootstrap tooltips. These were lurking
deep in the guts of the form components. I tested these changes by
looking at the boolean fields in sentry-apps and project key settings.
Mark Story 5 years ago
parent
commit
3eb5b34d62

+ 1 - 1
package.json

@@ -25,7 +25,7 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-emotion": "9.2.11",
     "babel-plugin-lodash": "^3.3.4",
-    "bootstrap": "3.3.5",
+    "bootstrap": "3.4.0",
     "classnames": "2.2.0",
     "clipboard": "^1.7.1",
     "color": "^3.1.0",

+ 3 - 2
src/sentry/static/sentry/app/components/forms/booleanField.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {defined} from 'app/utils';
 
 import InputField from 'app/components/forms/inputField';
+import Tooltip from 'app/components/tooltip';
 
 export default class BooleanField extends InputField {
   coerceValue(props) {
@@ -40,9 +41,9 @@ export default class BooleanField extends InputField {
             {this.getField()}
             {this.props.label}
             {this.props.disabled && this.props.disabledReason && (
-              <span className="disabled-indicator tip" title={this.props.disabledReason}>
+              <Tooltip title={this.props.disabledReason}>
                 <span className="icon-question" />
-              </span>
+              </Tooltip>
             )}
           </label>
           {defined(this.props.help) && <p className="help-block">{this.props.help}</p>}

+ 3 - 2
src/sentry/static/sentry/app/components/forms/formField.jsx

@@ -5,6 +5,7 @@ import styled from 'react-emotion';
 
 import {defined} from 'app/utils';
 import InlineSvg from 'app/components/inlineSvg';
+import Tooltip from 'app/components/tooltip';
 
 const StyledInlineSvg = styled(InlineSvg)`
   display: block;
@@ -140,9 +141,9 @@ export default class FormField extends React.PureComponent {
       return null;
     }
     return (
-      <span className="disabled-indicator tip" title={disabledReason}>
+      <Tooltip title={disabledReason}>
         <StyledInlineSvg src="icon-circle-question" size="18px" />
-      </span>
+      </Tooltip>
     );
   }
 

+ 0 - 22
src/sentry/static/sentry/app/components/forms/inputField.jsx

@@ -1,8 +1,5 @@
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import 'bootstrap/js/tooltip';
 
 import FormField from 'app/components/forms/formField';
 
@@ -12,25 +9,6 @@ export default class InputField extends FormField {
     placeholder: PropTypes.string,
   };
 
-  componentDidMount() {
-    super.componentDidMount();
-    this.attachTooltips();
-  }
-
-  componentWillUnmount() {
-    this.removeTooltips();
-    $(ReactDOM.findDOMNode(this)).unbind();
-    super.componentWillUnmount();
-  }
-
-  attachTooltips() {
-    $('.tip', ReactDOM.findDOMNode(this)).tooltip();
-  }
-
-  removeTooltips() {
-    $('.tip', ReactDOM.findDOMNode(this)).tooltip('destroy');
-  }
-
   getAttributes() {
     return {};
   }

+ 0 - 12
src/sentry/static/sentry/app/components/sidebar/index.jsx

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {ThemeProvider} from 'emotion-theming';
 import {isEqual} from 'lodash';
 import {withRouter, browserHistory} from 'react-router';
@@ -56,22 +55,11 @@ class Sidebar extends React.Component {
   }
 
   componentDidMount() {
-    const {router} = this.props;
     document.body.classList.add('body-sidebar');
     document.addEventListener('click', this.documentClickHandler);
 
     loadIncidents();
 
-    // router can potentially not exist in server side (django) views
-    // Otherwise when we change routes using collapsed sidebar, the tooltips will remain after
-    // route changes.
-    this.routerListener =
-      router &&
-      router.listen(() => {
-        this.hashChangeHandler();
-        $('.tooltip').tooltip('hide');
-      });
-
     this.hashChangeHandler();
     this.doCollapse(this.props.collapsed);
   }

+ 4 - 4
yarn.lock

@@ -3042,10 +3042,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.5.tgz#1777ab79299b128d87dce7cbd86fdc46ac69c0b1"
-  integrity sha1-F3ereSmbEo2H3OfL2G/cRqxpwLE=
+bootstrap@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.0.tgz#f8d77540dd3062283d2ae7687e21c1e691961640"
+  integrity sha512-F1yTDO9OHKH0xjl03DsOe8Nu1OWBIeAugGMhy3UTIYDdbbIPesQIhCEbj+HEr6wqlwweGAlP8F3OBC6kEuhFuw==
 
 boxen@^2.0.0:
   version "2.1.0"