Merge pull request #875 from opencomponents/templates-ui

[DX-502] Add templates info into OC UI

src/registry/routes/index.js

@@ -11,14 +11,16 @@ const indexView = require('../views');
 const packageInfo = require('../../../package.json');
 const urlBuilder = require('../domain/url-builder');
 
-function getParsedAuthor(author = {}) {
+const getParsedAuthor = author => {
+  author = author || {};
   return _.isString(author) ? parseAuthor(author) : author;
-}
+};
+
+const mapComponentDetails = component =>
+  _.extend(component, { author: getParsedAuthor(component.author) });
 
-function mapComponentDetails(component) {
-  component.author = getParsedAuthor(component.author);
-  return component;
-}
+const isHtmlRequest = headers =>
+  !!headers.accept && headers.accept.indexOf('text/html') >= 0;
 
 module.exports = function(repository) {
   return function(req, res, next) {
@@ -28,15 +30,13 @@ module.exports = function(repository) {
         return res.status(404).json({ error: res.errorDetails });
       }
 
-      const isHtmlRequest =
-        !!req.headers.accept && req.headers.accept.indexOf('text/html') >= 0;
       const baseResponse = {
         href: res.conf.baseUrl,
         ocVersion: packageInfo.version,
         type: res.conf.local ? 'oc-registry-local' : 'oc-registry'
       };
 
-      if (isHtmlRequest && !!res.conf.discovery) {
+      if (isHtmlRequest(req.headers) && !!res.conf.discovery) {
         let componentsInfo = [],
           componentsReleases = 0;
         const stateCounts = {};
@@ -62,34 +62,38 @@ module.exports = function(repository) {
 
             componentsInfo = _.sortBy(componentsInfo, 'name');
             repository.getComponentsDetails((err, details) => {
-              const vm = _.extend(baseResponse, {
-                availableDependencies: getAvailableDependencies(
-                  res.conf.dependencies
-                ),
-                availablePlugins: res.conf.plugins,
-                components: componentsInfo,
-                componentsReleases,
-                componentsList: _.map(componentsInfo, component => {
-                  const state = _.get(component, 'oc.state', '');
-                  if (state) {
-                    stateCounts[state] = stateCounts[state] || 0;
-                    stateCounts[state] += 1;
-                  }
-
-                  return {
-                    name: component.name,
-                    author: component.author,
-                    state
-                  };
-                }),
-                componentsHistory:
-                  !res.conf.local && getComponentsHistory(details),
-                q: req.query.q || '',
-                stateCounts,
-                title: 'OpenComponents Registry'
-              });
+              if (err) console.log(err);
+              res.send(
+                indexView(
+                  _.extend(baseResponse, {
+                    availableDependencies: getAvailableDependencies(
+                      res.conf.dependencies
+                    ),
+                    availablePlugins: res.conf.plugins,
+                    components: componentsInfo,
+                    componentsReleases,
+                    componentsList: _.map(componentsInfo, component => {
+                      const state = _.get(component, 'oc.state', '');
+                      if (state) {
+                        stateCounts[state] = stateCounts[state] || 0;
+                        stateCounts[state] += 1;
+                      }
 
-              res.send(indexView(vm));
+                      return {
+                        name: component.name,
+                        author: component.author,
+                        state
+                      };
+                    }),
+                    componentsHistory:
+                      !res.conf.local && getComponentsHistory(details),
+                    q: req.query.q || '',
+                    stateCounts,
+                    templates: repository.getTemplatesInfo(),
+                    title: 'OpenComponents Registry'
+                  })
+                )
+              );
             });
           }
         );

src/registry/views/index.js

@@ -1,8 +1,9 @@
 module.exports = vm => {
   const tabs = {
-    list: require('./partials/components-list')(vm),
+    dependencies: require('./partials/components-dependencies')(vm),
     history: require('./partials/components-history')(vm),
-    dependencies: require('./partials/components-dependencies')(vm)
+    list: require('./partials/components-list')(vm),
+    templates: require('./partials/components-templates')(vm)
   };
 
   const indexJS = require('./static/index');
@@ -18,6 +19,7 @@ module.exports = vm => {
 
   const extraLinks =
     ` | <a href="#components-history" class="tab-link">History</a>` +
+    ` | <a href="#components-templates" class="tab-link">Available templates</a>` +
     ` | <a href="#components-dependencies" class="tab-link">Available dependencies</a>`;
 
   const registryType = isLocal ? 'Local dev registry' : 'On-line registry';
@@ -35,7 +37,10 @@ module.exports = vm => {
       <a href="#components-list" class="tab-link">Components</a>
       ${!isLocal ? extraLinks : ''}
     </h2>
-    ${tabs.list + tabs.history + tabs.dependencies}`;
+    ${tabs.list}
+    ${tabs.history}
+    ${tabs.templates}
+    ${tabs.dependencies}`;
 
   const scripts = `<script>
     var q = "${encodeURIComponent(vm.q)}", componentsList = ${JSON.stringify(

src/registry/views/info.js

@@ -6,6 +6,7 @@ module.exports = vm => {
   const infoJS = require('./static/info');
   const layout = require('./partials/layout')(vm);
   const property = require('./partials/property')(vm);
+  const isTemplateLegacy = require('../../utils/is-template-legacy');
 
   const showArray = (title, arr) =>
     property(title, !!arr && arr.length > 0 ? arr.join(', ') : 'none');
@@ -24,6 +25,14 @@ module.exports = vm => {
     ? `OC CLI ${component.oc.version}`
     : 'not available';
 
+  const templateType = component.oc.files.template.type;
+  const compiler = `${templateType}-compiler`;
+  const template = `${templateType} (${
+    isTemplateLegacy(templateType)
+      ? 'legacy'
+      : compiler + '@' + component.oc.files.template.version
+  })`;
+
   const content = `<a class="back" href="${href}">&lt;&lt; All components</a>
     <h2>${component.name} &nbsp;${componentVersions()}</h2>
     <p class="w-100">${component.description} ${componentState()}</p>
@@ -32,6 +41,7 @@ module.exports = vm => {
     ${componentAuthor()}
     ${property('Publish date', publishDate)}
     ${property('Publish agent', publishAgent)}
+    ${property('Template', template)}
     ${showArray('Node.js dependencies', dependencies)}
     ${showArray('Plugin dependencies', component.oc.plugins)}
     ${componentParameters()}

src/registry/views/partials/components-templates.js

@@ -0,0 +1,21 @@
+module.exports = vm => {
+  const externalLink = ({ global, url }) =>
+    `<a href="${url}" target="_blank">${global}</a>`;
+
+  const templateRow = ({ externals, type, version }) => {
+    const externalLinks = externals.map(externalLink).join(', ');
+    const externalsLabel = externalLinks ? `(Externals: ${externalLinks})` : '';
+
+    return `<div class="componentRow row table">
+    <p class="release">
+      <a href="https://www.npmjs.com/package/${type}" target="_blank">${type}@${version}</a>
+      ${externalsLabel}
+    </p>
+  </div>
+`;
+  };
+
+  return `<div id="components-templates" class="box">${vm.templates
+    .map(templateRow)
+    .join('')}</div>`;
+};