@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/auth/window-flow.js

@@ -0,0 +1,102 @@
+import AuthResponseParser from './response-parser';
+const NAVBAR_HEIGHT = 50;
+const CLOSED_CHECK_INTERVAL = 200;
+export default class WindowFlow {
+    _timeoutId = undefined;
+    _requestBuilder;
+    _storage;
+    reject;
+    _loginWindow;
+    _promise;
+    constructor(requestBuilder, storage) {
+        this._requestBuilder = requestBuilder;
+        this._storage = storage;
+        this._reset();
+    }
+    /**
+     * Opens window with the given URL
+     * @param {string} url
+     * @private
+     */
+    _openWindow(url) {
+        const height = 700;
+        const width = 750;
+        const screenHalves = 2;
+        const top = (window.screen.height - height - NAVBAR_HEIGHT) / screenHalves;
+        const left = (window.screen.width - width) / screenHalves;
+        return window.open(url, 'HubLoginWindow', `height=${height}, width=${width}, left=${left}, top=${top}`);
+    }
+    /**
+     * Initiates authorization in window
+     */
+    async _load() {
+        const authRequest = await this._requestBuilder.prepareAuthRequest(
+        // eslint-disable-next-line camelcase
+        { request_credentials: 'required', auth_mode: 'bypass_to_login' }, { nonRedirect: true });
+        return new Promise((resolve, reject) => {
+            this.reject = reject;
+            let cleanRun;
+            const cleanUp = () => {
+                if (cleanRun) {
+                    return;
+                }
+                cleanRun = true;
+                /* eslint-disable @typescript-eslint/no-use-before-define */
+                removeStateListener();
+                removeTokenListener();
+                /* eslint-enable @typescript-eslint/no-use-before-define */
+                this._loginWindow?.close();
+                clearTimeout(this._timeoutId);
+            };
+            const removeTokenListener = this._storage.onTokenChange(token => {
+                if (token) {
+                    cleanUp();
+                    resolve(token.accessToken);
+                }
+            });
+            const removeStateListener = this._storage.onStateChange(authRequest.stateId, state => {
+                if (state && state.error) {
+                    cleanUp();
+                    reject(new AuthResponseParser.AuthError(state));
+                }
+            });
+            if (this._loginWindow == null || this._loginWindow.closed) {
+                this._loginWindow = this._openWindow(authRequest.url);
+            }
+            else {
+                this._loginWindow.location.href = authRequest.url;
+            }
+            this.checkIsClosed();
+        });
+    }
+    checkIsClosed = () => {
+        if (this._loginWindow?.closed) {
+            this.stop();
+            return;
+        }
+        this._timeoutId = window.setTimeout(this.checkIsClosed, CLOSED_CHECK_INTERVAL);
+    };
+    _reset = () => {
+        this._promise = null;
+        this._loginWindow = null;
+        clearTimeout(this._timeoutId);
+    };
+    stop() {
+        if (this._loginWindow != null) {
+            this._loginWindow.close();
+        }
+        if (this.reject) {
+            this.reject('Authorization window closed');
+        }
+        this._reset();
+    }
+    authorize() {
+        if (this._promise != null && this._loginWindow != null && !this._loginWindow.closed) {
+            this._loginWindow.focus();
+            return this._promise;
+        }
+        this._promise = this._load();
+        this._promise.then(this._reset, this._reset);
+        return this._promise;
+    }
+}

package/components/auth-dialog/auth-dialog.css

@@ -0,0 +1,56 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.dialog.dialog {
+  width: auto;
+  max-width: 400px;
+}
+
+.content {
+  composes: font from "../global/global.css";
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  margin: calc(unit * 2) 0;
+}
+
+.button {
+  width: calc(unit * 25);
+  margin-top: unit;
+}
+
+.firstButton {
+  composes: button;
+
+  margin-top: calc(unit * 4);
+}
+
+.title.title {
+  margin-top: 0;
+  margin-bottom: unit;
+
+  text-align: center;
+
+  font-weight: 100;
+}
+
+.logo {
+  width: calc(unit * 12);
+  height: calc(unit * 12);
+  margin-bottom: 12px;
+  object-fit: contain;
+
+  @media (max-height: 400px) {
+    width: calc(unit * 4);
+    height: calc(unit * 4);
+  }
+}
+
+.error {
+  text-align: center;
+
+  color: var(--ring-error-color);
+}

