@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/grid/grid.js

@@ -8,7 +8,7 @@ export class Grid extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles['container-fluid'], className);
-        return (<div {...restProps} className={classes}>
+        return (<div data-test="ring-grid" {...restProps} className={classes}>
         {children}
       </div>);
     }

package/components/grid/row.js

@@ -2,10 +2,17 @@ import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
 const modifierKeys = [
-    'start', 'center', 'end', // text-align, justify-content
-    'around', 'between', // justify-content
-    'top', 'middle', 'baseline', 'bottom', // align-items
-    'first', 'last' // order
+    'start',
+    'center',
+    'end', // text-align, justify-content
+    'around',
+    'between', // justify-content
+    'top',
+    'middle',
+    'baseline',
+    'bottom', // align-items
+    'first',
+    'last', // order
 ];
 /**
  * Converts xs="middle" to class "middle-xs"
@@ -24,9 +31,9 @@ export default class Row extends Component {
     render() {
         const { children, className, reverse, ...restProps } = this.props;
         const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
-            [styles.reverse]: reverse
+            [styles.reverse]: reverse,
         });
-        return (<div className={classes}>
+        return (<div className={classes} data-test="ring-grid-row">
         {children}
       </div>);
     }

package/components/group/group.js

@@ -8,7 +8,7 @@ export default class Group extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles.group, className);
-        return (<span {...restProps} className={classes}>
+        return (<span data-test="ring-group" {...restProps} className={classes}>
         {children}
       </span>);
     }

package/components/header/header-icon.js

@@ -7,8 +7,8 @@ export default class HeaderIcon extends Component {
         const { className, rotatable: rotatable, ...restProps } = this.props;
         const classes = classNames(styles.icon, className, {
             [styles.rotatable]: rotatable,
-            [styles.rotated]: rotatable && restProps.active
+            [styles.rotated]: rotatable && restProps.active,
         });
-        return (<Button {...restProps} className={classes}/>);
+        return <Button {...restProps} className={classes}/>;
     }
 }

package/components/header/header.css

@@ -1,20 +1,19 @@
 @import "../global/variables.css";
 
-@value dark from "../global/variables_dark.css";
 @value link, active from "../link/link.css";
-@value compensate: 3px;
-@value compensated: calc(calc(var(--ring-unit) * 8) - compensate);
 
 :root {
   --ring-header-link-color: var(--ring-link-color);
 }
 
-.dark,
 :global(.ring-ui-theme-dark) {
   --ring-header-link-color: var(--ring-text-color);
 }
 
 .header {
+  --ring-header-compensate: 3px;
+  --ring-header-compensated: calc(calc(var(--ring-unit) * 8) - var(--ring-header-compensate));
+
   display: flex;
   overflow: hidden;
   align-items: center;
@@ -26,14 +25,14 @@
 
   background-color: var(--ring-navigation-background-color);
 
-  line-height: compensated;
+  line-height: var(--ring-header-compensated);
 
   & > * {
     display: inline-block;
 
     box-sizing: border-box;
     height: calc(var(--ring-unit) * 8);
-    padding: 0 calc(var(--ring-unit) * 1.5) compensate;
+    padding: 0 calc(var(--ring-unit) * 1.5) var(--ring-header-compensate);
   }
 
   /* override link */
@@ -58,14 +57,14 @@
 
 .headerVertical {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   flex-direction: column;
 
   height: 100%;
 
   color: var(--ring-text-color);
 
-  background-color: var(--ring-sidebar-background-color);
+  background-color: var(--ring-navigation-background-color);
 
   /* override link */
   & .link {
@@ -77,6 +76,10 @@
   }
 }
 
