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

package/components/header/header.js

@@ -1,12 +1,8 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import compose from '../global/compose';
-import Theme, {withTheme} from '../global/theme';
-
+import Theme, { ThemeProvider } from '../global/theme';
 import styles from './header.css';
-
 /**
  * @name Header
  */
@@ -14,42 +10,32 @@ import styles from './header.css';
  * Displays a configurable page header. See available presentation options in the knobs panel.
  */
 class Header extends Component {
-  static propTypes = {
-    theme: PropTypes.oneOf(['light', 'dark']),
-    className: PropTypes.string,
-    children: PropTypes.node,
-    spaced: PropTypes.bool
-  };
-
-  static defaultProps = {
-    spaced: true
-  };
-
-  render() {
-    const {children, className, spaced, theme, ...restProps} = this.props;
-    const classes = classNames(styles.header, styles[theme], className, {
-      [styles.headerSpaced]: spaced
-    });
-
-    return (
-      <header
-        {...restProps}
-        className={classes}
-      >
-        {children}
-      </header>
-    );
-  }
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node,
+        spaced: PropTypes.bool
+    };
+    static defaultProps = {
+        spaced: true,
+        theme: Theme.DARK
+    };
+    render() {
+        const { children, className, spaced, theme, ...restProps } = this.props;
+        const classes = classNames(styles.header, className, {
+            [styles.headerSpaced]: spaced
+        });
+        return (<ThemeProvider theme={theme}>
+        <header {...restProps} className={classes}>
+          {children}
+        </header>
+      </ThemeProvider>);
+    }
 }
-
-export default withTheme(Theme.DARK)(Header);
-export const RerenderableHeader = compose(
-  withTheme(Theme.DARK)
-)(Header);
-export {default as Logo} from './logo';
-export {default as Tray} from './tray';
-export {default as TrayIcon} from './tray-icon';
-export {default as Profile} from './profile';
-export {default as SmartProfile} from './smart-profile';
-export {default as Services} from './services';
-export {default as SmartServices} from './smart-services';
+export default Header;
+export { default as Logo } from './logo';
+export { default as Tray } from './tray';
+export { default as TrayIcon } from './tray-icon';
+export { default as Profile } from './profile';
+export { default as SmartProfile } from './smart-profile';
+export { default as Services } from './services';
+export { default as SmartServices } from './smart-services';

package/components/header/logo.d.ts

@@ -0,0 +1,14 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { IconAttrs, Size } from '../icon/icon';
+export default class Logo extends PureComponent<IconAttrs> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: Size;
+        suppressSizeWarning: boolean;
+    };
+    static Size: typeof Size;
+    render(): JSX.Element;
+}

package/components/header/logo.js

@@ -1,31 +1,22 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Icon, {Size} from '../icon/icon';
-
+import Icon, { Size } from '../icon/icon';
 import styles from './header.css';
-
 export default class Logo extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string
