@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/header/profile.js

@@ -1,119 +0,0 @@
-import React, { Component, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Avatar, { Size } from '../avatar/avatar';
-import Button from '../button/button';
-import DropdownMenu from '../dropdown-menu/dropdown-menu';
-import PopupMenu from '../popup-menu/popup-menu';
-import { I18nContext } from '../i18n/i18n-context';
-import { isTruthy } from '../global/typescript-utils';
-import styles from './header.css';
-const rgItemType = PopupMenu.ListProps.Type.LINK;
-export default class Profile extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        closeOnSelect: PropTypes.bool,
-        hasUpdates: PropTypes.bool,
-        loading: PropTypes.bool,
-        onLogin: PropTypes.func,
-        onLogout: PropTypes.func,
-        onSwitchUser: PropTypes.func,
-        profileUrl: PropTypes.string,
-        renderPopupItems: PropTypes.func,
-        LinkComponent: PropTypes.oneOfType([
-            PropTypes.instanceOf(Component),
-            PropTypes.func,
-            PropTypes.string
-        ]),
-        translations: PropTypes.shape({
-            profile: PropTypes.string,
-            login: PropTypes.string,
-            logout: PropTypes.string,
-            applyChangedUser: PropTypes.string,
-            switchUser: PropTypes.string
-        }),
-        user: PropTypes.shape({
-            guest: PropTypes.bool,
-            profile: PropTypes.object,
-            name: PropTypes.string
-        }),
-        size: PropTypes.number,
-        round: PropTypes.bool,
-        showLogIn: PropTypes.bool,
-        showLogOut: PropTypes.bool,
-        showSwitchUser: PropTypes.bool,
-        showApplyChangedUser: PropTypes.bool,
-        onRevertPostponement: PropTypes.func,
-        renderGuest: PropTypes.func
-    };
-    static defaultProps = {
-        closeOnSelect: true,
-        renderPopupItems: items => items,
-        size: Size.Size32,
-        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
-        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
-            <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
-              {translations?.login ?? translate('login')}
-            </Button>
-          </div>)}
-      </I18nContext.Consumer>)
-    };
-    static contextType = I18nContext;
-    static Size = Size;
-    render() {
-        const { className, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, ...props } = this.props;
-        const { translate } = this.context;
-        if (!user) {
-            return (<div {...props} className={classNames(styles.profileEmpty, className)}>
-          <Avatar size={size} round={round}/>
-        </div>);
-        }
-        if (user.guest) {
-            return renderGuest(this.props);
-        }
-        const anchorClassName = classNames(styles.avatarWrapper, {
-            [styles.hasUpdates]: hasUpdates
-        });
-        const anchor = (<button type="button" className={anchorClassName}>
-        <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round}/>
-      </button>);
-        const items = [
-            showApplyChangedUser && {
-                rgItemType,
-                label: translations?.applyChangedUser ?? translate('applyChangedUser'),
-                className: styles.profileMenuItem,
-                onClick: onRevertPostponement
-            },
-            showLogIn && {
-                rgItemType,
-                label: translations?.login ?? translate('login'),
-                className: styles.profileMenuItem,
-                onClick: onRevertPostponement
-            },
-            {
-                rgItemType: PopupMenu.ListProps.Type.LINK,
-                label: translations?.profile ?? translate('profile'),
-                target: '_self', // Full page reload in Angular
-                href: profileUrl,
-                LinkComponent
-            },
-            showSwitchUser && {
-                rgItemType,
-                label: translations?.switchUser ?? translate('switchUser'),
-                className: styles.profileMenuItem,
-                onClick: onSwitchUser
-            },
-            showLogOut && {
-                rgItemType,
-                label: translations?.logout ?? translate('logout'),
-                onClick: onLogout
-            }
-        ].filter(isTruthy);
-        return (<DropdownMenu {...props} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} menuProps={{
-                closeOnSelect,
-                left: -2,
-                top: -8,
-                sidePadding: 32
-            }}/>);
-    }
-}

package/components/header/services-link.d.ts

