[2/3] Prettify shared, build, and teleport packages (#955)

* Update prettier ignore

web/.prettierignore

@@ -1,2 +1,7 @@
 # assets contains pre-generated files like iconmoon, fonts, svgs.
 packages/design/src/assets/*
+
+# Ignore file types:
+packages/**/*.css
+packages/**/*.json
+packages/**/*.yaml

web/packages/build/jest/config.js

@@ -17,7 +17,7 @@ limitations under the License.
 const path = require('path');
 
 module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   moduleNameMapper: {
     // mock all imports to asset files
     '\\.(css|scss|stylesheet)$': path.join(__dirname, 'mockStyles.js'),

web/packages/build/webpack/webpack.base.js

@@ -152,5 +152,4 @@ function createDefaultConfig() {
   };
 }
 
-
+module.exports = configFactory;
-module.exports = configFactory;

web/packages/build/webpack/webpack.dev.config.js

@@ -31,9 +31,7 @@ module.exports = {
   },
   devtool: false,
   mode: 'development',
-  plugins: [
+  plugins: [configFactory.plugins.reactRefresh()],
-    configFactory.plugins.reactRefresh(),
-  ],
   module: {
     strictExportPresence: true,
     rules: [

web/packages/shared/README.md

@@ -10,4 +10,4 @@ Add `@gravitational/shared` to your package.json file.
 "devDependencies": {
     "@gravitational/shared": "^1.0.0",
   },
-```
+```

web/packages/shared/components/BpfViewer/BpfViewer.jsx

@@ -96,7 +96,7 @@ const StyledTextEditor = styled.div`
 
   .ace-monokai .ace_marker-layer .ace_active-line {
     //background: #928787;
-   }
+  }
 
   //.ace-monokai .ace_gutter,
   //.ace-monokai .ace_gutter-cell {

web/packages/shared/components/BpfViewer/ace-mode-bpf.js

@@ -31,14 +31,15 @@ ace.define(
     const oop = acequire('../lib/oop');
     const TextMode = acequire('./text').Mode;
     const FoldMode = acequire('./folding/coffee').FoldMode;
-    const MatchingBraceOutdent = acequire('./matching_brace_outdent')
+    const MatchingBraceOutdent = acequire(
-      .MatchingBraceOutdent;
+      './matching_brace_outdent'
+    ).MatchingBraceOutdent;
 
     const GravitationalHighlightRules = acequire(
       'ace/mode/grv_bpf_highlight_rules'
     ).GravitationalHighlightRules;
 
-    const Mode = function() {
+    const Mode = function () {
       this.$outdent = new MatchingBraceOutdent();
       this.foldingRules = new FoldMode();
       this.HighlightRules = GravitationalHighlightRules;
@@ -55,8 +56,9 @@ ace.define(
   ['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
   (acequire, exports) => {
     const oop = acequire('ace/lib/oop');
-    const TextHighlightRules = acequire('ace/mode/text_highlight_rules')
+    const TextHighlightRules = acequire(
-      .TextHighlightRules;
+      'ace/mode/text_highlight_rules'
+    ).TextHighlightRules;
 
     function GravitationalHighlightRules() {
       this.$rules = new TextHighlightRules().getRules(); // Use Text's rules as a base
@@ -88,7 +90,7 @@ ace.define(
         {
           token: 'string', // multi line string start
           regex: /[|>][-+\d]*(?:$|\s+(?:$|#))/,
-          onMatch: function(val, state, stack, line) {
+          onMatch: function (val, state, stack, line) {
             line = line.replace(/ #.*/, '');
             var indent = /^ *((:\s*)?-(\s*[^|>])?)?/
               .exec(line)[0]
@@ -122,7 +124,7 @@ ace.define(
         {
           token: 'indent',
           regex: /^ */,
-          onMatch: function(val, state, stack) {
+          onMatch: function (val, state, stack) {
             var curIndent = stack[1];
 
             if (curIndent >= val.length) {
@@ -150,7 +152,7 @@ ace.define(
         {
           token: 'indent',
           regex: /^ */,
-          onMatch: function(val, state, stack) {
+          onMatch: function (val, state, stack) {
             var curIndent = stack[1];
 
             if (curIndent >= val.length) {

web/packages/shared/components/SplitPane/SplitPane.jsx

@@ -60,14 +60,8 @@ const Pane = styled(Flex)`
 `;
 
 export function PaneSide(props) {
-  const {
+  const { children, position, isDragging, split, defaultSize, hasTwoSides } =
-    children,
+    props;
-    position,
-    isDragging,
-    split,
-    defaultSize,
-    hasTwoSides,
-  } = props;
 
   const compRef = React.useRef();
 

web/packages/shared/hooks/useClickOutside.ts

@@ -14,27 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect} from "react";
+import { useEffect } from 'react';
 
 function useClickOutside(ref, handler) {
-
+  useEffect(() => {
-  useEffect(
+    const listener = (e: MouseEvent) => {
-    () => {
+      if (!ref.current || ref.current.contains(e.target)) {
-      const listener = (e: MouseEvent) => {
+        return;
-        if (!ref.current || ref.current.contains(e.target)) {
+      }
-          return;
+      handler(e);
-        }
+    };
-        handler(e);
+    document.addEventListener('mousedown', listener);
-      };
+    document.addEventListener('touchstart', listener);
-      document.addEventListener("mousedown", listener);
+    return () => {
-      document.addEventListener("touchstart", listener);
+      document.removeEventListener('mousedown', listener);
-      return () => {
+      document.removeEventListener('touchstart', listener);
-        document.removeEventListener("mousedown", listener);
+    };
-        document.removeEventListener("touchstart", listener);
+  }, [ref, handler]);
-      };
-    },
-    [ref, handler]
-  );
 }
 
-export {useClickOutside};
+export { useClickOutside };

web/packages/shared/hooks/useEscape.ts

@@ -19,7 +19,7 @@ import { useEffect } from 'react';
 function useEscape(handler) {
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === 'Escape') {
         handler(e);
       }
     };

web/packages/shared/libs/polyfillFinally.js

@@ -25,7 +25,7 @@ if (typeof Promise !== 'function') {
 }
 
 if (typeof Promise.prototype.finally !== 'function') {
-  var speciesConstructor = function(O, defaultConstructor) {
+  var speciesConstructor = function (O, defaultConstructor) {
     if (!O || (typeof O !== 'object' && typeof O !== 'function')) {
       throw new TypeError('Assertion failed: Type(O) is not Object');
     }

web/packages/shared/utils/base64/base64url-arraybuffer.ts

@@ -29,8 +29,5 @@ export function bufferToBase64url(buffer: ArrayBuffer): string {
   const base64str = arrayBufferToBase64(buffer);
 
   // Assuming the base64str is a well-formed url.
-  return base64str
+  return base64str.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=/g, '');
 }

web/packages/teleport/README.md

@@ -9,4 +9,4 @@ then you can start your local development server:
 
 ```
 $ yarn run start --target=https://example.com:3080/web
-```
+```

web/packages/teleport/babel.config.js

@@ -1,5 +1,5 @@
 const baseCfg = require('@gravitational/build/.babelrc');
 module.exports = function (api) {
   api.cache(true);
-  return baseCfg
+  return baseCfg;
-}
+};

web/packages/teleport/src/Audit/EventDialog/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import EventDialog from './EventDialog';
-export default EventDialog;
+export default EventDialog;

web/packages/teleport/src/Console/Console.story.tsx

@@ -34,11 +34,9 @@ storiesOf('Teleport/Console', module).add('Console', () => {
 });
 
 export function TestLayout(props: PropType) {
-  const [context] = React.useState(
+  const [context] = React.useState((): ConsoleContext => {
-    (): ConsoleContext => {
+    return props.ctx || new ConsoleContext();
-      return props.ctx || new ConsoleContext();
+  });
-    }
-  );
 
   const [history] = React.useState((): any => {
     const history =

web/packages/teleport/src/Console/DocumentSsh/Terminal/index.ts

@@ -16,4 +16,4 @@ limitations under the License.
 
 import Terminal from './Terminal';
 
-export default Terminal;
+export default Terminal;

web/packages/teleport/src/Console/FileTransfer/DownloadForm/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import DownloadForm from './DownloadForm';
-export default DownloadForm;
+export default DownloadForm;

web/packages/teleport/src/Console/FileTransfer/FileList/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import FileList from './FileList';
-export default FileList;
+export default FileList;

web/packages/teleport/src/Console/FileTransfer/FileTransfer.story.tsx

@@ -105,7 +105,6 @@ const defaultFile = {
   location: '~test',
   id: '1547581437406~/test',
   url: '/v1/webapi/sites/one/nodes/',
-  name:
+  name: '~/test~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf',
-    '~/test~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf~/mamaffsdfsdfdssdf',
   blob: [],
 };

web/packages/teleport/src/Console/FileTransfer/UploadForm/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import UploadForm from './UploadForm';
-export default UploadForm;
+export default UploadForm;

web/packages/teleport/src/Console/StyledXterm/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import StyledXterm from './StyledXterm';
-export default StyledXterm;
+export default StyledXterm;

web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx

@@ -46,10 +46,7 @@ export default function JoinedUsers(props) {
 
   const $users = users.map((u, index) => {
     const name = u.user || '';
-    const initial = name
+    const initial = name.trim().charAt(0).toUpperCase();
-      .trim()
-      .charAt(0)
-      .toUpperCase();
     return (
       <UserItem key={`${index}${u.user}`}>
         <StyledAvatar>{initial}</StyledAvatar>

web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx

@@ -66,7 +66,10 @@ export default function ConnectDialog({
             Step 2
           </Text>
           {' - Retrieve credentials for the database'}
-          <TextSelectCopy mt="2" text={`tsh db login [--db-user=<user>] [--db-name=<name>] ${dbName}`} />
+          <TextSelectCopy
+            mt="2"
+            text={`tsh db login [--db-user=<user>] [--db-name=<name>] ${dbName}`}
+          />
         </Box>
         <Box mb={4}>
           <Text bold as="span">

web/packages/teleport/src/Login/index.ts

@@ -19,7 +19,4 @@ import LoginFailed from './LoginFailed';
 import LoginSuccess from './LoginSuccess';
 
 export default Login;
-export {
+export { LoginFailed, LoginSuccess };
-  LoginFailed,
-  LoginSuccess
-}

web/packages/teleport/src/Nodes/index.ts

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import Nodes from './Nodes';
-export default Nodes;
+export default Nodes;

web/packages/teleport/src/Player/ProgressBar/Slider/Slider.jsx

@@ -43,14 +43,21 @@ THE SOFTWARE.
 
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
-    define(['react','prop-types','create-react-class'], factory);
+    define(['react', 'prop-types', 'create-react-class'], factory);
   } else if (typeof exports === 'object') {
-    module.exports = factory(require('react'),require('prop-types'),require('create-react-class'));
+    module.exports = factory(
+      require('react'),
+      require('prop-types'),
+      require('create-react-class')
+    );
   } else {
-    root.ReactSlider = factory(root.React,root.PropTypes,root.createReactClass);
+    root.ReactSlider = factory(
+      root.React,
+      root.PropTypes,
+      root.createReactClass
+    );
   }
-}(this, function (React, PropTypes, createReactClass) {
+})(this, function (React, PropTypes, createReactClass) {
-
   /**
    * To prevent text selection while dragging.
    * http://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag
@@ -85,9 +92,11 @@ THE SOFTWARE.
     return x != null && x.length === 1 ? x[0] : x;
   }
 
-  var isArray = Array.isArray || function(x) {
+  var isArray =
-    return Object.prototype.toString.call(x) === '[object Array]';
+    Array.isArray ||
-  };
+    function (x) {
+      return Object.prototype.toString.call(x) === '[object Array]';
+    };
 
   // undoEnsureArray(ensureArray(x)) === x
 
@@ -95,7 +104,6 @@ THE SOFTWARE.
     displayName: 'ReactSlider',
 
     propTypes: {
-
       /**
        * The minimum value of the slider.
        */
@@ -129,7 +137,7 @@ THE SOFTWARE.
        */
       defaultValue: PropTypes.oneOfType([
         PropTypes.number,
-        PropTypes.arrayOf(PropTypes.number)
+        PropTypes.arrayOf(PropTypes.number),
       ]),
 
       /**
@@ -137,7 +145,7 @@ THE SOFTWARE.
        */
       value: PropTypes.oneOfType([
         PropTypes.number,
-        PropTypes.arrayOf(PropTypes.number)
+        PropTypes.arrayOf(PropTypes.number),
       ]),
 
       /**
@@ -215,7 +223,7 @@ THE SOFTWARE.
        *  Callback called when the the slider is clicked (handle or bars).
        *  Receives the value at the clicked position as argument.
        */
-      onSliderClick: PropTypes.func
+      onSliderClick: PropTypes.func,
     },
 
     getDefaultProps: function () {
@@ -234,12 +242,15 @@ THE SOFTWARE.
         pearling: false,
         disabled: false,
         snapDragDisabled: false,
-        invert: false
+        invert: false,
       };
     },
 
     getInitialState: function () {
-      var value = this._or(ensureArray(this.props.value), ensureArray(this.props.defaultValue));
+      var value = this._or(
+        ensureArray(this.props.value),
+        ensureArray(this.props.defaultValue)
+      );
 
       // reused throughout the component to store results of iterations over `value`
       this.tempArray = value.slice();
@@ -258,7 +269,7 @@ THE SOFTWARE.
         upperBound: 0,
         sliderLength: 0,
         value: value,
-        zIndices: zIndices
+        zIndices: zIndices,
       };
     },
 
@@ -299,7 +310,10 @@ THE SOFTWARE.
           return defaultValue;
         default:
           if (value.length !== count || defaultValue.length !== count) {
-            window.console.warn(this.constructor.displayName + ": Number of values does not match number of children.");
+            window.console.warn(
+              this.constructor.displayName +
+                ': Number of values does not match number of children.'
+            );
           }
           return linspace(this.props.min, this.props.max, count);
       }
@@ -333,23 +347,26 @@ THE SOFTWARE.
         upperBound: slider[size] - handle[size],
         sliderLength: Math.abs(sliderMax - sliderMin),
         handleSize: handle[size],
-        sliderStart: this.props.invert ? sliderMax : sliderMin
+        sliderStart: this.props.invert ? sliderMax : sliderMin,
       });
     },
 
     _handleResize: function () {
       // setTimeout of 0 gives element enough time to have assumed its new size if it is being resized
-      var resizeTimeout = window.setTimeout(function() {
+      var resizeTimeout = window.setTimeout(
-        // drop this timeout from pendingResizeTimeouts to reduce memory usage
+        function () {
-        this.pendingResizeTimeouts.shift();
+          // drop this timeout from pendingResizeTimeouts to reduce memory usage
-        this._resize();
+          this.pendingResizeTimeouts.shift();
-      }.bind(this), 0);
+          this._resize();
+        }.bind(this),
+        0
+      );
 
       this.pendingResizeTimeouts.push(resizeTimeout);
     },
 
     // clear all pending timeouts to avoid error messages after unmounting
-    _clearPendingResizeTimeouts: function() {
+    _clearPendingResizeTimeouts: function () {
       do {
         var nextTimeout = this.pendingResizeTimeouts.shift();
 
@@ -377,7 +394,7 @@ THE SOFTWARE.
       var style = {
         position: 'absolute',
         willChange: this.state.index >= 0 ? this._posMinKey() : '',
-        zIndex: this.state.zIndices.indexOf(i) + 1
+        zIndex: this.state.zIndices.indexOf(i) + 1,
       };
       style[this._posMinKey()] = offset + 'px';
       return style;
@@ -386,7 +403,10 @@ THE SOFTWARE.
     _buildBarStyle: function (min, max) {
       var obj = {
         position: 'absolute',
-        willChange: this.state.index >= 0 ? this._posMinKey() + ',' + this._posMaxKey() : ''
+        willChange:
+          this.state.index >= 0
+            ? this._posMinKey() + ',' + this._posMaxKey()
+            : '',
       };
       obj[this._posMinKey()] = min;
       obj[this._posMaxKey()] = max;
@@ -414,8 +434,9 @@ THE SOFTWARE.
 
     _calcOffsetFromPosition: function (position) {
       var pixelOffset = position - this.state.sliderStart;
-      if (this.props.invert) pixelOffset = this.state.sliderLength - pixelOffset;
+      if (this.props.invert)
-      pixelOffset -= (this.state.handleSize / 2);
+        pixelOffset = this.state.sliderLength - pixelOffset;
+      pixelOffset -= this.state.handleSize / 2;
       return pixelOffset;
     },
 
@@ -433,13 +454,13 @@ THE SOFTWARE.
         if (value[i + 1] - value[i] < this.props.minDistance) return;
       }
 
-      this.setState({value: value}, callback.bind(this, closestIndex));
+      this.setState({ value: value }, callback.bind(this, closestIndex));
     },
 
     _getMousePosition: function (e) {
       return [
         e['page' + this._axisKey()],
-        e['page' + this._orthogonalAxisKey()]
+        e['page' + this._orthogonalAxisKey()],
       ];
     },
 
@@ -447,29 +468,29 @@ THE SOFTWARE.
       var touch = e.touches[0];
       return [
         touch['page' + this._axisKey()],
-        touch['page' + this._orthogonalAxisKey()]
+        touch['page' + this._orthogonalAxisKey()],
       ];
     },
 
     _getKeyDownEventMap: function () {
       return {
-        'keydown': this._onKeyDown,
+        keydown: this._onKeyDown,
-        'focusout': this._onBlur
+        focusout: this._onBlur,
-      }
+      };
     },
 
     _getMouseEventMap: function () {
       return {
-        'mousemove': this._onMouseMove,
+        mousemove: this._onMouseMove,
-        'mouseup': this._onMouseUp
+        mouseup: this._onMouseUp,
-      }
+      };
     },
 
     _getTouchEventMap: function () {
       return {
-        'touchmove': this._onTouchMove,
+        touchmove: this._onTouchMove,
-        'touchend': this._onTouchEnd
+        touchend: this._onTouchEnd,
-      }
+      };
     },
 
     // create the `keydown` handler for the i-th handle
@@ -537,9 +558,10 @@ THE SOFTWARE.
       this.setState(function (prevState) {
         return {
           startValue: this.state.value[i],
-          startPosition: position !== undefined ? position : prevState.startPosition,
+          startPosition:
+            position !== undefined ? position : prevState.startPosition,
           index: i,
-          zIndices: zIndices
+          zIndices: zIndices,
         };
       });
     },
@@ -558,7 +580,10 @@ THE SOFTWARE.
 
     _onEnd: function (eventMap) {
       this._removeHandlers(eventMap);
-      this.setState({index: -1}, this._fireChangeEvent.bind(this, 'onAfterChange'));
+      this.setState(
+        { index: -1 },
+        this._fireChangeEvent.bind(this, 'onAfterChange')
+      );
     },
 
     _onMouseMove: function (e) {
@@ -580,7 +605,7 @@ THE SOFTWARE.
       }
 
       if (this.isScrolling) {
-        this.setState({index: -1});
+        this.setState({ index: -1 });
         return;
       }
 
@@ -595,17 +620,17 @@ THE SOFTWARE.
     _onKeyDown: function (e) {
       if (e.ctrlKey || e.shiftKey || e.altKey) return;
       switch (e.key) {
-        case "ArrowLeft":
+        case 'ArrowLeft':
-        case "ArrowUp":
+        case 'ArrowUp':
           e.preventDefault();
           return this._moveDownOneStep();
-        case "ArrowRight":
+        case 'ArrowRight':
-        case "ArrowDown":
+        case 'ArrowDown':
           e.preventDefault();
           return this._moveUpOneStep();
-        case "Home":
+        case 'Home':
           return this._move(this.props.min);
-        case "End":
+        case 'End':
           return this._move(this.props.max);
         default:
           return;
@@ -625,7 +650,9 @@ THE SOFTWARE.
     },
 
     _getValueFromPosition: function (position) {
-      var diffValue = position / (this.state.sliderLength - this.state.handleSize) * (this.props.max - this.props.min);
+      var diffValue =
+        (position / (this.state.sliderLength - this.state.handleSize)) *
+        (this.props.max - this.props.min);
       return this._trimAlignValue(this.state.startValue + diffValue);
     },
 
@@ -673,8 +700,7 @@ THE SOFTWARE.
         if (newValue > oldValue) {
           this._pushSucceeding(value, minDistance, index);
           this._trimSucceeding(length, value, minDistance, props.max);
-        }
+        } else if (newValue < oldValue) {
-        else if (newValue < oldValue) {
           this._pushPreceding(value, minDistance, index);
           this._trimPreceding(length, value, minDistance, props.min);
         }
@@ -683,15 +709,20 @@ THE SOFTWARE.
       // Normally you would use `shouldComponentUpdate`, but since the slider is a low-level component,
       // the extra complexity might be worth the extra performance.
       if (newValue !== oldValue) {
-        this.setState({value: value}, this._fireChangeEvent.bind(this, 'onChange'));
+        this.setState(
+          { value: value },
+          this._fireChangeEvent.bind(this, 'onChange')
+        );
       }
     },
 
     _pushSucceeding: function (value, minDistance, index) {
       var i, padding;
-      for (i = index, padding = value[i] + minDistance;
+      for (
-           value[i + 1] != null && padding > value[i + 1];
+        i = index, padding = value[i] + minDistance;
-           i++, padding = value[i] + minDistance) {
+        value[i + 1] != null && padding > value[i + 1];
+        i++, padding = value[i] + minDistance
+      ) {
         value[i + 1] = this._alignValue(padding);
       }
     },
@@ -707,9 +738,11 @@ THE SOFTWARE.
 
     _pushPreceding: function (value, minDistance, index) {
       var i, padding;
-      for (i = index, padding = value[i] - minDistance;
+      for (
-           value[i - 1] != null && padding < value[i - 1];
+        i = index, padding = value[i] - minDistance;
-           i--, padding = value[i] - minDistance) {
+        value[i - 1] != null && padding < value[i - 1];
+        i--, padding = value[i] - minDistance
+      ) {
         value[i - 1] = this._alignValue(padding);
       }
     },
@@ -737,14 +770,18 @@ THE SOFTWARE.
 
     _posMinKey: function () {
       var orientation = this.props.orientation;
-      if (orientation === 'horizontal') return this.props.invert ? 'right' : 'left';
+      if (orientation === 'horizontal')
-      if (orientation === 'vertical') return this.props.invert ? 'bottom' : 'top';
+        return this.props.invert ? 'right' : 'left';
+      if (orientation === 'vertical')
+        return this.props.invert ? 'bottom' : 'top';
     },
 
     _posMaxKey: function () {
       var orientation = this.props.orientation;
-      if (orientation === 'horizontal') return this.props.invert ? 'left' : 'right';
+      if (orientation === 'horizontal')
-      if (orientation === 'vertical') return this.props.invert ? 'top' : 'bottom';
+        return this.props.invert ? 'left' : 'right';
+      if (orientation === 'vertical')
+        return this.props.invert ? 'top' : 'bottom';
     },
 
     _sizeKey: function () {
@@ -773,7 +810,7 @@ THE SOFTWARE.
       var alignValue = val - valModStep;
 
       if (Math.abs(valModStep) * 2 >= props.step) {
-        alignValue += (valModStep > 0) ? props.step : (-props.step);
+        alignValue += valModStep > 0 ? props.step : -props.step;
       }
 
       return parseFloat(alignValue.toFixed(5));
@@ -781,31 +818,36 @@ THE SOFTWARE.
 
     _renderHandle: function (style, child, i) {
       var self = this;
-      var className = this.props.handleClassName + ' ' +
+      var className =
-        (this.props.handleClassName + '-' + i) + ' ' +
+        this.props.handleClassName +
+        ' ' +
+        (this.props.handleClassName + '-' + i) +
+        ' ' +
         (this.state.index === i ? this.props.handleActiveClassName : '');
 
-      return (
+      return React.createElement(
-        React.createElement('div', {
+        'div',
-            ref: function (r) {
+        {
-              self['handle' + i] = r;
+          ref: function (r) {
-            },
+            self['handle' + i] = r;
-            key: 'handle' + i,
-            className: className,
-            style: style,
-            onMouseDown: this._createOnMouseDown(i),
-            onTouchStart: this._createOnTouchStart(i),
-            onFocus: this._createOnKeyDown(i),
-            tabIndex: 0,
-            role: "slider",
-            "aria-valuenow": this.state.value[i],
-            "aria-valuemin": this.props.min,
-            "aria-valuemax": this.props.max,
-            "aria-label": isArray(this.props.ariaLabel) ? this.props.ariaLabel[i] : this.props.ariaLabel,
-            "aria-valuetext": this.props.ariaValuetext,
           },
-          child
+          key: 'handle' + i,
-        )
+          className: className,
+          style: style,
+          onMouseDown: this._createOnMouseDown(i),
+          onTouchStart: this._createOnTouchStart(i),
+          onFocus: this._createOnKeyDown(i),
+          tabIndex: 0,
+          role: 'slider',
+          'aria-valuenow': this.state.value[i],
+          'aria-valuemin': this.props.min,
+          'aria-valuemax': this.props.max,
+          'aria-label': isArray(this.props.ariaLabel)
+            ? this.props.ariaLabel[i]
+            : this.props.ariaLabel,
+          'aria-valuetext': this.props.ariaValuetext,
+        },
+        child
       );
     },
 
@@ -833,16 +875,18 @@ THE SOFTWARE.
 
     _renderBar: function (i, offsetFrom, offsetTo) {
       var self = this;
-      return (
+      return React.createElement('div', {
-        React.createElement('div', {
+        key: 'bar' + i,
-          key: 'bar' + i,
+        ref: function (r) {
-          ref: function (r) {
+          self['bar' + i] = r;
-            self['bar' + i] = r;
+        },
-          },
+        className:
-          className: this.props.barClassName + ' ' + this.props.barClassName + '-' + i,
+          this.props.barClassName + ' ' + this.props.barClassName + '-' + i,
-          style: this._buildBarStyle(offsetFrom, this.state.upperBound - offsetTo)
+        style: this._buildBarStyle(
-        })
+          offsetFrom,
-      );
+          this.state.upperBound - offsetTo
+        ),
+      });
     },
 
     _renderBars: function (offset) {
@@ -855,7 +899,9 @@ THE SOFTWARE.
         bars.push(this._renderBar(i + 1, offset[i], offset[i + 1]));
       }
 
-      bars.push(this._renderBar(lastIndex + 1, offset[lastIndex], this.state.upperBound));
+      bars.push(
+        this._renderBar(lastIndex + 1, offset[lastIndex], this.state.upperBound)
+      );
 
       return bars;
     },
@@ -865,11 +911,14 @@ THE SOFTWARE.
       this.hasMoved = false;
       if (!this.props.snapDragDisabled) {
         var position = this._getMousePosition(e);
-        this._forceValueFromPosition(position[0], function (i) {
+        this._forceValueFromPosition(
-          this._start(i, position[0]);
+          position[0],
-          this._fireChangeEvent('onChange');
+          function (i) {
-          this._addHandlers(this._getMouseEventMap());
+            this._start(i, position[0]);
-        }.bind(this));
+            this._fireChangeEvent('onChange');
+            this._addHandlers(this._getMouseEventMap());
+          }.bind(this)
+        );
       }
 
       pauseEvent(e);
@@ -880,7 +929,9 @@ THE SOFTWARE.
 
       if (this.props.onSliderClick && !this.hasMoved) {
         var position = this._getMousePosition(e);
-        var valueAtPos = this._trimAlignValue(this._calcValue(this._calcOffsetFromPosition(position[0])));
+        var valueAtPos = this._trimAlignValue(
+          this._calcValue(this._calcOffsetFromPosition(position[0]))
+        );
         this.props.onSliderClick(valueAtPos);
       }
     },
@@ -906,22 +957,22 @@ THE SOFTWARE.
       var bars = props.withBars ? this._renderBars(offset) : null;
       var handles = this._renderHandles(offset);
 
-      return (
+      return React.createElement(
-        React.createElement('div', {
+        'div',
-            ref: function (r) {
+        {
-              self.slider = r;
+          ref: function (r) {
-            },
+            self.slider = r;
-            style: {position: 'relative'},
-            className: props.className + (props.disabled ? ' disabled' : ''),
-            onMouseDown: this._onSliderMouseDown,
-            onClick: this._onSliderClick
           },
-          bars,
+          style: { position: 'relative' },
-          handles
+          className: props.className + (props.disabled ? ' disabled' : ''),
-        )
+          onMouseDown: this._onSliderMouseDown,
+          onClick: this._onSliderClick,
+        },
+        bars,
+        handles
       );
-    }
+    },
   });
 
   return ReactSlider;
-}));
+});

