refactor: upgrade webpack deps

package.json

@@ -94,26 +94,26 @@
  "babel-plugin-transform-object-rest-spread": "6.26.0",
  "core-js": "3.6.5",
  "cross-env": "7.0.2",
- "css-loader": "3.5.2",
+ "css-loader": "6.5.1",
  "eslint": "6.8.0",
  "eslint-plugin-jest": "23.8.2",
  "eslint-plugin-react": "7.19.0",
  "http-server": "14.0.0",
  "jest": "24.8.0",
  "madge": "5.0.1",
  "marked": "0.8.2",
- "node-sass": "6.0.0",
+ "node-sass": "6.0.1",
  "null-loader": "4.0.1",
  "path-to-regexp": "3.2.0",
  "puppeteer": "3.0.0",
  "react-test-renderer": "16.13.1",
  "request": "2.88.2",
  "request-promise": "4.2.5",
- "sass-loader": "11.1.1",
+ "sass-loader": "12.3.0",
  "semantic-release": "17.4.6",
- "style-loader": "1.1.2",
+ "style-loader": "3.3.1",
  "svg-prep": "1.0.4",
- "webpack": "5.61.0",
+ "webpack": "5.64.4",
  "webpack-cli": "4.9.1",
  "yaml": "1.10.0"
  },

src/components/BrowserCell/BrowserCell.react.js

@@ -13,7 +13,7 @@ import Parse from 'parse';
 import Pill from 'components/Pill/Pill.react';
 import React, { Component } from 'react';
 import styles from 'components/BrowserCell/BrowserCell.scss';
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles  from 'stylesheets/base.scss';
 import Tooltip from '../Tooltip/PopperTooltip.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 
