Dev site update: header, customizable Hub uris

Former-commit-id: 2cc22c3

README.md

@@ -20,6 +20,24 @@ Lint code: `npm run lint`
 
 Build production files: `npm run build`
 
+#### Custom port
+
+Сhange the port using `npm config set ring-ui:port <port>`
+
+#### Hub uri
+
+You can change Hub server uri using `npm config set ring-ui:hub <hub uri>` or run it with option like `npm start|build -- --hub <hub uri>`.
+
+`<server uri>` should be one of predefined values below or __any uri__.
+
+Predefined values:
+
+  * local: `http://localhost:8080/jetpass`
+  * jar: `http://localhost:8080`
+  * production: `https://hub.jetbrains.com`
+  * default: `***REMOVED***`
+
+
 ## Contributing
 
 1. Install Yeoman: `npm install yo -g`

components/auth/auth.js

@@ -45,6 +45,14 @@ function noop() {}
 
      <file name="index.js" webpack="true">
        var Auth = require('ring-ui/components/auth/auth');
+       var hubConfig = require('ring-ui/site/hub-config');
+       // Example config:
+       // var hubConfig = {
+       //   serverUri: 'https://hub.jetbrains.com/',
+       //   client_id: '81a0bffb-6d0f-4a38-b93a-0a4d1e567698',
+       //   request_credentials: 'skip',
+       //   redirect_uri: window.location.href.split('#')[0]
+       // };
 
        var log = function(title) {
          return function(obj) {
@@ -59,12 +67,7 @@ function noop() {}
          };
        };
 
-       var auth = new Auth({
-         serverUri: 'https://hub.jetbrains.com/',
-         client_id: '81a0bffb-6d0f-4a38-b93a-0a4d1e567698',
-         request_credentials: 'skip',
-         redirect_uri: window.location.href.split('#')[0]
-       });
+       var auth = new Auth(hubConfig);
 
        auth.init().
          then(log('location to restore')).

components/header/header.js

@@ -150,19 +150,16 @@ const MenuItemsSequence = [
       require('./index.scss');
       var React = require('react');
       var ReactDOM = require('react-dom');
+      var hubConfig = require('ring-ui/site/hub-config');
+
       var Header = require('ring-ui/components/header/header');
       var Popup = require('ring-ui/components/popup/popup');
       var Auth = require('ring-ui/components/auth/auth');
       var Link = require('ring-ui/components/link/link');
 
       var popup, popupContainer;
 
-      var auth = new Auth({
-        serverUri: 'https://hub.jetbrains.com',
-        client_id: '81a0bffb-6d0f-4a38-b93a-0a4d1e567698',
-        request_credentials: 'skip',
-        redirect_uri: window.location.href.split('#')[0]
-      });
+      var auth = new Auth(hubConfig);
 
       // Render youtrack header to DOM. Help link leads to Yandex.
       // It's possible add a custom logotype into a Header via `logoUrl` parameter

components/query-assist/query-assist.js

@@ -45,6 +45,8 @@ function noop() {}
 
      <file name="index.js" webpack="true">
        var render = require('react-dom').render;
+       var hubConfig = require('ring-ui/site/hub-config');
+
        var QueryAssist = require('ring-ui/components/query-assist/query-assist');
        var Auth = require('ring-ui/components/auth/auth');
 
@@ -54,12 +56,7 @@ function noop() {}
          document.getElementById('example').appendChild(div);
        };
 
