@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/header/profile.js

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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>);
+    }
+}