@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/header/header.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import Header, {HeaderAttrs} from './header';
+
+describe('Header', () => {
+  const mountHeader = (props?: HeaderAttrs) => mount(<Header {...props}/>);
+  const getHeaderDiv = (props?: HeaderAttrs) => 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/header.tsx

@@ -0,0 +1,57 @@
+import React, {Component, ComponentPropsWithRef, HTMLAttributes} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Theme, {ThemeProps, withTheme} from '../global/theme';
+
+import styles from './header.css';
+
+interface HeaderProps extends HTMLAttributes<HTMLElement>, ThemeProps {
+  spaced: boolean
+}
+
+/**
+ * @name Header
+ */
+/**
+ * Displays a configurable page header. See available presentation options in the knobs panel.
+ */
+class Header extends Component<HeaderProps> {
+  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>
+    );
+  }
+}
+
+const ThemedHeader = withTheme(Theme.DARK)(Header);
+export type HeaderAttrs = ComponentPropsWithRef<typeof ThemedHeader>;
+export default ThemedHeader;
+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/logo.tsx

@@ -0,0 +1,31 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Icon, {IconAttrs, Size} from '../icon/icon';
+
+import styles from './header.css';
+
+export default class Logo extends PureComponent<IconAttrs> {
+  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.tsx

@@ -0,0 +1,226 @@
+import React, {
+  Component,
+  ComponentType,
+  HTMLAttributes,
+  PureComponent,
+  ReactNode
+} 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 {ListDataItem} from '../list/consts';
+import {AuthUser} from '../auth/auth';
+
+import {isTruthy} from '../global/typescript-utils';
+import {LinkProps} from '../link/link';
+
+import styles from './header.css';
+
+const rgItemType = PopupMenu.ListProps.Type.LINK;
+
+export interface ProfileTranslations {
+  applyChangedUser?: string | null | undefined
+  login?: string | null | undefined
+  profile?: string | null | undefined
+  switchUser?: string | null | undefined
+  logout?: string | null | undefined
+  certificateMismatch?: string | null | undefined
+}
+
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  closeOnSelect: boolean
+  renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[]
+  translations: ProfileTranslations
+  size: Size
+  renderGuest: (props: ProfileProps) => ReactNode
+  hasUpdates?: boolean | null | undefined
+  loading?: boolean | undefined
+  onLogin?: (() => void) | undefined
+  onLogout?: (() => void) | null | undefined
+  onSwitchUser?: (() => void) | null | undefined
+  profileUrl?: string | undefined
+  LinkComponent?: ComponentType<LinkProps> | null | undefined
+  user?: AuthUser | null | undefined | void
+  round?: boolean | null | undefined
+  showLogIn?: boolean | null | undefined
+  showLogOut?: boolean | null | undefined
+  showSwitchUser?: boolean | null | undefined
+  showApplyChangedUser?: boolean | null | undefined
+  onRevertPostponement?: (() => void) | null | undefined
+}
+
+export default class Profile extends PureComponent<ProfileProps> {
+  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: ProfileProps = {
+    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(isTruthy);
+
+    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
+        }}
+      />
+    );
+  }
+}
+
+export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>

package/components/header/services-link.tsx

@@ -0,0 +1,57 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+import Link, {LinkProps} from '../link/link';
+
+import styles from './services.css';
+
+export interface Service {
+  id: string
+  applicationName?: string | null | undefined
+  iconUrl?: string | null | undefined
+  homeUrl: string
+  name: string
+}
+
+export interface ServicesLinkProps extends Partial<LinkProps> {
+  service: Service
+}
+
+export default class ServicesLink extends PureComponent<ServicesLinkProps> {
+  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.tsx

@@ -0,0 +1,122 @@
+import React, {HTMLAttributes, PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import servicesIcon from '@jetbrains/icons/services-20px';
+
+import Dropdown, {AnchorProps} from '../dropdown/dropdown';
+import Popup from '../popup/popup';
+
+import TrayIcon from './tray-icon';
+import ServicesLink, {Service} from './services-link';
+import styles from './services.css';
+
+const makeAnchor = (loading: boolean | null | undefined) => {
+  const Anchor = ({active}: AnchorProps) => (
+    <TrayIcon
+      loader={loading}
+      active={active}
+      icon={servicesIcon}
+      aria-label="Services"
+    />
+  );
+
+  Anchor.propTypes = {
+    active: PropTypes.bool
+  };
+
+  return Anchor;
+};
+
+export interface ServicesProps extends HTMLAttributes<HTMLElement> {
+  clientId?: string | null | undefined
+  initShown?: boolean | undefined
+  loading?: boolean | null | undefined
+  services?: Service[] | null | undefined
+}
+
+export default class Services extends PureComponent<ServicesProps> {
+  static sort = (a: Service, b: Service) => {
+    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) => 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.tsx

@@ -0,0 +1,136 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+import Auth, {
+  USER_CHANGED_EVENT,
+  LOGOUT_POSTPONED_EVENT,
+  USER_CHANGE_POSTPONED_EVENT, AuthUser
+} from '../auth/auth';
+import alertService from '../alert-service/alert-service';
+
+import {Size} from '../avatar/avatar';
+
+import Profile, {ProfileAttrs} from './profile';
+
+
+const CERTIFICATE_MISMATCH_HEADER = 'x-client-certificate-token-mismatch';
+
+export interface SmartProfileProps extends ProfileAttrs {
+  auth: Auth
+}
+
+interface SmartProfileState {
+  user: AuthUser | null | undefined | void,
+  size: Size,
+  isLogoutPostponed: boolean,
+  isUserChangePostponed: boolean
+  loading?: boolean
+}
+
+export default class SmartProfile extends PureComponent<SmartProfileProps, SmartProfileState> {
+  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: SmartProfileState = {
+    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: AuthUser) {
+    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}
+      />
+    );
+  }
+}