@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/header/services-link.js

@@ -0,0 +1,26 @@
+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}>
+        {service.iconUrl
+                ? [
+                    <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
+                    <div key="text">{service.name}</div>
+                ]
+                : service.name}
+      </Link>);
+    }
+}

package/components/header/services.css

@@ -0,0 +1,97 @@
+@import "../global/variables.css";
+
+.services {
+  max-width: calc(calc(var(--ring-unit) * 50) + 2px);
+  padding: calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4) calc(var(--ring-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(var(--ring-unit) * 14);
+  height: calc(var(--ring-unit) * 14);
+
+  text-align: center;
+  text-overflow: ellipsis;
+
+  color: var(--ring-active-text-color);
+
+  line-height: initial;
+
+  &::after {
+    height: calc(var(--ring-unit) * 14);
+
+    vertical-align: middle;
+  }
+
+  &:not(:hover),
+  &:visited:not(:hover) {
+    color: var(--ring-active-text-color);
+  }
+}
+
+.itemLogo {
+  display: inline-block;
+
+  width: calc(var(--ring-unit) * 6);
+  height: calc(var(--ring-unit) * 6);
+  margin: calc(var(--ring-unit) * 2) 0 calc(var(--ring-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(var(--ring-unit) * 4) 0 calc(var(--ring-unit) * 2);
+
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
+}
+
+.itemStacked {
+  display: inline-block;
+
+  width: 100%;
+  margin-bottom: calc(var(--ring-unit) * 2);
+
+  text-decoration: none;
+
+  line-height: calc(var(--ring-unit) * 2);
+
+  &,
+  &:visited {
+    color: var(--ring-secondary-color);
+  }
+
+  &:last-child {
+    margin-bottom: calc(var(--ring-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,26 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import Auth from '../auth/auth';
+import HTTP from '../http/http';
+import { Service } from './services-link';
+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<Service[]> | 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>);
+    }
+}

package/components/heading/heading.css

@@ -0,0 +1,68 @@
+@import "../global/variables.css";
+
+.contentWithHeadings {
+  & h1,
+  &:is(h1),
+  & h2,
+  &:is(h2),
+  & h3,
+  &:is(h3),
+  & h4,
+  &:is(h4) {
+    margin-top: var(--ring-line-height);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+
+  & :is(h1, h2),
+  &:is(h1, h2) {
+    margin-bottom: 8px;
+
+    color: var(--ring-heading-color);
+  }
+
+  & h1,
+  &:is(h1) {
+    font-size: 24px;
+    line-height: 28px;
+  }
+
+  & h2,
+  &:is(h2) {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  & h3,
+  &:is(h3) {
+    margin-bottom: 0;
+
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  & h4,
+  &:is(h4) {
+    margin-bottom: 1px;
+
+    letter-spacing: 1px;
+    text-transform: uppercase;
+
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 18px;
+  }
+}
+
+.heading {
+  composes: font from "../global/global.css";
+  composes: contentWithHeadings;
+}
+
+.caps {
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}

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.js

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