@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/header/header.js

@@ -1,55 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import compose from '../global/compose';
-import Theme, {withTheme} from '../global/theme';
-
-import styles from './header.css';
-
-/**
- * @name Header
- */
-/**
- * Displays a configurable page header. See available presentation options in the knobs panel.
- */
-class Header extends Component {
-  static propTypes = {
-    theme: PropTypes.oneOf(['light', 'dark']),
-    className: PropTypes.string,
-    children: PropTypes.node,
-    spaced: PropTypes.bool
-  };
-
-  static defaultProps = {
-    spaced: true
-  };
-
-  render() {
-    const {children, className, spaced, theme, ...restProps} = this.props;
-    const classes = classNames(styles.header, styles[theme], className, {
-      [styles.headerSpaced]: spaced
-    });
-
-    return (
-      <header
-        {...restProps}
-        className={classes}
-      >
-        {children}
-      </header>
-    );
-  }
-}
-
-export default withTheme(Theme.DARK)(Header);
-export const RerenderableHeader = compose(
-  withTheme(Theme.DARK)
-)(Header);
-export {default as Logo} from './logo';
-export {default as Tray} from './tray';
-export {default as TrayIcon} from './tray-icon';
-export {default as Profile} from './profile';
-export {default as SmartProfile} from './smart-profile';
-export {default as Services} from './services';
-export {default as SmartServices} from './smart-services';