+html:global(.ring-ui-theme-dark) .headerVertical {
+  box-shadow: inset -1px 0 var(--ring-line-color);
+}
+
 .logo {
   display: inline-flex;
   align-items: center;
@@ -99,6 +102,7 @@
 
 .links {
   display: flex;
+  align-items: center;
   flex-direction: column;
 
   min-height: calc(var(--ring-unit) * 5);
@@ -108,7 +112,7 @@
   align-items: flex-end;
 
   margin-left: auto;
-  padding: 0 0 compensate;
+  padding: 0 0 var(--ring-header-compensate);
 }
 
 /* override .header > * */
@@ -117,7 +121,7 @@
 }
 
 .headerVertical .tray {
-  align-items: flex-start;
+  align-items: center;
   flex-direction: column;
 
   margin-top: auto;
@@ -126,7 +130,7 @@
 }
 
 .trayItemContent {
-  height: compensated;
+  height: var(--ring-header-compensated);
 }
 
 .icon {
@@ -142,11 +146,11 @@
 
 /* override button */
 .icon.icon {
-  height: compensated;
+  height: var(--ring-header-compensated);
 
   padding-top: calc(var(--ring-unit) / 2);
 
-  line-height: compensated;
+  line-height: var(--ring-header-compensated);
 }
 
 .headerVertical .icon {
@@ -176,7 +180,7 @@
   align-items: center;
 
   width: auto;
-  height: compensated;
+  height: var(--ring-header-compensated);
   padding-left: var(--ring-unit);
 
   vertical-align: bottom;
@@ -190,7 +194,7 @@
 .profile {
   composes: profileEmpty;
 
-  height: compensated;
+  height: var(--ring-header-compensated);
 
   cursor: pointer;
 }

package/components/header/header.js

@@ -12,21 +12,19 @@ class Header extends Component {
     static defaultProps = {
         spaced: true,
         theme: Theme.DARK,
-        vertical: false
+        vertical: false,
     };
     render() {
         const { children, className, spaced, theme, vertical, ...restProps } = this.props;
         const classes = classNames(vertical ? styles.headerVertical : styles.header, className, {
-            [styles.headerSpaced]: spaced && !vertical
+            [styles.headerSpaced]: spaced && !vertical,
         });
         const overrideOuterTheme = theme !== Theme.LIGHT;
         const header = (<header {...restProps} className={classes}>
         {children}
       </header>);
         if (overrideOuterTheme) {
-            return (<ThemeProvider theme={theme}>
-          {header}
-        </ThemeProvider>);
+            return <ThemeProvider theme={theme}>{header}</ThemeProvider>;
         }
         return header;
     }

package/components/header/links.js

@@ -3,5 +3,5 @@ import ScrollableSection from '../scrollable-section/scrollable-section';
 import styles from './header.css';
 // currently only supports vertical header
 export default function Links({ className, ...restProps }) {
-    return (<ScrollableSection {...restProps} className={classNames(styles.links, className)}/>);
+    return <ScrollableSection {...restProps} className={classNames(styles.links, className)}/>;
 }

package/components/header/logo.js

@@ -5,7 +5,7 @@ import styles from './header.css';
 export default class Logo extends PureComponent {
     static defaultProps = {
         size: Size.Size48,
-        suppressSizeWarning: true
+        suppressSizeWarning: true,
     };
     static Size = Size;
     render() {

package/components/header/profile.d.ts

@@ -36,8 +36,8 @@ export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSe
     onRevertPostponement?: (() => void) | null | undefined;
     menuProps?: PopupMenuAttrs | null | undefined;
     activeClassName?: string | null | undefined;
-    onShow?: (() => void);
-    onHide?: (() => void);
+    onShow?: () => void;
+    onHide?: () => void;
 }
 export default class Profile extends PureComponent<ProfileProps> {
     static defaultProps: ProfileProps;

package/components/header/profile.js

@@ -20,7 +20,7 @@ export default class Profile extends PureComponent {
               {translations?.login ?? translate('login')}
             </Button>
           </div>)}
-      </I18nContext.Consumer>)
+      </I18nContext.Consumer>),
     };
     static contextType = I18nContext;
     static Size = Size;
@@ -36,7 +36,7 @@ export default class Profile extends PureComponent {
             return renderGuest(this.props);
         }
         const avatarWrapper = classNames(styles.avatarWrapper, {
-            [styles.hasUpdates]: hasUpdates
+            [styles.hasUpdates]: hasUpdates,
         });
         const anchor = (<button type="button" className={styles.anchorClassName}>
         <span className={avatarWrapper}>
@@ -49,39 +49,39 @@ export default class Profile extends PureComponent {
                 rgItemType,
                 label: translations?.applyChangedUser ?? translate('applyChangedUser'),
                 className: styles.profileMenuItem,
-                onClick: onRevertPostponement
+                onClick: onRevertPostponement,
             },
             showLogIn && {
                 rgItemType,
                 label: translations?.login ?? translate('login'),
                 className: styles.profileMenuItem,
-                onClick: onRevertPostponement
+                onClick: onRevertPostponement,
             },
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
                 target: '_self', // Full page reload in Angular
                 href: profileUrl,
-                LinkComponent
+                LinkComponent,
             },
             showSwitchUser && {
                 rgItemType,
                 label: translations?.switchUser ?? translate('switchUser'),
                 className: styles.profileMenuItem,
-                onClick: onSwitchUser
+                onClick: onSwitchUser,
             },
             showLogOut && {
                 rgItemType,
                 label: translations?.logout ?? translate('logout'),
-                onClick: onLogout
-            }
+                onClick: onLogout,
+            },
         ].filter(isTruthy);
         return (<DropdownMenu {...props} onShow={onShow} onHide={onHide} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
                 closeOnSelect,
                 left: -2,
                 top: -8,
                 sidePadding: 32,
-                ...menuProps
+                ...menuProps,
             }}/>);
     }
 }

