@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/header/services.js

@@ -1,115 +1,62 @@
-import React, {PureComponent} from 'react';
+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;
+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}
-        >
+    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);
+        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={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"
-            />
-          )}
+                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}
-              />
-            );
-          })}
+                const isActive = this.serviceIsActive(service);
+                return (<Services.Link active={isActive} className={isActive ? styles.activeItemStacked : styles.itemStacked} key={service.id} service={service}/>);
+            })}
         </Popup>
-      </Dropdown>
-    );
-  }
+      </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.js

@@ -1,121 +1,86 @@
-import React, {PureComponent} from 'react';
+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 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});
+    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();
     }
-  };
-
-  logout = () => this.props.auth.logout();
-
-  switchUser = () => this.props.auth.switchUser();
-
-  onRevertPostponement = () => {
-    if (this.state.isLogoutPostponed) {
-      this.props.auth.login();
+    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
+        }
     }
-    if (this.state.isUserChangePostponed) {
-      this.props.auth.updateUser();
+    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);
+        }
     }
-  };
-
-  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
+    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}/>);
     }
-  }
-
-  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.js

@@ -1,73 +1,49 @@
-import React, {Component} from 'react';
+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() {}
-
+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';
-
-  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;
+    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}/>);
     }
-
-    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 { 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>;
+        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.js

@@ -1,33 +1,20 @@
-import React, {Component} from 'react';
+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
-  };
-
-  static defaultProps = {
-    ...Button.defaultProps
-  };
-
-  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}
-      />
-    );
-  }
+    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;
+}