Add version selector

Author: samselikoff

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    server: true,
+  },
   root: true,
   parserOptions: {
     ecmaVersion: 2017,

addon/components/docs-header/component.js

@@ -4,6 +4,8 @@ import config from 'dummy/config/environment';
 import { computed } from '@ember/object';
 import { classify } from '@ember/string';
 import { addonLogo } from 'ember-cli-addon-docs/utils/computed';
+import { inject as service } from '@ember/service';
+import { reads } from '@ember/object/computed';
 
 const packageJson = config['ember-cli-addon-docs'].packageJson;
 
@@ -32,6 +34,12 @@ export default Component.extend({
   tagName: '',
 
   packageJson: packageJson,
+  projectVersion: service(),
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.get('projectVersion').loadAvailableVersions();
+  },
 
   logo: addonLogo(packageJson),
 
@@ -44,6 +52,8 @@ export default Component.extend({
     return classify(name);
   }),
 
+  currentVersion: reads('projectVersion.currentVersion'),
+
   actions: {
     didVisitPage() {
       this.set('query', null);

addon/components/docs-header/link/template.hbs

@@ -5,7 +5,8 @@
       px-4 py-3 transition uppercase text-xs font-semibold
       text-grey-darkest no-underline opacity-50 hover:opacity-100
       {{if push 'ml-auto'}}
-    '>
+    '
+    data-test-id={{data-test-id}}>
     {{yield}}
   </a>
 
@@ -17,7 +18,8 @@
       px-4 py-3 transition uppercase text-xs font-semibold
       text-grey-darkest no-underline opacity-50 hover:opacity-100
       {{if push 'ml-auto'}}
-    '>
+    '
+    data-test-id={{data-test-id}}>
     {{yield}}
   </a>
 
@@ -29,6 +31,7 @@
       text-grey-darkest no-underline '
       (if (and (not isActive) (not (eq route 'index'))) 'opacity-50 hover:opacity-100')
     )
+    data-test-id=data-test-id
   }}
     {{yield}}
   {{/link-to}}

addon/components/docs-header/template.hbs

@@ -22,8 +22,21 @@
 
       {{docs-header/search-box query=query on-input=(action (mut query))}}
 
-      {{#docs-header/link href=(concat packageJson.repository '/releases')}}
-        v{{packageJson.version}}
+      {{#docs-header/link on-click=(action (toggle 'isShowingVersionSelector' this)) data-test-id='current-version'}}
+        <span data-version-selector class='flex items-center'>
+
+          {{#if (or (eq currentVersion.name 'latest'))}}
+            {{#if currentVersion.tag}}
+              {{currentVersion.tag}}
+            {{else}}
+              Latest
+            {{/if}}
+          {{else}}
+            {{currentVersion.name}}
+          {{/if}}
+
+          {{svg-jar 'caret' height=12 width=12}}
+        </span>
       {{/docs-header/link}}
 
       {{#if packageJson.repository}}
@@ -41,6 +54,9 @@
 </header>
 
 {{#if query}}
-  {{docs-header/search-results query=query
-    on-visit=(action 'didVisitPage')}}
+  {{docs-header/search-results query=query on-visit=(action 'didVisitPage')}}
+{{/if}}
+
+{{#if isShowingVersionSelector}}
+  {{docs-header/version-selector on-close=(action (mut isShowingVersionSelector false))}}
 {{/if}}

addon/components/docs-header/version-selector/component.js

@@ -0,0 +1,29 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import layout from './template';
+import { sort } from '@ember/object/computed';
+import { reads } from '@ember/object/computed';
+
+export default Component.extend({
+  layout,
+
+  projectVersion: service(),
+  'on-close'() {},
+
+  currentVersion: reads('projectVersion.currentVersion'),
+
+  sortedVersions: sort('projectVersion.versions', function(a, b) {
+    if (['latest', 'master'].includes(a.name) || ['latest', 'master'].includes(b.name) ) {
+      return a.name > b.name;
+    } else {
+      return a.name < b.name;
+    }
+  }),
+
+  actions: {
+    changeVersion(version) {
+      this.get('projectVersion').redirectTo(version);
+    }
+  }
+
+});

addon/components/docs-header/version-selector/template.hbs

@@ -0,0 +1,43 @@
+{{#modal-dialog
+  tetherTarget='[data-version-selector]'
+  attachment='top right'
+  clickOutsideToClose=true
+  onClose=(action on-close)
+  targetAttachment='bottom right'}}
+  <ul class="list-reset mt-2 bg-white shadow-md text-sm rounded z-10">
+    {{#each sortedVersions as |version|}}
+      <li data-test-id='version'>
+        <a {{action 'changeVersion' version}} href='#' class='text-black no-underline flex items-center px-4 py-3 hover:bg-grey-lighter'>
+          <span class='w-6 flex'>
+            {{#if (eq version currentVersion)}}
+              {{svg-jar 'check' height=16 width=16}}
+            {{/if}}
+          </span>
+          <span class='font-medium'>
+            {{if (eq version.name 'latest') 'Latest' version.name}}
+          </span>
+
+          <span class="ml-auto pl-8 flex items-center opacity-50">
+            {{#if (or (eq version.name 'latest') (eq version.name 'master'))}}
+              {{svg-jar (if version.tag 'git-tag' 'git-sha') height=16 width=16}}
+            {{else}}
+              {{svg-jar 'git-sha' height=16 width=16}}
+            {{/if}}
+
+            <span class='text-xs font-mono pl-1'>
+              {{#if (or (eq version.name 'latest') (eq version.name 'master'))}}
+                {{#if version.tag}}
+                  {{version.tag}}
+                {{else}}
+                  {{version.truncatedSha}}
+                {{/if}}
+              {{else}}
+                {{version.truncatedSha}}
+              {{/if}}
+            </span>
+          </span>
+        </a>
+      </li>
+    {{/each}}
+  </ul>
+{{/modal-dialog}}

addon/components/docs-viewer/x-nav/component.js

@@ -11,7 +11,6 @@ const packageJson = config['ember-cli-addon-docs'].packageJson;
 export default Component.extend({
   layout,
   tagName: '',
-  // classNames: 'docs-viewer__nav',
 
   root: 'docs',
 
@@ -26,8 +25,6 @@ export default Component.extend({
     return classify(packageJson.name.replace(`${logo}-`, ''));
   }),
 
-  releasesUrl: `${packageJson.repository}/releases`,
-
   project: computed(function() {
     return this.get('store').peekRecord('project', packageJson.name);
   })

addon/components/modal-dialog/component.js

@@ -0,0 +1,13 @@
+import ModalDialog from 'ember-modal-dialog/components/modal-dialog';
+import { computed } from '@ember/object';
+import { getOwner } from '@ember/application';
+
+export default ModalDialog.extend({
+
+  renderInPlace: computed(function() {
+    let config = getOwner(this).resolveRegistration('config:environment')
+    
+    return config.environment === 'test';
+  })
+
+});

addon/services/project-version.js

@@ -1,38 +1,48 @@
 import Service from '@ember/service';
 import { getOwner } from '@ember/application';
-import { resolve } from 'rsvp';
 import fetch from 'fetch';
+import { computed } from '@ember/object';
+import { task } from 'ember-concurrency';
 
 export default Service.extend({
   current: null,
   root: null,
 
-  init() {
-    this._super(...arguments);
-
+  _loadAvailableVersions: task(function*() {
     let { rootURL } = getOwner(this).resolveRegistration('config:environment');
     let slash = rootURL.indexOf('/', 1);
 
     // TODO deal with apps deployed to custom domains, so their pathnames don't have a leading
     // segmenet for the project name. This will impact this service and the 404 page.
     this.set('root', rootURL.slice(0, slash));
+    let currentFromURL = rootURL.substring(slash + 1).replace(/\/$/, '');
+    this.set('current', currentFromURL || 'latest'); // dev-time guard. Think of a better way?
 
-    if (slash === -1) {
-      this.set('current', 'development');
-      this.set('_versionsPromise', resolve([{ name: 'development', path: '' }]));
-    } else {
-      this.set('current', rootURL.substring(slash + 1).replace(/\/$/, ''));
-      this.set('_versionsPromise', fetch(`${this.get('root')}/versions.json`)
-        .then(result => result.json())
-        .then(json => Object.keys(json).map(key => json[key])));
-    }
-  },
+    let response = yield fetch(`${this.get('root')}/versions.json`);
+    let json = yield response.json();
+
+    this.set('versions', Object.keys(json).map(key => {
+      let version = json[key];
+      version.truncatedSha = version.sha.substr(0,5);
+
+      return version;
+    }));
+  }),
 
   redirectTo(version) {
     window.location.href = `${this.get('root')}/${version.path || version}`;
   },
 
-  getAvailableVersions() {
-    return this.get('_versionsPromise');
-  }
+  loadAvailableVersions() {
+    return this.get('_loadAvailableVersions').perform();
+  },
+
+  currentVersion: computed('versions.[]', function() {
+    let versions = this.get('versions');
+
+    if (versions) {
+      return versions.find(version => version.name === this.get('current'));
+    }
+  })
+
 });

addon/styles/addon.scss

@@ -34,3 +34,7 @@ svg {
 .sticky {
   position: sticky;
 }
+
+.ember-modal-dialog {
+  z-index: 10;
+}