@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

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

@@ -0,0 +1,25 @@
+import { 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(): JSX.Element;
+}

package/components/header/services-link.jsx

@@ -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.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ServicesLink, { Service } from './services-link';
+export interface ServicesProps extends HTMLAttributes<HTMLElement> {
+    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 Link: typeof ServicesLink;
+    serviceIsActive: (service: Service) => boolean;
+    render(): JSX.Element;
+}

package/components/header/services.jsx

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import servicesIcon from '@jetbrains/icons/services-20px';
+import Dropdown from '../dropdown/dropdown';
+import Popup from '../popup/popup';
+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 Link = ServicesLink;
+    serviceIsActive = (service) => service.id === this.props.clientId;
+    render() {
+        const { clientId, loading, services, initShown, ...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);
+        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
+        const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
+        return (<Dropdown {...props} anchor={makeAnchor(loading)} initShown={initShown}>
+        <Popup className={styles.services} 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 { 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(): JSX.Element;
+}
+export {};

package/components/header/smart-profile.jsx

@@ -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 { 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(): JSX.Element | null;
+}

package/components/header/smart-services.jsx

@@ -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,33 @@
+import { 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<PropTypes.ReactComponentLike>;
+        rotatable: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        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(): JSX.Element;
+}

package/components/header/tray-icon.jsx

@@ -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 { 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(): JSX.Element;
+}

package/components/header/tray.jsx

@@ -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>);
+    }
+}

package/components/heading/heading.d.ts

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react';
+/**
+ * @name Heading
+ */
+export declare enum Levels {
+    H1 = 1,
+    H2 = 2,
+    H3 = 3,
+    H4 = 4
+}
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: Levels | undefined;
+}
+declare const Heading: React.ComponentType<HeadingProps> & {
+    Levels: typeof Levels;
+};
+export default Heading;
+export interface H1Props extends HTMLAttributes<HTMLHeadingElement> {
+    caps?: boolean | null | undefined;
+}
+declare const H1: React.ComponentType<H1Props>;
+declare const H2: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
+declare const H3: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
+declare const H4: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
+export { H1, H2, H3, H4 };

package/components/heading/heading.jsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import deprecate from 'util-deprecate';
+import styles from './heading.css';
+/**
+ * @name Heading
+ */
+export var Levels;
+(function (Levels) {
+    Levels[Levels["H1"] = 1] = "H1";
+    Levels[Levels["H2"] = 2] = "H2";
+    Levels[Levels["H3"] = 3] = "H3";
+    Levels[Levels["H4"] = 4] = "H4";
+})(Levels || (Levels = {}));
+const fallbackHeading = deprecate(() => 'h3', 'Headings of level 5 and higher are replaced with h3');
+const HeadingMemo = memo(function Heading({ children, className, level = Levels.H1, ...restProps }) {
+    const classes = classNames(styles.heading, className);
+    const Tag = level <= Levels.H4 ? `h${level}` : fallbackHeading();
+    return (<Tag {...restProps} className={classes}>
+        {children}
+      </Tag>);
+});
+const Heading = HeadingMemo;
+Heading.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    level: PropTypes.oneOf([Levels.H1, Levels.H2, Levels.H3, Levels.H4])
+};
+Heading.Levels = Levels;
+export default Heading;
+function makeHeading(level, useCaps) {
+    const H = memo(({ className, caps, ...restProps }) => {
+        const classes = classNames(className, {
+            [styles.caps]: useCaps && caps
+        });
+        return (<Heading {...restProps} level={level} className={classes}/>);
+    });
+    H.displayName = `H${level}`;
+    H.propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        // use only for short h1 headers, no longer than three words
+        caps: PropTypes.bool
+    };
+    return H;
+}
+const H1 = makeHeading(Levels.H1, true);
+const H2 = makeHeading(Levels.H2);
+const H3 = makeHeading(Levels.H3);
+const H4 = makeHeading(Levels.H4);
+export { H1, H2, H3, H4 };

package/components/http/http.d.ts

@@ -0,0 +1,49 @@
+import ExtendableError from 'es6-error';
+export declare const defaultFetchConfig: RequestInit;
+export interface HTTPErrorData {
+    error?: string;
+}
+export declare class HTTPError extends ExtendableError {
+    data: HTTPErrorData;
+    status: number | undefined;
+    constructor(response: Partial<Response>, data?: HTTPErrorData);
+}
+export declare const CODE: {
+    UNAUTHORIZED: number;
+};
+export interface FetchParams<T = unknown> extends Omit<RequestInit, 'body'> {
+    body?: T;
+    query?: Record<string, unknown> | undefined;
+}
+export declare type RequestParams = FetchParams & {
+    sendRawBody?: false;
+} | FetchParams<BodyInit | null> & {
+    sendRawBody: true;
+};
+export interface HTTPAuth {
+    requestToken(): Promise<string | null> | string | null;
+    forceTokenUpdate(): Promise<string | null>;
+}
+export default class HTTP implements Partial<HTTPAuth> {
+    baseUrl: string | null | undefined;
+    _requestsMeta: WeakMap<object, Partial<Response>>;
+    fetchConfig: RequestInit;
+    requestToken?: () => Promise<string | null> | string | null;
+    shouldRefreshToken?: (error: string) => boolean;
+    forceTokenUpdate?: () => Promise<string | null>;
+    constructor(auth?: HTTPAuth, baseUrl?: string | null | undefined, fetchConfig?: RequestInit);
+    setAuth: (auth: HTTPAuth) => void;
+    setBaseUrl: (baseUrl: string | null | undefined) => void;
+    _fetch(...args: Parameters<typeof fetch>): Promise<Response> | Partial<Response>;
+    private _makeRequestUrl;
+    private _performRequest;
+    private _storeRequestMeta;
+    private _processResponse;
+    private static _isErrorStatus;
+    fetch: (url: string, params?: FetchParams) => Promise<any>;
+    authorizedFetch(...args: Parameters<HTTP['_performRequest']>): Promise<any>;
+    request: (url: string, params?: RequestParams | undefined) => Promise<any>;
+    getMetaForResponse: (response: object) => Partial<Response> | undefined;
+    get: (url: string, params?: RequestParams | undefined) => Promise<any>;
+    post: (url: string, params?: RequestParams | undefined) => Promise<any>;
+}