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

package/components/http/http.d.ts

@@ -0,0 +1,61 @@
+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;
+};
+type Method<T> = (url: string, params?: RequestParams) => Promise<T>;
+export interface FetchParams<T = unknown> extends Omit<RequestInit, 'body' | 'headers'> {
+    body?: T;
+    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> {
+    sendRawBody?: RawBody;
+}
+export type RequestParamsWithoutMethod<RawBody extends boolean = boolean> = Omit<RequestParams<RawBody>, 'method'>;
+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: <T = unknown>(url: string, params?: FetchParams) => Promise<T>;
+    authorizedFetch(...args: Parameters<HTTP['_performRequest']>): Promise<any>;
+    request: <T = unknown>(url: string, params?: RequestParams) => Promise<T>;
+    getMetaForResponse: (response: object) => Partial<Response> | undefined;
+    get: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    post: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    delete: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    put: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    /**
+     * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
+     * @param method
+     */
+    abortify: <T>(method: Method<T>) => (url: string, params?: RequestParams<boolean> | undefined) => {
+        promise: Promise<T>;
+        abort: () => void;
+    };
+}
+export {};

package/components/http/http.js

@@ -0,0 +1,192 @@
+import ExtendableError from 'es6-error';
+import { encodeURL, joinBaseURLAndPath } from '../global/url';
+/**
+ * @name HTTP
+ */
+const TOKEN_TYPE = 'Bearer';
+const STATUS_OK_IF_MORE_THAN = 200;
+const STATUS_BAD_IF_MORE_THAN = 300;
+export const defaultFetchConfig = {
+    headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+    },
+    credentials: 'same-origin'
+};
+export class HTTPError extends ExtendableError {
+    data;
+    status;
+    constructor(response, data = {}) {
+        super(`${response.status} ${response.statusText || ''}`);
+        this.data = data;
+        this.status = response.status;
+    }
+}
+export const CODE = {
+    UNAUTHORIZED: 401
+};
+function isRawBody(params) {
+    return params.sendRawBody === true;
+}
+export default class HTTP {
+    baseUrl = null;
+    _requestsMeta = new WeakMap();
+    fetchConfig;
+    requestToken;
+    shouldRefreshToken;
+    forceTokenUpdate;
+    constructor(auth, baseUrl, fetchConfig = {}) {
+        if (auth) {
+            this.setAuth(auth);
+        }
+        this.setBaseUrl(baseUrl);
+        const { headers, ...defaultConfig } = defaultFetchConfig;
+        this.fetchConfig = {
+            ...defaultConfig,
+            ...fetchConfig,
+            headers: {
+                ...headers,
+                ...fetchConfig.headers
+            }
+        };
+    }
+    setAuth = (auth) => {
+        this.requestToken = () => auth.requestToken();
+        this.shouldRefreshToken = auth.constructor.shouldRefreshToken;
+        this.forceTokenUpdate = () => auth.forceTokenUpdate();
+    };
+    setBaseUrl = (baseUrl) => {
+        this.baseUrl = baseUrl;
+    };
+    _fetch(...args) {
+        return fetch(...args);
+    }
+    _makeRequestUrl(url, queryObject) {
+        const urlWithQuery = encodeURL(url, queryObject);
+        return joinBaseURLAndPath(this.baseUrl, urlWithQuery);
+    }
+    _performRequest(url, token, params = {}) {
+        const { headers, body, query = {}, sendRawBody, ...fetchConfig } = params;
+        const combinedHeaders = {
+            ...this.fetchConfig.headers,
+            ...(token ? { Authorization: `${TOKEN_TYPE} ${token}` } : {}),
+            ...headers
+        };
+        Object.entries(combinedHeaders).forEach(([key, header]) => {
+            if (header === null || header === undefined) {
+                Reflect.deleteProperty(combinedHeaders, key);
+            }
+        });
+        let bodyToSend;
+        if (isRawBody(params)) {
+            bodyToSend = params.body;
+        }
+        else {
+            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
+        });
+    }
+    _storeRequestMeta(parsedResponse, rawResponse) {
+        const { headers, ok, redirected, status, statusText, type, url } = rawResponse;
+        this._requestsMeta.
+            set(parsedResponse, { headers, ok, redirected, status, statusText, type, url });
+    }
+    async _processResponse(response) {
+        const contentType = response.headers?.get('content-type');
+        const isJson = contentType && contentType.indexOf('application/json') !== -1;
+        if (response.status != null && HTTP._isErrorStatus(response.status)) {
+            let resJson;
+            try {
+                resJson = await (isJson ? response.json?.() : response.text?.());
+            }
+            catch (err) {
+                // noop
+            }
+            throw new HTTPError(response, resJson);
+        }
+        try {
+            const parsedResponse = await (isJson ? response.json?.() : { data: await response.text?.() });
+            this._storeRequestMeta(parsedResponse, response);
+            return parsedResponse;
+        }
+        catch (err) {
+            return response;
+        }
+    }
+    static _isErrorStatus(status) {
+        return status < STATUS_OK_IF_MORE_THAN || status >= STATUS_BAD_IF_MORE_THAN;
+    }
+    fetch = async (url, params = {}) => {
+        const { body, query = {}, ...fetchConfig } = params;
+        const response = await this._fetch(this._makeRequestUrl(url, query), {
+            ...fetchConfig,
+            headers: fetchConfig.headers,
+            body: body !== null && body !== undefined && body !== '' ? JSON.stringify(body) : body
+        });
+        return this._processResponse(response);
+    };
+    async authorizedFetch(...args) {
+        const response = await this._performRequest(...args);
+        return this._processResponse(response);
+    }
+    request = async (url, params) => {
+        let token = await this.requestToken?.();
+        let response = await this._performRequest(url, token, params);
+        try {
+            // Wait for result to catch an HTTP error
+            return await this._processResponse(response);
+        }
+        catch (error) {
+            if (!(error instanceof HTTPError)) {
+                throw error;
+            }
+            const shouldRefreshToken = error.data.error !== undefined
+                ? this.shouldRefreshToken?.(error.data.error)
+                : false;
+            if (shouldRefreshToken) {
+                token = await this.forceTokenUpdate?.();
+                response = await this._performRequest(url, token, params);
+                return this._processResponse(response);
+            }
+            throw error;
+        }
+    };
+    getMetaForResponse = (response) => this._requestsMeta.get(response);
+    get = (url, params) => (this.request(url, {
+        ...params,
+        method: 'GET'
+    }));
+    post = (url, params) => (this.request(url, {
+        ...params,
+        method: 'POST'
+    }));
+    delete = (url, params) => (this.request(url, {
+        ...params,
+        method: 'DELETE'
+    }));
+    put = (url, params) => (this.request(url, {
+        ...params,
+        method: 'PUT'
+    }));
+    /**
+     * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
+     * @param method
+     */
+    abortify = (method) => (...[url, params]) => {
+        const ctrl = new AbortController();
+        if (params && !('signal' in params)) {
+            params.signal = ctrl.signal;
+        }
+        return {
+            promise: method.call(this, url, params),
+            abort: () => ctrl.abort()
+        };
+    };
+}