@@ -1,25 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { LinkProps } from '../link/link';
-export interface Service {
-    id: string;
-    applicationName?: string | null | undefined;
-    iconUrl?: string | null | undefined;
-    homeUrl: string;
-    name: string;
-}
-export interface ServicesLinkProps extends Partial<LinkProps> {
-    service: Service;
-}
-export default class ServicesLink extends PureComponent<ServicesLinkProps> {
-    static propTypes: {
-        isActive: PropTypes.Requireable<boolean>;
-        service: PropTypes.Requireable<PropTypes.InferProps<{
-            applicationName: PropTypes.Requireable<string>;
-            iconUrl: PropTypes.Requireable<string>;
-            homeUrl: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-        }>>;
-    };
-    render(): React.JSX.Element;
-}

package/components/header/services-link.js

@@ -1,28 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import Link from '../link/link';
-import styles from './services.css';
-export default class ServicesLink extends PureComponent {
-    static propTypes = {
-        isActive: PropTypes.bool,
-        service: PropTypes.shape({
-            applicationName: PropTypes.string,
-            iconUrl: PropTypes.string,
-            homeUrl: PropTypes.string,
-            name: PropTypes.string
-        })
-    };
-    render() {
-        const { service, ...props } = this.props;
-        return (<Link target="_self" href={service.homeUrl} {...props}>
-        {WrapText => (service.iconUrl
-                ? [
-                    <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
-                    <div key="text">
-              <WrapText>{service.name}</WrapText>
-            </div>
-                ]
-                : <WrapText>{service.name}</WrapText>)}
-      </Link>);
-    }
-}

package/components/header/services.css

