UI Onboarding Wizards

ui/app/components/auth-info.js

@@ -1,9 +1,10 @@
 import Ember from 'ember';
 
-export default Ember.Component.extend({
-  auth: Ember.inject.service(),
-
-  routing: Ember.inject.service('-routing'),
+const { Component, inject, computed, run } = Ember;
+export default Component.extend({
+  auth: inject.service(),
+  wizard: inject.service(),
+  routing: inject.service('-routing'),
 
   transitionToRoute: function() {
     var router = this.get('routing.router');
@@ -12,12 +13,15 @@ export default Ember.Component.extend({
 
   classNames: 'user-menu auth-info',
 
-  isRenewing: Ember.computed.or('fakeRenew', 'auth.isRenewing'),
+  isRenewing: computed.or('fakeRenew', 'auth.isRenewing'),
 
   actions: {
+    restartGuide() {
+      this.get('wizard').restartGuide();
+    },
     renewToken() {
       this.set('fakeRenew', true);
-      Ember.run.later(() => {
+      run.later(() => {
         this.set('fakeRenew', false);
         this.get('auth').renew();
       }, 200);

ui/app/components/doc-link.js

@@ -5,6 +5,7 @@ const { Component, computed } = Ember;
 
 export default Component.extend({
   tagName: 'a',
+  classNames: ['doc-link'],
   attributeBindings: ['target', 'rel', 'href'],
 
   layout: hbs`{{yield}}`,
@@ -14,6 +15,6 @@ export default Component.extend({
 
   path: '/',
   href: computed('path', function() {
-    return `https://www.vaultproject.io/docs${this.get('path')}`;
+    return `https://www.vaultproject.io${this.get('path')}`;
   }),
 });

ui/app/components/generate-credentials.js

@@ -26,6 +26,7 @@ const MODEL_TYPES = {
 };
 
 export default Component.extend({
+  wizard: inject.service(),
   store: inject.service(),
   routing: inject.service('-routing'),
   // set on the component
@@ -57,6 +58,16 @@ export default Component.extend({
     this.createOrReplaceModel();
   },
 
+  didReceiveAttrs() {
+    if (this.get('wizard.featureState') === 'displayRole') {
+      this.get('wizard').transitionFeatureMachine(
+        this.get('wizard.featureState'),
+        'CONTINUE',
+        this.get('backend.type')
+      );
+    }
+  },
+
   willDestroy() {
     this.get('model').unloadRecord();
     this._super(...arguments);
@@ -84,10 +95,21 @@ export default Component.extend({
     create() {
       let model = this.get('model');
       this.set('loading', true);
-      model.save().finally(() => {
-        model.set('hasGenerated', true);
-        this.set('loading', false);
-      });
+      this.model
+        .save()
+        .catch(() => {
+          if (this.get('wizard.featureState') === 'credentials') {
+            this.get('wizard').transitionFeatureMachine(
+              this.get('wizard.featureState'),
+              'ERROR',
+              this.get('backend.type')
+            );
+          }
+        })
+        .finally(() => {
+          model.set('hasGenerated', true);
+          this.set('loading', false);
+        });
     },
 
     codemirrorUpdated(attr, val, codemirror) {

ui/app/components/i-con.js

@@ -3,6 +3,10 @@ import hbs from 'htmlbars-inline-precompile';
 
 const { computed } = Ember;
 const GLYPHS_WITH_SVG_TAG = [
+  'learn',
+  'video',
+  'tour',
+  'stopwatch',
   'download',
   'folder',
   'file',
@@ -16,7 +20,7 @@ const GLYPHS_WITH_SVG_TAG = [
   'upload',
   'control-lock',
   'edition-enterprise',
-  'edition-oss'
+  'edition-oss',
 ];
 
 export default Ember.Component.extend({
@@ -40,11 +44,12 @@ export default Ember.Component.extend({
   glyph: null,
 
   excludeSVG: computed('glyph', function() {
-    return GLYPHS_WITH_SVG_TAG.includes(this.get('glyph'));
+    let glyph = this.get('glyph');
+    return glyph.startsWith('enable/') || GLYPHS_WITH_SVG_TAG.includes(glyph);
   }),
 
-  size: computed(function() {
-    return 12;
+  size: computed('glyph', function() {
+    return this.get('glyph').startsWith('enable/') ? 48 : 12;
   }),
 
   partialName: computed('glyph', function() {

ui/app/components/mount-backend-form.js

@@ -1,12 +1,15 @@
 import Ember from 'ember';
 import { task } from 'ember-concurrency';
 import { methods } from 'vault/helpers/mountable-auth-methods';
+import { engines } from 'vault/helpers/mountable-secret-engines';
 
-const { inject } = Ember;
+const { inject, computed, Component } = Ember;
 const METHODS = methods();
+const ENGINES = engines();
 
-export default Ember.Component.extend({
+export default Component.extend({
   store: inject.service(),
+  wizard: inject.service(),
   flashMessages: inject.service(),
   routing: inject.service('-routing'),
 
@@ -38,23 +41,29 @@ export default Ember.Component.extend({
    */
   mountModel: null,
 
+  showConfig: false,
+
   init() {
     this._super(...arguments);
     const type = this.get('mountType');
     const modelType = type === 'secret' ? 'secret-engine' : 'auth-method';
     const model = this.get('store').createRecord(modelType);
     this.set('mountModel', model);
-    this.changeConfigModel(model.get('type'));
   },
 
+  mountTypes: computed('mountType', function() {
+    return this.get('mountType') === 'secret' ? ENGINES : METHODS;
+  }),
+
   willDestroy() {
     // if unsaved, we want to unload so it doesn't show up in the auth mount list
     this.get('mountModel').rollbackAttributes();
   },
 
   getConfigModelType(methodType) {
+    let mountType = this.get('mountType');
     let noConfig = ['approle'];
-    if (noConfig.includes(methodType)) {
+    if (mountType === 'secret' || noConfig.includes(methodType)) {
       return;
     }
     if (methodType === 'aws') {
@@ -64,27 +73,32 @@ export default Ember.Component.extend({
   },
 
   changeConfigModel(methodType) {
-    const mount = this.get('mountModel');
-    const configRef = mount.hasMany('authConfigs').value();
-    const currentConfig = configRef.get('firstObject');
+    let mount = this.get('mountModel');
+    if (this.get('mountType') === 'secret') {
+      return;
+    }
+    let configRef = mount.hasMany('authConfigs').value();
+    let currentConfig = configRef.get('firstObject');
     if (currentConfig) {
       // rollbackAttributes here will remove the the config model from the store
       // because `isNew` will be true
       currentConfig.rollbackAttributes();
+      currentConfig.unloadRecord();
     }
-    const configType = this.getConfigModelType(methodType);
+    let configType = this.getConfigModelType(methodType);
     if (!configType) return;
-    const config = this.get('store').createRecord(configType);
+    let config = this.get('store').createRecord(configType);
     config.set('backend', mount);
   },
 
   checkPathChange(type) {
-    const mount = this.get('mountModel');
-    const currentPath = mount.get('path');
+    let mount = this.get('mountModel');
+    let currentPath = mount.get('path');
+    let list = this.get('mountTypes');
     // if the current path matches a type (meaning the user hasn't altered it),
     // change it here to match the new type
-    const isUnchanged = METHODS.findBy('type', currentPath);
-    if (isUnchanged) {
+    let isUnchanged = list.findBy('type', currentPath);
+    if (!currentPath || isUnchanged) {
       mount.set('path', type);
     }
   },
@@ -101,6 +115,10 @@ export default Ember.Component.extend({
     this.get('flashMessages').success(
       `Successfully mounted ${type} ${this.get('mountType')} method at ${path}.`
     );
+    if (this.get('mountType') === 'secret') {
+      yield this.get('onMountSuccess')(type, path);
+      return;
+    }
     yield this.get('saveConfig').perform(mountModel);
   }).drop(),
 
@@ -111,11 +129,16 @@ export default Ember.Component.extend({
     try {
       if (config && Object.keys(config.changedAttributes()).length) {
         yield config.save();
+        this.get('wizard').transitionFeatureMachine(
+          this.get('wizard.featureState'),
+          'CONTINUE',
+          this.get('mountModel').get('type')
+        );
         this.get('flashMessages').success(
           `The config for ${type} ${this.get('mountType')} method at ${path} was saved successfully.`
         );
       }
-      yield this.get('onMountSuccess')();
+      yield this.get('onMountSuccess')(type, path);
     } catch (err) {
       this.get('flashMessages').danger(
         `There was an error saving the configuration for ${type} ${this.get(
@@ -129,9 +152,27 @@ export default Ember.Component.extend({
   actions: {
     onTypeChange(path, value) {
       if (path === 'type') {
+        this.get('wizard').set('componentState', value);
         this.changeConfigModel(value);
         this.checkPathChange(value);
       }
     },
+
+    toggleShowConfig(value) {
+      this.set('showConfig', value);
+      if (value === true && this.get('wizard.featureState') === 'idle') {
+        this.get('wizard').transitionFeatureMachine(
+          this.get('wizard.featureState'),
+          'CONTINUE',
+          this.get('mountModel').get('type')
+        );
+      } else {
+        this.get('wizard').transitionFeatureMachine(
+          this.get('wizard.featureState'),
+          'RESET',
+          this.get('mountModel').get('type')
+        );
+      }
+    },
   },
 });

ui/app/components/outer-html.js

@@ -0,0 +1,11 @@
+// THIS COMPONENT IS ONLY FOR EXTENDING
+// You should use this component if you want to use outerHTML symantics
+// in your components - this is the default for upcoming Glimmer components
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: '',
+});
+
+// yep! that's it, it's more of a way to keep track of what components
+// use tagless semantics to make the upgrade to glimmer components easier

ui/app/components/popup-menu.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  tagName: '',
+  tagName: 'span',
 });

ui/app/components/replication-summary.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 import decodeConfigFromJWT from 'vault/utils/decode-config-from-jwt';
 import ReplicationActions from 'vault/mixins/replication-actions';
 
-const { computed, get } = Ember;
+const { computed, get, Component, inject } = Ember;
 
 const DEFAULTS = {
   mode: 'primary',
@@ -17,7 +17,9 @@ const DEFAULTS = {
   replicationMode: 'dr',
 };
 
-export default Ember.Component.extend(ReplicationActions, DEFAULTS, {
+export default Component.extend(ReplicationActions, DEFAULTS, {
+  wizard: inject.service(),
+  version: inject.service(),
   didReceiveAttrs() {
     this._super(...arguments);
     const initialReplicationMode = this.get('initialReplicationMode');
@@ -28,7 +30,6 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, {
   showModeSummary: false,
   initialReplicationMode: null,
   cluster: null,
-  version: Ember.inject.service(),
 
   replicationAttrs: computed.alias('cluster.replicationAttrs'),
 
@@ -55,7 +56,6 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, {
       ) {
         return false;
       }
-
       return true;
     }
   ),
@@ -66,7 +66,12 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, {
 
   actions: {
     onSubmit(/*action, mode, data, event*/) {
-      return this.submitHandler(...arguments);
+      let promise = this.submitHandler(...arguments);
+      let wizard = this.get('wizard');
+      promise.then(() => {
+        wizard.transitionFeatureMachine(wizard.get('featureState'), 'ENABLEREPLICATION');
+      });
+      return promise;
     },
 
     clear() {

ui/app/components/role-aws-edit.js

@@ -5,10 +5,6 @@ const { get, set } = Ember;
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default RoleEdit.extend({
-  init() {
-    this._super(...arguments);
-  },
-
   actions: {
     createOrUpdate(type, event) {
       event.preventDefault();
@@ -21,13 +17,13 @@ export default RoleEdit.extend({
       }
 
       var credential_type = get(this, 'model.credential_type');
-      if (credential_type == "iam_user") {
+      if (credential_type == 'iam_user') {
         set(this, 'model.role_arns', []);
       }
-      if (credential_type == "assumed_role") {
+      if (credential_type == 'assumed_role') {
         set(this, 'model.policy_arns', []);
       }
-      if (credential_type == "federation_token") {
+      if (credential_type == 'federation_token') {
         set(this, 'model.role_arns', []);
         set(this, 'model.policy_arns', []);
       }