@jetbrains/ring-ui 5.1.23 → 5.1.25

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/palette/palette.stories.js

@@ -0,0 +1,63 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import './palette.css';
+
+export default {
+  title: 'Style-only/Color fields palette',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Defines the color palette used for tags and custom fields.',
+    hermione: {skip: true},
+    a11y: {options: {rules: {'color-contrast': {enabled: false}}}}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, []).controller('TestCtrl', function controller() {
+    const xrange = num => [...Array(num)].map((val, index) => index);
+
+    this.arr5 = xrange(5);
+    this.arr7 = xrange(7);
+  });
+
+  return `
+      <div ng-controller="TestCtrl as testCtrl">
+        <h4>ColorId</h4>
+        <div ng-repeat="i in testCtrl.arr5" class="example">
+          <div ng-repeat="j in testCtrl.arr7"
+            ng-init="colorId = i * 7 + j + 1"
+            ng-attr-class="ring-palette_color-{{colorId}}">
+            Color {{colorId}}
+          </div>
+        </div>
+        <h4>ToneId and BrightnessId</h4>
+        <div class="example" ng-repeat="toneId in testCtrl.arr7">
+          <div><b>Tone {{toneId}}:</b></div>
+          <div ng-repeat="brightnessId in testCtrl.arr5"
+            ng-attr-class="ring-palette_tone-{{toneId}}-{{brightnessId}}">
+            Brightness {{brightnessId}}
+          </div>
+        </div>
+      </div>
+    `;
+};
+
+basic.storyName = 'Color fields palette';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .example {
+    margin: 4px;
+  }
+
+  .example div {
+    width: 90px;
+    display: inline-block;
+  }
+</style>
+      `
+};

package/components/panel/panel.css

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

@@ -0,0 +1,20 @@
+/**
+ * @name Panel Ng
+ */
+import angular from 'angular';
+
+import styles from '../panel/panel.css';
+import {addClasses} from '../global/dom';
+
+
+const angularModule = angular.module('Ring.panel', []);
+
+angularModule.directive('rgPanel', function rgEqualValueDirective() {
+  return {
+    link: function link(scope, iElement) {
+      addClasses(iElement[0].classList, styles.panel);
+    }
+  };
+});
+
+export default angularModule.name;

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 {};

package/components/permissions/permissions.js

@@ -0,0 +1,177 @@
+import PermissionCache from './permissions__cache';
+/**
+ * <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 = 'permissions/cache';
+    query;
+    namesConverter;
+    _auth;
+    _datasource;
+    _promise;
+    _subscribed;
+    _permissionCache;
+    constructor(auth, config = {}) {
+        this.query = Permissions.getPermissionQuery(config.services);
+        this.namesConverter = config.prefix
+            ? Permissions.getDefaultNamesConverter(config.prefix)
+            : config.namesConverter;
+        if (!auth) {
+            throw new Error('Parameter auth is required');
+        }
+        this._auth = auth;
+        this._datasource = config.datasource || this._defaultDatasource;
+        this._promise = null;
+        this._subscribed = false;
+        this._permissionCache = new PermissionCache(null, this.namesConverter);
+    }
+    _defaultDatasource = (query) => (this._auth.http.get(Permissions.API_PERMISSION_CACHE_PATH, {
+        query: {
+            fields: 'permission/key,global,projects(id)',
+            query
+        }
+    }));
+    /**
+     * Returns function, which cuts off prefix from server-side permission name
+     *
+     * @param {string} prefix
+     * @returns {Function}
+     */
+    static getDefaultNamesConverter(prefix) {
+        return (storedName) => {
+            if (storedName.indexOf(prefix) !== 0) {
+                return storedName;
+            }
+            else {
+                return storedName.substr(prefix.length);
+            }
+        };
+    }
+    static getPermissionQuery(services) {
+        if (!services || !services.length) {
+            return undefined;
+        }
+        return services.map(service => `service:{${service}}`).join(' or ');
+    }
+    set(cachedPermissions) {
+        this._permissionCache.set(cachedPermissions);
+        this._setCache(Promise.resolve(this._permissionCache));
+        return this._permissionCache;
+    }
+    get() {
+        return this._permissionCache.get();
+    }
+    _setCache(value) {
+        this._promise = value;
+    }
+    _getCache() {
+        return this._promise;
+    }
+    _resetCache() {
+        this._setCache(null);
+    }
+    /**
+     * Loads logged-in user permissions.
+     * @param {object?} options
+     * @return {Promise.<Permissions>} promise that is resolved when the permissions are loaded
+     */
+    load(options) {
+        if (this._subscribed === false) {
+            this._auth.addListener('userChange', () => {
+                this.reload();
+            });
+            this._subscribed = true;
+        }
+        const cache = this._getCache();
+        if (!hasCacheControl('NO_CACHE', options) && cache) {
+            return cache;
+        }
+        if (hasCacheControl('NO_STORE', options)) {
+            return this._loadPermissions().
+                then(cachedPermissions => new PermissionCache(cachedPermissions, this.namesConverter));
+        }
+        const permissions = this._loadPermissions().
+            then(cachedPermissions => this.set(cachedPermissions));
+        this._setCache(permissions);
+        return permissions;
+        function hasCacheControl(value, _options) {
+            if (_options && _options.cacheControl) {
+                return _options.cacheControl[value];
+            }
+            return false;
+        }
+    }
+    _loadPermissions() {
+        return this._datasource(this.query);
+    }
+    /**
+     * Reloads permission cache from server
+     * @returns {Promise.<Permissions>} promise that is resolved when the permissions are reloaded
+     */
+    reload() {
+        this._resetCache();
+        return this.load();
+    }
+    /**
+     * 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, projectId) {
+        return this.load().then(permissionCache => permissionCache.has(permissions, projectId));
+    }
+    /**
+     * 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(object, propertyName, permissions, projectId) {
+        object[propertyName] = false;
+        return this.check(permissions, projectId).
+            then(permitted => {
+            object[propertyName] = permitted;
+            return permitted;
+        });
+    }
+}