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

package/components/list/list__custom.tsx

@@ -0,0 +1,89 @@
+import React, {PureComponent, ReactNode, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import dataTests from '../global/data-tests';
+import getEventKey from '../global/get-event-key';
+
+import styles from './list.css';
+import {ListDataItemProps} from './consts';
+
+export default class ListCustom<T> extends PureComponent<ListDataItemProps<T>> {
+  handleKeyPress = (event: React.KeyboardEvent) => {
+    const key = getEventKey(event);
+    if (key === 'Enter' || key === ' ') {
+      this.props.onClick(event);
+    }
+  };
+
+  render() {
+    const {
+      scrolling,
+      hover,
+      className,
+      disabled,
+      template,
+      rgItemType,
+      tabIndex,
+      onClick,
+      onCheckboxChange,
+      onMouseOver,
+      onMouseUp,
+      role,
+      tagName,
+      ...restProps
+    } = this.props;
+    const classes = classNames(styles.item, className, {
+      [styles.action]: !disabled,
+      [styles.hover]: hover && !disabled,
+      [styles.scrolling]: scrolling
+    });
+
+
+    const dataTest = dataTests('ring-list-item-custom', {
+      'ring-list-item-action': !disabled
+    }, restProps['data-test']);
+
+    const content: ReactNode = (typeof template === 'function')
+      ? template(this.props as ListDataItemProps<T>)
+      : template;
+    const TagName: keyof JSX.IntrinsicElements = tagName || 'span';
+
+    return (
+      <TagName
+        role={role || 'button'}
+        tabIndex={tabIndex}
+        onClick={onClick}
+        onKeyPress={this.handleKeyPress}
+        onMouseOver={onMouseOver}
+        onFocus={onMouseOver}
+        onMouseUp={onMouseUp}
+        className={classes}
+        data-test={dataTest}
+      >
+        {content}
+      </TagName>
+    );
+  }
+}
+
+(ListCustom as ComponentType<unknown>).propTypes = {
+  scrolling: PropTypes.bool.isRequired,
+  hover: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  rgItemType: PropTypes.number,
+  tabIndex: PropTypes.number.isRequired,
+  template: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  onClick: PropTypes.func.isRequired,
+  onMouseOver: PropTypes.func.isRequired,
+  onMouseUp: PropTypes.func,
+  onCheckboxChange: PropTypes.func.isRequired,
+  role: PropTypes.string,
+  tagName: PropTypes.string,
+  'data-test': PropTypes.string
+};

package/components/list/list__hint.tsx

@@ -0,0 +1,28 @@
+import React, {PureComponent, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import styles from './list.css';
+
+export interface ListHintProps {
+  label: ReactNode
+}
+
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListHint extends PureComponent<ListHintProps> {
+  static propTypes = {
+    label: PropTypes.node
+  };
+
+  render() {
+    return (
+      <span
+        className={classnames(styles.item, styles.hint)}
+        data-test="ring-list-hint"
+      >{this.props.label}</span>
+    );
+  }
+}

package/components/list/list__item.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Icon from '../icon/icon';
+import Checkbox from '../checkbox/checkbox';
+
+import ListItem from './list__item';
+import {ListDataItemProps} from './consts';
+
+
+describe('ListItem', () => {
+  const shallowListItem = (props?: Partial<ListDataItemProps>) =>
+    shallow(<ListItem {...props as ListDataItemProps}/>);
+  const mountListItem = (props?: Partial<ListDataItemProps>) =>
+    mount(<ListItem {...props as ListDataItemProps}/>);
+
+
+  it('should create component', () => {
+    mountListItem().should.have.type(ListItem);
+  });
+
+
+  it('should use passed className', () => {
+    shallowListItem({className: 'test-class'}).find('button').should.
+      have.className('test-class');
+  });
+
+
+  it('should add data test attributes', () => {
+    shallowListItem().should.
+      match('div[data-test="ring-list-item ring-list-item-action"]');
+  });
+
+
+  it('should remove ring-list-item-action data-test attribute if item is disabled', () => {
+    shallowListItem({disabled: true}).should.
+      match('div[data-test="ring-list-item"]');
+  });
+
+
+  it('should add data-test attribute if item is selected', () => {
+    shallowListItem({checkbox: false}).should.
+      match('div[data-test="ring-list-item ring-list-item-action"]');
+
+    shallowListItem({checkbox: true}).should.
+      match('div[data-test="ring-list-item ring-list-item-action ring-list-item-selected"]');
+  });
+
+
+  it('should render checkbox icon', () => {
+    const checked = shallowListItem({checkbox: true}).
+      find(Checkbox).prop('checked');
+    true.should.equal(checked);
+
+    shallowListItem({checkbox: undefined}).
+      find(Checkbox).length.should.equal(0);
+  });
+
+
+  it('should not render check mark icon', () => {
+    shallowListItem().should.not.
+      containMatchingElement(<Icon/>);
+  });
+});

package/components/list/list__item.tsx

@@ -0,0 +1,236 @@
+import React, {PureComponent, SyntheticEvent, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import dataTests from '../global/data-tests';
+import Avatar, {Size as AvatarSize} from '../avatar/avatar';
+import Checkbox from '../checkbox/checkbox';
+import Icon from '../icon/icon';
+
+import getUID from '../global/get-uid';
+import globalStyles from '../global/global.css';
+
+import styles from './list.css';
+
+import {ListDataItemProps} from './consts';
+
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+
+const RING_UNIT = 8;
+const DEFAULT_PADDING = 16;
+const CHECKBOX_WIDTH = 28;
+
+export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
+  id = getUID('list-item-');
+
+  stopBubbling = (e: SyntheticEvent) => e.stopPropagation();
+
+  private _isString = (val: unknown): val is string =>
+    typeof val === 'string' || val instanceof String;
+
+  render() {
+    const {
+      scrolling,
+      className,
+      disabled,
+      checkbox,
+      avatar,
+      subavatar,
+      glyph,
+      icon,
+      rightGlyph,
+      description,
+      label,
+      title,
+      details,
+      hover,
+      rgItemType,
+      level,
+      tabIndex,
+      compact,
+      onClick,
+      onCheckboxChange,
+      onMouseOver,
+      onMouseDown,
+      onMouseUp,
+      rightNodes,
+      leftNodes,
+      showGeneratedAvatar,
+      username,
+      ...restProps
+    } = this.props;
+
+    const checkable = checkbox !== undefined;
+    const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
+    const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
+    const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
+
+    const classes = classNames(styles.item, globalStyles.resetButton, className, {
+      [styles.action]: !disabled,
+      [styles.hover]: hover && !disabled,
+      [styles.compact]: compact,
+      [styles.scrolling]: scrolling,
+      [styles.disabled]: disabled
+    });
+
+    const detailsClasses = classNames({
+      [styles.details]: details,
+      [styles.padded]: icon !== undefined ||
+        checkbox !== undefined ||
+        glyph !== undefined
+    });
+
+    const style = {
+      paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
+    };
+
+    let computedTitle = null;
+    if (this._isString(title)) {
+      // if title is specified and is a string then use it
+      computedTitle = title;
+    } else {
+      // otherwise use label if it is a string;
+      // label can also be an element, use empty string in this case
+      computedTitle = this._isString(label) ? label : '';
+    }
+
+    const dataTest = dataTests({
+      'ring-list-item': ((restProps['data-test'] || '') as string).indexOf('ring-list-item') === -1,
+      'ring-list-item-action': !disabled,
+      'ring-list-item-selected': checkbox
+    }, restProps['data-test']);
+
+    return (
+      <div className={styles.itemContainer} data-test={dataTest}>
+        {showCheckbox && (
+          <div
+            className={styles.checkboxContainer}
+          >
+            <Checkbox
+              aria-labelledby={this.id}
+              checked={checkbox}
+              disabled={disabled}
+              onChange={onCheckboxChange}
+              onClick={this.stopBubbling}
+            />
+          </div>
+        )}
+        <button
+          id={this.id}
+          type="button"
+          tabIndex={tabIndex}
+          onClick={onClick}
+          onMouseOver={onMouseOver}
+          onMouseDown={onMouseDown}
+          onFocus={onMouseOver}
+          onMouseUp={onMouseUp}
+          className={classes}
+          style={style}
+        >
+          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
+            {!showCheckbox && (
+              <div className={styles.left}>
+                {leftNodes}
+                {glyph && (
+                  <Icon
+                    className={styles.glyph}
+                    glyph={glyph}
+                    size={this.props.iconSize}
+                  />
+                )}
+                {(avatar || shouldShowGeneratedAvatar) && (
+                  <Avatar
+                    className={styles.avatar}
+                    url={avatar}
+                    size={AvatarSize.Size20}
+                    subavatar={subavatar}
+                    username={username}
+                  />
+                )}
+              </div>
+            )}
+
+            <span
+              className={styles.label}
+              title={computedTitle}
+              data-test="ring-list-item-label"
+            >{label}</span>
+
+            {description && (
+              <span
+                className={styles.description}
+                data-test="ring-list-item-description"
+              >{description}</span>
+            )}
+
+            <div className={styles.right}>
+              {rightGlyph && (
+                <Icon
+                  className={styles.rightGlyph}
+                  glyph={rightGlyph}
+                  size={this.props.iconSize}
+                />
+              )}
+              {icon && (
+                <div
+                  className={styles.icon}
+                  style={{backgroundImage: `url("${icon}")`}}
+                />
+              )}
+              {rightNodes}
+            </div>
+          </div>
+
+          {details && <div className={detailsClasses}>{details}</div>}
+        </button>
+      </div>
+    );
+  }
+}
+
+(ListItem as ComponentType<unknown>).propTypes = {
+  scrolling: PropTypes.bool,
+  hover: PropTypes.bool,
+  details: PropTypes.string,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  tabIndex: PropTypes.number,
+  checkbox: PropTypes.bool,
+  description: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.array
+  ]),
+  showGeneratedAvatar: PropTypes.bool,
+  username: PropTypes.string,
+  avatar: PropTypes.string,
+  subavatar: PropTypes.string,
+  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  icon: PropTypes.string,
+  iconSize: PropTypes.number,
+  rightNodes: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.array
+  ]),
+  leftNodes: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.array
+  ]),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.string,
+  level: PropTypes.number,
+  rgItemType: PropTypes.number,
+  rightGlyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  compact: PropTypes.bool,
+  onClick: PropTypes.func,
+  onCheckboxChange: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  'data-test': PropTypes.string
+};

