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

package/components/header/header.examples.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import hubLogo from '@jetbrains/logos/hub/hub.svg';
-import hubTextLogo from '@jetbrains/logos/hub/hub-text.svg';
-import addIcon from '@jetbrains/icons/add-20px';
-import giftIcon from '@jetbrains/icons/gift-20px';
-import helpIcon from '@jetbrains/icons/help-20px';
-import searchIcon from '@jetbrains/icons/search-20px';
-import settingsIcon from '@jetbrains/icons/settings-20px';
-
-import reactDecorator from '../../.storybook/react-decorator';
-import hubConfig from '../../.storybook/hub-config';
-
-import Link from '@jetbrains/ring-ui/components/link/link';
-
-
-import DropdownMenu from '@jetbrains/ring-ui/components/dropdown-menu/dropdown-menu';
-import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
-
-import Theme from '@jetbrains/ring-ui/components/global/theme';
-
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-
-import Header from '@jetbrains/ring-ui/components/header/header';
-import Logo from '@jetbrains/ring-ui/components/header/logo';
-
-import Tray from '@jetbrains/ring-ui/components/header/tray';
-import TrayIcon from '@jetbrains/ring-ui/components/header/tray-icon';
-import SmartServices from '@jetbrains/ring-ui/components/header/smart-services';
-import SmartProfile from '@jetbrains/ring-ui/components/header/smart-profile';
-
-const blockAuth = window.location.search.includes('block-auth');
-
-export default {
-  title: 'Components/Header',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Header,
-    framework: 'react',
-
-    storyStyles: `
-<style>
-  body {
-    margin: 0 !important;
-  }
-</style>`
-  }
-};
-
-export const header = ({isCompact, ...args}) => {
-  class HeaderDemo extends React.Component {
-    render() {
-      const auth = new Auth(hubConfig);
-      if (!blockAuth) {
-        auth.setAuthDialogService(showAuthDialog);
-        auth.init();
-      }
-
-      const Comp = props => <a {...props}>This is component</a>;
-      return (
-        <Header {...args} className={isCompact ? 'compactHeader' : ''}>
-          <a title="Hub" href="/">
-            {isCompact
-              ? <Logo className="compactLogo" glyph={hubTextLogo} size={Logo.Size.Size96}/>
-              : <Logo glyph={hubLogo} size={Logo.Size.Size48}/>
-            }
-          </a>
-          <Link active href="#">
-            Users
-          </Link>
-          <Link href="#">Groups</Link>
-          <Link href="#">Spaces</Link>
-          <Link href="#">Services</Link>
-          <Tray>
-            <TrayIcon primary title="Create issue" icon={addIcon}/>
-            <TrayIcon title="Help" icon={helpIcon}/>
-            <TrayIcon title="What's new" icon={giftIcon}/>
-            <TrayIcon title="Search" icon={searchIcon}/>
-            <DropdownMenu
-              data={[{label: 'Test'}, {label: 'Test2'}]}
-              anchor={({active, pinned, ...ariaProps}) => (
-                <TrayIcon title="Settings" active={active} icon={settingsIcon} {...ariaProps}/>
-              )}
-              menuProps={{top: -12}}
-            />
-            <SmartServices auth={auth}/>
-            <SmartProfile auth={auth} hasUpdates LinkComponent={Comp}/>
-          </Tray>
-        </Header>
-      );
-    }
-  }
-
-  return <HeaderDemo/>;
-};
-
-header.storyName = 'Header';
-header.notes = 'See available presentation options in knobs panel';
-header.args = {isCompact: false, theme: Theme.DARK};
-
-header.parameters = {
-  storyStyles: `
-<style>
-body {
-  margin: 0 !important;
-}
-
-.compactHeader.compactHeader {
-  height: 40px;
-}
-
-.compactLogo.compactLogo {
-  color: #fff;
-  position: relative;
-  top: -2px;
-}
-</style>`
-};

