@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/loader-screen-ng/loader-screen-ng.js

@@ -1,95 +0,0 @@
-import angular from 'angular';
-
-import loaderNg from '../loader-ng/loader-ng';
-import styles from '../loader-screen/loader-screen.css';
-
-/**
- * @name Loader Screen Ng
- */
-
-const angularModule = angular.module('Ring.loader-screen', [loaderNg]);
-
-angularModule.service('loaderScreen', function service($timeout, $rootScope) {
-  // TODO in CSS Modules version put constant to global.css
-  const ordinaryLoadingTTL = 100;
-
-  let initialLoading = false;
-  let loadingFailed = false;
-  let showLoader;
-  let showLoaderPromise;
-
-  this.startLoading = (ttl = ordinaryLoadingTTL) => {
-    if (showLoaderPromise) {
-      return; // already scheduled to show
-    }
-
-    showLoaderPromise = $timeout(() => {
-      this.setVisible(true);
-    }, ttl);
-  };
-
-  this.stopLoading = () => {
-    if (showLoaderPromise) {
-      $timeout.cancel(showLoaderPromise);
-      showLoaderPromise = null;
-    }
-
-    this.setVisible(false);
-  };
-
-  this.startInitialLoading = () => {
-    initialLoading = true;
-    this.setVisible(true);
-  };
-
-  this.stopInitialLoading = () => {
-    initialLoading = false;
-    this.setVisible(false);
-  };
-
-  $rootScope.isInitialLoading = () => initialLoading;
-  $rootScope.isLoaderVisible = () => showLoader;
-
-  $rootScope.isLoadingFailed = () => loadingFailed;
-
-  this.failInitialLoading = error => {
-    this.stopInitialLoading();
-    loadingFailed = true;
-    $rootScope.error = error;
-  };
-
-  this.setVisible = visible => {
-    showLoader = visible;
-  };
-
-  /* eslint-disable angular/on-watch */
-  $rootScope.$on('$routeChangeSuccess', () => {
-    this.stopInitialLoading();
-  });
-
-  $rootScope.$on('$routeChangeError', (event, current, previous, rejection) => {
-    if (!rejection || !(rejection.silent || rejection.authRedirect)) {
-      this.failInitialLoading(rejection);
-    }
-  });
-  /* eslint-enable angular/on-watch */
-});
-
-angularModule.directive('rgLoaderScreen', function rgLoaderScreenDirective() {
-  return {
-    restrict: 'A',
-
-    scope: {
-      message: '@rgLoaderScreen'
-    },
-
-    template: `
-<div class="${styles.loaderScreen}" ng-if="$root.isLoaderVisible()">
-  <rg-loader class="${styles.loader}"
-    message="{{$root.isInitialLoading() ? message : ''}}"></rg-loader>
-</div>
-    `
-  };
-});
-
-export default angularModule.name;

package/components/message-bundle-ng/message-bundle-ng.js

