Backport of UI: Remove Wizard into release/1.13.x

changelog/19220.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: remove wizard
+```

ui/app/app.js

@@ -15,16 +15,7 @@ export default class App extends Application {
     },
     replication: {
       dependencies: {
-        services: [
-          'auth',
-          'flash-messages',
-          'namespace',
-          'replication-mode',
-          'router',
-          'store',
-          'version',
-          'wizard',
-        ],
+        services: ['auth', 'flash-messages', 'namespace', 'replication-mode', 'router', 'store', 'version'],
         externalRoutes: {
           replication: 'vault.cluster.replication.index',
         },
@@ -41,7 +32,6 @@ export default class App extends Application {
           'router',
           'store',
           'version',
-          'wizard',
           'secret-mount-path',
         ],
         externalRoutes: {
@@ -69,7 +59,6 @@ export default class App extends Application {
           'secret-mount-path',
           'store',
           'version',
-          'wizard',
         ],
         externalRoutes: {
           secrets: 'vault.cluster.secrets.backends',

ui/app/components/auth-config-form/config.js

@@ -23,7 +23,6 @@ const AuthConfigBase = Component.extend({
 
   flashMessages: service(),
   router: service(),
-  wizard: service(),
   saveModel: task(
     waitFor(function* () {
       try {
@@ -36,9 +35,6 @@ const AuthConfigBase = Component.extend({
         }
         return;
       }
-      if (this.wizard.currentMachine === 'authentication' && this.wizard.featureState === 'config') {
-        this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE');
-      }
       this.router.transitionTo('vault.cluster.access.methods').followRedirects();
       this.flashMessages.success('The configuration was saved successfully.');
     })

ui/app/components/auth-config-form/options.js

@@ -20,7 +20,6 @@ import { waitFor } from '@ember/test-waiters';
 export default AuthConfigComponent.extend({
   flashMessages: service(),
   router: service(),
-  wizard: service(),
 
   saveModel: task(
     waitFor(function* () {
@@ -49,9 +48,6 @@ export default AuthConfigComponent.extend({
         }
         return;
       }
-      if (this.wizard.currentMachine === 'authentication' && this.wizard.featureState === 'config') {
-        this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE');
-      }
       this.router.transitionTo('vault.cluster.access.methods').followRedirects();
       this.flashMessages.success('The configuration was saved successfully.');
     })

ui/app/components/auth-info.js

@@ -17,7 +17,6 @@ import { tracked } from '@glimmer/tracking';
  */
 export default class AuthInfoComponent extends Component {
   @service auth;
-  @service wizard;
   @service router;
 
   @tracked fakeRenew = false;
@@ -36,11 +35,6 @@ export default class AuthInfoComponent extends Component {
     this.router.transitionTo(...arguments);
   }
 
-  @action
-  restartGuide() {
-    this.wizard.restartGuide();
-  }
-
   @action
   renewToken() {
     this.fakeRenew = true;

ui/app/components/database-connection.js

@@ -19,21 +19,13 @@ export default class DatabaseConnectionEdit extends Component {
   @service store;
   @service router;
   @service flashMessages;
-  @service wizard;
 
   @tracked
   showPasswordField = false; // used for edit mode
 
   @tracked
   showSaveModal = false; // used for create mode
 
-  constructor() {
-    super(...arguments);
-    if (this.wizard.featureState === 'details' || this.wizard.featureState === 'connection') {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'database');
-    }
-  }
-
   rotateCredentials(backend, name) {
     const adapter = this.store.adapterFor('database/connection');
     return adapter.rotateRootCredentials(backend, name);

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

@@ -9,17 +9,10 @@ const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 export default class DatabaseRoleEdit extends Component {
   @service router;
   @service flashMessages;
-  @service wizard;
   @service store;
 
   constructor() {
     super(...arguments);
-    if (
-      this.wizard.featureState === 'displayConnection' ||
-      this.wizard.featureState === 'displayRoleDatabase'
-    ) {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'database');
-    }
     if (this.args.initialKey) {
       this.args.model.database = [this.args.initialKey];
     }

ui/app/components/generate-credentials.js

@@ -26,7 +26,6 @@ const MODEL_TYPES = {
 };
 
 export default Component.extend({
-  wizard: service(),
   store: service(),
   router: service(),
   // set on the component
@@ -58,13 +57,6 @@ export default Component.extend({
     this.createOrReplaceModel();
   },
 
-  didReceiveAttrs() {
-    this._super();
-    if (this.wizard.featureState === 'displayRole') {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', this.backendType);
-    }
-  },
-
   willDestroy() {
     if (!this.model.isDestroyed && !this.model.isDestroying) {
       this.model.unloadRecord();
@@ -98,17 +90,10 @@ export default Component.extend({
     create() {
       const model = this.model;
       this.set('loading', true);
-      this.model
-        .save()
-        .catch(() => {
-          if (this.wizard.featureState === 'credentials') {
-            this.wizard.transitionFeatureMachine(this.wizard.featureState, 'ERROR', this.backendType);
-          }
-        })
-        .finally(() => {
-          model.set('hasGenerated', true);
-          this.set('loading', false);
-        });
+      this.model.save().finally(() => {
+        model.set('hasGenerated', true);
+        this.set('loading', false);
+      });
     },
 
     codemirrorUpdated(attr, val, codemirror) {

ui/app/components/keymgmt/distribute.js

@@ -35,7 +35,6 @@ export default class KeymgmtDistribute extends Component {
   @service store;
   @service flashMessages;
   @service router;
-  @service wizard;
 
   @tracked keyModel;
   @tracked isNewKey = false;
@@ -57,14 +56,6 @@ export default class KeymgmtDistribute extends Component {
       this.getKeyInfo(this.args.key);
     }
     this.formData.operations = [];
-    this.updateWizard('nextStep');
-  }
-
-  updateWizard(key) {
-    // wizard will pause unless we manually continue it -- verify that keymgmt tutorial is in progress
-    if (this.wizard[key] === 'distribute') {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', 'keymgmt');
-    }
   }
 
   get keyTypes() {
@@ -198,8 +189,6 @@ export default class KeymgmtDistribute extends Component {
         this.store.clearDataset('keymgmt/key');
         const providerModel = this.store.peekRecord('keymgmt/provider', provider);
         providerModel.fetchKeys(providerModel.keys?.meta?.currentPage || 1);
-        // move wizard forward if tutorial is in progress
-        this.updateWizard('featureState');
         this.args.onClose();
       })
       .catch((e) => {

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

@@ -21,7 +21,6 @@ import { methods } from 'vault/helpers/mountable-auth-methods';
 
 export default class MountBackendForm extends Component {
   @service store;
-  @service wizard;
   @service flashMessages;
 
   // validation related properties
@@ -139,22 +138,9 @@ export default class MountBackendForm extends Component {
     this.args.mountModel[name] = value;
   }
 
-  @action
-  onTypeChange(path, value) {
-    if (path === 'type') {
-      this.wizard.set('componentState', value);
-    }
-  }
-
   @action
   setMountType(value) {
     this.args.mountModel.type = value;
     this.checkPathChange(value);
-    if (value) {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', this.args.mountModel.type);
-    } else if (this.wizard.featureState === 'idle') {
-      // resets wizard
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'RESET', this.args.mountModel.type);
-    }
   }
 }

ui/app/components/role-edit.js

@@ -12,7 +12,6 @@ const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default Component.extend(FocusOnInsertMixin, {
   router: service(),
-  wizard: service(),
 
   mode: null,
   emptyData: '{\n}',
@@ -21,19 +20,6 @@ export default Component.extend(FocusOnInsertMixin, {
   model: null,
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
-  didReceiveAttrs() {
-    this._super(...arguments);
-    if (
-      (this.wizard.featureState === 'details' && this.mode === 'create') ||
-      (this.wizard.featureState === 'role' && this.mode === 'show')
-    ) {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE', this.backendType);
-    }
-    if (this.wizard.featureState === 'displayRole') {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'NOOP', this.backendType);
-    }
-  },
-
   willDestroyElement() {
     this._super(...arguments);
     if (this.model && this.model.isError) {
@@ -69,9 +55,6 @@ export default Component.extend(FocusOnInsertMixin, {
     const model = this.model;
     return model[method]().then(() => {
       if (!model.isError) {
-        if (this.wizard.featureState === 'role') {
-          this.wizard.transitionFeatureMachine('role', 'CONTINUE', this.backendType);
-        }
         successCallback(model);
       }
     });

ui/app/components/secret-create-or-update.js

@@ -48,7 +48,6 @@ export default class SecretCreateOrUpdate extends Component {
   @service controlGroup;
   @service router;
   @service store;
-  @service wizard;
 
   @action
   setup(elem, [secretData, model, mode]) {
@@ -164,9 +163,6 @@ export default class SecretCreateOrUpdate extends Component {
       });
   }
   saveComplete(callback, key) {
-    if (this.wizard.featureState === 'secret') {
-      this.wizard.transitionFeatureMachine('secret', 'CONTINUE');
-    }
     callback(key);
   }
   transitionToRoute() {

ui/app/components/secret-edit.js

@@ -27,7 +27,6 @@ import { maybeQueryRecord } from 'vault/macros/maybe-query-record';
 import { alias, or } from '@ember/object/computed';
 
 export default class SecretEdit extends Component {
-  @service wizard;
   @service store;
 
   @tracked secretData = null;
@@ -43,10 +42,6 @@ export default class SecretEdit extends Component {
     }
     this.secretData = KVObject.create({ content: [] }).fromJSON(model.secretData);
     this.codemirrorString = this.secretData.toJSONString();
-    if (this.wizard.featureState === 'details' && this.args.mode === 'create') {
-      const engine = model.backend.includes('kv') ? 'kv' : model.backend;
-      this.wizard.transitionFeatureMachine('details', 'CONTINUE', engine);
-    }
   }
 
   @maybeQueryRecord(

ui/app/components/splash-page.js

@@ -9,7 +9,7 @@
  * content here
  * </SplashPage
  * ```