package/components/http/http.mock.d.ts

@@ -0,0 +1,20 @@
+import HTTP, { FetchParams } from './http';
+export interface HTTPMockRequest {
+    url: string;
+    params: FetchParams;
+}
+export default class HTTPMock extends HTTP {
+    defaultResponse: unknown;
+    requests: HTTPMockRequest[];
+    responsesByUrlMap: Map<string | RegExp, unknown>;
+    constructor();
+    _fetch(url: string, params: RequestInit): {
+        status: number;
+        headers: Headers;
+        json: () => Promise<unknown>;
+    };
+    respondDefault(response: unknown): void;
+    respondForUrl(url: string | RegExp, response: unknown): void;
+    _getResponseForUrl(urlToMatch: string): unknown;
+    getRequestsByUrlPart(url: string): HTTPMockRequest[];
+}

package/components/http/http.mock.js

@@ -0,0 +1,52 @@
+import HTTP from './http';
+const authMock = {
+    requestToken: () => 'mock token',
+    shouldRefreshToken: () => false,
+    forceTokenUpdate: () => Promise.resolve(null)
+};
+export default class HTTPMock extends HTTP {
+    defaultResponse;
+    requests;
+    responsesByUrlMap;
+    constructor() {
+        super(authMock);
+        this.defaultResponse = null;
+        this.requests = [];
+        this.responsesByUrlMap = new Map();
+    }
+    _fetch(url, params) {
+        this.requests = [...this.requests, {
+                url,
+                params: {
+                    ...params,
+                    body: typeof params.body === 'string' ? JSON.parse(params.body) : params.body
+                }
+            }];
+        return {
+            status: 200,
+            headers: new Headers({ 'content-type': 'application/json' }),
+            json: () => Promise.resolve((this._getResponseForUrl(url) || this.defaultResponse))
+        };
+    }
+    respondDefault(response) {
+        this.defaultResponse = response;
+    }
+    respondForUrl(url, response) {
+        this.responsesByUrlMap.set(url, response);
+    }
+    _getResponseForUrl(urlToMatch) {
+        const urls = this.responsesByUrlMap.keys();
+        for (const url of urls) {
+            if (url === urlToMatch) {
+                return this.responsesByUrlMap.get(url);
+            }
+            if (url instanceof RegExp && url.test(urlToMatch)) {
+                return this.responsesByUrlMap.get(url);
+            }
+        }
+        return null;
+    }
+    getRequestsByUrlPart(url) {
+        return this.requests.filter(it => it.url.indexOf(url) !== -1);
+    }
+}