@@ -1,99 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.services {
-  max-width: calc(calc(unit * 50) + 2px);
-  padding: calc(unit * 4) calc(unit * 4) calc(unit * 3);
-
-  background-color: var(--ring-navigation-background-color);
-
-  line-height: 10px; /* Eliminate gap between clickable blocks rows */
-}
-
-.active {
-  font-weight: bold;
-}
-
-.item {
-  display: inline-block;
-  overflow-x: hidden;
-
-  box-sizing: border-box;
-  width: calc(unit * 14);
-  height: calc(unit * 14);
-
-  text-align: center;
-  text-overflow: ellipsis;
-
-  color: var(--ring-active-text-color);
-
-  line-height: initial;
-
-  &::after {
-    height: calc(unit * 14);
-
-    vertical-align: middle;
-  }
-
-  &:not(:hover),
-  &:visited:not(:hover) {
-    color: var(--ring-active-text-color);
-  }
-}
-
-.itemLogo {
-  display: inline-block;
-
-  width: calc(unit * 6);
-  height: calc(unit * 6);
-  margin: calc(unit * 2) 0 calc(unit + 1px);
-
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.activeItem {
-  composes: item;
-  composes: active;
-
-  &:hover {
-    color: var(--ring-active-text-color);
-  }
-}
-
-.line {
-  height: 1px;
-  margin: calc(unit * 4) 0 calc(unit * 2);
-
-  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
-}
-
-.itemStacked {
-  display: inline-block;
-
-  width: 100%;
-  margin-bottom: calc(unit * 2);
-
-  text-decoration: none;
-
-  line-height: calc(unit * 2);
-
-  &,
-  &:visited {
-    color: var(--ring-secondary-color);
-  }
-
-  &:last-child {
-    margin-bottom: calc(unit * -3);
-  }
-}
-
-.activeItemStacked {
-  composes: itemStacked;
-  composes: active;
-
-  &:hover {
-    color: var(--ring-secondary-color);
-  }
-}

package/components/header/services.d.ts

@@ -1,33 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import Theme from '../global/theme';
-import ServicesLink, { Service } from './services-link';
-export interface ServicesProps extends HTMLAttributes<HTMLElement> {
-    theme: Theme;
-    clientId?: string | null | undefined;
-    initShown?: boolean | undefined;
-    loading?: boolean | null | undefined;
-    services?: Service[] | null | undefined;
-}
-export default class Services extends PureComponent<ServicesProps> {
-    static sort: (a: Service, b: Service) => number;
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        clientId: PropTypes.Requireable<string>;
-        initShown: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        services: PropTypes.Requireable<(PropTypes.InferProps<{
-            applicationName: PropTypes.Requireable<string>;
-            iconUrl: PropTypes.Requireable<string>;
-            homeUrl: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-    };
-    static defaultProps: {
-        theme: Theme;
-    };
-    static Link: typeof ServicesLink;
-    serviceIsActive: (service: Service) => boolean;
-    render(): React.JSX.Element;
-}

package/components/header/services.js

@@ -1,62 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import servicesIcon from '@jetbrains/icons/services-20px';
-import classNames from 'classnames';
-import Dropdown from '../dropdown/dropdown';
-import Popup from '../popup/popup';
-import Theme from '../global/theme';
-import darkStyles from '../global/variables_dark.css';
-import TrayIcon from './tray-icon';
-import ServicesLink from './services-link';
-import styles from './services.css';
-const makeAnchor = (loading) => {
-    const Anchor = ({ active }) => (<TrayIcon loader={loading} active={active} icon={servicesIcon} aria-label="Services"/>);
-    Anchor.propTypes = {
-        active: PropTypes.bool
-    };
-    return Anchor;
-};
-export default class Services extends PureComponent {
-    static sort = (a, b) => {
-        const aApplicationName = a.applicationName || '';
-        const bApplicationName = b.applicationName || '';
-        return aApplicationName.localeCompare(bApplicationName) ||
-            a.name.localeCompare(b.name);
-    };
-    static propTypes = {
-        className: PropTypes.string,
-        clientId: PropTypes.string,
-        initShown: PropTypes.bool,
-        loading: PropTypes.bool,
-        onClick: PropTypes.func,
-        services: PropTypes.arrayOf(ServicesLink.propTypes.service)
-    };
-    static defaultProps = {
-        theme: Theme.DARK
-    };
-    static Link = ServicesLink;
-    serviceIsActive = (service) => service.id === this.props.clientId;
-    render() {
-        const { clientId, loading, services, initShown, theme, ...props } = this.props;
-        if (!services) {
-            return (<TrayIcon {...props} loader={loading} active={loading} icon={servicesIcon} aria-label="Services"/>);
-        }
-        const sortedServices = [...services].sort(Services.sort);
-        const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
-        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
-        const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
-        return (<Dropdown {...props} anchor={makeAnchor(loading)} initShown={initShown}>
-        <Popup className={classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK })} top={-3}>
-          {servicesWithIcons.map(service => {
-                const isActive = this.serviceIsActive(service);
-                return (<Services.Link active={isActive} className={isActive ? styles.activeItem : styles.item} key={service.id} service={service}/>);
-            })}
-          {separatorIsRequired && (<div className={styles.line} key="separator"/>)}
-          {servicesWithOutIcons.map(service => {
-                const isActive = this.serviceIsActive(service);
-                return (<Services.Link active={isActive} className={isActive ? styles.activeItemStacked : styles.itemStacked} key={service.id} service={service}/>);
-            })}
-        </Popup>
-      </Dropdown>);
-    }
-}

package/components/header/smart-profile.d.ts

@@ -1,36 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import Auth, { AuthUser } from '../auth/auth';
-import { Size } from '../avatar/avatar';
-import { ProfileAttrs } from './profile';
-export interface SmartProfileProps extends ProfileAttrs {
-    auth: Auth;
-}
-interface SmartProfileState {
-    user: AuthUser | null | undefined | void;
-    size: Size;
-    isLogoutPostponed: boolean;
-    isUserChangePostponed: boolean;
-    loading?: boolean;
-}
-export default class SmartProfile extends PureComponent<SmartProfileProps, SmartProfileState> {
-    static propTypes: {
-        auth: PropTypes.Validator<Auth>;
-        className: PropTypes.Requireable<string>;
-        translations: PropTypes.Requireable<object>;
-        profileUrl: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<number>;
-        round: PropTypes.Requireable<boolean>;
-    };
-    state: SmartProfileState;
-    componentDidMount(): void;
-    static Size: typeof Size;
-    login: () => Promise<void>;
-    logout: () => Promise<void>;
-    switchUser: () => Promise<void>;
-    onRevertPostponement: () => void;
-    requestUser(): Promise<void>;
-    checkUserCertificateMismatch(user: AuthUser): void;
-    render(): React.JSX.Element;
-}
-export {};