web/packages/teleport/src/Player/ProgressBar/Slider/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import Slider from './Slider';
-export default Slider;
+export default Slider;

web/packages/teleport/src/Player/Xterm/index.ts

@@ -16,4 +16,4 @@ limitations under the License.
 
 import Xterm from './Xterm';
 
-export default Xterm;
+export default Xterm;

web/packages/teleport/src/SideNav/index.ts

@@ -16,4 +16,3 @@ limitations under the License.
 
 import SideNav from './SideNav';
 export default SideNav;
-

web/packages/teleport/src/components/CatchError/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import CatchError from './CatchError';
-export default CatchError;
+export default CatchError;

web/packages/teleport/src/components/EventRangePicker/Custom/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import CustomRange from './Custom';
-export default CustomRange;
+export default CustomRange;

web/packages/teleport/src/components/InputSearch/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import InputSearch from './InputSearch';
-export default InputSearch;
+export default InputSearch;

web/packages/teleport/src/components/LogoHero/LogoHero.jsx

@@ -18,16 +18,16 @@ import React from 'react';
 import Image from 'design/Image';
 import defaultLogoSvg from 'design/assets/images/teleport-medallion.svg';
 
-const LogoHero = ({...rest}) => {
+const LogoHero = ({ ...rest }) => {
-  return <Image {...rest}/>
+  return <Image {...rest} />;
-}
+};
 
 LogoHero.defaultProps = {
   src: defaultLogoSvg,
-  maxHeight: "120px",
+  maxHeight: '120px',
-  maxWidth: "200px",
+  maxWidth: '200px',
   my: 6,
-  mx: "auto"
+  mx: 'auto',
-}
+};
 
