@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/auth/window-flow.js

@@ -1,102 +0,0 @@
-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

@@ -1,56 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/// <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

@@ -1,25 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -1,28 +0,0 @@
-/**
- * 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

@@ -1,41 +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';
-
-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

@@ -1,51 +0,0 @@
-/**
- * @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

@@ -1,41 +0,0 @@
-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';