@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/http/http.ts

@@ -0,0 +1,237 @@
+import ExtendableError from 'es6-error';
+
+import Auth from '../auth/auth';
+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: RequestInit = {
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json'
+  },
+  credentials: 'same-origin'
+};
+
+export interface HTTPErrorData {
+  error?: string
+}
+export class HTTPError extends ExtendableError {
+  data: HTTPErrorData;
+  status: number | undefined;
+  constructor(response: Partial<Response>, data: HTTPErrorData = {}) {
+    super(`${response.status} ${response.statusText || ''}`);
+    this.data = data;
+    this.status = response.status;
+  }
+}
+
+export const CODE = {
+  UNAUTHORIZED: 401
+};
+
+export interface FetchParams<T = unknown> extends Omit<RequestInit, 'body'> {
+  body?: T
+  query?: Record<string, unknown> | undefined
+}
+
+export type RequestParams =
+  | FetchParams & {
+    sendRawBody?: false
+  }
+  | FetchParams<BodyInit | null> & {
+    sendRawBody: true
+  }
+
+export interface HTTPAuth {
+  requestToken(): Promise<string | null> | string | null
+  forceTokenUpdate(): Promise<string | null>
+}
+
+export default class HTTP implements Partial<HTTPAuth> {
+  baseUrl: string | null | undefined = null;
+  _requestsMeta = new 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 = {}) {
+    if (auth) {
+      this.setAuth(auth);
+    }
+    this.setBaseUrl(baseUrl);
+
+    const {headers, ...defaultConfig} = defaultFetchConfig;
+
+    this.fetchConfig = {
+      ...defaultConfig,
+      ...fetchConfig,
+      headers: {
+        ...headers,
+        ...fetchConfig.headers
+      }
+    };
+  }
+
+  setAuth = (auth: HTTPAuth) => {
+    this.requestToken = () => auth.requestToken();
+    this.shouldRefreshToken = (auth.constructor as typeof Auth).shouldRefreshToken;
+    this.forceTokenUpdate = () => auth.forceTokenUpdate();
+  };
+
+  setBaseUrl = (baseUrl: string | null | undefined) => {
+    this.baseUrl = baseUrl;
+  };
+
+  _fetch(...args: Parameters<typeof fetch>): Promise<Response> | Partial<Response> {
+    return fetch(...args);
+  }
+
+  private _makeRequestUrl(url: string, queryObject: Record<string, unknown>) {
+    const urlWithQuery = encodeURL(url, queryObject);
+    return joinBaseURLAndPath(this.baseUrl, urlWithQuery);
+  }
+
+  private _performRequest(
+    url: string,
+    token?: string | null | boolean,
+    params: RequestParams = {}
+  ) {
+    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: BodyInit | null | undefined;
+    if (params.sendRawBody) {
+      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
+      }
+    );
+  }
+
+  private _storeRequestMeta(parsedResponse: object, rawResponse: Partial<Response>) {
+    const {headers, ok, redirected, status, statusText, type, url} = rawResponse;
+    this._requestsMeta.
+      set(parsedResponse, {headers, ok, redirected, status, statusText, type, url});
+  }
+
+  private async _processResponse(response: Partial<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;
+    }
+  }
+
+  private static _isErrorStatus(status: number) {
+    return status < STATUS_OK_IF_MORE_THAN || status >= STATUS_BAD_IF_MORE_THAN;
+  }
+
+  fetch = async (url: string, params: FetchParams = {}) => {
+    const {body, query = {}, ...fetchConfig} = params;
+
+    const response = await this._fetch(
+      this._makeRequestUrl(url, query),
+      {
+        ...fetchConfig,
+        body: body !== null && body !== undefined && body !== '' ? JSON.stringify(body) : body
+      }
+    );
+
+    return this._processResponse(response);
+  };
+
+  async authorizedFetch(...args: Parameters<HTTP['_performRequest']>) {
+    const response = await this._performRequest(...args);
+
+    return this._processResponse(response);
+  }
+
+  request = async (url: string, params?: RequestParams) => {
+    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: object) => this._requestsMeta.get(response);
+
+  get = (url: string, params?: RequestParams) => (
+    this.request(url, {
+      method: 'GET',
+      ...params
+    })
+  );
+
+  post = (url: string, params?: RequestParams) => (
+    this.request(url, {
+      method: 'POST',
+      ...params
+    })
+  );
+}

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