package/components/header/header.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import Header from './header';
-
-describe('Header', () => {
-  const mountHeader = props => mount(<Header {...props}/>);
-  const getHeaderDiv = props => mountHeader(props).find('header');
-
-  it('should create component', () => {
-    mountHeader().type().should.equal(Header.type);
-  });
-
-  it('should wrap children with header', () => {
-    getHeaderDiv().should.exist;
-  });
-
-  it('should use passed className', () => {
-    getHeaderDiv({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/header/logo.js

@@ -1,31 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Icon, {Size} from '../icon/icon';
-
-import styles from './header.css';
-
-export default class Logo extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string
-  };
-
-  static defaultProps = {
-    size: Size.Size48,
-    suppressSizeWarning: true
-  };
-
-  static Size = Size;
-
-  render() {
-    const {className, ...restProps} = this.props;
-    const classes = classNames(styles.logo, className);
-
-    return (
-      <div className={classes}>
-        <Icon {...restProps}/>
-      </div>
-    );
-  }
-}

package/components/header/profile.js

@@ -1,181 +0,0 @@
-import React, {Component, PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Avatar, {Size} from '../avatar/avatar';
-import Button from '../button/button';
-import DropdownMenu from '../dropdown-menu/dropdown-menu';
-import PopupMenu from '../popup-menu/popup-menu';
-
-import styles from './header.css';
-
-const rgItemType = PopupMenu.ListProps.Type.LINK;
-
-export default class Profile extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    closeOnSelect: PropTypes.bool,
-    hasUpdates: PropTypes.bool,
-    loading: PropTypes.bool,
-    onLogin: PropTypes.func,
-    onLogout: PropTypes.func,
-    onSwitchUser: PropTypes.func,
-    profileUrl: PropTypes.string,
-    renderPopupItems: PropTypes.func,
-    LinkComponent: PropTypes.oneOfType([
-      PropTypes.instanceOf(Component),
-      PropTypes.func,
-      PropTypes.string
-    ]),
-    translations: PropTypes.shape({
-      profile: PropTypes.string,
-      login: PropTypes.string,
-      logout: PropTypes.string,
-      applyChangedUser: PropTypes.string,
-      switchUser: PropTypes.string
-    }),
-    user: PropTypes.shape({
-      guest: PropTypes.bool,
-      profile: PropTypes.object,
-      name: PropTypes.string
-    }),
-    size: PropTypes.number,
-    round: PropTypes.bool,
-    showLogIn: PropTypes.bool,
-    showLogOut: PropTypes.bool,
-    showSwitchUser: PropTypes.bool,
-    showApplyChangedUser: PropTypes.bool,
-    onRevertPostponement: PropTypes.func,
-    renderGuest: PropTypes.func
-  };
-
-  static defaultProps = {
-    closeOnSelect: true,
-    renderPopupItems: items => items,
-    translations: {},
-    size: Size.Size32,
-    renderGuest: ({loading, onLogin, className, translations}) => (
-      <div
-        className={classNames(styles.profileEmpty, className)}
-      >
-        <Button
-          primary
-          data-test="ring-header-login-button"
-          disabled={loading}
-          loader={loading}
-          onClick={onLogin}
-        >
-          {translations.login || 'Log in...'}
-        </Button>
-      </div>
-    )
-  };
-
-  static Size = Size;
-
-  render() {
-    const {
-      className,
-      closeOnSelect,
-      hasUpdates,
-      onLogout,
-      user,
-      profileUrl,
-      LinkComponent,
-      onSwitchUser,
-      renderPopupItems,
-      onRevertPostponement,
-      showApplyChangedUser,
-      showLogIn,
-      showLogOut,
-      showSwitchUser,
-      renderGuest,
-      translations,
-      size,
-      round,
-      loading, onLogin,
-      ...props
-    } = this.props;
-
-    if (!user) {
-      return (
-        <div
-          {...props}
-          className={classNames(styles.profileEmpty, className)}
-        >
-          <Avatar size={size} round={round}/>
-        </div>
-      );
-    }
-
-    if (user.guest) {
-      return renderGuest(this.props);
-    }
-
-    const anchorClassName = classNames(styles.avatarWrapper, {
-      [styles.hasUpdates]: hasUpdates
-    });
-
-    const anchor = (
-      <button type="button" className={anchorClassName}>
-        <Avatar
-          url={user.profile && user.profile.avatar && user.profile.avatar.url}
-          size={size}
-          round={round}
-        />
-      </button>
-    );
-
-    const items = [
-      showApplyChangedUser && {
-        rgItemType,
-        label: translations.applyChangedUser || 'Apply changed user',
-        className: styles.profileMenuItem,
-        onClick: onRevertPostponement
-      },
-      showLogIn && {
-        rgItemType,
-        label: translations.login || 'Log in',
-        className: styles.profileMenuItem,
-        onClick: onRevertPostponement
-      },
-      {
-        rgItemType: PopupMenu.ListProps.Type.LINK,
-        label: translations.profile || 'Profile',
-
-        target: '_self', // Full page reload in Angular
-        href: profileUrl,
-        LinkComponent
-      },
-      showSwitchUser && {
-        rgItemType,
-        label: translations.switchUser || 'Switch user',
-        className: styles.profileMenuItem,
-        onClick: onSwitchUser
-      },
-      showLogOut && {
-        rgItemType,
-        label: translations.logout || 'Log out',
-
-        onClick: onLogout
-      }
-    ].filter(it => !!it);
-
-    return (
-      <DropdownMenu
-        {...props}
-        title={user.name}
-        anchor={anchor}
-        data={renderPopupItems(items)}
-        data-test="ring-profile"
-        className={classNames(styles.profile, className)}
-        menuProps={{
-          closeOnSelect,
-          left: -2,
-          top: -8,
-          sidePadding: 32
-        }}
-      />
-    );
-  }
-}

package/components/header/services-link.js

@@ -1,45 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../link/link';
-
-import styles from './services.css';
-
-export default class ServicesLink extends PureComponent {
-  static propTypes = {
-    isActive: PropTypes.bool,
-    service: PropTypes.shape({
-      applicationName: PropTypes.string,
-      iconUrl: PropTypes.string,
-      homeUrl: PropTypes.string,
-      name: PropTypes.string
-    })
-  };
-
-  render() {
-    const {service, ...props} = this.props;
-
-    return (
-      <Link
-        target="_self"
-        href={service.homeUrl}
-        {...props}
-      >
-        {WrapText => (service.iconUrl
-          ? [
-            <span
-              key="icon"
-              className={styles.itemLogo}
-              style={{backgroundImage: `url(${service.iconUrl})`}}
-            />,
-            <div key="text">
-              <WrapText>{service.name}</WrapText>
-            </div>
-          ]
-          : <WrapText>{service.name}</WrapText>)
-        }
-      </Link>
-    );
-  }
-
-}

package/components/header/services.js

@@ -1,115 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import servicesIcon from '@jetbrains/icons/services-20px';
-
-import Dropdown from '../dropdown/dropdown';
-import Popup from '../popup/popup';
-
-import TrayIcon from './tray-icon';
-import ServicesLink from './services-link';
-import styles from './services.css';
-
-const makeAnchor = loading => {
-  const Anchor = ({active}) => (
-    <TrayIcon
-      loader={loading}
-      active={active}
-      icon={servicesIcon}
-      aria-label="Services"
-    />
-  );
-
-  Anchor.propTypes = {
-    active: PropTypes.bool
-  };
-
-  return Anchor;
-};
-
-export default class Services extends PureComponent {
-  static sort = (a, b) => {
-    const aApplicationName = a.applicationName || '';
-    const bApplicationName = b.applicationName || '';
-
-    return aApplicationName.localeCompare(bApplicationName) ||
-      a.name.localeCompare(b.name);
-  };
-
-  static propTypes = {
-    className: PropTypes.string,
-    clientId: PropTypes.string,
-    initShown: PropTypes.bool,
-    loading: PropTypes.bool,
-    onClick: PropTypes.func,
-    services: PropTypes.arrayOf(ServicesLink.propTypes.service)
-  };
-
-  static Link = ServicesLink;
-
-  serviceIsActive = service => service.id === this.props.clientId;
-
-  render() {
-    const {clientId, loading, services, initShown, ...props} = this.props;
-
-    if (!services) {
-      return (
-        <TrayIcon
-          {...props}
-          loader={loading}
-          active={loading}
-          icon={servicesIcon}
-          aria-label="Services"
-        />
-      );
-    }
-
-    const sortedServices = [...services].sort(Services.sort);
-    const servicesWithIcons = sortedServices.filter(service => service.iconUrl);
-    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
-    const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
-
-    return (
-      <Dropdown
-        {...props}
-        anchor={makeAnchor(loading)}
-        initShown={initShown}
-      >
-        <Popup
-          className={styles.services}
-          top={-3}
-        >
-          {servicesWithIcons.map(service => {
-            const isActive = this.serviceIsActive(service);
-
-            return (
-              <Services.Link
-                active={isActive}
-                className={isActive ? styles.activeItem : styles.item}
-                key={service.id}
-                service={service}
-              />
-            );
-          })}
-          {separatorIsRequired && (
-            <div
-              className={styles.line}
-              key="separator"
-            />
-          )}
-          {servicesWithOutIcons.map(service => {
-            const isActive = this.serviceIsActive(service);
-
-            return (
-              <Services.Link
-                active={isActive}
-                className={isActive ? styles.activeItemStacked : styles.itemStacked}
-                key={service.id}
-                service={service}
-              />
-            );
-          })}
-        </Popup>
-      </Dropdown>
-    );
-  }
-}

package/components/header/smart-profile.js

@@ -1,121 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import Auth, {
-  USER_CHANGED_EVENT,
-  LOGOUT_POSTPONED_EVENT,
-  USER_CHANGE_POSTPONED_EVENT
-} from '../auth/auth';
-import alertService from '../alert-service/alert-service';
-
-import Profile from './profile';
-
-const CERTIFICATE_MISMATCH_HEADER = 'x-client-certificate-token-mismatch';
-
-export default class SmartProfile extends PureComponent {
-  static propTypes = {
-    auth: PropTypes.instanceOf(Auth).isRequired,
-    className: PropTypes.string,
-    translations: PropTypes.object,
-    profileUrl: PropTypes.string,
-    size: Profile.propTypes.size,
-    round: Profile.propTypes.round
-  };
-
-  state = {
-    user: null,
-    size: Profile.defaultProps.size,
-    isLogoutPostponed: false,
-    isUserChangePostponed: false
-  };
-
-  componentDidMount() {
-    this.requestUser();
-  }
-
-  static Size = Profile.Size;
-
-  login = async () => {
-    this.setState({loading: true});
-
-    try {
-      await this.props.auth.login();
-    } catch (err) {
-      // do nothing
-    } finally {
-      this.setState({loading: false});
-    }
-  };
-
-  logout = () => this.props.auth.logout();
-
-  switchUser = () => this.props.auth.switchUser();
-
-  onRevertPostponement = () => {
-    if (this.state.isLogoutPostponed) {
-      this.props.auth.login();
-    }
-    if (this.state.isUserChangePostponed) {
-      this.props.auth.updateUser();
-    }
-  };
-
-  async requestUser() {
-    try {
-      const {auth} = this.props;
-      const user = await auth.requestUser();
-      this.checkUserCertificateMismatch(user);
-      this.setState({user});
-
-      auth.addListener(USER_CHANGED_EVENT, newUser => {
-        this.setState({
-          user: newUser,
-          isLogoutPostponed: false,
-          isUserChangePostponed: false
-        });
-      });
-
-      auth.addListener(LOGOUT_POSTPONED_EVENT, () => {
-        this.setState({isLogoutPostponed: true});
-      });
-
-      auth.addListener(USER_CHANGE_POSTPONED_EVENT, () => {
-        this.setState({isUserChangePostponed: true});
-      });
-    } catch (e) {
-      // noop
-    }
-  }
-
-  checkUserCertificateMismatch(user) {
-    const {auth, translations} = this.props;
-    const userMeta = auth.http.getMetaForResponse(user);
-    if (userMeta?.headers?.has(CERTIFICATE_MISMATCH_HEADER)) {
-      const message = translations?.certificateMismatch || `You are authenticated as ${user.login || user.name}. To authenticate with the client certificate for your account, log out, then click the "Log in with certificate" option on the login page.`;
-      alertService.warning(message, 0);
-    }
-  }
-
-  render() {
-    const {user, loading, isLogoutPostponed, isUserChangePostponed} = this.state;
-    const {auth, profileUrl, ...props} = this.props;
-    const url = profileUrl || (user ? `${auth.config.serverUri}users/${user.id}` : '');
-
-    return (
-      <Profile
-        onLogin={this.login}
-        onLogout={this.logout}
-        onSwitchUser={this.switchUser}
-        loading={loading}
-        user={user}
-        profileUrl={url}
-        showApplyChangedUser={isUserChangePostponed}
-        showLogIn={isLogoutPostponed}
-        showLogOut={!isLogoutPostponed}
-        showSwitchUser={auth._canShowDialogs() && !isLogoutPostponed && !isUserChangePostponed}
-        onRevertPostponement={this.onRevertPostponement}
-        {...props}
-      />
-    );
-  }
-}

package/components/header/smart-services.js

@@ -1,73 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import Auth from '../auth/auth';
-import HTTP from '../http/http';
-
-import Services from './services';
-
-function noop() {}
-
-export default class SmartServices extends Component {
-  static propTypes = {
-    auth: PropTypes.instanceOf(Auth).isRequired
-  };
-
-  state = {
-    visible: true,
-    loading: false,
-    services: null
-  };
-
-  componentDidMount() {
-    const {auth} = this.props;
-
-    this.http = new HTTP(auth, auth.getAPIPath());
-
-    this.getServices(SmartServices.countFields).then(services => {
-      if (!services.length) {
-        this.setState({visible: false});
-      }
-    }).catch(noop);
-  }
-
-  static allFields = 'id,name,applicationName,homeUrl,iconUrl';
-  static countFields = 'key';
-
-  stopLoading = () => {
-    this.setState({loading: false});
-  };
-
-  getServicesContent = () => {
-    this.setState({loading: true});
-
-    this.getServices(SmartServices.allFields).then(services => {
-      this.setState({services});
-      this.stopLoading();
-    }).catch(this.stopLoading);
-  };
-
-  getServices(fields) {
-    return this.http.get(`services/header?fields=${fields}`);
-  }
-
-  render() {
-    const {services, visible, loading} = this.state;
-    const {auth, ...props} = this.props;
-
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <Services
-        {...props}
-        clientId={auth.config.clientId}
-        initShown
-        loading={loading}
-        onClick={this.getServicesContent}
-        services={services}
-      />
-    );
-  }
-}

package/components/header/tray-icon.js

@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Button from '../button/button';
-
-import styles from './header.css';
-
-export default class TrayIcon extends Component {
-  static propTypes = {
-    ...Button.propTypes,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
-    rotatable: PropTypes.bool
-  };
-
-  static defaultProps = {
-    ...Button.defaultProps
-  };
-
-  render() {
-    const {className, rotatable: rotatable, ...restProps} = this.props;
-    const classes = classNames(styles.icon, className, {
-      [styles.rotatable]: rotatable,
-      [styles.rotated]: rotatable && restProps.active
-    });
-    return (
-      <Button
-        {...restProps}
-        className={classes}
-      />
-    );
-  }
-}

package/components/header/tray.js

@@ -1,30 +0,0 @@
-import React, {Children, Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import styles from './header.css';
-
-const wrapChild = child => child && (
-  <div className={styles.trayItem}>{child}</div>
-);
-
-export default class Tray extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames(styles.tray, className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
-        {Children.map(children, wrapChild)}
-      </div>
-    );
-  }
-}