package/components/auth-dialog/auth-dialog.d.ts

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Auth Dialog
+ */
+export interface AuthDialogProps {
+    className?: string | undefined;
+    title?: string | null | undefined;
+    errorMessage?: string | null | undefined;
+    serviceImage?: string | null | undefined;
+    serviceName?: string | null | undefined;
+    loginCaption: string;
+    loginToCaption: string;
+    show: boolean;
+    cancelOnEsc: boolean;
+    confirmLabel: string;
+    cancelLabel: string;
+    tryAgainLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    onTryAgain?: () => void;
+}
+export default class AuthDialog extends Component<AuthDialogProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        errorMessage: PropTypes.Requireable<string>;
+        serviceImage: PropTypes.Requireable<string>;
+        serviceName: PropTypes.Requireable<string>;
+        loginCaption: PropTypes.Requireable<string>;
+        loginToCaption: PropTypes.Requireable<string>;
+        show: PropTypes.Requireable<boolean>;
+        cancelOnEsc: PropTypes.Requireable<boolean>;
+        confirmLabel: PropTypes.Requireable<string>;
+        cancelLabel: PropTypes.Requireable<string>;
+        tryAgainLabel: PropTypes.Requireable<string>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        onTryAgain: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        loginCaption: string;
+        loginToCaption: string;
+        tryAgainLabel: string;
+        show: boolean;
+        cancelOnEsc: boolean;
+        confirmLabel: string;
+        cancelLabel: string;
+        onConfirm: () => void;
+        onCancel: () => void;
+    };
+    state: {
+        retrying: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onEscPress: () => void;
+    onRetryPress: () => Promise<void>;
+    render(): React.JSX.Element;
+}

package/components/auth-dialog/auth-dialog.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Content } from '../island/island';
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+import { H2 } from '../heading/heading';
+import styles from './auth-dialog.css';
+export default class AuthDialog extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        title: PropTypes.string,
+        errorMessage: PropTypes.string,
+        serviceImage: PropTypes.string,
+        serviceName: PropTypes.string,
+        loginCaption: PropTypes.string,
+        loginToCaption: PropTypes.string,
+        show: PropTypes.bool,
+        cancelOnEsc: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        cancelLabel: PropTypes.string,
+        tryAgainLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onCancel: PropTypes.func,
+        onTryAgain: PropTypes.func
+    };
+    static defaultProps = {
+        loginCaption: 'Log in',
+        loginToCaption: 'Log in to %serviceName%',
+        tryAgainLabel: 'Try again',
+        show: false,
+        cancelOnEsc: true,
+        confirmLabel: 'Log in',
+        cancelLabel: 'Remain a guest',
+        onConfirm: () => { },
+        onCancel: () => { }
+    };
+    state = {
+        retrying: false
+    };
+    componentDidMount() {
+        window.addEventListener('online', this.onRetryPress);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('online', this.onRetryPress);
+    }
+    onEscPress = () => {
+        if (this.props.cancelOnEsc) {
+            this.props.onCancel();
+        }
+    };
+    onRetryPress = async () => {
+        if (!this.props.onTryAgain || this.state.retrying) {
+            return;
+        }
+        this.setState({ retrying: true });
+        try {
+            await this.props.onTryAgain();
+        }
+        catch (e) {
+            // do nothing, error is handled in onTryAgain
+        }
+        finally {
+            this.setState({ retrying: false });
+        }
+    };
+    render() {
+        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain } = this.props;
+        const { retrying } = this.state;
+        const defaultTitle = serviceName ? loginToCaption : loginCaption;
+        const title = (this.props.title || defaultTitle).
+            replace('%serviceName%', serviceName ?? '').
+            replace('{{serviceName}}', serviceName ?? '');
+        return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
+        <Content>
+          <div className={styles.content}>
+            {serviceImage && (<img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>)}
+            <H2 className={styles.title}>{title}</H2>
+            {errorMessage && (<div className={styles.error}>{errorMessage}</div>)}
+            <Button primary className={styles.firstButton} data-test="auth-dialog-confirm-button" onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+            {onTryAgain && (<Button className={styles.button} data-test="auth-dialog-retry-button" onClick={() => this.onRetryPress()} loader={retrying} disabled={retrying}>
+                {tryAgainLabel}
+              </Button>)}
+            <Button className={styles.button} data-test="auth-dialog-cancel-button" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+          </div>
+        </Content>
+      </Dialog>);
+    }
+}

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
+type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
+export {};