package/components/list/list__link.tsx

@@ -0,0 +1,74 @@
+import React, {Component, PureComponent, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Link, {linkHOC} from '../link/link';
+import dataTests from '../global/data-tests';
+
+import styles from './list.css';
+
+import {ListDataItemProps} from './consts';
+
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
+  render() {
+    const {
+      scrolling,
+      'data-test': dataTest,
+      className,
+      label,
+      hover,
+      description,
+      rgItemType,
+      url,
+      onCheckboxChange,
+      disabled,
+      LinkComponent,
+      compact,
+      hoverClassName,
+      ...restProps
+    } = this.props;
+    const classes = classNames(styles.item, className, {
+      [styles.actionLink]: !disabled,
+      [styles.compact]: compact,
+      [styles.scrolling]: scrolling
+    });
+
+    const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
+
+    return (
+      <Comp
+        pseudo={!this.props.href}
+        {...restProps}
+        hover={hover && !disabled}
+        className={classes}
+        data-test={dataTests('ring-list-link', dataTest)}
+      >
+        {label}
+      </Comp>
+    );
+  }
+}
+
+(ListLink as ComponentType<unknown>).propTypes = {
+  ...Link.propTypes,
+  description: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+    PropTypes.func
+  ]),
+  rgItemType: PropTypes.number,
+  scrolling: PropTypes.bool.isRequired,
+  url: PropTypes.string,
+  LinkComponent: PropTypes.oneOfType([
+    PropTypes.instanceOf(Component),
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  onCheckboxChange: PropTypes.func.isRequired,
+  compact: PropTypes.bool
+};

package/components/list/list__separator.tsx

@@ -0,0 +1,31 @@
+import React, {PureComponent, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './list.css';
+import {ListDataItemProps} from './consts';
+
+export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
+  render() {
+    const {description, isFirst, className} = this.props;
+
+    const classes = classNames(styles.separator, className, {
+      [styles.separator_first]: isFirst
+    });
+
+    return (
+      <span
+        className={classes}
+      >{description}</span>
+    );
+  }
+}
+
+(ListSeparator as ComponentType<ListDataItemProps>).propTypes = {
+  className: PropTypes.string,
+  description: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  isFirst: PropTypes.bool
+};

package/components/list/list__title.tsx

@@ -0,0 +1,45 @@
+import React, {PureComponent, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import styles from './list.css';
+import {ListDataItemProps} from './consts';
+
+export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
+  render() {
+    const {className, description, label, isFirst} = this.props;
+
+    const classes = classnames(styles.title, className, {
+      [styles.title_first]: isFirst
+    });
+
+    return (
+      <span
+        className={classes}
+        data-test="ring-list-title"
+      >
+        <span
+          className={classnames(styles.label, styles.text)}
+          data-test="ring-list-title-label"
+        >{label}</span>
+        <div
+          className={styles.description}
+          data-test="ring-list-title-description"
+        >{description}</div>
+      </span>
+    );
+  }
+}
+
+(ListTitle as ComponentType<ListDataItemProps>).propTypes = {
+  className: PropTypes.string,
+  description: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  label: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  isFirst: PropTypes.bool
+};

package/components/list/list__users-groups-source.test.ts

@@ -0,0 +1,129 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import Auth from '../auth/auth';
+
+import ListUsersGroupsSource from './list__users-groups-source';
+
+describe('List Users Groups Source', () => {
+  let fakeAuth: Auth;
+  beforeEach(() => {
+    const requestToken: Auth['requestToken'] = sandbox.stub().returns(Promise.resolve('testToken'));
+    fakeAuth = {requestToken} as Auth;
+  });
+
+  it('Should convert users to list model', async () => {
+    const source = new ListUsersGroupsSource(fakeAuth);
+
+    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
+      id: 1,
+      name: 'test user',
+      login: 'testUser',
+      type: 'user',
+      profile: {avatar: {url: 'http://test.com.url'}}
+    }]));
+
+    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
+      id: 1,
+      name: 'test group',
+      type: 'userGroup',
+      userCount: 123,
+      iconUrl: 'http://foo.bar'
+    }]));
+
+    const dataForList = await source.getForList();
+    dataForList.should.deep.contain({
+      id: 1,
+      login: 'testUser',
+      profile: {avatar: {url: 'http://test.com.url'}},
+      name: 'test user',
+      key: 1,
+      type: 'user',
+      label: 'test user',
+      description: 'testUser',
+      avatar: 'http://test.com.url'
+    });
+
+  });
+
+  it('Should convert usergroups to list model', async () => {
+    const source = new ListUsersGroupsSource(fakeAuth);
+
+    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
+      id: 1,
+      name: 'test user',
+      login: 'test user',
+      profile: {avatar: {url: 'http://test.com.url'}}
+    }]));
+
+    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
+      id: 1,
+      name: 'test group',
+      type: 'userGroup',
+      userCount: 123,
+      iconUrl: 'http://foo.bar'
+    }]));
+
+    const dataForList = await source.getForList();
+    dataForList.should.deep.contain({
+      id: 1,
+      key: 1,
+      name: 'test group',
+      label: 'test group',
+      type: 'userGroup',
+      description: '123 members',
+      userCount: 123,
+      avatar: 'http://foo.bar',
+      glyph: null,
+      iconUrl: 'http://foo.bar'
+    });
+  });
+
+  it('Should support userCount plural formatter', async () => {
+    const source = new ListUsersGroupsSource(fakeAuth, {
+      getPluralForUserCount: count => `${count} text`
+    });
+
+    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
+      id: 1,
+      name: 'test user',
+      login: 'test user',
+      profile: {avatar: {url: 'http://test.com.url'}}
+    }]));
+
+    sandbox.stub(source, 'getGroups').returns(Promise.resolve([{
+      id: 1,
+      name: 'test group',
+      userCount: 123
+    }]));
+
+    const dataForList = await source.getForList();
+    dataForList[3].description.should.equal('123 text');
+  });
+
+  it('Should display "No users" title if no users found', async () => {
+    const source = new ListUsersGroupsSource(fakeAuth, {});
+
+    sandbox.stub(source, 'getUsers').returns(Promise.resolve([]));
+
+    sandbox.stub(source, 'getGroups').
+      returns(Promise.resolve([{id: 1, name: 'test group', userCount: 0}]));
+
+    const dataForList = await source.getForList();
+    dataForList[0].description.should.equal('No users');
+  });
+
+  it('Should display "No groups" title if no groups found', async () => {
+    const source = new ListUsersGroupsSource(fakeAuth, {});
+
+    sandbox.stub(source, 'getUsers').returns(Promise.resolve([{
+      id: 1,
+      name: 'test user',
+      login: 'test user',
+      profile: {avatar: {url: 'http://test.com.url'}}
+    }]));
+
+    sandbox.stub(source, 'getGroups').returns(Promise.resolve([]));
+
+    const dataForList = await source.getForList();
+    dataForList[2].description.should.equal('No groups');
+  });
+});