package/components/header/smart-profile.js

@@ -1,86 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import Auth, { USER_CHANGED_EVENT, LOGOUT_POSTPONED_EVENT, USER_CHANGE_POSTPONED_EVENT } from '../auth/auth';
-import alertService from '../alert-service/alert-service';
-import Profile from './profile';
-const CERTIFICATE_MISMATCH_HEADER = 'x-client-certificate-token-mismatch';
-export default class SmartProfile extends PureComponent {
-    static propTypes = {
-        auth: PropTypes.instanceOf(Auth).isRequired,
-        className: PropTypes.string,
-        translations: PropTypes.object,
-        profileUrl: PropTypes.string,
-        size: Profile.propTypes.size,
-        round: Profile.propTypes.round
-    };
-    state = {
-        user: null,
-        size: Profile.defaultProps.size,
-        isLogoutPostponed: false,
-        isUserChangePostponed: false
-    };
-    componentDidMount() {
-        this.requestUser();
-    }
-    static Size = Profile.Size;
-    login = async () => {
-        this.setState({ loading: true });
-        try {
-            await this.props.auth.login();
-        }
-        catch (err) {
-            // do nothing
-        }
-        finally {
-            this.setState({ loading: false });
-        }
-    };
-    logout = () => this.props.auth.logout();
-    switchUser = () => this.props.auth.switchUser();
-    onRevertPostponement = () => {
-        if (this.state.isLogoutPostponed) {
-            this.props.auth.login();
-        }
-        if (this.state.isUserChangePostponed) {
-            this.props.auth.updateUser();
-        }
-    };
-    async requestUser() {
-        try {
-            const { auth } = this.props;
-            const user = await auth.requestUser();
-            this.checkUserCertificateMismatch(user);
-            this.setState({ user });
-            auth.addListener(USER_CHANGED_EVENT, newUser => {
-                this.setState({
-                    user: newUser,
-                    isLogoutPostponed: false,
-                    isUserChangePostponed: false
-                });
-            });
-            auth.addListener(LOGOUT_POSTPONED_EVENT, () => {
-                this.setState({ isLogoutPostponed: true });
-            });
-            auth.addListener(USER_CHANGE_POSTPONED_EVENT, () => {
-                this.setState({ isUserChangePostponed: true });
-            });
-        }
-        catch (e) {
-            // noop
-        }
-    }
-    checkUserCertificateMismatch(user) {
-        const { auth, translations } = this.props;
-        const userMeta = auth.http.getMetaForResponse(user);
-        if (userMeta?.headers?.has(CERTIFICATE_MISMATCH_HEADER)) {
-            const message = translations?.certificateMismatch || `You are authenticated as ${user.login || user.name}. To authenticate with the client certificate for your account, log out, then click the "Log in with certificate" option on the login page.`;
-            alertService.warning(message, 0);
-        }
-    }
-    render() {
-        const { user, loading, isLogoutPostponed, isUserChangePostponed } = this.state;
-        const { auth, profileUrl, ...props } = this.props;
-        const url = profileUrl || (user ? `${auth.config.serverUri}users/${user.id}` : '');
-        return (<Profile onLogin={this.login} onLogout={this.logout} onSwitchUser={this.switchUser} loading={loading} user={user} profileUrl={url} showApplyChangedUser={isUserChangePostponed} showLogIn={isLogoutPostponed} showLogOut={!isLogoutPostponed} showSwitchUser={auth._canShowDialogs() && !isLogoutPostponed && !isUserChangePostponed} onRevertPostponement={this.onRevertPostponement} {...props}/>);
-    }
-}

package/components/header/smart-services.d.ts

