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

package/components/alert-service/alert-service.test.ts

@@ -0,0 +1,90 @@
+import * as Sinon from 'sinon';
+
+import Alert from '../alert/alert';
+
+import alert from './alert-service';
+
+const SMALL_TICK = 1000;
+const BIG_TICK = 2000;
+const ALERT_SHOW_TIME = 100;
+
+describe('Alert Service', () => {
+  let alertKey: string | number;
+  let clock: Sinon.SinonFakeTimers;
+
+  beforeEach(() => {
+    clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+  });
+
+  afterEach(() => {
+    alert.setDefaultTimeout(0);
+    alert.removeWithoutAnimation(alertKey);
+  });
+
+  it('Should show alert', () => {
+    alertKey = alert.message('foo');
+    const alertItem = alert._getShowingAlerts()[0];
+
+    'foo'.should.equal(alertItem.message);
+    Alert.Type.MESSAGE.should.equal(alertItem.type);
+    (0).should.equal(alertItem.timeout);
+    false.should.equal(alertItem.isClosing);
+  });
+
+  it('Should show message', () => {
+    alertKey = alert.message('foo');
+    Alert.Type.MESSAGE.should.equal(alert._getShowingAlerts()[0].type);
+  });
+
+  it('Should show error', () => {
+    alertKey = alert.error('foo');
+    Alert.Type.ERROR.should.equal(alert._getShowingAlerts()[0].type);
+  });
+
+  it('Should show warning', () => {
+    alertKey = alert.warning('foo');
+    Alert.Type.WARNING.should.equal(alert._getShowingAlerts()[0].type);
+  });
+
+  it('Should join same alerts and shake', () => {
+    alertKey = alert.message('foo');
+    alertKey = alert.message('foo');
+
+    alert._getShowingAlerts().length.should.equal(1);
+    true.should.equal(alert._getShowingAlerts()[0].isShaking);
+  });
+
+  it('Should remove alert after timeout', () => {
+    alertKey = alert.message('foo', ALERT_SHOW_TIME);
+    clock.tick(SMALL_TICK);
+    alert._getShowingAlerts().length.should.equal(0);
+  });
+
+  it('Should remove alert after timeout', () => {
+    alertKey = alert.message('foo', ALERT_SHOW_TIME);
+    clock.tick(SMALL_TICK);
+    alert._getShowingAlerts().length.should.equal(0);
+  });
+
+  it('should remove alert without animation', () => {
+    alertKey = alert.message('foo');
+    alert.removeWithoutAnimation(alertKey);
+    alert._getShowingAlerts().length.should.equal(0);
+  });
+
+  it('should remove alert after animation', () => {
+    alertKey = alert.message('foo');
+    alert.remove(alertKey);
+    true.should.equal(alert._getShowingAlerts().filter(it => it.key === alertKey)[0].isClosing);
+    clock.tick(SMALL_TICK);
+
+    alert._getShowingAlerts().length.should.equal(0);
+  });
+
+  it('should allow configuring default timeout', () => {
+    alert.setDefaultTimeout(SMALL_TICK);
+    alertKey = alert.message('foo');
+    clock.tick(BIG_TICK);
+    alert._getShowingAlerts().length.should.equal(0);
+  });
+});

package/components/alert-service/alert-service.tsx