-       var auth = new Auth({
-          serverUri: 'https://hub.jetbrains.com',
-          client_id: '81a0bffb-6d0f-4a38-b93a-0a4d1e567698',
-          request_credentials: 'skip',
-          redirect_uri: window.location.href.split('#')[0]
-        });
+       var auth = new Auth(hubConfig);
 
        auth.init().then(function() {
          render(
@@ -110,21 +107,17 @@ function noop() {}
      </file>
 
      <file name="index.js" webpack="true">
+       var hubConfig = require('ring-ui/site/hub-config');
+
        require('angular');
        require('ring-ui/components/auth-ng/auth-ng');
        require('ring-ui/components/react-ng/react-ng')({
         QueryAssist: require('ring-ui/components/query-assist/query-assist')
        });
 
-       var hubUri = 'https://hub.jetbrains.com';
-
        angular.module('test', ['Ring.react-ng', 'Ring.auth'])
          .config(function (authProvider) {
-           authProvider.config({
-             serverUri: hubUri,
-             request_credentials: 'skip',
-             redirect_uri: window.location.href.split('#')[0]
-           });
+           authProvider.config(hubConfig);
          })
          .controller('testCtrl', function($http, $scope) {
            var ctrl = this;
@@ -164,7 +157,7 @@ function noop() {}
                }
              };
 
-             return $http.get(hubUri + 'api/rest/users/queryAssist', config).
+             return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config).
                then(function(data) {
                  return data.data;
                });

package.json

@@ -5,7 +5,14 @@
   "config": {
     "eslint-report": "eslint-report.xml",
     "port": 9999,
-    "version": "minor"
+    "version": "minor",
+    "hub": "default",
+    "hubs": {
+      "local": "http://localhost:8080/jetpass",
+      "jar": "http://localhost:8080",
+      "default": "***REMOVED***",
+      "production": "https://hub.jetbrains.com"
+    }
   },
   "files": [
     ".babelrc",
@@ -59,6 +66,7 @@
     "electron-prebuilt": "0.35.0",
     "eslint": "1.8.0",
     "eslint-config-jetbrains": "1.0.11",
+    "extract-text-webpack-plugin": "0.9.1",
     "finalhandler": "0.3.5",
     "gemini": "0.11.3",
     "gemini-teamcity": "1.0.1",

site/default.hbs

@@ -3,28 +3,33 @@
 <head>
   <meta charset="UTF-8">
   <title>Ring UI - {{title}}</title>
-  <script src="assets/index.js" type="text/javascript"></script>
-  <link rel="icon" href="/favicon.ico">
+  <link rel="icon" href="assets/favicon.ico">
 </head>
 <body>
 <div class="app">
-  <div class="app__sidebar">
-    <h3 class="header">Ring UI library</h3>
+  <div class="app__header"></div>
+  <script src="assets/index.js" type="text/javascript"></script>
 
-    {{#each collections}}
-      {{# metadata.title}}<h4 class="header">{{ this }}</h4>{{/metadata.title}}
-      <ul class="nav">
-        {{#this}}
-          <li class="nav__item">
-            <a class="nav__link" href="{{ link }}">{{ title }}</a>
-          </li>
-        {{/this}}
-      </ul>
-    {{/each}}
-  </div>
-  <div class="app__content markdown-body">
-    <h1>{{title}}</h1>
-    {{{contents}}}
+  <div class="app__main">
+    <div class="app__sidebar">
+      <h3 class="header">Ring UI library</h3>
+
+      {{#each collections}}
+        {{# metadata.title}}<h4
+          class="header">{{ this }}</h4>{{/metadata.title}}
+        <ul class="nav">
+          {{#this}}
+            <li class="nav__item">
+              <a class="nav__link" href="{{ link }}">{{ title }}</a>
+            </li>
+          {{/this}}
+        </ul>
+      {{/each}}
+    </div>
+    <div class="app__content markdown-body">
+      <h1>{{title}}</h1>
+      {{{contents}}}
+    </div>
   </div>
 </div>
 </body>

site/hub-config.js

@@ -0,0 +1,3 @@
+/* global hubConfig */
+
+export default hubConfig;

site/index.js

@@ -1,6 +1,46 @@
-/* eslint-disable modules/no-cjs */
+import './index.scss';
+import 'github-markdown-css/github-markdown.css';
+import 'highlight.js/styles/github.css';
+import 'file?name=favicon.ico!jetbrains-logos/hub/favicon.ico';
 
-require('./index.scss');
-require('github-markdown-css/github-markdown.css');
-require('highlight.js/styles/github.css');
-require('file?name=../favicon.ico!./favicon.ico');
+import 'dom4';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import hubConfig from 'ring-ui/site/hub-config';
+
+import Header from 'ring-ui/components/header/header';
+import Auth from 'ring-ui/components/auth/auth';
+
+const auth = new Auth(hubConfig);
+const header = ReactDOM.render(
+  <Header
+    enabledMenuItems={{
+      [Header.MenuItemType.SETTINGS]: false,
+      [Header.MenuItemType.HELP]: false,
+      [Header.MenuItemType.SERVICES]: true,
+      [Header.MenuItemType.USER_MENU]: true,
+      [Header.MenuItemType.LOGIN]: false
+    }}
+    logo="hub"
+    logoTitle="Ring UI Library"
+    menu={[{
+      component: 'b',
+      props: {
+        key: 'Styguide'
+      },
+      children: 'Styguide'
+    }]}
+  />,
+  document.query('.app__header')
+);
+
+auth.init().then(restoreLocation => {
+  if (restoreLocation) {
+    window.location = restoreLocation;
+    return;
+  }
+
+  Header.HeaderHelper.setUserMenu(header, auth);
+  Header.HeaderHelper.setServicesList(header, auth);
+});

site/index.scss

@@ -5,15 +5,22 @@ html, body {
 }
 
 .app {
-  display: flex;
   font: 13px "Helvetica Neue", Arial, sans-serif;
 }
 
+.app__header {
+  width: 100%;
+}
+
 .app__sidebar {
   margin-top: 32px;
   width: 200px;
 }
 
+.app__main {
+  display: flex;
+}
+
 .app__content {
   flex: 1;
 }

tools/progress-webpack-plugin.js

@@ -0,0 +1,21 @@
+/* eslint-env node */
+/* eslint-disable no-var */
+/* eslint-disable modules/no-cjs */
+
+var chalk = require('chalk');
+
+module.exports = function progressPlugin() {
+  var timeMeasureMessage = chalk.blue('Compilation finished in');
+
+  this.plugin('compile', function () {
+    console.time(timeMeasureMessage);
+    console.log(chalk.green('Compilation started...', (new Date()).toTimeString()));
+  });
+
+  this.plugin('done', function (stats) {
+    if (stats.hasErrors) {
+      console.error(chalk.red(stats.toJson().errors.join('\n')));
+    }
+    console.timeEnd(timeMeasureMessage);
+  });
+};

webpack-docs.config.js

@@ -1,14 +1,15 @@
 /* eslint-env node */
 /* eslint-disable no-var */
 /* eslint-disable modules/no-cjs */
+/* eslint-disable camelcase */
 
 var path = require('path');
 var webpack = require('webpack');
-var chalk = require('chalk');
 
 var webpackConfigMerger = require('webpack-config-merger');
 var webpackConfig = require('./webpack.config');
 var AnyBarWebpackPlugin = require('anybar-webpack');
+var progressPlugin = require('./tools/progress-webpack-plugin');
 
 var isServer = process.argv.indexOf('--server') !== -1;
 
@@ -19,7 +20,31 @@ var sitePath = [
 ];
 var publicPath = '/assets/';
 
-module.exports = webpackConfigMerger(webpackConfig, {
+var config = require('./package.json').config;
+
+var hubOptPath = process.argv.indexOf('--hub') + 1;
+var hubOpt = hubOptPath && process.argv[hubOptPath];
+var hub = hubOpt || process.env.npm_package_config_hub || config.hub;
+var hubUri = hub in config.hubs ? config.hubs[hub] : hub;
+
+var productionClientId = '81a0bffb-6d0f-4a38-b93a-0a4d1e567698';
+var useProductionClientId = hubUri === config.hubs.production || hubUri === config.hubs.default;
+
+var hubServerConfig = {
+  serverUri: hubUri,
+  client_id: useProductionClientId ? productionClientId : '0-0-0-0-0',
+  request_credentials: 'skip',
+  redirect_uri: 'http://localhost:' + config.port + '/'
+};
+
+var hubProductionConfig = {
+  serverUri: config.hubs.production,
+  client_id: productionClientId,
+  request_credentials: 'skip',
+  redirect_uri: 'http://ring-ui.github.io'
+};
+
+var docsWebpackConfig = webpackConfigMerger(webpackConfig, {
   entry: {
     index: './site/'
   },
@@ -64,24 +89,20 @@ module.exports = webpackConfigMerger(webpackConfig, {
     filename: '[name].js',
     publicPath: publicPath // serve HMR update json's properly
   },
-  plugins: isServer ? [
+  plugins: [
+    new webpack.DefinePlugin({
+      hubConfig: JSON.stringify(isServer ? hubServerConfig : hubProductionConfig)
+    })
+  ]
+});
+
+if (isServer) {
+  docsWebpackConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new AnyBarWebpackPlugin(),
-    /** Build progress informer */
-    function () {
-      var timeMeasureMessage = chalk.blue('Compilation finished in');
+    progressPlugin
+  );
+}
 
-      this.plugin('compile', function () {
-        console.time(timeMeasureMessage);
-        console.log(chalk.green('Compilation started...', (new Date()).toTimeString()));
-      });
-      this.plugin('done', function (stats) {
-        if (stats.hasErrors) {
-          console.error(chalk.red(stats.toJson().errors.join('\n')));
-        }
-        console.timeEnd(timeMeasureMessage);
-      });
-    }
-  ] : []
-});
+module.exports = docsWebpackConfig;