@@ -1,67 +0,0 @@
-import angular from 'angular';
-/**
- * This service is used by directive to correctly show messages.
- * You can decorate this service to provide your own localized messages.
- */
-const angularModule = angular.module('Ring.message-bundle', []);
-
-/**
- * Empty i18n function. If project supports localization, it should decorate i18n
- * with translating function
- */
-function emptyI18n() {
-  return str => str;
-}
-
-function RingMessageBundle(ringI18n) {
-  const i18n = ringI18n;
-
-  /* eslint-disable camelcase */
-  this.form_required = () => i18n('Value is required');
-  this.form_invalid = () => i18n('Value is invalid');
-  this.form_url = () => i18n('Should be a valid URL');
-  this.form_email = () => i18n('Should be a valid email');
-  this.form_number = () => i18n('Should be a number');
-  this.form_maxlength = () => i18n('Is too long');
-  this.form_minlength = () => i18n('Is too short');
-  this.form_pattern = () => i18n('Doesn\'t match the pattern');
-  this.form_equalvalue = () => i18n('Is not the same');
-  this.form_unique = () => i18n('Is not unique');
-  this.form_max = () => i18n('Is out of range');
-  this.form_min = () => i18n('Is out of range');
-  this.form_save = () => i18n('Save');
-  this.form_saved = () => i18n('Saved');
-  this.form_cancel = () => i18n('Cancel');
-  this.avatareditor_nosupport = () => i18n('Sorry, your browser doesn\'t support File API');
-  this.avatareditor_noselected = () => i18n('No image file was selected');
-  this.avatareditor_delete = () => i18n('Delete Image');
-  this.avatareditor_add = () => i18n('Add Image');
-  this.errorpage_seriouslywrong = () => i18n('Oh-oh... Something went seriously wrong.');
-  this.errorpage_offline = () => i18n('There\'s nothing we can do: The server seems to be offline.');
-  this.errorpage_disconnected = () => i18n('Disconnected');
-  this.errorpage_disconnectedmsg = () => i18n('No, no one\'s there.');
-  this.errorpage_401 = () => i18n('Authorization required');
-  this.errorpage_401msg = () => i18n('You have requested access to a page that requires authorization, but the request is missing valid authentication credentials. It can also mean that your account has been banned.');
-  this.errorpage_403 = () => i18n('Woah, you can\'t touch this!');
-  this.errorpage_403msg = () => i18n('Unfortunately, you are not allowed to access the page you\'ve requested. It seems you don\'t have sufficient permissions.');
-  this.errorpage_404 = () => i18n('Nope, can\'t find it!');
-  this.errorpage_404msg = () => i18n('Despite our best efforts, there\'s nothing here to show you with the URL you requested. Most likely the URL is invalid or you don\'t have permissions to access the page.');
-  this.errorpage_500 = () => i18n('Oh-oh... Something went seriously wrong');
-  this.errorpage_500msg = () => i18n('Despite our best efforts, the server is not working properly.');
-  this.select_options_not_found = () => i18n('No options found');
-  this.select_loading = () => i18n('Loading...');
-  this.select_label = () => i18n('Select an option');
-  this.previous_page = () => i18n('previous');
-  this.next_page = () => i18n('next page');
-  this.first_page = () => i18n('First page');
-  this.last_page = () => i18n('Last page');
-  this.items_per_page = () => i18n('per page');
-  this.confirmation_ok = () => i18n('Ok');
-  this.confirmation_cancel = () => i18n('Cancel');
-/* eslint-enable camelcase */
-}
-
-angularModule.factory('ringI18n', emptyI18n);
-angularModule.service('RingMessageBundle', ['ringI18n', RingMessageBundle]);
-
-export default angularModule.name;

package/components/pager-ng/pager-ng.examples.js