@@ -0,0 +1,152 @@
+import React, {ReactNode} from 'react';
+import {render} from 'react-dom';
+
+import getUID from '../global/get-uid';
+
+import Alert, {
+  AlertProps,
+  AlertType,
+  ANIMATION_TIME,
+  Container as AlertContainer
+} from '../alert/alert';
+
+export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
+  key: string | number,
+  message: ReactNode
+}
+
+/**
+ * @name Alert Service
+ */
+
+class AlertService {
+  defaultTimeout = 0;
+  // This alerts are stored in inverse order (last shown is first in array)
+  showingAlerts: AlertItem[] = [];
+  containerElement = document.createElement('div');
+
+  _getShowingAlerts() {
+    return [...this.showingAlerts];
+  }
+
+  renderAlertContainer(alerts: readonly AlertItem[]) {
+    if (alerts.length === 0) {
+      return <span/>;
+    }
+
+    return (
+      <AlertContainer>
+        {alerts.map(alert => {
+          const {message, key, ...rest} = alert;
+          return (
+            <Alert
+              key={key}
+              {...rest}
+            >{message}</Alert>
+          );
+        })}
+      </AlertContainer>
+    );
+  }
+
+  /**
+   * Renders alert container into virtual node to skip maintaining container
+   */
+  renderAlerts() {
+    render(this.renderAlertContainer(this.showingAlerts), this.containerElement);
+  }
+
+  findSameAlert(message: ReactNode, type: AlertType | undefined) {
+    return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
+  }
+
+  startAlertClosing(alert: AlertItem) {
+    alert.isClosing = true;
+    this.renderAlerts();
+  }
+
+  remove(key: string | number | null | undefined) {
+    const alertToClose = this.showingAlerts.filter(alert => alert.key === key)[0];
+    if (!alertToClose) {
+      return;
+    }
+    this.startAlertClosing(alertToClose);
+  }
+
+  removeWithoutAnimation(key: string | number) {
+    this.showingAlerts = this.showingAlerts.filter(alert => alert.key !== key);
+    this.renderAlerts();
+  }
+
+  stopShakingWhenAnimationDone(shakingAlert: AlertItem) {
+    setTimeout(() => {
+      shakingAlert.showWithAnimation = false;
+      shakingAlert.isShaking = false;
+      this.renderAlerts();
+    }, ANIMATION_TIME);
+  }
+
+  addAlert(
+    message: ReactNode,
+    type?: AlertType | undefined,
+    timeout: number = this.defaultTimeout,
+    options: Partial<AlertItem> = {}
+  ) {
+    const {onCloseRequest, onClose, ...restOptions} = options;
+    const sameAlert = this.findSameAlert(message, type);
+    if (sameAlert) {
+      sameAlert.isShaking = true;
+      this.renderAlerts();
+      this.stopShakingWhenAnimationDone(sameAlert);
+      return sameAlert.key;
+    }
+
+    const alert = {
+      key: getUID('alert-service-'),
+      message,
+      type,
+      timeout,
+      isClosing: false,
+      onCloseRequest: () => {
+        onCloseRequest && onCloseRequest();
+        this.startAlertClosing(alert);
+      },
+      onClose: () => {
+        onClose && onClose();
+        this.removeWithoutAnimation(alert.key);
+      },
+      ...restOptions
+    };
+
+    this.showingAlerts = [alert, ...this.showingAlerts];
+    this.renderAlerts();
+    return alert.key;
+  }
+
+  setDefaultTimeout(timeout: number) {
+    this.defaultTimeout = timeout;
+  }
+
+  error(message: ReactNode, timeout?: number) {
+    return this.addAlert(message, Alert.Type.ERROR, timeout);
+  }
+
+  message(message: ReactNode, timeout?: number) {
+    return this.addAlert(message, Alert.Type.MESSAGE, timeout);
+  }
+
+  warning(message: ReactNode, timeout?: number) {
+    return this.addAlert(message, Alert.Type.WARNING, timeout);
+  }
+
+  successMessage(message: ReactNode, timeout?: number) {
+    return this.addAlert(message, Alert.Type.SUCCESS, timeout);
+  }
+
+  loadingMessage(message: ReactNode, timeout?: number) {
+    return this.addAlert(message, Alert.Type.LOADING, timeout);
+  }
+}
+
+const alertService = new AlertService();
+export default alertService;

package/components/analytics/analytics.examples.tsx

@@ -0,0 +1,50 @@
+import linkStyles from '../link/link.css';
+
+import analytics from './analytics';
+import AnalyticsCustomPlugin from './analytics__custom-plugin';
+
+export default {
+  title: 'Components/Analytics',
+
+  parameters: {
+    notes:
+      'Provides a façade to Google Analytics and other web analytics services through a system of plugins.',
+    hermione: {skip: true}
+  },
+  argTypes: {onAnalytics: {}}
+};
+
+interface AnalyticsProps {
+  onAnalytics: (message: string, category: string, action: string) => void
+}
+export const Analytics = ({onAnalytics}: AnalyticsProps) => {
+  const node = document.createElement('div');
+
+  node.innerHTML = `
+      <div>
+        <p>Click the link below and check the console output:</p>
+        <div>
+          <a href id="click-me" class="${linkStyles.link}">
+            Track click event
+          </a>
+        </div>
+      </div>
+    `;
+
+  const FLUSH_INTERVAL = 100;
+
+  const customPlugin = new AnalyticsCustomPlugin(
+    events => onAnalytics('Custom plugin receives:', events[0].category, events[0].action),
+    false,
+    FLUSH_INTERVAL
+  );
+
+  analytics.config([customPlugin]);
+
+  node.querySelector('#click-me')?.addEventListener('click', event => {
+    analytics.trackEvent('test-category', 'test-action');
+    event.preventDefault();
+  });
+
+  return node;
+};