package/components/auth-dialog-service/auth-dialog-service.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
+import { render } from '../global/react-render-adapter';
+import AuthDialog from '../auth-dialog/auth-dialog';
+/**
+ * @name Auth Dialog Service
+ */
+const containerElement = document.createElement('div');
+/**
+ * Renders AuthDialog into virtual node to skip maintaining container
+ */
+function renderAuthDialog(props) {
+    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+        <AuthDialog {...props}/>
+      </ControlsHeightContext.Provider>), containerElement);
+}
+export default function showAuthDialog(props = {}) {
+    renderAuthDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        renderAuthDialog({ show: false });
+    };
+}

package/components/auth-ng/auth-ng.js

@@ -0,0 +1,143 @@
+import angular from 'angular';
+
+import Auth from '../auth/auth';
+
+/**
+ * @name Auth Ng
+ */
+const angularModule = angular.module('Ring.auth', []);
+
+angularModule.provider('auth', function provider($httpProvider) {
+  /**
+   * @type Auth
+   */
+  let auth;
+  /**
+   * @type {{cleanHash: boolean}} config
+   */
+  const defaultConfig = {
+    cleanHash: false //prevents infinite redirect on angular>1.2.26
+  };
+
+  this.init = authInstance => {
+    auth = authInstance;
+  };
+
+  /**
+   * @param {{
+   *   serverUri: string,
+   *   redirectUri: string?,
+   *   clientId: string?,
+   *   scope: string[]?,
+   *   cleanHash: boolean?
+   * }} config
+   */
+  this.config = config => {
+    const configCopy = angular.extend({}, defaultConfig, config);
+    auth = new Auth(configCopy);
+  };
+
+  $httpProvider.interceptors.push(['$q', '$injector', 'auth', ($q, $injector, authInstance) => {
+    function urlEndsWith(config, suffix) {
+      return config &&
+        config.url &&
+        config.url.indexOf(suffix) === config.url.length - suffix.length;
+    }
+
+    return {
+      request(config) {
+        if (!authInstance || urlEndsWith(config, '.html') || (config && config.noAuthorization)) {
+          // Don't intercept angular template requests
+          return config;
+        }
+        return authInstance.promise.
+          then(() => authInstance.auth.requestToken()).
+          then(accessToken => {
+            if (accessToken) {
+              config.headers.Authorization = `Bearer ${accessToken}`;
+            }
+            return config;
+          });
+      },
+      responseError(rejection) {
+        if (authInstance && !urlEndsWith(rejection.config, '.html') &&
+          rejection.data != null && Auth.shouldRefreshToken(rejection.data.error)) {
+
+          // Use $injector to avoid circular dependency
+          const $http = $injector.get('$http');
+          const {data, method, params, url} = rejection.config;
+
+          return authInstance.auth.
+            forceTokenUpdate().
+            then(() => $http({data, method, params, url}));
+        }
+
+        return $q.reject(rejection);
+      }
+    };
+  }]);
+
+  this.$get = function get($injector, $log, $sniffer) {
+    // Do not try to init anything without config
+    if (!auth) {
+      $log.warn('Auth wasn\'t initialized');
+      return null;
+    }
+
+    if (auth.config.reloadOnUserChange === false) {
+      auth.addListener('userChange', () => {
+        const $route = $injector.get('$route');
+        $route.reload();
+      });
+    }
+
+    /**
+     * @type {Promise.<string>}
+     */
+    const authInitPromise = auth.init();
+
+    /**
+     * @param {string?} restoreLocationURL
+     */
+    function restoreLocation(restoreLocationURL) {
+      if (restoreLocationURL) {
+        const bases = document.getElementsByTagName('base');
+        let baseURI = auth.config.redirectUri;
+
+        if (bases.length > 0) {
+          baseURI = bases[0].href;
+        }
+
+        if (restoreLocationURL.indexOf(baseURI) === 0) {
+          const $location = $injector.get('$location');
+          let relativeURI = restoreLocationURL.substr(baseURI.length);
+
+          // We have to turn url with hash to simple relative url in HashbangInHtml5 mode
+          // And there is no other and documented way to detect that mode
+          // @see http://stackoverflow.com/a/16678065
+          if ($location.$$html5 && !$sniffer.history) { // eslint-disable-line angular/no-private-call
+            relativeURI = relativeURI.replace(/^#\//, '');
+          }
+
+          $location.url(relativeURI).replace();
+        }
+      }
+    }
+
+    authInitPromise.then(restoreLocation, e => {
+      if (!e.authRedirect) {
+        $log.error(e);
+      }
+    });
+
+    return {
+      auth,
+      requestUser: auth.requestUser.bind(auth),
+      clientId: auth.config.clientId,
+      logout: auth.logout.bind(auth),
+      promise: authInitPromise
+    };
+  };
+});
+
+export default angularModule.name;

package/components/auth-ng/auth-ng.mock.js

@@ -0,0 +1,28 @@
+/**
+ * TODO(maksimrv): Remove this code
+ * It is currently required because permissions do not work without auth,
+ * but we can't stub the correct auth component and should mock all providers.
+ */
+export default function AuthProviderMock() {
+  this.$get = ['$q', function get($q) {
+    const promise = $q.resolve([]);
+
+    return {
+      auth: {
+        addListener() {},
+        getAPIPath() {
+          return '/';
+        },
+        requestToken() {
+          return promise;
+        },
+        http: {
+          get() {
+            return promise;
+          }
+        }
+      },
+      promise
+    };
+  }];
+}

package/components/auth-ng/auth-ng.stories.js

@@ -0,0 +1,41 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import hubConfig from '../../.storybook/hub-config';
+
+import AuthNG from './auth-ng';
+
+export default {
+  title: 'Legacy Angular/Auth Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Auth.',
+    hermione: {skip: true}
+  }
+};
+
+export const authorization = () => {
+  angular.
+    module(APP_NAME, [AuthNG]).
+    config([
+      'authProvider',
+      function provider(authProvider) {
+        authProvider.config(hubConfig);
+      }
+    ]).
+    controller('testCtrl', function controller(auth, $q) {
+      $q.resolve(auth.requestUser()).then(user => {
+        this.user = user;
+      });
+    });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <h3>User info</h3>
+        <pre>{{ ctrl.user | json }}</pre>
+      </div>
+    `;
+};
+
+authorization.storyName = 'Auth Ng';

package/components/autofocus-ng/autofocus-ng.js

@@ -0,0 +1,51 @@
+/**
+ * @name Autofocus Ng
+ */
+import angular from 'angular';
+
+import {FOCUSABLE_ELEMENTS} from '../tab-trap/tab-trap';
+
+const angularModule = angular.module('Ring.autofocus', []);
+const RING_SELECT_SELECTOR = '[data-test*=ring-select__focus]';
+const RING_SELECT = 'rg-select';
+
+angularModule.directive('rgAutofocus', function rgAutofocusDirective() {
+
+  /**
+   * Focuses on element itself if it has "focus" method.
+   * Searches and focuses on select's button or input if element is rg-select
+   * @param element
+   */
+  function focusOnElement(element) {
+    if (!element) {
+      return;
+    }
+
+    if (element.hasAttribute(RING_SELECT) || element.tagName.toLowerCase() === RING_SELECT) {
+      focusOnElement(element.querySelector(RING_SELECT_SELECTOR));
+      return;
+    }
+
+    if (element.matches(FOCUSABLE_ELEMENTS) && element.focus) {
+      element.focus();
+      return;
+    }
+
+    const focusableChild = element.querySelector(FOCUSABLE_ELEMENTS);
+
+    if (focusableChild && focusableChild.focus) {
+      focusableChild.focus();
+    }
+  }
+
+  return (scope, iElement, iAttrs) => {
+    const element = iElement[0];
+    scope.$watch(iAttrs.rgAutofocus, newValue => {
+      if (newValue) {
+        scope.$evalAsync(() => focusOnElement(element));
+      }
+    });
+  };
+});
+
+export default angularModule.name;

package/components/autofocus-ng/autofocus-ng.stories.js

@@ -0,0 +1,41 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import InputNg from '../input-ng/input-ng';
+import SelectNg from '../select-ng/select-ng';
+
+import AutofocusNG from './autofocus-ng';
+
+export default {
+  title: 'Legacy Angular/Autofocus Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes:
+      'Sets focus to the element if the condition is true. Supports standard input elements as well as Select.',
+    hermione: {skip: true}
+  }
+};
+
+export const autofocusOnInput = () => {
+  angular.module(APP_NAME, [AutofocusNG, InputNg]);
+
+  return `
+      <rg-input
+        rg-autofocus="true"
+        size="M"
+        placeholder="Should be focused"
+      ></rg-input>
+    `;
+};
+
+autofocusOnInput.storyName = 'autofocus on input';
+
+export const autofocusOnSelect = () => {
+  angular.module(APP_NAME, [AutofocusNG, SelectNg]);
+
+  return '<rg-select options="item in []" size="M" rg-autofocus="true"></rg-select>';
+};
+
+autofocusOnSelect.storyName = 'autofocus on select';