@@ -0,0 +1,200 @@
+import HTTP from '../http/http';
+import Auth from '../auth/auth';
+
+import HubSource from './hub-source';
+
+describe('Hub Source', () => {
+  let httpMock: HTTP;
+  let fakeAuth: Auth;
+  beforeEach(() => {
+    const get: HTTP['get'] = sandbox.stub().returns(Promise.resolve({}));
+    httpMock = {get} as HTTP;
+    const requestToken: Auth['requestToken'] = sandbox.stub().returns(Promise.resolve('testToken'));
+    fakeAuth = {requestToken, http: httpMock} as Auth;
+  });
+
+  it('Should initialize', () => {
+    const source = new HubSource(fakeAuth, '');
+    source.should.exist;
+  });
+
+  it('Should merge objects', () => {
+    HubSource.mergeParams({foo: 'bar'}, {test: 'foo'}).
+      should.be.deep.equal({foo: 'bar', test: 'foo'});
+  });
+
+  it('Should make request', async () => {
+    const source = new HubSource(fakeAuth, 'test');
+    await source.makeRequest({test: 'foo'});
+    httpMock.get.should.have.been.calledWith('test', {query: {test: 'foo'}});
+  });
+
+  it('Should not make cached request if data is already requested', async () => {
+    const source = new HubSource(fakeAuth, 'test');
+    source.storedData = {total: 0};
+
+    await source.makeCachedRequest({test: 'foo'});
+    httpMock.get.should.not.have.been.called;
+  });
+
+  it('Should detect client-side threshold', () => {
+    const source = new HubSource(fakeAuth, 'test', {searchSideThreshold: 142});
+    source.checkIsClientSideSearch({total: 143}).should.be.false;
+  });
+
+  it('Should detect server-side threshold', () => {
+    const source = new HubSource(fakeAuth, 'test', {searchSideThreshold: 142});
+    source.checkIsClientSideSearch({total: 142}).should.be.true;
+  });
+
+  it('Should provide filter by name function by default', () => {
+    const source = new HubSource(fakeAuth, 'test');
+    const defaultFilterFn = source.getDefaultFilterFn('testQuery');
+
+    defaultFilterFn({name: 'testQuery name'}).should.be.true;
+  });
+
+  it('Should filter on client-side while processing results if client-side is used', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.isClientSideSearch = true;
+    source.filterFn = source.getDefaultFilterFn('testQuery');
+
+    const res = source.
+      processResults({testItems: [{name: 'not test query'}, {name: 'contain testQuery'}], total: 2});
+
+    res.should.deep.equal([{name: 'contain testQuery'}]);
+  });
+
+  it('Should not filter on client-side if server-side is used', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.isClientSideSearch = false;
+    source.filterFn = source.getDefaultFilterFn('testQuery');
+
+    const res = source.
+      processResults({testItems: [{name: 'not test query'}, {name: 'contain testQuery'}], total: 2});
+
+    res.should.deep.equal([{name: 'not test query'}, {name: 'contain testQuery'}]);
+  });
+
+  it('Should return empty array if result field is not presented (no results)', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.isClientSideSearch = false;
+    source.filterFn = source.getDefaultFilterFn('testQuery');
+
+    const res = source.processResults({total: 0});
+
+    res.should.deep.equal([]);
+  });
+
+  it('Should detect client-side filtering if total is smaller than threshold', async () => {
+    httpMock.get = sandbox.stub().
+      returns(Promise.resolve({total: 10, testItems: []}));
+
+    const source = new HubSource(fakeAuth, 'testItems', {searchSideThreshold: 15});
+
+    await source.sideDetectionRequest({});
+    true.should.equal(source.isClientSideSearch);
+  });
+
+  it('Should detect server-side filtering if total is smaller than threshold', async () => {
+    httpMock.get = sandbox.stub().
+      returns(Promise.resolve({total: 20, testItems: []}));
+
+    const source = new HubSource(fakeAuth, 'testItems', {searchSideThreshold: 15});
+
+    await source.sideDetectionRequest({});
+    false.should.equal(source.isClientSideSearch);
+  });
+
+  it('Should do cached request and filter on client-side', async () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.makeCachedRequest = sandbox.stub().returns(Promise.resolve({
+      total: 20,
+      testItems: []
+    }));
+
+
+    await source.doClientSideSearch();
+    source.makeCachedRequest.should.have.been.calledWith({$top: -1});
+  });
+
+  it('Should do not cached request to server-side', async () => {
+    const source = new HubSource(fakeAuth, 'testItems', {searchMax: 142});
+    source.makeRequest = sandbox.stub().returns(Promise.resolve({
+      total: 20,
+      testItems: []
+    }));
+
+
+    await source.doServerSideSearch({}, 'test-query');
+    source.makeRequest.should.have.been.calledWith({
+      $top: 142,
+      query: sinon.match.string
+    });
+  });
+
+  it('Should produce empty query if no filter string provided', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.formatQuery('').should.equal('');
+  });
+
+  it('Should construct default query', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.formatQuery('foo').should.equal('foo or foo*');
+  });
+
+  it('Should construct multi-word query', () => {
+    const source = new HubSource(fakeAuth, 'testItems');
+    source.formatQuery('foo bar').should.equal('foo bar or foo bar*');
+  });
+
+  it('Should support custom queryFormatter', () => {
+    const source = new HubSource(fakeAuth, 'testItems', {
+      queryFormatter: query => `${query} custom format`
+    });
+    source.formatQuery('foo').should.equal('foo custom format');
+  });
+
+  describe('Public interface', () => {
+    it('Should store filterFn', () => {
+      const filterFn = sandbox.spy();
+      const source = new HubSource(fakeAuth, 'testItems');
+
+      source.get('testQuery', {}, filterFn);
+
+      source.filterFn.should.be.equal(filterFn);
+    });
+
+    it('Should do side detection request first', () => {
+      const source = new HubSource(fakeAuth, 'testItems');
+      source.sideDetectionRequest = sandbox.stub().
+        returns(Promise.resolve({total: 20, testItems: []}));
+
+      source.get('testQuery', {testParams: 'test'});
+
+      source.sideDetectionRequest.should.have.been.calledWith({testParams: 'test'}, 'testQuery');
+    });
+
+    it('Should do client-side filtering if previously detected', () => {
+      const source = new HubSource(fakeAuth, 'testItems');
+      source.doClientSideSearch = sandbox.stub().
+        returns(Promise.resolve({total: 20, testItems: []}));
+      source.isClientSideSearch = true;
+
+      source.get('testQuery', {testParams: 'test'});
+
+      source.doClientSideSearch.should.have.been.calledWith({testParams: 'test'});
+    });
+
+    it('Should do server-side filtering if previously detected', () => {
+      const source = new HubSource(fakeAuth, 'testItems');
+      source.doServerSideSearch = sandbox.stub().
+        returns(Promise.resolve({total: 20, testItems: []}));
+      source.isClientSideSearch = false;
+
+      source.get('testQuery', {testParams: 'test'});
+
+      source.doServerSideSearch.should.have.been.calledWith({testParams: 'test'}, 'testQuery');
+    });
+  });
+});

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