@@ -1,37 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import RingPager from './pager-ng';
-
-export default {
-  title: 'Legacy Angular/Pager Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Pager.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [RingPager]).controller('testCtrl', function controller() {
-    this.total = 750;
-    this.currentPage = 1;
-
-    this.onPageChange = page => {
-      this.currentPage = page;
-    };
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-pager
-          total="ctrl.total"
-          current-page="ctrl.currentPage"
-          on-page-change="ctrl.onPageChange"
-        ></rg-pager>
-      </div>
-    `;
-};
-
-basic.storyName = 'Pager Ng';

package/components/pager-ng/pager-ng.js

@@ -1,7 +0,0 @@
-/**
- * @name Pager Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import Pager from '../pager/pager';
-
-export default angularComponentFactory(Pager, 'Pager').name;

package/components/palette/palette.examples.js

@@ -1,63 +0,0 @@
-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-ng/panel-ng.js

@@ -1,20 +0,0 @@
-/**
- * @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-ng/permissions-ng.css

@@ -1,5 +0,0 @@
-@import "../global/variables.css";
-
-:global(.ring-permission-hide) {
-  display: none !important;
-}

package/components/permissions-ng/permissions-ng.examples.js

@@ -1,49 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import hubConfig from '../../.storybook/hub-config';
-
-import AuthNG from '../auth-ng/auth-ng';
-
-import PermissionsNG from './permissions-ng';
-
-export default {
-  title: 'Legacy Angular/Permissions Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const rgPermissionIf = () => {
-  angular.
-    module(APP_NAME, [PermissionsNG, AuthNG]).
-    config([
-      'authProvider',
-      function provider(authProvider) {
-        authProvider.config(hubConfig);
-      }
-    ]).
-    config(userPermissionsProvider => {
-      userPermissionsProvider.config({
-        serviceId: '0-0-0-0-0',
-        prefix: 'jetbrains.jetpass.'
-      });
-    });
-
-  return `
-      <div rg-permission-if="project-read" in-project="0-0-0-0-0">
-        Is transcluded if user has permission 'read-project' in project 0-0-0-0-0.
-      </div>
-      <div rg-permission-if="project-read">
-        Is transcluded if user has permission 'read-project' at least in one project.
-      </div>
-      <div rg-permission-if="project-read" in-global>
-        Is transcluded if user has permission 'read-project' at project "global".
-      </div>
-    `;
-};
-
-rgPermissionIf.storyName = 'Permissions Ng';

package/components/permissions-ng/permissions-ng.js

@@ -1,246 +0,0 @@
-/**
- * @name Permissions Ng
- */
-import angular from 'angular';
-
-import '../auth-ng/auth-ng';
-import Permissions from '../permissions/permissions';
-import PermissionCache from '../permissions/permissions__cache';
-
-import './permissions-ng.css';
-
-function registerPermission(element) {
-  const somePermissionsCtrl = element.controller('rgSomePermissions');
-  return somePermissionsCtrl && somePermissionsCtrl.registerPermission() || angular.noop;
-}
-
-
-const angularModule = angular.module('Ring.permissions', ['Ring.auth']);
-
-/**
- * @ngdoc object
- * @name userPermissions
- *
- * @description
- * Configured instance of Permissions object.
- */
-
-/**
- * @typedef {Object} permissionsNgConfig
- * @property {?string} serviceId
- * @property {?string} prefix
- */
-angularModule.provider('userPermissions', function provider() {
-  /**
-   * @type {permissionsNgConfig}
-   */
-  let _config = {};
-
-  /**
-   * @param {permissionsNgConfig} config
-   */
-  this.config = config => {
-    _config = config;
-  };
-
-  this.$get = (auth, $q, $http) => {
-    const apiUri = auth.auth.getAPIPath() + Permissions.API_PERMISSION_CACHE_PATH;
-
-    async function datasource(query) {
-      const {data} = await $http.get(apiUri, {
-        params: {
-          fields: 'permission/key,global,projects(id)',
-          query
-        }
-      });
-
-      return data;
-    }
-
-    _config.datasource = _config.datasource || datasource;
-
-    const permissions = new Permissions(auth.auth, _config);
-
-    // Override load to execute in $digest
-    permissions.load = function load() {
-      return $q.when(Permissions.prototype.load.call(this));
-    };
-
-    return permissions;
-  };
-});
-
-/**
- * @ngdoc directive
- * @name permission
- *
- * @description
- * The `permission` directive show or hide a portion of the DOM tree (HTML) depending
- * on the logged in user permissions. If the user has listed permissions then the DOM tree
- * is shown, otherwise it is hidden.
- *
- * @restrict A
- * @element ANY
- * @requires userPermissions
- */
-angularModule.directive(
-  'rgPermission',
-  function rgPermissionDirective(userPermissions, $interpolate) {
-    return {
-      controller: function controller($scope, $element, $attrs) {
-        const element = $element[0];
-
-        //noinspection JSPotentiallyInvalidUsageOfThis
-        this.permitted = false;
-
-        element.classList.add('ring-permission-hide');
-
-        const permission = $interpolate($attrs.rgPermission)($scope);
-
-        const projectId = $attrs.hasOwnProperty('inGlobal')
-          ? PermissionCache.GLOBAL_PROJECT_ID
-          : $scope.$eval($attrs.inProject);
-
-        userPermissions.check(permission, projectId).
-          then(permitted => {
-            this.permitted = permitted;
-            if (permitted) {
-              element.classList.remove('ring-permission-hide');
-            }
-            return permitted;
-          }).
-          then(registerPermission($element));
-      }
-    };
-  }
-);
-
-/**
- * @ngdoc directive
- * @name permissionIf
- *
- * @description
- * The `permission` directive transcludes or not a portion of the DOM tree (HTML) depending
- * on the logged in user permissions. If the user has listed permissions then the DOM tree
- * is transcluded, otherwise it is not.
- * @example
- <example name="rgPermissionIf directive">
- <file name="index.html">
- <div rg-permission-if="project-read" in-project="0-0-0-0-0">
- Is transcluded if user has permission 'read-project' in project 0-0-0-0-0.
- </div>
- <div rg-permission-if="project-read">
- Is transcluded if user has permission 'read-project' at least in one project.
- </div>
- <div rg-permission-if="project-read" in-global>
- Is transcluded if user has permission 'read-project' at project "global".
- </div>
- </file>
- </example>
- *
- * @restrict A
- * @element ANY
- * @requires $animate
- * @requires userPermissions
- */
-angularModule.directive(
-  'rgPermissionIf',
-  function rgPermissionIfDirective($animate, userPermissions, $interpolate) {
-    return {
-      transclude: 'element',
-      priority: 600,
-      terminal: true,
-      restrict: 'A',
-      // disable error about multiple transclude like in ngIf
-      $$tlb: true, // eslint-disable-line angular/no-private-call
-      require: '^?rgSomePermissions',
-      link: function link(scope, iElement, iAttrs, somePermittedCtrl, $transclude) {
-        let block;
-        let childScope;
-
-        const projectId = iAttrs.hasOwnProperty('inGlobal')
-          ? PermissionCache.GLOBAL_PROJECT_ID
-          : scope.$eval(iAttrs.inProject);
-
-        const permission = $interpolate(iAttrs.rgPermissionIf)(scope);
-
-        userPermissions.check(permission, projectId).
-          then(permitted => {
-            if (permitted) {
-              if (!childScope) {
-                childScope = scope.$new();
-                $transclude(childScope, clone => {
-                  block = {
-                    startNode: clone[0],
-                    endNode: clone[clone.length++] = document.
-                      createComment(` end rgPermissionIf: ${iAttrs.rgPermissionIf} `)
-                  };
-                  $animate.enter(clone, iElement.parent(), iElement);
-                });
-              }
-            } else {
-              if (childScope) {
-                childScope.$destroy();
-                childScope = null;
-              }
-
-              if (block) {
-                /* global getBlockElements: false */
-                $animate.leave(getBlockElements(block));
-                block = null;
-              }
-            }
-          }).
-          then(registerPermission(iElement));
-      }
-    };
-  }
-);
-
-/**
- * @ngdoc directive
- * @name rgSomePermissions
- *
- * @description
- * Binds left-value expression with a boolean value that is true when at least one permission of
- * nested {@link permission} or {@link rgPermissionIf} directive is obtained by the logged in user.
- *
- * @scope
- * @restrict A
- * @element ANY
- */
-angularModule.directive('rgSomePermissions', function rgSomePermissionsDirective() {
-  return ({
-    scope: {
-      rgSomePermissions: '='
-    },
-    controller: function controller($scope) {
-      const permissions = [];
-      $scope.rgSomePermissions = false;
-
-      function checkPermissions() {
-        for (let i = permissions.length - 1; i >= 0; i--) {
-          if (permissions[i].permitted) {
-            $scope.rgSomePermissions = true;
-            return;
-          }
-        }
-
-        $scope.rgSomePermissions = false;
-      }
-
-      //noinspection JSPotentiallyInvalidUsageOfThis
-      this.registerPermission = () => {
-        const permission = {permitted: false};
-        permissions.push(permission);
-
-        return permitted => {
-          permission.permitted = permitted;
-          checkPermissions();
-        };
-      };
-    }
-  });
-});
-
-export default angularModule.name;

package/components/permissions-ng/permissions-ng.test.js

@@ -1,82 +0,0 @@
-/* global inject */
-import 'angular';
-import 'angular-mocks';
-
-import PermissionsNg from './permissions-ng';
-
-describe('Permissions Ng', () => {
-
-  const fakeUserPermissions = {
-    check: () => null
-  };
-
-  beforeEach(window.module(PermissionsNg, $provide => {
-    $provide.value('userPermissions', fakeUserPermissions);
-  }));
-
-  describe('rg-permission', () => {
-    let q;
-    let scope;
-    let $compile;
-    let renderDirective;
-    let element;
-    let ctrl;
-    beforeEach(inject(($q, $rootScope, _$compile_) => {
-      q = $q;
-      scope = $rootScope.$new();
-      $compile = _$compile_;
-      sandbox.stub(fakeUserPermissions, 'check').returns($q.resolve(true));
-
-      renderDirective = (permissionsString = 'hub-test-perm', inProject) => {
-        element = $compile(`<div rg-permission="${permissionsString}" in-project="${inProject}"></div>`)(scope);
-        ctrl = element.controller('rgPermission');
-        scope.$digest();
-      };
-
-      renderDirective();
-    }));
-
-    it('should init', () => {
-      ctrl.should.exist;
-    });
-
-    it('Should not hide element if permission is granted', () => {
-      element[0].should.not.has.class('ring-permission-hide');
-    });
-
-    it('Should hide element if has no permission', () => {
-      fakeUserPermissions.check.returns(q.resolve(false));
-      renderDirective();
-
-      element[0].should.has.class('ring-permission-hide');
-    });
-
-    it('Should pass permission as string to userPermission', () => {
-      renderDirective('some-permission');
-
-      fakeUserPermissions.check.should.have.been.calledWith('some-permission');
-    });
-
-    it('Should pass complex permission as string to userPermission', () => {
-      const complexPermission = 'foo | bar & test';
-      renderDirective(complexPermission);
-
-      fakeUserPermissions.check.should.have.been.calledWith(complexPermission);
-    });
-
-    it('Should pass permission variable to userPermission', () => {
-      scope.permissionValue = 'some-permission';
-
-      renderDirective('{{permissionValue}}');
-
-      fakeUserPermissions.check.should.have.been.calledWith('some-permission');
-    });
-
-    it('Should pass project id as scope value to userPermission', () => {
-      scope.projectId = 'some-project';
-      renderDirective('some-permission', 'projectId');
-
-      fakeUserPermissions.check.should.have.been.calledWith('some-permission', 'some-project');
-    });
-  });
-});