package/components/header/header.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import Header from './header';
-
-describe('Header', () => {
-  const mountHeader = props => mount(<Header {...props}/>);
-  const getHeaderDiv = props => mountHeader(props).find('header');
-
-  it('should create component', () => {
-    mountHeader().type().should.equal(Header.type);
-  });
-
-  it('should wrap children with header', () => {
-    getHeaderDiv().should.exist;
-  });
-
-  it('should use passed className', () => {
-    getHeaderDiv({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/heading/heading.examples.js

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Heading, {H1, H2, H3, H4} from '@jetbrains/ring-ui/components/heading/heading';
-
-const lorem = (
-  <div>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-  </div>
-);
-
-export default {
-  title: 'Components/Heading',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component for rendering h1-h5 tags.'
-  }
-};
-
-export const basic = () => (
-  <div>
-    <Heading level={Heading.Levels.H1}>Heading 1</Heading>
-    {lorem}
-    <H1 caps>Heading 1 caps</H1>
-    {lorem}
-    <H2>Heading 2</H2>
-    {lorem}
-    <H3>Heading 3</H3>
-    {lorem}
-    <H4>Heading 4</H4>
-    {lorem}
-  </div>
-);
-
-basic.storyName = 'Heading';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  h3 + div::after,
-  h4 + div::after {
-    content: 'Heading';
-    display: block;
-    position: absolute;
-    color: #DDD;
-    z-index: -1;
-  }
-
-  h3 + div::before,
-  h4 + div::before {
-    content: 'Lorem ipsum';
-    display: block;
-    position: absolute;
-    color: #CCC;
-    z-index: -1;
-    transform: translateY(-100%);
-  }
-</style>`
-};

package/components/heading/heading.test.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Heading, {H2} from './heading';
-
-describe('Heading', () => {
-  const shallowHeading = props => shallow(<Heading {...props}/>);
-  const mountHeading = props => mount(<Heading {...props}/>);
-
-  it('should create component', () => {
-    mountHeading().should.have.type(Heading.type);
-  });
-
-  it('should wrap children with h1 by default', () => {
-    shallowHeading().should.have.tagName('h1');
-  });
-
-  it('should accept level prop', () => {
-    shallowHeading({level: Heading.Levels.H3}).should.have.tagName('h3');
-  });
-
-  it('should export helpers', () => {
-    shallow(<H2/>).should.have.tagName('h2');
-  });
-
-  it('should use passed className', () => {
-    shallowHeading({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/http/http.examples.js

@@ -1,34 +0,0 @@
-import hubConfig from '../../.storybook/hub-config';
-
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-
-import HTTP from '@jetbrains/ring-ui/components/http/http';
-
-export default {
-  title: 'Utilities/HTTP service',
-
-  parameters: {
-    notes: 'Provides a way to perform authorized network requests.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  const node = document.createElement('div');
-  node.innerHTML = '<div id="output">Fetching user using HTTP service...</div>';
-
-  const auth = new Auth(hubConfig);
-  const http = new HTTP(auth);
-
-  (async function initializeExample() {
-    await auth.init();
-
-    const user = await http.get(`${hubConfig.serverUri}/api/rest/users/me?fields=name,login`);
-
-    node.querySelector('#output').innerText = JSON.stringify(user);
-  }());
-
-  return node;
-};
-
-basic.storyName = 'HTTP service';

package/components/http/http.test.js

@@ -1,187 +0,0 @@
-import HTTP, {defaultFetchConfig} from './http';
-
-const OK = 200;
-const METHOD_NOT_ALLOWED = 405;
-
-describe('HTTP', () => {
-  const FAKE_TOKEN = 'fake-token';
-  let fakeAuth;
-  let http;
-  let fetchResult;
-
-  function mockFetch(httpInstance) {
-    sandbox.stub(httpInstance, '_fetch').resolves({
-      status: OK,
-      headers: new Headers({'content-type': 'application/json'}),
-      json: () => fetchResult
-    });
-  }
-
-  beforeEach(function beforeEach() {
-    fakeAuth = {
-      constructor: {
-        shouldRefreshToken: sandbox.stub().returns(false)
-      },
-      requestToken: sandbox.stub().returns(FAKE_TOKEN),
-      forceTokenUpdate: sandbox.stub()
-    };
-
-    fetchResult = {
-      isResponseOk: true
-    };
-
-    http = new HTTP(fakeAuth);
-
-    mockFetch(http);
-  });
-
-  it('should export http service', () => http.should.exist);
-
-  it('should read token and perform authorized fetch', async () => {
-    await http.request('testurl', {foo: 'bar'});
-
-    fakeAuth.requestToken.should.have.been.called;
-
-    http._fetch.should.have.been.calledWith('testurl', {
-      foo: 'bar',
-      headers: {
-        ...defaultFetchConfig.headers,
-        Authorization: `Bearer ${FAKE_TOKEN}`
-      },
-      credentials: 'same-origin',
-      body: undefined
-    });
-  });
-
-  it('should perform unauthorized fetch', async () => {
-    await http.fetch('testurl', {foo: 'bar'});
-
-    fakeAuth.requestToken.should.not.have.been.called;
-
-    http._fetch.should.have.been.calledWith('testurl', {
-      foo: 'bar',
-      body: undefined
-    });
-  });
-
-  it('should perform request and return result', async () => {
-    const res = await http.request('testurl');
-    res.should.equal(fetchResult);
-  });
-
-  it('should perform request and return text result if no "application/json" header', async () => {
-    http._fetch.resolves({
-      status: OK,
-      headers: new Headers({'content-type': 'text/html'}),
-      json: () => sandbox.spy(),
-      text: () => 'some text'
-    });
-
-    const res = await http.request('testurl');
-    res.should.deep.equal({data: 'some text'});
-  });
-
-  it('should allow to get meta information of response', async () => {
-    const res = await http.request('testurl');
-
-    const meta = http.getMetaForResponse(res);
-    meta.status.should.equal(OK);
-    meta.headers.get('content-type').should.equal('application/json');
-  });
-
-  it('should allow to get meta information of string response', async () => {
-    http._fetch.resolves({
-      status: OK,
-      headers: new Headers({'content-type': 'text/html'}),
-      json: () => sandbox.spy(),
-      text: () => 'some text'
-    });
-    const res = await http.request('testurl');
-
-    const meta = http.getMetaForResponse(res);
-    meta.status.should.equal(OK);
-    meta.headers.get('content-type').should.equal('text/html');
-  });
-
-
-  it('should encode query params in url', async () => {
-    await http.request('http://testurl', {query: {
-      foo: 'bar',
-      test: ['a', 'b']
-    }});
-
-    http._fetch.should.have.been.
-      calledWith('http://testurl?foo=bar&test=a,b', sinon.match(Object));
-  });
-
-  it('should support base url setting', async () => {
-    http.setBaseUrl('http://test');
-    await http.request('/foo');
-    http._fetch.should.have.been.calledWith('http://test/foo', sinon.match(Object));
-  });
-
-  it('should perform request convert "body" as object into string', async () => {
-    await http.request('testurl', {
-      method: 'POST',
-      body: {foo: 'bar'}
-    });
-
-    http._fetch.should.have.been.calledWithMatch('testurl', {
-      method: 'POST',
-      body: '{"foo":"bar"}'
-    });
-  });
-
-  it('should not refresh token if server responds OK', async () => {
-    await http.request('testurl');
-    fakeAuth.forceTokenUpdate.should.not.have.been.called;
-  });
-
-  it('should throw if response status is not OK', async () => {
-    http._fetch.resolves({
-      status: METHOD_NOT_ALLOWED,
-      json: () => fetchResult
-    });
-
-    const onError = sandbox.spy();
-    await http.request('testurl').catch(onError);
-
-    onError.should.have.been.called;
-  });
-
-  it('should refresh token and request again if invalid token error returned', async () => {
-    fakeAuth.constructor.shouldRefreshToken.returns(true);
-
-    http._fetch.
-      onFirstCall().resolves({
-        status: METHOD_NOT_ALLOWED,
-        json: () => ({error: 'invalid_token'}),
-        headers: new Headers({'content-type': 'application/json'})
-      }).
-      onSecondCall().resolves({
-        status: OK,
-        json: () => fetchResult,
-        headers: new Headers({'content-type': 'application/json'})
-      });
-
-    const res = await http.request('testurl');
-
-    fakeAuth.forceTokenUpdate.should.have.been.called;
-
-    res.should.equal(fetchResult);
-  });
-
-  it('"get" method should call request with GET type', async () => {
-    sandbox.stub(http, 'request');
-    await http.get('testurl');
-
-    http.request.should.have.been.calledWith('testurl', {method: 'GET'});
-  });
-
-  it('"post" method should call request with POST type', async () => {
-    sandbox.stub(http, 'request');
-    await http.post('testurl', {body: {foo: 'bar'}});
-
-    http.request.should.have.been.calledWith('testurl', {method: 'POST', body: {foo: 'bar'}});
-  });
-});

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

@@ -1,200 +0,0 @@
-import HubSource from './hub-source';
-
-describe('Hub Source', () => {
-  let httpMock;
-  let fakeAuth;
-  beforeEach(() => {
-    httpMock = {
-      get: sandbox.stub().returns(Promise.resolve({}))
-    };
-    fakeAuth = {
-      requestToken: sandbox.stub().returns(Promise.resolve('testToken')),
-      http: httpMock
-    };
-  });
-
-  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 = {};
-
-    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'}]});
-
-    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'}]});
-
-    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({});
-
-    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({});
-    source.isClientSideSearch.should.be.true;
-  });
-
-  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({});
-    source.isClientSideSearch.should.be.false;
-  });
-
-  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');
-    });
-  });
-});