-  };
-
-  static defaultProps = {
-    size: Size.Size48,
-    suppressSizeWarning: true
-  };
-
-  static Size = Size;
-
-  render() {
-    const {className, ...restProps} = this.props;
-    const classes = classNames(styles.logo, className);
-
-    return (
-      <div className={classes}>
+    static propTypes = {
+        className: PropTypes.string
+    };
+    static defaultProps = {
+        size: Size.Size48,
+        suppressSizeWarning: true
+    };
+    static Size = Size;
+    render() {
+        const { className, ...restProps } = this.props;
+        const classes = classNames(styles.logo, className);
+        return (<div className={classes}>
         <Icon {...restProps}/>
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/header/profile.d.ts

@@ -0,0 +1,73 @@
+import React, { ComponentType, HTMLAttributes, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Size } from '../avatar/avatar';
+import { ListDataItem } from '../list/consts';
+import { AuthUser } from '../auth/auth';
+import { LinkProps } from '../link/link';
+export interface ProfileTranslations {
+    applyChangedUser?: string | null | undefined;
+    login?: string | null | undefined;
+    profile?: string | null | undefined;
+    switchUser?: string | null | undefined;
+    logout?: string | null | undefined;
+    certificateMismatch?: string | null | undefined;
+}
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    closeOnSelect: boolean;
+    renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
+    translations: ProfileTranslations;
+    size: Size;
+    renderGuest: (props: ProfileProps) => ReactNode;
+    hasUpdates?: boolean | null | undefined;
+    loading?: boolean | undefined;
+    onLogin?: (() => void) | undefined;
+    onLogout?: (() => void) | null | undefined;
+    onSwitchUser?: (() => void) | null | undefined;
+    profileUrl?: string | undefined;
+    LinkComponent?: ComponentType<LinkProps> | null | undefined;
+    user?: AuthUser | null | undefined | void;
+    round?: boolean | null | undefined;
+    showLogIn?: boolean | null | undefined;
+    showLogOut?: boolean | null | undefined;
+    showSwitchUser?: boolean | null | undefined;
+    showApplyChangedUser?: boolean | null | undefined;
+    onRevertPostponement?: (() => void) | null | undefined;
+}
+export default class Profile extends PureComponent<ProfileProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        closeOnSelect: PropTypes.Requireable<boolean>;
+        hasUpdates: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        onLogin: PropTypes.Requireable<(...args: any[]) => any>;
+        onLogout: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwitchUser: PropTypes.Requireable<(...args: any[]) => any>;
+        profileUrl: PropTypes.Requireable<string>;
+        renderPopupItems: PropTypes.Requireable<(...args: any[]) => any>;
+        LinkComponent: PropTypes.Requireable<string | ((...args: any[]) => any) | React.Component<unknown, unknown, unknown>>;
+        translations: PropTypes.Requireable<PropTypes.InferProps<{
+            profile: PropTypes.Requireable<string>;
+            login: PropTypes.Requireable<string>;
+            logout: PropTypes.Requireable<string>;
+            applyChangedUser: PropTypes.Requireable<string>;
+            switchUser: PropTypes.Requireable<string>;
+        }>>;
+        user: PropTypes.Requireable<PropTypes.InferProps<{
+            guest: PropTypes.Requireable<boolean>;
+            profile: PropTypes.Requireable<object>;
+            name: PropTypes.Requireable<string>;
+        }>>;
+        size: PropTypes.Requireable<number>;
+        round: PropTypes.Requireable<boolean>;
+        showLogIn: PropTypes.Requireable<boolean>;
+        showLogOut: PropTypes.Requireable<boolean>;
+        showSwitchUser: PropTypes.Requireable<boolean>;
+        showApplyChangedUser: PropTypes.Requireable<boolean>;
+        onRevertPostponement: PropTypes.Requireable<(...args: any[]) => any>;
+        renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: ProfileProps;
+    static Size: typeof Size;
+    render(): React.ReactNode;
+}
+export declare type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/header/profile.js

@@ -1,181 +1,115 @@
-import React, {Component, PureComponent} from 'react';
+import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Avatar, {Size} from '../avatar/avatar';
+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 { 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,
-    translations: {},
-    size: Size.Size32,
-    renderGuest: ({loading, onLogin, className, translations}) => (
-      <div
-        className={classNames(styles.profileEmpty, className)}
-      >
-        <Button
-          primary
-          data-test="ring-header-login-button"
-          disabled={loading}
-          loader={loading}
-          onClick={onLogin}
-        >
+    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,
+        translations: {},
+        size: Size.Size32,
+        renderGuest: ({ loading, onLogin, className, translations }) => (<div className={classNames(styles.profileEmpty, className)}>
+        <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
           {translations.login || 'Log in...'}
         </Button>
-      </div>
-    )
-  };
-
-  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;
-
-    if (!user) {
-      return (
-        <div
-          {...props}
-          className={classNames(styles.profileEmpty, className)}
-        >
+      </div>)
+    };
+    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;
+        if (!user) {
+            return (<div {...props} className={classNames(styles.profileEmpty, className)}>
           <Avatar size={size} round={round}/>
-        </div>
-      );
+        </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 || 'Apply changed user',
+                className: styles.profileMenuItem,
+                onClick: onRevertPostponement
+            },
+            showLogIn && {
+                rgItemType,
+                label: translations.login || 'Log in',
+                className: styles.profileMenuItem,
+                onClick: onRevertPostponement
+            },
+            {
+                rgItemType: PopupMenu.ListProps.Type.LINK,
+                label: translations.profile || 'Profile',
+                target: '_self',
+                href: profileUrl,
+                LinkComponent
+            },
+            showSwitchUser && {
+                rgItemType,
+                label: translations.switchUser || 'Switch user',
+                className: styles.profileMenuItem,
+                onClick: onSwitchUser
+            },
+            showLogOut && {
+                rgItemType,
+                label: translations.logout || 'Log out',
+                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
+            }}/>);
     }
-
-    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 || 'Apply changed user',
-        className: styles.profileMenuItem,
-        onClick: onRevertPostponement
-      },
-      showLogIn && {
-        rgItemType,
-        label: translations.login || 'Log in',
-        className: styles.profileMenuItem,
-        onClick: onRevertPostponement
-      },
-      {
-        rgItemType: PopupMenu.ListProps.Type.LINK,
-        label: translations.profile || 'Profile',
-
-        target: '_self', // Full page reload in Angular
-        href: profileUrl,
-        LinkComponent
-      },
-      showSwitchUser && {
-        rgItemType,
-        label: translations.switchUser || 'Switch user',
-        className: styles.profileMenuItem,
-        onClick: onSwitchUser
-      },
-      showLogOut && {
-        rgItemType,
-        label: translations.logout || 'Log out',
-
-        onClick: onLogout
-      }
-    ].filter(it => !!it);
-
-    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 { 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.js

@@ -1,45 +1,28 @@
-import React, {PureComponent} from 'react';
+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}
-      >
+    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">
+                ? [
+                    <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
+                    <div key="text">
               <WrapText>{service.name}</WrapText>
             </div>
-          ]
-          : <WrapText>{service.name}</WrapText>)
-        }
-      </Link>
-    );
-  }
-
+                ]
+                : <WrapText>{service.name}</WrapText>)}
+      </Link>);
+    }
 }

package/components/header/services.css

@@ -26,7 +26,7 @@
   text-align: center;
   text-overflow: ellipsis;
 
-  color: var(--ring-dark-text-color);
+  color: var(--ring-active-text-color);
 
   line-height: initial;
 
@@ -38,7 +38,7 @@
 
   &:not(:hover),
   &:visited:not(:hover) {
-    color: var(--ring-dark-text-color);
+    color: var(--ring-active-text-color);
   }
 }
 
@@ -58,7 +58,7 @@
   composes: active;
 
   &:hover {
-    color: var(--ring-dark-text-color);
+    color: var(--ring-active-text-color);
   }
 }
 

package/components/header/services.d.ts

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