@@ -1,25 +0,0 @@
-import React, { Component, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-import Auth from '../auth/auth';
-import HTTP from '../http/http';
-export interface SmartServicesProps extends HTMLAttributes<HTMLElement> {
-    auth: Auth;
-}
-export default class SmartServices extends Component<SmartServicesProps> {
-    static propTypes: {
-        auth: PropTypes.Validator<Auth>;
-    };
-    state: {
-        visible: boolean;
-        loading: boolean;
-        services: null;
-    };
-    componentDidMount(): void;
-    static allFields: string;
-    static countFields: string;
-    http?: HTTP;
-    stopLoading: () => void;
-    getServicesContent: () => void;
-    getServices(fields: string): Promise<any> | undefined;
-    render(): React.JSX.Element | null;
-}

package/components/header/smart-services.js

@@ -1,49 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Auth from '../auth/auth';
-import HTTP from '../http/http';
-import Services from './services';
-function noop() { }
-export default class SmartServices extends Component {
-    static propTypes = {
-        auth: PropTypes.instanceOf(Auth).isRequired
-    };
-    state = {
-        visible: true,
-        loading: false,
-        services: null
-    };
-    componentDidMount() {
-        const { auth } = this.props;
-        this.http = new HTTP(auth, auth.getAPIPath());
-        this.getServices(SmartServices.countFields)?.then(services => {
-            if (!services.length) {
-                this.setState({ visible: false });
-            }
-        }).catch(noop);
-    }
-    static allFields = 'id,name,applicationName,homeUrl,iconUrl';
-    static countFields = 'key';
-    http;
-    stopLoading = () => {
-        this.setState({ loading: false });
-    };
-    getServicesContent = () => {
-        this.setState({ loading: true });
-        this.getServices(SmartServices.allFields)?.then(services => {
-            this.setState({ services });
-            this.stopLoading();
-        }).catch(this.stopLoading);
-    };
-    getServices(fields) {
-        return this.http?.get(`services/header?fields=${fields}`);
-    }
-    render() {
-        const { services, visible, loading } = this.state;
-        const { auth, ...props } = this.props;
-        if (!visible) {
-            return null;
-        }
-        return (<Services {...props} clientId={auth.config.clientId} initShown loading={loading} onClick={this.getServicesContent} services={services}/>);
-    }
-}

package/components/header/tray-icon.d.ts

@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ButtonAttrs } from '../button/button';
-import { IconType } from '../icon/icon';
-export interface TrayIconSpecificProps {
-    icon: string | IconType;
-    rotatable?: boolean | null | undefined;
-}
-export default class TrayIcon extends Component<ButtonAttrs & TrayIconSpecificProps> {
-    static propTypes: {
-        icon: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>>;
-        rotatable: PropTypes.Requireable<boolean>;
-        active: PropTypes.Requireable<boolean>;
-        danger: PropTypes.Requireable<boolean>;
-        delayed: PropTypes.Requireable<boolean>;
-        loader: PropTypes.Requireable<boolean>;
-        primary: PropTypes.Requireable<boolean>;
-        short: PropTypes.Requireable<boolean>;
-        text: PropTypes.Requireable<boolean>;
-        inline: PropTypes.Requireable<boolean>;
-        dropdown: PropTypes.Requireable<boolean>;
-        href: PropTypes.Requireable<string>;
-        target: PropTypes.Requireable<string>;
-        iconSize: PropTypes.Requireable<number>;
-        iconClassName: PropTypes.Requireable<string>;
-        iconSuppressSizeWarning: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    render(): React.JSX.Element;
-}

package/components/header/tray-icon.js

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from '../button/button';
-import styles from './header.css';
-export default class TrayIcon extends Component {
-    static propTypes = {
-        ...Button.propTypes,
-        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
-        rotatable: PropTypes.bool
-    };
-    render() {
-        const { className, rotatable: rotatable, ...restProps } = this.props;
-        const classes = classNames(styles.icon, className, {
-            [styles.rotatable]: rotatable,
-            [styles.rotated]: rotatable && restProps.active
-        });
-        return (<Button {...restProps} className={classes}/>);
-    }
-}

package/components/header/tray.d.ts

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

package/components/header/tray.js

@@ -1,18 +0,0 @@
-import React, { Children, Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './header.css';
-const wrapChild = (child) => child && (<div className={styles.trayItem}>{child}</div>);
-export default class Tray extends Component {
-    static propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames(styles.tray, className);
-        return (<div {...restProps} className={classes}>
-        {Children.map(children, wrapChild)}
-      </div>);
-    }
-}