package/components/header/services-link.js

@@ -8,7 +8,7 @@ export default class ServicesLink extends PureComponent {
         {service.iconUrl
                 ? [
                     <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
-                    <div key="text">{service.name}</div>
+                    <div key="text">{service.name}</div>,
                 ]
                 : service.name}
       </Link>);

package/components/header/services.js

@@ -16,18 +16,17 @@ 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);
+        return aApplicationName.localeCompare(bApplicationName) || a.name.localeCompare(b.name);
     };
     static defaultProps = {
-        theme: Theme.DARK
+        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 (<HeaderIcon {...props} loader={loading} active={loading} icon={servicesIcon} aria-label="Services"/>);
+            return <HeaderIcon {...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);
@@ -39,7 +38,7 @@ export default class Services extends PureComponent {
                 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"/>)}
+          {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}/>);

package/components/header/smart-profile.js

@@ -8,7 +8,7 @@ export default class SmartProfile extends PureComponent {
         user: null,
         size: Profile.defaultProps.size,
         isLogoutPostponed: false,
-        isUserChangePostponed: false
+        isUserChangePostponed: false,
     };
     componentDidMount() {
         this.requestUser();
@@ -47,7 +47,7 @@ export default class SmartProfile extends PureComponent {
                 this.setState({
                     user: newUser,
                     isLogoutPostponed: false,
-                    isUserChangePostponed: false
+                    isUserChangePostponed: false,
                 });
             });
             auth.addListener(LOGOUT_POSTPONED_EVENT, () => {
@@ -65,7 +65,8 @@ export default class SmartProfile extends PureComponent {
         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.`;
+            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);
         }
     }

package/components/header/smart-services.js

@@ -6,16 +6,18 @@ export default class SmartServices extends Component {
     state = {
         visible: true,
         loading: false,
-        services: null
+        services: null,
     };
     componentDidMount() {
         const { auth } = this.props;
         this.http = new HTTP(auth, auth.getAPIPath());
-        this.getServices(SmartServices.countFields)?.then(services => {
+        this.getServices(SmartServices.countFields)
+            ?.then(services => {
             if (!services.length) {
                 this.setState({ visible: false });
             }
-        }).catch(noop);
+        })
+            .catch(noop);
     }
     static allFields = 'id,name,applicationName,homeUrl,iconUrl';
     static countFields = 'key';
@@ -25,10 +27,12 @@ export default class SmartServices extends Component {
     };
     getServicesContent = () => {
         this.setState({ loading: true });
-        this.getServices(SmartServices.allFields)?.then(services => {
+        this.getServices(SmartServices.allFields)
+            ?.then(services => {
             this.setState({ services });
             this.stopLoading();
-        }).catch(this.stopLoading);
+        })
+            .catch(this.stopLoading);
     };
     getServices(fields) {
         return this.http?.get(`services/header?fields=${fields}`);

package/components/header/tray.js

@@ -1,7 +1,7 @@
 import { Children, Component } from 'react';
 import classNames from 'classnames';
 import styles from './header.css';
-const wrapChild = (child) => child && (<div className={styles.trayItem}>{child}</div>);
+const wrapChild = (child) => child && <div className={styles.trayItem}>{child}</div>;
 export default class Tray extends Component {
     render() {
         const { children, className, ...restProps } = this.props;

package/components/heading/heading.css

@@ -18,7 +18,6 @@
     }
   }
 
-
   & :is(h1, h2),
   &:is(h1, h2) {
     margin-bottom: 8px;

package/components/heading/heading.js

@@ -17,8 +17,8 @@ const HeadingMemo = memo(function Heading({ children, className, level = Levels.
     const classes = classNames(styles.heading, className);
     const Tag = level <= Levels.H4 ? `h${level}` : fallbackHeading();
     return (<Tag {...restProps} className={classes}>
-        {children}
-      </Tag>);
+      {children}
+    </Tag>);
 });
 const Heading = HeadingMemo;
 Heading.Levels = Levels;

package/components/http/http.d.ts

@@ -15,7 +15,7 @@ export interface FetchParams<T = unknown> extends Omit<RequestInit, 'body' | 'he
     query?: Record<string, unknown> | undefined;
     headers?: HeadersInit | Record<string, null | undefined>;
 }
-export interface RequestParams<RawBody extends boolean = true | false> extends FetchParams<RawBody extends true ? (BodyInit | null) : unknown> {
+export interface RequestParams<RawBody extends boolean = true | false> extends FetchParams<RawBody extends true ? BodyInit | null : unknown> {
     sendRawBody?: RawBody;
 }
 export type RequestParamsWithoutMethod<RawBody extends boolean = boolean> = Omit<RequestParams<RawBody>, 'method'>;
@@ -50,9 +50,9 @@ export default class HTTP implements Partial<HTTPAuth> {
      * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
      * @param method
      */
-    abortify: <T>(method: Method<T>) => ((...p: Parameters<Method<T>>) => ({
+    abortify: <T>(method: Method<T>) => ((...p: Parameters<Method<T>>) => {
         promise: Promise<T>;
         abort: () => void;
-    }));
+    });
 }
 export {};

package/components/http/http.js

@@ -7,9 +7,9 @@ const TOKEN_TYPE = 'Bearer';
 export const defaultFetchConfig = {
     headers: {
         'Content-Type': 'application/json',
-        Accept: 'application/json'
+        Accept: 'application/json',
     },
-    credentials: 'same-origin'
+    credentials: 'same-origin',
 };
 export class HTTPError extends ExtendableError {
     data;
@@ -21,7 +21,7 @@ export class HTTPError extends ExtendableError {
     }
 }
 export const CODE = {
-    UNAUTHORIZED: 401
+    UNAUTHORIZED: 401,
 };
 function isRawBody(params) {
     return params.sendRawBody === true;
@@ -44,8 +44,8 @@ export default class HTTP {
             ...fetchConfig,
             headers: {
                 ...headers,
-                ...fetchConfig.headers
-            }
+                ...fetchConfig.headers,
+            },
         };
     }
     setAuth = (auth) => {
@@ -68,7 +68,7 @@ export default class HTTP {
         const combinedHeaders = {
             ...this.fetchConfig.headers,
             ...(token ? { Authorization: `${TOKEN_TYPE} ${token}` } : {}),
-            ...headers
+            ...headers,
         };
         Object.entries(combinedHeaders).forEach(([key, header]) => {
             if (header === null || header === undefined) {
@@ -80,21 +80,19 @@ export default class HTTP {
             bodyToSend = params.body;
         }
         else {
-            bodyToSend = params.body === null || params.body === undefined || params.body === ''
-                ? params.body
-                : JSON.stringify(body);
+            bodyToSend =
+                params.body === null || params.body === undefined || params.body === '' ? params.body : JSON.stringify(body);
         }
         return this._fetch(this._makeRequestUrl(url, query), {
             ...this.fetchConfig,
             headers: combinedHeaders,
             ...fetchConfig,
-            body: bodyToSend
+            body: bodyToSend,
         });
     }
     _storeRequestMeta(parsedResponse, rawResponse) {
         const { headers, ok, redirected, status, statusText, type, url } = rawResponse;
-        this._requestsMeta.
-            set(parsedResponse, { headers, ok, redirected, status, statusText, type, url });
+        this._requestsMeta.set(parsedResponse, { headers, ok, redirected, status, statusText, type, url });
     }
     async _processResponse(response) {
         const contentType = response.headers.get('content-type');
@@ -123,7 +121,7 @@ export default class HTTP {
         const response = await this._fetch(this._makeRequestUrl(url, query), {
             ...fetchConfig,
             headers: fetchConfig.headers,
-            body: body !== null && body !== undefined && body !== '' ? JSON.stringify(body) : body
+            body: body !== null && body !== undefined && body !== '' ? JSON.stringify(body) : body,
         });
         return this._processResponse(response);
     };
@@ -142,9 +140,7 @@ export default class HTTP {
             if (!(error instanceof HTTPError)) {
                 throw error;
             }
-            const shouldRefreshToken = typeof error.data.error === 'string'
-                ? this.shouldRefreshToken?.(error.data.error)
-                : false;
+            const shouldRefreshToken = typeof error.data.error === 'string' ? this.shouldRefreshToken?.(error.data.error) : false;
             if (shouldRefreshToken) {
                 token = await this.forceTokenUpdate?.();
                 response = await this._performRequest(url, token, params);
@@ -154,22 +150,22 @@ export default class HTTP {
         }
     };
     getMetaForResponse = (response) => this._requestsMeta.get(response);
-    get = (url, params) => (this.request(url, {
+    get = (url, params) => this.request(url, {
         ...params,
-        method: 'GET'
-    }));
-    post = (url, params) => (this.request(url, {
+        method: 'GET',
+    });
+    post = (url, params) => this.request(url, {
         ...params,
-        method: 'POST'
-    }));
-    delete = (url, params) => (this.request(url, {
+        method: 'POST',
+    });
+    delete = (url, params) => this.request(url, {
         ...params,
-        method: 'DELETE'
-    }));
-    put = (url, params) => (this.request(url, {
+        method: 'DELETE',
+    });
+    put = (url, params) => this.request(url, {
         ...params,
-        method: 'PUT'
-    }));
+        method: 'PUT',
+    });
     /**
      * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
      * @param method
@@ -181,7 +177,7 @@ export default class HTTP {
         }
         return {
             promise: method.call(this, url, params),
-            abort: () => ctrl.abort()
+            abort: () => ctrl.abort(),
         };
     };
 }

package/components/http/http.mock.js

@@ -2,7 +2,7 @@ import HTTP from './http';
 const authMock = {
     requestToken: () => 'mock token',
     shouldRefreshToken: () => false,
-    forceTokenUpdate: () => Promise.resolve(null)
+    forceTokenUpdate: () => Promise.resolve(null),
 };
 export default class HTTPMock extends HTTP {
     defaultResponse;
@@ -15,18 +15,21 @@ export default class HTTPMock extends HTTP {
         this.responsesByUrlMap = new Map();
     }
     _fetch(url, params) {
-        this.requests = [...this.requests, {
+        this.requests = [
+            ...this.requests,
+            {
                 url,
                 params: {
                     ...params,
-                    body: typeof params.body === 'string' ? JSON.parse(params.body) : params.body
-                }
-            }];
+                    body: typeof params.body === 'string' ? JSON.parse(params.body) : params.body,
+                },
+            },
+        ];
         return Promise.resolve({
             status: 200,
             ok: true,
             headers: new Headers({ 'content-type': 'application/json' }),
-            json: () => Promise.resolve((this._getResponseForUrl(url) || this.defaultResponse))
+            json: () => Promise.resolve(this._getResponseForUrl(url) || this.defaultResponse),
         });
     }
     respondDefault(response) {