@@ -0,0 +1,148 @@
+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
+}
+
+const defaultOptions: HubSourceOptions = {
+  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<I extends Item, U extends string> {
+  static TOP_ALL = -1;
+  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>) {
+    this.http = auth.http;
+    this.relativeUrl = relativeUrl;
+    this.options = Object.assign({}, defaultOptions, options);
+
+
+    this.storedData = null;
+    this.isClientSideSearch = null;
+    this.filterFn = () => true;
+  }
+
+  makeRequest(queryParams?: Record<string, unknown>) {
+    return this.http.get(this.relativeUrl, {query: queryParams});
+  }
+
+  async makeCachedRequest(params?: Record<string, unknown>) {
+    if (this.storedData) {
+      return this.storedData;
+    }
+    const res = await this.makeRequest(params);
+    this.storedData = res;
+    return res;
+  }
+
+  static mergeParams(params?: Record<string, unknown>, toMerge?: Record<string, unknown>) {
+    return Object.assign({}, params, toMerge);
+  }
+
+  checkIsClientSideSearch(res: Response<I, U>) {
+    return res.total <= this.options.searchSideThreshold;
+  }
+
+  getDefaultFilterFn(query?: string) {
+    if (!query) {
+      return () => true;
+    }
+    return (it: I) => it.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  }
+
+  formatQuery(query?: string) {
+    return query ? this.options.queryFormatter(query) : '';
+  }
+
+  static validateInputParams(params: Record<string, unknown>) {
+    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: Response<I, U>) {
+    const items: I[] = res[this.relativeUrl] || [];
+
+    if (this.isClientSideSearch) {
+      return items.
+        filter(it => this.filterFn(it)).
+        slice(0, this.options.searchMax);
+    }
+    return items;
+  }
+
+  async sideDetectionRequest(params?: Record<string, unknown>, query?: string) {
+    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?: Record<string, unknown>) {
+    return this.makeCachedRequest(HubSource.mergeParams(params, {
+      $top: (this.constructor as typeof HubSource).TOP_ALL
+    }));
+  }
+
+  doServerSideSearch(params?: Record<string, unknown>, query?: string) {
+    return this.makeRequest(HubSource.mergeParams(params, {
+      query: this.formatQuery(query),
+      $top: this.options.searchMax
+    }));
+  }
+
+  getValueFromSuitableSource(query?: string, params?: Record<string, unknown>) {
+    if (this.isClientSideSearch === null) {
+      return this.sideDetectionRequest(params, query);
+    }
+
+    if (this.isClientSideSearch) {
+      return this.doClientSideSearch(params);
+    }
+
+    return this.doServerSideSearch(params, query);
+  }
+
+  async get(query: string, params: Record<string, unknown>, filterFn?: (item: I) => boolean) {
+    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.ts

@@ -0,0 +1,33 @@
+import HTTP from '../http/http';
+import Auth, {AuthUser} from '../auth/auth';
+import {UserCardUser} from '../user-card/card';
+
+const DEFAULT_FIELDS = 'id,name,login,banned,banReason,profile(email/email,avatar/url)';
+
+export function convertUserForCard(hubUser: AuthUser, serverUri = ''): UserCardUser {
+  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: Auth,
+  userId: string | number,
+  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.test.ts

@@ -0,0 +1,91 @@
+import HTTP from '../http/http';
+import Auth from '../auth/auth';
+
+import HubSourceUsersGroups from './hub-source__users-groups';
+
+const SEARCH_THRESHOLD = 123;
+
+describe('Hub Users Groups Source', () => {
+  let httpMock: HTTP;
+  let fakeAuth: Auth;
+
+  beforeEach(() => {
+    const get: HTTP['get'] = sandbox.stub().returns(Promise.resolve({}));
+    httpMock = {get} as HTTP;
+    const requestToken: Auth['requestToken'] = sandbox.stub().returns(Promise.resolve('testToken'));
+    fakeAuth = {requestToken, http: httpMock} as Auth;
+  });
+
+  it('Should pass searchSideThreshold to HubSource', () => {
+    const source = new HubSourceUsersGroups(fakeAuth, {searchSideThreshold: SEARCH_THRESHOLD});
+    source.usersSource.options.searchSideThreshold.should.equal(SEARCH_THRESHOLD);
+    source.groupsSource.options.searchSideThreshold.should.equal(SEARCH_THRESHOLD);
+  });
+
+  it('Should make request for users', async () => {
+    const source = new HubSourceUsersGroups(fakeAuth);
+    sandbox.stub(source.usersSource, 'get').returns(Promise.resolve([]));
+
+    await source.getUsers();
+    source.usersSource.get.should.have.been.calledWith('', {
+      fields: 'id,name,login,total,profile/avatar/url',
+      orderBy: 'name'
+    });
+  });
+
+  it('Should pass query for users', async () => {
+    const source = new HubSourceUsersGroups(fakeAuth);
+    sandbox.stub(source.usersSource, 'get').returns(Promise.resolve([]));
+
+    await source.getUsers('nam');
+    source.usersSource.get.should.have.been.calledWith('nam', {
+      fields: sinon.match.string,
+      orderBy: sinon.match.string
+    });
+  });
+
+  it('Should construct multi-word query for users', () => {
+    const source = new HubSourceUsersGroups(fakeAuth);
+
+    const formatted = source.usersSource.options.queryFormatter('two words');
+    formatted.should.equal('nameStartsWith: {two words} or loginStartsWith: {two words}');
+  });
+
+  it('Should filter user by login on the client side', async () => {
+    const source = new HubSourceUsersGroups(fakeAuth);
+    const user1 = {name: 'some-name1', login: 'login1'};
+    sandbox.stub(source.usersSource, 'makeRequest').returns(Promise.resolve({
+      total: 2,
+      users: [
+        user1,
+        {name: 'some-name2', login: 'login2'}
+      ]
+    }));
+
+    const res = await source.getUsers('login1');
+    res.length.should.equal(1);
+    res[0].should.equal(user1);
+  });
+
+  it('Should make request for groups', async () => {
+    const source = new HubSourceUsersGroups(fakeAuth);
+    sandbox.stub(source.groupsSource, 'get').returns(Promise.resolve([]));
+
+    await source.getGroups();
+    source.groupsSource.get.should.have.been.calledWith('', {
+      fields: 'id,name,total,userCount,iconUrl',
+      orderBy: 'name'
+    });
+  });
+
+  it('Should cache request for groups', async () => {
+    httpMock.get = sandbox.stub().
+      returns(Promise.resolve({total: 1, usergroups: []}));
+
+    const source = new HubSourceUsersGroups(fakeAuth);
+    await source.getGroups();
+    source.getGroups();
+    source.getGroups();
+    httpMock.get.should.have.been.calledOnce;
+  });
+});