-export default LogoHero;
+export default LogoHero;

web/packages/teleport/src/components/LogoHero/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import LogoHero from './LogoHero';
-export default LogoHero;
+export default LogoHero;

web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx

@@ -41,9 +41,8 @@ export default function ResourceEditor(props) {
     isNew,
   } = props;
 
-  const { attempt, attemptActions, content, isDirty, setContent } = useEditor(
+  const { attempt, attemptActions, content, isDirty, setContent } =
-    text
+    useEditor(text);
-  );
 
   const onSave = () => {
     attemptActions.do(() => props.onSave(content)).then(() => onClose());

web/packages/teleport/src/lib/term/ttyAddressResolver.js

@@ -17,23 +17,23 @@ limitations under the License.
 export default class AddressResolver {
   _cfg = {
     ttyUrl: null,
-    ttyParams: {}
+    ttyParams: {},
-  }
+  };
 
-  constructor(cfg){
+  constructor(cfg) {
     this._cfg = {
       ...cfg,
-    }
+    };
   }
 
-  getConnStr(w, h){
+  getConnStr(w, h) {
     const { ttyParams, ttyUrl } = this._cfg;
     const params = JSON.stringify({
       ...ttyParams,
-      term: { h, w }
+      term: { h, w },
     });
 
     const encoded = window.encodeURI(params);
     return ttyUrl.replace(':params', encoded);
   }
-}
+}

web/packages/teleport/src/services/history/index.ts

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import service, { getUrlParameter  } from './history';
+import service, { getUrlParameter } from './history';
 export default service;
-export {
+export { getUrlParameter };
-  getUrlParameter
-}