package/components/hub-source/hub-source.d.ts

@@ -0,0 +1,44 @@
+import Auth from '../auth/auth';
+import HTTP from '../http/http';
+export interface Item {
+    name: string;
+}
+export type Response<I extends Item, U extends string> = Partial<Record<U, I[]>> & {
+    total: number;
+};
+export interface HubSourceOptions {
+    searchMax: number;
+    searchSideThreshold: number;
+    queryFormatter: (query: string) => string;
+}
+/**
+ * HubSource is designed to speed up search requests for small installations.
+ * If there are less than "searchSideThreshold" items, it uses client-side filtering
+ * of cached results to greatly increase search speed. Useful for completion and
+ * select data source.
+ */
+export default class HubSource<I extends Item, U extends string> {
+    static TOP_ALL: number;
+    http: HTTP;
+    relativeUrl: U;
+    options: HubSourceOptions;
+    storedData: Response<I, U> | null;
+    isClientSideSearch: boolean | null;
+    filterFn: (item: I) => boolean;
+    constructor(auth: Auth, relativeUrl: U, options?: Partial<HubSourceOptions>);
+    makeRequest<T = unknown>(queryParams?: Record<string, unknown>): Promise<T>;
+    makeCachedRequest(params?: Record<string, unknown>): Promise<Response<I, U>>;
+    static mergeParams(params?: Record<string, unknown>, toMerge?: Record<string, unknown>): Record<string, unknown>;
+    checkIsClientSideSearch(res: Response<I, U>): boolean;
+    getDefaultFilterFn(query?: string): (it: I) => boolean;
+    formatQuery(query?: string): string;
+    static validateInputParams(params: Record<string, unknown>): void;
+    processResults(res: Response<I, U>): I[];
+    sideDetectionRequest(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    doClientSideSearch(params?: Record<string, unknown>): Promise<Response<I, U>>;
+    doServerSideSearch(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    getValueFromSuitableSource(query?: string, params?: Record<string, unknown>): Promise<Partial<Record<U, I[]>> & {
+        total: number;
+    }>;
+    get(query: string, params: Record<string, unknown>, filterFn?: (item: I) => boolean): Promise<I[]>;
+}

package/components/hub-source/hub-source.js

@@ -0,0 +1,107 @@
+const defaultOptions = {
+    searchMax: 20,
+    searchSideThreshold: 100,
+    queryFormatter: query => `${query} or ${query}*`
+};
+/**
+ * HubSource is designed to speed up search requests for small installations.
+ * If there are less than "searchSideThreshold" items, it uses client-side filtering
+ * of cached results to greatly increase search speed. Useful for completion and
+ * select data source.
+ */
+export default class HubSource {
+    static TOP_ALL = -1;
+    http;
+    relativeUrl;
+    options;
+    storedData;
+    isClientSideSearch;
+    filterFn;
+    constructor(auth, relativeUrl, options) {
+        this.http = auth.http;
+        this.relativeUrl = relativeUrl;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.storedData = null;
+        this.isClientSideSearch = null;
+        this.filterFn = () => true;
+    }
+    makeRequest(queryParams) {
+        return this.http.get(this.relativeUrl, { query: queryParams });
+    }
+    async makeCachedRequest(params) {
+        if (this.storedData) {
+            return this.storedData;
+        }
+        const res = await this.makeRequest(params);
+        this.storedData = res;
+        return res;
+    }
+    static mergeParams(params, toMerge) {
+        return Object.assign({}, params, toMerge);
+    }
+    checkIsClientSideSearch(res) {
+        return res.total <= this.options.searchSideThreshold;
+    }
+    getDefaultFilterFn(query) {
+        if (!query) {
+            return () => true;
+        }
+        return (it) => it.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    }
+    formatQuery(query) {
+        return query ? this.options.queryFormatter(query) : '';
+    }
+    static validateInputParams(params) {
+        if (params.top) {
+            throw new Error('HubSource: params.top should not be filled, configure "options.searchMax" instead');
+        }
+        if (params.query) {
+            throw new Error('HubSource: params.query should not be filled, configure "options.queryFormatter" instead');
+        }
+    }
+    processResults(res) {
+        const items = res[this.relativeUrl] || [];
+        if (this.isClientSideSearch) {
+            return items.
+                filter(it => this.filterFn(it)).
+                slice(0, this.options.searchMax);
+        }
+        return items;
+    }
+    async sideDetectionRequest(params, query) {
+        const res = await this.makeCachedRequest(HubSource.mergeParams(params, {
+            $top: this.options.searchSideThreshold
+        }));
+        this.isClientSideSearch = this.checkIsClientSideSearch(res);
+        if (!this.isClientSideSearch) {
+            return this.doServerSideSearch(params, query);
+        }
+        return res;
+    }
+    doClientSideSearch(params) {
+        return this.makeCachedRequest(HubSource.mergeParams(params, {
+            $top: this.constructor.TOP_ALL
+        }));
+    }
+    doServerSideSearch(params, query) {
+        return this.makeRequest(HubSource.mergeParams(params, {
+            query: this.formatQuery(query),
+            $top: this.options.searchMax
+        }));
+    }
+    getValueFromSuitableSource(query, params) {
+        if (this.isClientSideSearch === null) {
+            return this.sideDetectionRequest(params, query);
+        }
+        if (this.isClientSideSearch) {
+            return this.doClientSideSearch(params);
+        }
+        return this.doServerSideSearch(params, query);
+    }
+    async get(query, params, filterFn) {
+        HubSource.validateInputParams(params);
+        this.filterFn = filterFn || this.getDefaultFilterFn(query);
+        const res = await this.getValueFromSuitableSource(query, params);
+        return this.processResults(res);
+    }
+}

package/components/hub-source/hub-source__user.d.ts

@@ -0,0 +1,4 @@
+import Auth, { AuthUser } from '../auth/auth';
+import { UserCardUser } from '../user-card/card';
+export declare function convertUserForCard(hubUser: AuthUser, serverUri?: string): UserCardUser;
+export declare function createHubUserCardSource(auth: Auth, userId: string | number, fields?: string): () => Promise<UserCardUser>;

package/components/hub-source/hub-source__user.js

@@ -0,0 +1,20 @@
+import HTTP from '../http/http';
+const DEFAULT_FIELDS = 'id,name,login,banned,banReason,profile(email/email,avatar/url)';
+export function convertUserForCard(hubUser, serverUri = '') {
+    return {
+        name: hubUser.name,
+        login: hubUser.login,
+        banned: hubUser.banned,
+        banReason: hubUser.banReason,
+        email: hubUser.profile?.email?.email,
+        avatarUrl: hubUser.profile?.avatar?.url,
+        href: `${serverUri}users/${hubUser.id}`
+    };
+}
+export function createHubUserCardSource(auth, userId, fields = DEFAULT_FIELDS) {
+    const http = new HTTP(auth);
+    return async function getHubUser() {
+        const hubUser = await http.get(`${auth.config.serverUri}api/rest/users/${userId}?fields=${fields}`);
+        return convertUserForCard(hubUser, auth.config.serverUri);
+    };
+}

package/components/hub-source/hub-source__users-groups.d.ts

@@ -0,0 +1,24 @@
+import Auth, { AuthUser } from '../auth/auth';
+import HubSource, { Item } from './hub-source';
+export interface HubSourceUsersGroupsOptions {
+    searchMax: number;
+    searchSideThreshold: number;
+}
+export interface UserGroup extends Item {
+    id: string;
+    total?: number;
+    userCount: number;
+    iconUrl?: string;
+}
+export default class HubSourceUsersGroups {
+    auth: Auth;
+    options: HubSourceUsersGroupsOptions;
+    usersSource: HubSource<AuthUser, 'users'>;
+    groupsSource: HubSource<UserGroup, 'usergroups'>;
+    constructor(auth: Auth, options?: Partial<HubSourceUsersGroupsOptions>);
+    static wrapMultiwordQuery(query?: string): string | undefined;
+    createUsersFilterFn(query?: string): (it: AuthUser) => boolean;
+    getUsers(query?: string): Promise<AuthUser[]>;
+    getGroups(query?: string): Promise<UserGroup[]>;
+    getUserAndGroups(query?: string): Promise<[AuthUser[], UserGroup[]]>;
+}

package/components/hub-source/hub-source__users-groups.js

@@ -0,0 +1,53 @@
+import HubSource from './hub-source';
+const defaultOptions = {
+    searchMax: 20,
+    searchSideThreshold: 200
+};
+export default class HubSourceUsersGroups {
+    auth;
+    options;
+    usersSource;
+    groupsSource;
+    constructor(auth, options) {
+        this.auth = auth;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.usersSource = new HubSource(auth, 'users', {
+            searchMax: this.options.searchMax,
+            searchSideThreshold: this.options.searchSideThreshold,
+            queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+        });
+        this.groupsSource = new HubSource(auth, 'usergroups', {
+            searchMax: this.options.searchMax,
+            searchSideThreshold: this.options.searchSideThreshold
+        });
+    }
+    static wrapMultiwordQuery(query) {
+        if (query && query.indexOf(' ') !== -1) {
+            return `{${query}}`;
+        }
+        return query;
+    }
+    createUsersFilterFn(query) {
+        if (!query) {
+            return () => true;
+        }
+        const normalizedQuery = query.toLowerCase();
+        return (it) => (it.name.toLowerCase().indexOf(normalizedQuery) !== -1 ||
+            it.login.toLowerCase().indexOf(normalizedQuery) !== -1);
+    }
+    getUsers(query = '') {
+        return this.usersSource.get(query, {
+            fields: 'id,name,login,total,profile/avatar/url',
+            orderBy: 'name'
+        }, this.createUsersFilterFn(query));
+    }
+    getGroups(query = '') {
+        return this.groupsSource.get(query, {
+            fields: 'id,name,total,userCount,iconUrl',
+            orderBy: 'name'
+        });
+    }
+    getUserAndGroups(query) {
+        return Promise.all([this.getUsers(query), this.getGroups(query)]);
+    }
+}

package/components/i18n/README.md

@@ -0,0 +1,46 @@
+This is localisation layer, that allows to translate the app into different languages.
+
+All messages should be stored in a messages.json, using that format https://www.i18next.com/misc/json-format#i18next-json-v4
+
+### How to use
+
+1. Using your project i18n tooling, construct an object with localised messages, like:
+```
+// You can use https://ttag.js.org/ for example:
+const localised = {
+  login: t`Log in`,
+  ...
+}
+```
+
+2. Pass it to i18n singleton, using `setTranslations`. That would provide localisation to non-react components, like Auth.
+
+```
+// Your messages object should have localised strings at that moment
+const localised = {
+  login: 'Inloggen',
+  ...
+}
+
+setTranslations(localised);
+```
+
+3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.  
+
+```
+  <I18nContextHolder messages={localised}>
+    <App />
+  </I18nContextHolder>
+```  
+
+
+
+### Utilities
+
+There is some ways to automate strings extraction from messages.json. You can do:
+
+```
+npx i18next-conv -s messages.json -t messages.pot -l en --ctxSeparator "|" --compatibilityJSON v4
+```
+
+And get a .pot file, which you can merge with your other sources

package/components/i18n/i18n-context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type Messages } from './i18n';
+export interface I18nContextProps {
+    translate(key: keyof Messages): string;
+    messages: Messages;
+}
+export declare const I18nContext: React.Context<I18nContextProps>;
+interface I18nContextHolderProps {
+    messages: Messages;
+    children?: React.ReactNode;
+}
+export declare const I18nContextHolder: React.FC<I18nContextHolderProps>;
+export {};

package/components/i18n/i18n-context.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { getTranslations, setTranslations, translate } from './i18n';
+export const I18nContext = React.createContext({
+    messages: getTranslations(),
+    translate
+});
+export const I18nContextHolder = ({ children, messages }) => {
+    useEffect(() => {
+        setTranslations(messages);
+    }, [messages]);
+    return (<I18nContext.Provider value={{ messages, translate }}>
+      {children}
+    </I18nContext.Provider>);
+};