package/components/analytics/analytics.test.ts

@@ -0,0 +1,421 @@
+import * as Sinon from 'sinon';
+
+import analytics, {Analytics} from './analytics';
+import AnalyticsGAPlugin from './analytics__ga-plugin';
+import AnalyticsFUSPlugin from './analytics__fus-plugin';
+import AnalyticsCustomPlugin, {AnalyticsCustomPluginData} from './analytics__custom-plugin';
+
+const TICK_INTERVAL = 10500;
+const MAX_PACK_SIZE = 100;
+const FLUSH_INTERVAL = 10000;
+
+describe('Analytics', () => {
+  it('should be created', () => {
+    analytics.should.exist;
+  });
+
+  it('should export correct interface', () => {
+    analytics.trackPageView.should.exist;
+    analytics.trackEvent.should.exist;
+    analytics.trackShortcutEvent.should.exist;
+    analytics.trackEntityProperties.should.exist;
+    analytics.track.should.exist;
+  });
+
+  describe('ga plugin', () => {
+    let gaPlugin: AnalyticsGAPlugin;
+
+    beforeEach(() => {
+      Reflect.deleteProperty(window, 'ga');
+      gaPlugin = new AnalyticsGAPlugin('SOME-ID');
+    });
+
+    it('should init ga', () => {
+      window.ga.should.exist;
+    });
+
+    it('should export interface', () => {
+      gaPlugin.trackPageView.should.exist;
+      gaPlugin.trackEvent.should.exist;
+    });
+
+    it('should send pageview event', () => {
+      const rememberGA = window.ga;
+      window.ga = sandbox.spy() as never;
+      gaPlugin.trackPageView('some-path');
+
+      window.ga.should.have.been.calledWith('send', 'pageview', 'some-path');
+
+      window.ga = rememberGA;
+    });
+
+    it('should send action event', () => {
+      const rememberGA = window.ga;
+      window.ga = sandbox.spy() as never;
+      gaPlugin.trackEvent('some-category', 'some-action');
+
+      window.ga.should.calledWith('send', 'event', {
+        eventCategory: 'some-category',
+        eventAction: 'some-action'
+      });
+
+      window.ga = rememberGA;
+    });
+  });
+
+  describe('ga plugin with no key and in non-development mode', () => {
+    let gaPlugin: AnalyticsGAPlugin;
+
+    beforeEach(() => {
+      Reflect.deleteProperty(window, 'ga');
+      gaPlugin = new AnalyticsGAPlugin();
+    });
+
+    it('should not init ga', () => {
+      should.not.exist(window.ga);
+      gaPlugin.trackEvent.should.be.an.instanceof(Function);
+      gaPlugin.trackPageView.should.be.an.instanceof(Function);
+    });
+  });
+
+  describe('fus plugin', () => {
+    let fusPlugin: AnalyticsFUSPlugin;
+
+    beforeEach(() => {
+      Reflect.deleteProperty(window, 'fus');
+      fusPlugin = new AnalyticsFUSPlugin({
+        productId: 'YTD',
+        productBuild: '2020.1.3',
+        recorderVersion: 1,
+        groups: [{
+          id: 'ring.page.view',
+          version: '1',
+          baseline: 'registered'
+        }, {
+          id: 'yt.issue.view',
+          version: '1',
+          baseline: 'registered'
+        }]
+      });
+    });
+
+    it('should init fus', () => {
+      should.exist(window.fusra);
+    });
+
+    it('should export interface', () => {
+      fusPlugin.trackPageView.should.exist;
+      fusPlugin.trackEvent.should.exist;
+    });
+
+    it('should send pageview event', () => {
+      const rememberFUSra = window.fusra;
+      window.fusra = sandbox.spy();
+      fusPlugin.trackPageView('issues');
+
+      window.fusra.should.have.been.calledWith('event', {
+        groupId: 'ring.page.view',
+        groupVersion: '1',
+        eventId: 'open',
+        eventData: {
+          path: 'issues',
+          browser: sinon.match.any,
+          lang: sinon.match.any,
+          'page-view-duration': sinon.match.any,
+          'pixel-ratio': sinon.match.any,
+          platform: sinon.match.any,
+          screen: sinon.match.any
+        }
+      });
+
+      window.fusra = rememberFUSra;
+    });
+
+    it('should send action event', () => {
+      const rememberGA = window.fusra;
+      window.fusra = sandbox.spy();
+      fusPlugin.trackEvent('yt-issue-view', 'open', {demo: true});
+
+      window.fusra.should.calledWith('event', {
+        groupId: 'yt.issue.view',
+        groupVersion: '1',
+        eventId: 'open',
+        eventData: {demo: true}
+      });
+
+      window.fusra = rememberGA;
+    });
+
+    it('should not send event which was not mentioned in groups', () => {
+      const rememberFUSra = window.fusra;
+      window.fusra = sandbox.spy();
+      fusPlugin.trackEvent('some-category', 'some-action');
+
+      window.fusra.should.not.have.been.called;
+
+      window.fusra = rememberFUSra;
+    });
+  });
+
+  describe('tracking events', () => {
+    let send: (data: AnalyticsCustomPluginData[]) => void;
+    let clock: Sinon.SinonFakeTimers;
+    let analyticsInstance: Analytics;
+    beforeEach(() => {
+      send = sandbox.spy();
+      clock = sandbox.useFakeTimers({toFake: ['setInterval']});
+      analyticsInstance = new Analytics();
+    });
+
+    describe('#enabled', () => {
+
+      let customPlugin: AnalyticsCustomPlugin;
+      beforeEach(() => {
+        customPlugin = new AnalyticsCustomPlugin(send);
+        analyticsInstance.config([customPlugin]);
+      });
+
+      it('should send request to statistics server on tracking event', () => {
+        analyticsInstance.trackEvent('test-category', 'test-action');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.have.been.calledWith([{
+          category: 'test-category',
+          action: 'test-action'
+        }]);
+      });
+
+      it('should support configuration via method config', () => {
+        const flushingFunction = sandbox.spy();
+        customPlugin.config({
+          send: flushingFunction
+        });
+
+        analyticsInstance.trackEvent('test-category', 'test-action');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.not.have.been.called;
+        flushingFunction.should.have.been.calledWith([{
+          category: 'test-category',
+          action: 'test-action'
+        }]);
+      });
+
+      it('should send request on achieving max pack size', () => {
+        for (let i = 0; i < MAX_PACK_SIZE - 1; ++i) {
+          analyticsInstance.trackEvent(`test-category-${i}`, 'test-action');
+        }
+        customPlugin._data.length.should.equal(MAX_PACK_SIZE - 1);
+
+        analyticsInstance.trackEvent('test-category-100', 'test-action');
+
+        send.should.have.been.called;
+        customPlugin._data.length.should.equal(0);
+      });
+
+      it('should configure max pack size via config', () => {
+        customPlugin.config({
+          send,
+          flushMaxPackSize: MAX_PACK_SIZE + 2
+        });
+
+        for (let i = 0; i < MAX_PACK_SIZE + 1; ++i) {
+          analyticsInstance.trackEvent(`test-category-${i}`, 'test-action');
+        }
+        customPlugin._data.length.should.equal(MAX_PACK_SIZE + 1);
+
+        analyticsInstance.trackEvent('test-category-102', 'test-action');
+
+        send.should.have.been.called;
+        customPlugin._data.length.should.equal(0);
+      });
+
+      it('should remove prohibited symbols', () => {
+        analyticsInstance.trackEvent('t/\\est-c,ate:gory*?', 't/\\est-a,ct:ion*?');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.have.been.calledWith([{
+          category: 't_est-c_ate_gory_',
+          action: 't/_est-a_ct_ion_'
+        }]);
+      });
+
+      it('should track event with additional information', () => {
+        analyticsInstance.trackEvent('test-category', 'test-action', {type: 'test-type'});
+        clock.tick(TICK_INTERVAL);
+
+        send.should.have.been.calledWith([{
+          category: 'test-category',
+          action: 'test-action'
+        }, {
+          category: 'test-category',
+          action: 'test-action__type$test-type'
+        }]);
+      });
+
+      it('should send two events to statistics server on tracking shortcut event', () => {
+        analyticsInstance.trackShortcutEvent('test-category', 'test-action');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.have.been.calledWith([{
+          category: 'test-category',
+          action: 'test-action'
+        }, {
+          category: 'ring-shortcut',
+          action: 'test-category$test-action'
+        }]);
+      });
+
+      describe('trackEntityProperties', () => {
+        it(
+          'should send all enumerated properties to statistics server on tracking entity',
+          () => {
+            const entity = {
+              param1: 'first',
+              param2: 'second',
+              param3: 'third',
+              param4: 'fourth',
+              param5: 'should-be-ignored'
+            };
+            const trackedProperties: (keyof typeof entity)[] =
+              ['param1', 'param2', 'param3', 'param4'];
+            analyticsInstance.trackEntityProperties('sample-entity', entity, trackedProperties);
+            clock.tick(TICK_INTERVAL);
+
+            const trackedData: AnalyticsCustomPluginData[] = [];
+            trackedProperties.forEach(it => {
+              trackedData.push({
+                category: 'sample-entity',
+                action: `${it}__${entity[it]}`
+              });
+            });
+            send.should.have.been.calledWith(trackedData);
+          }
+        );
+
+        it('should not send any data if no properties requested', () => {
+          const entity = {
+            param1: 'first',
+            param2: 'second'
+          };
+          analyticsInstance.trackEntityProperties('sample-entity', entity, []);
+          clock.tick(TICK_INTERVAL);
+
+          send.should.not.have.been.called;
+        });
+
+        it('should not throw error if there are no some properties', () => {
+          const entity = {
+            param1: 'first',
+            param2: 'second'
+          };
+          analyticsInstance.
+            trackEntityProperties('entity', entity, ['param1', 'nonexistent-property']);
+          clock.tick(TICK_INTERVAL);
+
+          send.should.have.been.calledWith([{
+            category: 'entity',
+            action: 'param1__first'
+          }, {
+            category: 'entity',
+            action: 'nonexistent-property__no-value'
+          }]);
+        });
+
+        it('should work with subproperties', () => {
+          const entity = {
+            property: {
+              subproperty1: 'subproperty1-value',
+              subproperty2: {
+                subsubproperty: 'subsubproperty-value'
+              }
+            },
+            param2: 'second'
+          };
+          const trackedProperties = [
+            'property.subproperty2.subsubproperty',
+            'property.subproperty3.nonexistent'
+          ];
+          analyticsInstance.trackEntityProperties('entity', entity, trackedProperties);
+          clock.tick(TICK_INTERVAL);
+
+          send.should.have.been.calledWith([{
+            category: 'entity',
+            action: 'property-subproperty2-subsubproperty__subsubproperty-value'
+          }, {
+            category: 'entity',
+            action: 'property-subproperty3-nonexistent__no-value'
+          }]);
+        });
+      });
+
+      it('should send request to statistics server on page view', () => {
+        analyticsInstance.trackPageView('test-page');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.have.been.called;
+      });
+
+      it('should send request to statistics server multiple times', () => {
+        //first loop
+        analyticsInstance.trackPageView('test-page');
+        clock.tick(TICK_INTERVAL);
+        send.should.have.been.called;
+
+        //second loop
+        analyticsInstance.trackEvent('test-category', 'test-event');
+        analyticsInstance.trackEvent('test-category-2', 'test-event-2');
+        clock.tick(TICK_INTERVAL);
+        send.should.calledWith([{
+          category: 'test-category',
+          action: 'test-event'
+        }, {
+          category: 'test-category-2',
+          action: 'test-event-2'
+        }
+        ]);
+      });
+
+      describe('flushing restriction', () => {
+        it('flushing should be allowed on second step', () => {
+          let counter = 0;
+          function flushingIsAllowedOnSecondCheck() {
+            ++counter;
+            return counter === 2;
+          }
+
+          customPlugin = new AnalyticsCustomPlugin(
+            send,
+            false,
+            FLUSH_INTERVAL,
+            flushingIsAllowedOnSecondCheck
+          );
+          analyticsInstance.config([customPlugin]);
+
+          analyticsInstance.trackEvent('test-category', 'test-action');
+          clock.tick(TICK_INTERVAL);
+
+          send.should.not.have.been.called;
+          clock.tick(TICK_INTERVAL);
+
+          send.should.have.been.calledWith([{
+            category: 'test-category',
+            action: 'test-action'
+          }]);
+        });
+      });
+    });
+    describe('#disabled', () => {
+      beforeEach(() => {
+        analyticsInstance.config([]);
+      });
+
+      it('should not send request to statistics server', () => {
+        analyticsInstance.trackEvent('test-category', 'test-action');
+        clock.tick(TICK_INTERVAL);
+
+        send.should.not.have.been.called;
+      });
+    });
+  });
+});