@@ -34,7 +34,7 @@ export default class BrowserCell extends Component {
  let content = this.props.value;
  let isNewRow = this.props.row < 0;
  this.copyableValue = content;
- let classes = [styles.cell, unselectable];
+ let classes = [styles.cell, baseStyles.unselectable];
  if (this.props.hidden) {
  content = this.props.value !== undefined || !isNewRow ? '(hidden)' : this.props.isRequired ? '(required)' : '(undefined)';
  classes.push(styles.empty);

src/components/Button/Button.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles  from 'stylesheets/base.scss';
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import styles from 'components/Button/Button.scss';
@@ -14,7 +14,7 @@ const noop = () => {};
 
 let Button = (props) => {
  const hasOnClick = props.onClick && !props.disabled;
- let classes = [styles.button, unselectable];
+ let classes = [styles.button, baseStyles.unselectable];
  // if a button is disabled, that overrides any color selection
  if (props.disabled) {
  classes.push(styles.disabled);

src/components/CascadingView/CascadingView.react.js

@@ -5,10 +5,10 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss'
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/CascadingView/CascadingView.scss';
+import baseStyles from 'stylesheets/base.scss'
+import PropTypes  from 'lib/PropTypes';
+import React  from 'react';
+import styles  from 'components/CascadingView/CascadingView.scss';
 
 export default class CascadingView extends React.Component {
  constructor() {
@@ -24,7 +24,7 @@ export default class CascadingView extends React.Component {
  href='javascript:;'
  role='button'
  className={styles.right}>
- <div className={[center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
+ <div className={[baseStyles.center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
  </a>;
  let childrenContainer = this.state.expanded ? (<div className={styles.childrenContainer}>
  <div className={styles.children}>{children}</div>

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -8,7 +8,7 @@
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import styles from 'components/DataBrowserHeader/DataBrowserHeader.scss';
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles  from 'stylesheets/base.scss';
 import { DragSource, DropTarget } from 'react-dnd';
 
 const Types = {
@@ -55,7 +55,7 @@ const dataBrowserHeaderSource = {
 class DataBrowserHeader extends React.Component {
  render() {
  let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver } = this.props;
- let classes = [styles.header, unselectable];
+ let classes = [styles.header, baseStyles.unselectable];
  if (order) {
  classes.push(styles[order]);
  }

src/components/EmptyState/EmptyState.react.js

@@ -11,7 +11,7 @@ import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import styles from 'components/EmptyState/EmptyState.scss';
 import stylesButton from 'components/Button/Button.scss';
-import { center } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 
 let ctaButton = (cta, action) => {
  if (cta) {
@@ -44,7 +44,7 @@ let EmptyState = ({
  secondaryCta='',
  secondaryAction=() => {},
 }) => (
- <div className={center}>
+ <div className={baseStyles.center}>
  <div className={styles.icon}>
  <Icon
  width={80}

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -14,7 +14,7 @@ import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import styles from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
-import { verticalCenter } from 'stylesheets/base.scss';
+import baseStyles  from 'stylesheets/base.scss';
 
 export default class ExplorerActiveChartButton extends React.Component {
  constructor() {
@@ -62,7 +62,7 @@ export default class ExplorerActiveChartButton extends React.Component {
  if (!this.props.disableDropdown) {
  dropdown = (
  <div
- className={[styles.rightArrow, verticalCenter].join(' ')}
+ className={[styles.rightArrow, baseStyles.verticalCenter].join(' ')}
  onClick={() => {
  let position = Position.inDocument(this.node);
  let align = Directions.LEFT;
@@ -82,7 +82,7 @@ export default class ExplorerActiveChartButton extends React.Component {
  return (
  <div className={styles.button}>
  <div
- className={[styles.checkbox, verticalCenter].join(' ')}
+ className={[styles.checkbox, baseStyles.verticalCenter].join(' ')}
  onClick={this.handleCheckbox.bind(this)}
  style={{
  backgroundColor: this.state.active ? this.props.color : null,

src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import base  from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Button from 'components/Button/Button.react';
 import ChromeDropdown from 'components/ChromeDropdown/ChromeDropdown.react';
 import DateTimeEntry from 'components/DateTimeEntry/DateTimeEntry.react';
@@ -584,12 +584,12 @@ export default class ExplorerQueryComposer extends React.Component {
  return (
  <div className={styles.queryComposer}>
  <div className={styles.header}>
- <div className={[base.center, styles.headerView].join(' ')}>
+ <div className={[baseStyles.center, styles.headerView].join(' ')}>
  <h3 className={styles.headerLabel}>{query.name}</h3>
  </div>
  </div>
  <div className={styles.footer}>
- <div className={[base.center, styles.boxContent].join(' ')}>
+ <div className={[baseStyles.center, styles.boxContent].join(' ')}>
  <Button
  width='100%'
  value='Dismiss query'
@@ -606,7 +606,7 @@ export default class ExplorerQueryComposer extends React.Component {
 
  if (!isNew && this.state.editing) {
  headerView = (
- <div className={[base.center, styles.headerView].join(' ')}>
+ <div className={[baseStyles.center, styles.headerView].join(' ')}>
  <input
  type='text'
  className={[styles.headerLabel, styles.textInput].join(' ')}
@@ -631,7 +631,7 @@ export default class ExplorerQueryComposer extends React.Component {
  );
  } else {
  headerView = (
- <div className={[base.center, styles.headerView].join(' ')}>
+ <div className={[baseStyles.center, styles.headerView].join(' ')}>
  <h3 className={styles.headerLabel}>{ this.state.name || 'Build a custom query' }</h3>
  { isNew ? null : <a
  href='javascript:;'

src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import base  from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Button from 'components/Button/Button.react';
 import CascadingView from 'components/CascadingView/CascadingView.react';
 import PropTypes from 'lib/PropTypes';
@@ -16,7 +16,7 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
  return (
  <div className={styles.queryPicker}>
  <div className={styles.header}>
- <h3 className={base.verticalCenter}>Choose a query to visualize</h3>
+ <h3 className={baseStyles.verticalCenter}>Choose a query to visualize</h3>
  </div>
  <div className={styles.queryContainer}>
  {queries.map((queryGroup) => {
@@ -68,7 +68,7 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
  })}
  </div>
  <div className={styles.footer}>
- <div className={base.center} style={{ width:'95%' }}>
+ <div className={baseStyles.center} style={{ width:'95%' }}>
  <Button
  width='100%'
  value='Build a custom query'

src/components/Label/Label.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { centered } from 'components/Field/Field.scss';
+import fieldStyles  from 'components/Field/Field.scss';
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import styles from 'components/Label/Label.scss';
@@ -14,7 +14,7 @@ let Label = (props) => {
  let padding = (props.padding || 20) + 'px';
  return (
  <div
- className={[styles.label, centered].join(' ')}
+ className={[styles.label, fieldStyles.centered].join(' ')}
  style={{ padding: '0 ' + padding }}>
  <div className={styles.text}>{props.text}</div>
  {props.description ? <div className={styles.description}>{props.description}</div> : null}

src/components/Loader/Loader.example.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Loader from 'components/Loader/Loader.react';
 import React from 'react';
 
@@ -21,7 +21,7 @@ export const demos = [
  margin: '10px auto',
  position: 'relative'
  }}>
- <Loader className={center} />
+ <Loader className={baseStyles.center} />
  </div>
  );
  }

src/components/LoaderContainer/LoaderContainer.react.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Loader from 'components/Loader/Loader.react';
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
@@ -19,7 +19,7 @@ const LoaderContainer = ({ loading, hideAnimation, children, solid = true }) =>
  {children}
  </div>
  <div className={[styles.loaderParent, loading ? styles.visible : '', solid ? styles.solid : ''].join(' ')}>
- {(hideAnimation || !loading) ? null : <Loader className={center}/>}
+ {(hideAnimation || !loading) ? null : <Loader className={baseStyles.center}/>}
  </div>
  </div>
 );

src/components/LoginForm/LoginForm.react.js

@@ -5,11 +5,11 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import CSRFInput from 'components/CSRFInput/CSRFInput.react';
-import Icon  from 'components/Icon/Icon.react';
-import React  from 'react';
-import styles  from 'components/LoginForm/LoginForm.scss';
-import { verticalCenter } from 'stylesheets/base.scss';
+import CSRFInput  from 'components/CSRFInput/CSRFInput.react';
+import Icon from 'components/Icon/Icon.react';
+import React from 'react';
+import styles from 'components/LoginForm/LoginForm.scss';
+import baseStyles from 'stylesheets/base.scss';
 
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {
@@ -26,7 +26,7 @@ export default class LoginForm extends React.Component {
  <div className={styles.header}>{this.props.header}</div>
  {this.props.children}
  <div className={styles.footer}>
- <div className={verticalCenter} style={{ width: '100%' }}>
+ <div className={baseStyles.verticalCenter} style={{ width: '100%' }}>
  {this.props.footer}
  </div>
  </div>

src/components/PermissionsDialog/PermissionsDialog.react.js

@@ -5,9 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import {
- unselectable,
- verticalCenter } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 import Button from 'components/Button/Button.react';
 import Checkbox from 'components/Checkbox/Checkbox.react';
 import Icon from 'components/Icon/Icon.react';
@@ -1155,7 +1153,7 @@ export default class PermissionsDialog extends React.Component {
  }
 
  render() {
- let classes = [styles.dialog, unselectable];
+ let classes = [styles.dialog, baseStyles.unselectable];
 
  // for 3-column CLP dialog
  if (this.props.advanced) {
@@ -1300,7 +1298,7 @@ export default class PermissionsDialog extends React.Component {
  onClick={() => this.props.onConfirm(this.outputPerms())}
  />
  </div>
- <div className={[styles.details, verticalCenter].join(' ')}>
+ <div className={[styles.details, baseStyles.verticalCenter].join(' ')}>
  {this.props.details}
  </div>
  </div>

src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js

@@ -19,9 +19,7 @@ import styles from 'components/ProtectedFieldsDialog/ProtectedFields
 import MultiSelect from 'components/MultiSelect/MultiSelect.react';
 import MultiSelectOption from 'components/MultiSelect/MultiSelectOption.react';
 import TrackVisibility from 'components/TrackVisibility/TrackVisibility.react';
-import { 
- unselectable,
- verticalCenter } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
 
 let origin = new Position(0, 0);
 const intersectionMargin = '10px 0px 0px 20px';
@@ -446,7 +444,7 @@ export default class ProtectedFieldsDialog extends React.Component {
  }
 
  render() {
- let classes = [styles.dialog, unselectable];
+ let classes = [styles.dialog, baseStyles.unselectable];
 
  let placeholderText = 'Role/User id/name * or authenticated\u2026';
 
@@ -510,7 +508,7 @@ export default class ProtectedFieldsDialog extends React.Component {
  onClick={() => this.props.onConfirm(this.outputPerms())}
  />
  </div>
- <div className={[styles.details, verticalCenter].join(' ')}>
+ <div className={[styles.details, baseStyles.verticalCenter].join(' ')}>
  {this.props.details}
  </div>
  </div>

src/components/Range/Range.react.js

@@ -5,10 +5,10 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { input } from 'components/Field/Field.scss';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/Range/Range.scss';
+import fieldStyles from 'components/Field/Field.scss';
+import PropTypes  from 'lib/PropTypes';
+import React  from 'react';
+import styles  from 'components/Range/Range.scss';
 
 const DEFAULT_COLOR = '#fd9539';
 
@@ -66,7 +66,7 @@ export default class Range extends React.Component {
  <div
  style={wrapperStyle}
  ref={this.metricsRef}
- className={[styles.range, input].join(' ')}>
+ className={[styles.range, fieldStyles.input].join(' ')}>
  {tracker}
  <input
  type='range'