@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/pager/pager.js

@@ -0,0 +1,223 @@
+/**
+ * @name Pager
+ */
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronLeftIcon from '@jetbrains/icons/chevron-left';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import Button from '../button/button';
+import ButtonGroup from '../button-group/button-group';
+import ButtonToolbar from '../button-toolbar/button-toolbar';
+import Select from '../select/select';
+import memoize from '../global/memoize';
+import Link from '../link/link';
+import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
+import style from './pager.css';
+export default class Pager extends PureComponent {
+    static defaultProps = {
+        currentPage: 1,
+        pageSize: 50,
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        pageSizes: [20, 50, 100],
+        visiblePagesLimit: 7,
+        disablePageSizeSelector: false,
+        openTotal: false,
+        canLoadLastPageWithOpenTotal: false,
+        loader: false,
+        loaderNavigation: false,
+        onPageSizeChange: () => { },
+        onLoadPage: () => { }
+    };
+    static contextType = I18nContext;
+    getSelectOptions() {
+        const { pageSize, pageSizes } = this.props;
+        const { translate } = this.context;
+        const data = pageSizes.map(size => ({
+            key: size,
+            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`
+        }));
+        const selected = data.find(it => it.key === pageSize);
+        return { selected, data };
+    }
+    getTotalPages() {
+        const { total, pageSize } = this.props;
+        return Math.ceil(total / pageSize);
+    }
+    handlePageSizeChange = (item) => {
+        if (item != null) {
+            this.props.onPageSizeChange(item.key);
+        }
+    };
+    handlePrevClick = () => {
+        const { currentPage } = this.props;
+        if (currentPage !== 1) {
+            const prevPage = currentPage - 1;
+            this.props.onPageChange?.(prevPage);
+        }
+    };
+    handleNextClick = () => {
+        const { currentPage, onLoadPage } = this.props;
+        const nextPage = currentPage + 1;
+        const total = this.getTotalPages();
+        if (currentPage !== total) {
+            this.props.onPageChange?.(nextPage);
+        }
+        else if (this.props.openTotal) {
+            onLoadPage(nextPage);
+        }
+    };
+    handlePageChange = memoize((i) => (event) => {
+        this.props.onPageChange?.(i, event);
+    });
+    handleLoadMore = memoize((i) => () => {
+        this.props.onLoadPage(i);
+    });
+    getButton(page, content, key, active) {
+        return (<Button href={this.generateHref(page)} key={key} active={active} disabled={this.props.loader && !active && !this.props.loaderNavigation} loader={this.props.loader && active} {...this.getClickProps(this.handlePageChange(page))}>
+        {content}
+      </Button>);
+    }
+    getClickProps(onClick) {
+        const { hrefFunc, onPageChange } = this.props;
+        if (!onPageChange) {
+            return {};
+        }
+        else if (hrefFunc) {
+            return { onPlainLeftClick: onClick };
+        }
+        else {
+            return { onClick };
+        }
+    }
+    getPageSizeSelector() {
+        const selectOptions = this.getSelectOptions();
+        return !this.props.disablePageSizeSelector &&
+            (<div data-test="ring-pager-page-size-selector" style={{ float: 'right' }}>
+          <Select data={selectOptions.data} selected={selectOptions.selected} onSelect={this.handlePageSizeChange} type={Select.Type.INLINE} disabled={this.props.loader}/>
+        </div>);
+    }
+    getPagerLinks() {
+        const { translate } = this.context;
+        const prevLinkAvailable = this.props.currentPage !== 1;
+        const nextLinkAvailable = this.props.openTotal ||
+            this.props.currentPage !== this.getTotalPages();
+        const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
+        const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
+        const prevText = this.props.translations?.previousPage ?? translate('previousPage');
+        const nextText = this.props.translations?.nextPage ?? translate('nextPage');
+        const nextLinkContent = [<span key="text">{nextText}</span>, nextIcon];
+        const prevLinkContent = [prevIcon, <span key="text">{prevText}</span>];
+        const prevLinkHref = this.generateHref(this.props.currentPage - 1);
+        const nextLinkHref = this.generateHref(this.props.currentPage + 1);
+        const disabledLinkClasses = classNames({
+            [style.link]: true,
+            [style.linkDisabled]: true
+        });
+        return (<div className={style.links}>
+        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
+                ? (<Link href={prevLinkHref} className={style.link} {...this.getClickProps(this.handlePrevClick)}>{prevLinkContent}</Link>)
+                : (<span className={disabledLinkClasses}>
+              {prevIcon}<span key="text">{prevText}</span>
+            </span>)}
+
+        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
+                ? (<Link href={nextLinkHref} className={style.link} {...this.getClickProps(this.handleNextClick)}>{nextLinkContent}</Link>)
+                : (<span className={disabledLinkClasses}>
+              <span key="text">{nextText}</span>{nextIcon}
+            </span>)}
+      </div>);
+    }
+    generateHref(page) {
+        if (this.props.hrefFunc === undefined) {
+            return undefined;
+        }
+        const pageSize = this.props.disablePageSizeSelector ? undefined : this.props.pageSize;
+        return this.props.hrefFunc(page, pageSize);
+    }
+    getPagerContent() {
+        const { currentPage, visiblePagesLimit } = this.props;
+        const totalPages = this.getTotalPages();
+        const { translate } = this.context;
+        if (totalPages < this.props.currentPage) {
+            this.props.onPageChange?.(totalPages);
+        }
+        let start = 1;
+        let end = totalPages;
+        if (totalPages >= visiblePagesLimit) {
+            const leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
+            const rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;
+            start = currentPage - leftHalfFrameSize;
+            end = currentPage + rightHalfFrameSize;
+            if (start < 1) {
+                const tail = 1 - start;
+                start += tail;
+                end += tail;
+            }
+            if (end > totalPages) {
+                const tail = end - totalPages;
+                start -= tail;
+                end -= tail;
+            }
+            if (start < 1) {
+                start += 1 - start;
+            }
+        }
+        const buttons = [];
+        for (let i = start; i <= end; i++) {
+            buttons.push(this.getButton(i, i, i, i === currentPage));
+        }
+        const lastPageButtonAvailable = (end < totalPages && !this.props.openTotal) ||
+            (this.props.openTotal && this.props.canLoadLastPageWithOpenTotal);
+        return (<div>
+        {this.getPagerLinks()}
+
+        <ButtonToolbar>
+          {start > 1 &&
+                this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
+
+          <ButtonGroup>
+            {start > 1 && this.getButton(start - 1, '...')}
+
+            {buttons}
+
+            {end < totalPages && this.getButton(end + 1, '...')}
+
+            {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>{'...'}</Button>)}
+          </ButtonGroup>
+
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
+        </ButtonToolbar>
+
+        {this.getPageSizeSelector()}
+
+      </div>);
+    }
+    render() {
+        const classes = classNames(style.pager, this.props.className);
+        return (<div data-test="ring-pager" className={classes}>
+        {this.getTotalPages() > 1 || this.props.openTotal
+                ? this.getPagerContent()
+                : this.getPageSizeSelector()}
+      </div>);
+    }
+}
+Pager.propTypes = {
+    total: PropTypes.number.isRequired,
+    currentPage: PropTypes.number,
+    pageSize: PropTypes.number,
+    pageSizes: PropTypes.arrayOf(PropTypes.number),
+    visiblePagesLimit: PropTypes.number,
+    disablePageSizeSelector: PropTypes.bool,
+    openTotal: PropTypes.bool,
+    canLoadLastPageWithOpenTotal: PropTypes.bool,
+    onPageChange: PropTypes.func,
+    onPageSizeChange: PropTypes.func,
+    onLoadPage: PropTypes.func,
+    className: PropTypes.string,
+    translations: PropTypes.object,
+    loader: PropTypes.bool,
+    loaderNavigation: PropTypes.bool,
+    hrefFunc: PropTypes.func //function which generates href for all pager's buttons based on pager state passed as a function parameter, either this function or onPageChange should be provided
+};

package/components/palette/palette.css

@@ -0,0 +1,216 @@
+/* stylelint-disable color-no-hex */
+
+:global(.ring-palette_color-0) {
+  color: #444;
+  background-color: transparent;
+}
+
+:global(.ring-palette_color-1),
+:global(.ring-palette_tone-0-0) {
+  color: #888;
+  background-color: #e6e6e6;
+}
+
+:global(.ring-palette_color-2),
+:global(.ring-palette_tone-1-0) {
+  color: #4da400;
+  background-color: #e6f6cf;
+}
+
+:global(.ring-palette_color-3),
+:global(.ring-palette_tone-2-0) {
+  color: #45818e;
+  background-color: #d8f7f3;
+}
+
+:global(.ring-palette_color-4),
+:global(.ring-palette_tone-3-0) {
+  color: #3d85c6;
+  background-color: #e0f1fb;
+}
+
+:global(.ring-palette_color-5),
+:global(.ring-palette_tone-4-0) {
+  color: #dc5766;
+  background-color: #fce5f1;
+}
+
+:global(.ring-palette_color-6),
+:global(.ring-palette_tone-5-0) {
+  color: #b45f06;
+  background-color: #ffee9c;
+}
+
+:global(.ring-palette_color-7),
+:global(.ring-palette_tone-6-0) {
+  color: #b45f06;
+  background-color: #f7e9c1;
+}
+
+:global(.ring-palette_color-8),
+:global(.ring-palette_tone-0-1) {
+  color: #444;
+  background-color: #bababa;
+}
+
+:global(.ring-palette_color-9),
+:global(.ring-palette_tone-1-1) {
+  color: #444;
+  background-color: #b7e281;
+}
+
+:global(.ring-palette_color-10),
+:global(.ring-palette_tone-2-1) {
+  color: #444;
+  background-color: #92e1d5;
+}
+
+:global(.ring-palette_color-11),
+:global(.ring-palette_tone-3-1) {
+  color: #444;
+  background-color: #a6e0fc;
+}
+
+:global(.ring-palette_color-12),
+:global(.ring-palette_tone-4-1) {
+  color: #444;
+  background-color: #ffc8ea;
+}
+
+:global(.ring-palette_color-13),
+:global(.ring-palette_tone-5-1) {
+  color: #444;
+  background-color: #fed74a;
+}
+
+:global(.ring-palette_color-14),
+:global(.ring-palette_tone-6-1) {
+  color: #444;
+  background-color: #e0c378;
+}
+
+:global(.ring-palette_color-15),
+:global(.ring-palette_tone-0-2) {
+  color: #fff;
+  background-color: #878787;
+}
+
+:global(.ring-palette_color-16),
+:global(.ring-palette_tone-1-2) {
+  color: #fff;
+  background-color: #7dbd36;
+}
+
+:global(.ring-palette_color-17),
+:global(.ring-palette_tone-2-2) {
+  color: #fff;
+  background-color: #25beb2;
+}
+
+:global(.ring-palette_color-18),
+:global(.ring-palette_tone-3-2) {
+  color: #fff;
+  background-color: #42a3df;
+}
+
+:global(.ring-palette_color-19),
+:global(.ring-palette_tone-4-2) {
+  color: #fff;
+  background-color: #ff7bc3;
+}
+
+:global(.ring-palette_color-20),
+:global(.ring-palette_tone-5-2) {
+  color: #fff;
+  background-color: #ff7123;
+}
+
+:global(.ring-palette_color-21),
+:global(.ring-palette_tone-6-2) {
+  color: #fff;
+  background-color: #ce6700;
+}
+
+:global(.ring-palette_color-22),
+:global(.ring-palette_tone-0-3) {
+  color: #fff;
+  background-color: #4d4d4d;
+}
+
+:global(.ring-palette_color-23),
+:global(.ring-palette_tone-1-3) {
+  color: #fff;
+  background-color: #409600;
+}
+
+:global(.ring-palette_color-24),
+:global(.ring-palette_tone-2-3) {
+  color: #fff;
+  background-color: #2f9890;
+}
+
+:global(.ring-palette_color-25),
+:global(.ring-palette_tone-3-3) {
+  color: #fff;
+  background-color: #0070e4;
+}
+
+:global(.ring-palette_color-26),
+:global(.ring-palette_tone-4-3) {
+  color: #fff;
+  background-color: #dc0083;
+}
+
+:global(.ring-palette_color-27),
+:global(.ring-palette_tone-5-3) {
+  color: #fff;
+  background-color: #e30000;
+}
+
+:global(.ring-palette_color-28),
+:global(.ring-palette_tone-6-3) {
+  color: #fff;
+  background-color: #8d5100;
+}
+
+:global(.ring-palette_color-29),
+:global(.ring-palette_tone-0-4) {
+  color: #fff;
+  background-color: #1a1a1a;
+}
+
+:global(.ring-palette_color-30),
+:global(.ring-palette_tone-1-4) {
+  color: #fff;
+  background-color: #246512;
+}
+
+:global(.ring-palette_color-31),
+:global(.ring-palette_tone-2-4) {
+  color: #fff;
+  background-color: #00665e;
+}
+
+:global(.ring-palette_color-32),
+:global(.ring-palette_tone-3-4) {
+  color: #fff;
+  background-color: #0050a1;
+}
+
+:global(.ring-palette_color-33),
+:global(.ring-palette_tone-4-4) {
+  color: #fff;
+  background-color: #900052;
+}
+
+:global(.ring-palette_color-34),
+:global(.ring-palette_tone-5-4) {
+  color: #fff;
+  background-color: #8e1600;
+}
+
+:global(.ring-palette_color-35),
+:global(.ring-palette_tone-6-4) {
+  color: #fff;
+  background-color: #553000;
+}

package/components/panel/panel.css

@@ -0,0 +1,20 @@
+@import "../global/variables.css";
+
+.panel {
+  composes: panel from "../dialog/dialog.css"; /* TODO: Invert dependency using :externals CSS Modules selector */
+
+  position: relative;
+
+  margin-top: calc(var(--ring-unit) * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
+
+  border-top: 1px solid var(--ring-popup-border-color);
+
+  &:empty {
+    display: none;
+  }
+
+  & > button:not(:last-child) {
+    margin-right: var(--ring-unit);
+  }
+}

package/components/panel/panel.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Panel
+ */
+export default class Panel extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/panel/panel.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './panel.css';
+/**
+ * @name Panel
+ */
+export default class Panel extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { className, children, ...props } = this.props;
+        const classes = classNames(styles.panel, className);
+        return (<div {...props} className={classes}>
+        {children}
+      </div>);
+    }
+}

package/components/permissions/permissions.d.ts

@@ -0,0 +1,111 @@
+import Auth from '../auth/auth__core';
+import PermissionCache, { Permission } from './permissions__cache';
+export interface PermissionsConfig {
+    prefix?: string | null | undefined;
+    namesConverter?: ((name: string) => string) | null | undefined;
+    services?: readonly string[] | null | undefined;
+    datasource?: ((query: string | undefined) => Promise<readonly Permission[] | null | undefined>) | null | undefined;
+}
+interface PermissionsCacheControl {
+    NO_CACHE?: boolean | null | undefined;
+    NO_STORE?: boolean | null | undefined;
+}
+export interface PermissionsLoadOptions {
+    cacheControl?: PermissionsCacheControl | null | undefined;
+}
+/**
+ * <code>
+ *   const permissions = new Permissions(auth, {prefix: 'jetbrains.jetpass.', services: [auth.serviceId]})
+ *   permissions.load().then(function (p) {
+ *     const canReadUser = p.has('read-user');
+ *     ...
+ *   });
+ *
+ *   permissions.check('read-user').then(function(canReadUser) {
+ *     ...
+ *   });
+ * </code>
+ *
+ * @param {Auth} auth instance of well configured Auth object
+ * @param {{
+ *   prefix: string?,
+ *   namesConverter: function?
+ *   serviceId: string?
+ * }=} config permissions loaded configuration.
+ * <code>prefix</code> if provided then this prefix is removed from the permissions names.
+ * <code>namesConverter</code> if provided it maps permission names used on server-side to client-side permission names. It is used only if prefix is undefined.
+ * <code>serviceId</code> if provided then permissions only for the service are loaded.
+ * @constructor
+ */
+export default class Permissions {
+    /**
+     * @const {string}
+     */
+    static API_PERMISSION_CACHE_PATH: string;
+    query: string | undefined;
+    namesConverter: ((name: string) => string) | null | undefined;
+    private _auth;
+    private _datasource;
+    _promise: Promise<PermissionCache> | null;
+    private _subscribed;
+    private _permissionCache;
+    constructor(auth: Auth, config?: PermissionsConfig);
+    private _defaultDatasource;
+    /**
+     * Returns function, which cuts off prefix from server-side permission name
+     *
+     * @param {string} prefix
+     * @returns {Function}
+     */
+    static getDefaultNamesConverter(prefix: string): (storedName: string) => string;
+    static getPermissionQuery(services?: readonly string[] | null | undefined): string | undefined;
+    set(cachedPermissions?: readonly Permission[] | null | undefined): PermissionCache;
+    get(): readonly Permission[] | null | undefined;
+    private _setCache;
+    private _getCache;
+    private _resetCache;
+    /**
+     * Loads logged-in user permissions.
+     * @param {object?} options
+     * @return {Promise.<Permissions>} promise that is resolved when the permissions are loaded
+     */
+    load(options?: PermissionsLoadOptions | null | undefined): Promise<PermissionCache>;
+    _loadPermissions(): Promise<readonly Permission[] | null | undefined>;
+    /**
+     * Reloads permission cache from server
+     * @returns {Promise.<Permissions>} promise that is resolved when the permissions are reloaded
+     */
+    reload(): Promise<PermissionCache>;
+    /**
+     * Waits till the permission cache is loaded then checks if the current user has the
+     * given permissions in the project with the given id.
+     *
+     * @param {string} permissions  space separated list of permissions
+     * @param {string=} projectId     optional projectId. If absent the method checks
+     *  if the given permission is granted in any project.
+     *
+     * @return {Promise.<boolean>}
+     */
+    check(permissions?: string | null | undefined, projectId?: string | null | undefined): Promise<boolean>;
+    /**
+     * Binds a property with the name <code>propertyName</code> of the <code>object</code>
+     * to a boolean value that is true if user has the permissions and false if she doesn't.
+     *
+     * @example
+     * <code>
+     *   userPermissions.bindVariable($scope, 'canReadRole', 'role-read')
+     * </code>
+     *
+     * @param {object} object       an object which property should be bound
+     * @param {string} propertyName a name of a property to bind
+     * @param {string} permissions  space separated list of permissions
+     * @param {string=} projectId     optional projectId. If absent the method checks
+     *  if the given permissions are granted in any project.
+     *
+     * @return {Promise.<boolean>}
+     */
+    bindVariable<K extends string>(object: {
+        [key in K]?: boolean;
+    }, propertyName: K, permissions?: string | null | undefined, projectId?: string | null | undefined): Promise<boolean>;
+}
+export {};