- * @param {boolean} [hasAltContent] - boolean to bypass the UiWizard.
+ * @param {boolean} [hasAltContent] - boolean to bypass container styling
  * @param {boolean} [showTruncatedNavBar = true] - boolean to hide or show the navBar. By default this is true.
  *
  */

ui/app/components/tool-actions-form.js

@@ -26,7 +26,6 @@ const WRAPPING_ENDPOINTS = ['lookup', 'wrap', 'unwrap', 'rewrap'];
 
 export default Component.extend(DEFAULTS, {
   store: service(),
-  wizard: service(),
   // putting these attrs here so they don't get reset when you click back
   //random
   bytes: 32,
@@ -93,9 +92,6 @@ export default Component.extend(DEFAULTS, {
       const keyName = action === 'rewrap' ? 'rewrap_token' : 'token';
       props = assign({}, props, { [keyName]: resp.wrap_info.token });
     }
-    if (props.token || props.rewrap_token || props.unwrap_data || action === 'lookup') {
-      this.wizard.transitionFeatureMachine(this.wizard.featureState, 'CONTINUE');
-    }
     setProperties(this, props);
   },
 

ui/app/components/transit-edit.js

@@ -13,7 +13,6 @@ const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default Component.extend(FocusOnInsertMixin, {
   router: service(),
-  wizard: service(),
   mode: null,
   onDataChange() {},
   onRefresh() {},
@@ -56,13 +55,6 @@ export default Component.extend(FocusOnInsertMixin, {
     const key = this.key;
     return key[method]().then(() => {
       if (!key.isError) {
-        if (this.wizard.featureState === 'secret') {
-          this.wizard.transitionFeatureMachine('secret', 'CONTINUE');
-        } else {
-          if (this.wizard.featureState === 'encryption') {
-            this.wizard.transitionFeatureMachine('encryption', 'CONTINUE', 'transit');
-          }
-        }
         successCallback(key);
       }
     });

ui/app/controllers/vault/cluster/init.js

@@ -1,5 +1,4 @@
 import { computed } from '@ember/object';
-import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 
 const DEFAULTS = {
@@ -12,8 +11,6 @@ const DEFAULTS = {
 };
 
 export default Controller.extend(DEFAULTS, {
-  wizard: service(),
-
   reset() {
     this.setProperties(DEFAULTS);
   },
@@ -22,8 +19,6 @@ export default Controller.extend(DEFAULTS, {
     this.set('loading', false);
     this.set('keyData', resp);
     this.model.reload();
-    this.wizard.set('initEvent', 'SAVE');
-    this.wizard.transitionTutorialMachine(this.wizard.currentState, 'TOSAVE');
   },
 
   initError(e) {