@lyra/default-layout/lib/components/UpdateNotifierDialog.js

The default layout components for Lyra

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/dialogs/default');

var _default4 = _interopRequireDefault(_default3);

var _UpdateNotifierDialog = require('./styles/UpdateNotifierDialog.css');

var _UpdateNotifierDialog2 = _interopRequireDefault(_UpdateNotifierDialog);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const upperFirst = str => `${str.slice(0, 1).toUpperCase()}${str.slice(1)}`;

class UpdateNotifierDialog extends _react.Component {

  renderTable() {
    const outdated = this.props.outdated;

    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'table',
        { className: _UpdateNotifierDialog2.default.versionsTable },
        _react2.default.createElement(
          'thead',
          null,
          _react2.default.createElement(
            'tr',
            null,
            _react2.default.createElement(
              'th',
              null,
              'Module'
            ),
            _react2.default.createElement(
              'th',
              null,
              'Installed'
            ),
            _react2.default.createElement(
              'th',
              null,
              'Latest'
            ),
            _react2.default.createElement(
              'th',
              null,
              'Importance'
            )
          )
        ),
        _react2.default.createElement(
          'tbody',
          null,
          outdated.map(pkg => _react2.default.createElement(
            'tr',
            { key: pkg.name },
            _react2.default.createElement(
              'td',
              null,
              pkg.name
            ),
            _react2.default.createElement(
              'td',
              null,
              pkg.version
            ),
            _react2.default.createElement(
              'td',
              null,
              pkg.latest
            ),
            _react2.default.createElement(
              'td',
              null,
              upperFirst(pkg.severity || 'low')
            )
          ))
        )
      ),
      _react2.default.createElement(
        'p',
        { className: _UpdateNotifierDialog2.default.upgradeText },
        'To upgrade, run the Lyra CLI command',
        ' ',
        _react2.default.createElement(
          'code',
          { className: _UpdateNotifierDialog2.default.code },
          'lyra upgrade'
        ),
        ' in your project folder.'
      )
    );
  }

  renderContactDeveloper() {
    const severity = this.props.severity;

    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'p',
        null,
        'You are running an outdated studio.'
      ),
      severity === 'high' ? _react2.default.createElement(
        'p',
        null,
        'Please get in touch with your developers and ask them to upgrade it for you.'
      ) : _react2.default.createElement(
        'p',
        null,
        'Consider getting in touch with your developers and ask them to upgrade it for you.'
      ),
      _react2.default.createElement(
        'details',
        null,
        _react2.default.createElement(
          'summary',
          null,
          'Developer info'
        ),
        this.renderTable()
      )
    );
  }

  render() {
    var _props = this.props;
    const severity = _props.severity,
          onClose = _props.onClose;

    return _react2.default.createElement(
      _default4.default,
      { isOpen: true, onClose: onClose },
      _react2.default.createElement(
        'div',
        { className: _UpdateNotifierDialog2.default.content },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'h2',
            null,
            severity === 'low' ? 'New versions available' : 'Studio is outdated'
          ),
          __DEV__ ? this.renderTable() : this.renderContactDeveloper(),
          _react2.default.createElement(
            _default2.default,
            { color: 'primary', onClick: onClose },
            'Close'
          )
        )
      )
    );
  }
}

UpdateNotifierDialog.propTypes = {
  onClose: _propTypes2.default.func.isRequired,
  severity: _propTypes2.default.string.isRequired,
  outdated: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    name: _propTypes2.default.string,
    latest: _propTypes2.default.string,
    severity: _propTypes2.default.string
  }))
};
UpdateNotifierDialog.defaultProps = {
  outdated: []
};
exports.default = UpdateNotifierDialog;