290 lines
9.7 KiB
JavaScript
290 lines
9.7 KiB
JavaScript
import { next } from '@ember/runloop';
|
|
import { typeOf } from '@ember/utils';
|
|
import Service, { inject as service } from '@ember/service';
|
|
import { Machine } from 'xstate';
|
|
|
|
import getStorage from 'vault/lib/token-storage';
|
|
import { STORAGE_KEYS, DEFAULTS, MACHINES } from 'vault/helpers/wizard-constants';
|
|
const TutorialMachine = Machine(MACHINES.tutorial);
|
|
let FeatureMachine = null;
|
|
|
|
export default Service.extend(DEFAULTS, {
|
|
router: service(),
|
|
showWhenUnauthenticated: false,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this.initializeMachines();
|
|
},
|
|
|
|
initializeMachines() {
|
|
if (!this.storageHasKey(STORAGE_KEYS.TUTORIAL_STATE)) {
|
|
let state = TutorialMachine.initialState;
|
|
this.saveState('currentState', state.value);
|
|
this.saveExtState(STORAGE_KEYS.TUTORIAL_STATE, state.value);
|
|
}
|
|
this.saveState('currentState', this.getExtState(STORAGE_KEYS.TUTORIAL_STATE));
|
|
if (this.storageHasKey(STORAGE_KEYS.COMPONENT_STATE)) {
|
|
this.set('componentState', this.getExtState(STORAGE_KEYS.COMPONENT_STATE));
|
|
}
|
|
let stateNodes = TutorialMachine.getStateNodes(this.get('currentState'));
|
|
this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'tutorial');
|
|
if (this.storageHasKey(STORAGE_KEYS.FEATURE_LIST)) {
|
|
this.set('featureList', this.getExtState(STORAGE_KEYS.FEATURE_LIST));
|
|
if (this.storageHasKey(STORAGE_KEYS.FEATURE_STATE)) {
|
|
this.saveState('featureState', this.getExtState(STORAGE_KEYS.FEATURE_STATE));
|
|
} else {
|
|
if (FeatureMachine != null) {
|
|
this.saveState('featureState', FeatureMachine.initialState);
|
|
this.saveExtState(STORAGE_KEYS.FEATURE_STATE, this.get('featureState'));
|
|
}
|
|
}
|
|
this.buildFeatureMachine();
|
|
}
|
|
},
|
|
|
|
restartGuide() {
|
|
let storage = this.storage();
|
|
// empty storage
|
|
[
|
|
STORAGE_KEYS.TUTORIAL_STATE,
|
|
STORAGE_KEYS.FEATURE_LIST,
|
|
STORAGE_KEYS.FEATURE_STATE,
|
|
STORAGE_KEYS.COMPLETED_FEATURES,
|
|
STORAGE_KEYS.COMPONENT_STATE,
|
|
STORAGE_KEYS.RESUME_URL,
|
|
STORAGE_KEYS.RESUME_ROUTE,
|
|
].forEach(key => storage.removeItem(key));
|
|
// reset wizard state
|
|
this.setProperties(DEFAULTS);
|
|
// restart machines from blank state
|
|
this.initializeMachines();
|
|
// progress machine to 'active.select'
|
|
this.transitionTutorialMachine('idle', 'AUTH');
|
|
},
|
|
|
|
saveState(stateType, state) {
|
|
if (state.value) {
|
|
state = state.value;
|
|
}
|
|
let stateKey = '';
|
|
while (typeOf(state) === 'object') {
|
|
let newState = Object.keys(state);
|
|
stateKey += newState + '.';
|
|
state = state[newState];
|
|
}
|
|
stateKey += state;
|
|
this.set(stateType, stateKey);
|
|
},
|
|
|
|
transitionTutorialMachine(currentState, event, extendedState) {
|
|
if (extendedState) {
|
|
this.set('componentState', extendedState);
|
|
this.saveExtState(STORAGE_KEYS.COMPONENT_STATE, extendedState);
|
|
}
|
|
let { actions, value } = TutorialMachine.transition(currentState, event);
|
|
this.saveState('currentState', value);
|
|
this.saveExtState(STORAGE_KEYS.TUTORIAL_STATE, this.get('currentState'));
|
|
this.executeActions(actions, event, 'tutorial');
|
|
},
|
|
|
|
transitionFeatureMachine(currentState, event, extendedState) {
|
|
if (!FeatureMachine || !this.get('currentState').includes('active')) {
|
|
return;
|
|
}
|
|
if (extendedState) {
|
|
this.set('componentState', extendedState);
|
|
this.saveExtState(STORAGE_KEYS.COMPONENT_STATE, extendedState);
|
|
}
|
|
|
|
let { actions, value } = FeatureMachine.transition(currentState, event, this.get('componentState'));
|
|
this.saveState('featureState', value);
|
|
this.saveExtState(STORAGE_KEYS.FEATURE_STATE, value);
|
|
this.executeActions(actions, event, 'feature');
|
|
// if all features were completed, the FeatureMachine gets nulled
|
|
// out and won't exist here as there is no next step
|
|
if (FeatureMachine) {
|
|
let next;
|
|
if (this.get('currentMachine') === 'secrets' && value === 'display') {
|
|
next = FeatureMachine.transition(value, 'REPEAT', this.get('componentState'));
|
|
} else {
|
|
next = FeatureMachine.transition(value, 'CONTINUE', this.get('componentState'));
|
|
}
|
|
this.saveState('nextStep', next.value);
|
|
}
|
|
},
|
|
|
|
saveExtState(key, value) {
|
|
this.storage().setItem(key, value);
|
|
},
|
|
|
|
getExtState(key) {
|
|
return this.storage().getItem(key);
|
|
},
|
|
|
|
storageHasKey(key) {
|
|
return Boolean(this.getExtState(key));
|
|
},
|
|
|
|
executeActions(actions, event, machineType) {
|
|
let transitionURL;
|
|
let expectedRouteName;
|
|
let router = this.get('router');
|
|
|
|
for (let action of actions) {
|
|
let type = action;
|
|
if (action.type) {
|
|
type = action.type;
|
|
}
|
|
switch (type) {
|
|
case 'render':
|
|
this.set(`${action.level}Component`, action.component);
|
|
break;
|
|
case 'routeTransition':
|
|
expectedRouteName = action.params[0];
|
|
transitionURL = router.urlFor(...action.params).replace(/^\/ui/, '');
|
|
next(() => {
|
|
router.transitionTo(...action.params);
|
|
});
|
|
break;
|
|
case 'saveFeatures':
|
|
this.saveFeatures(event.features);
|
|
break;
|
|
case 'completeFeature':
|
|
this.completeFeature();
|
|
break;
|
|
case 'handleDismissed':
|
|
this.handleDismissed();
|
|
break;
|
|
case 'handlePaused':
|
|
this.handlePaused();
|
|
return;
|
|
case 'handleResume':
|
|
this.handleResume();
|
|
break;
|
|
case 'showTutorialWhenAuthenticated':
|
|
this.set('showWhenUnauthenticated', false);
|
|
break;
|
|
case 'showTutorialAlways':
|
|
this.set('showWhenUnauthenticated', true);
|
|
break;
|
|
case 'continueFeature':
|
|
this.transitionFeatureMachine(this.get('featureState'), 'CONTINUE', this.get('componentState'));
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
if (machineType === 'tutorial') {
|
|
return;
|
|
}
|
|
// if we're transitioning in the actions, we want that url,
|
|
// else we want the URL we land on in didTransition in the
|
|
// application route - we'll notify the application route to
|
|
// update the route
|
|
if (transitionURL) {
|
|
this.set('expectedURL', transitionURL);
|
|
this.set('expectedRouteName', expectedRouteName);
|
|
this.set('setURLAfterTransition', false);
|
|
} else {
|
|
this.set('setURLAfterTransition', true);
|
|
}
|
|
},
|
|
|
|
handlePaused() {
|
|
let expected = this.get('expectedURL');
|
|
if (expected) {
|
|
this.saveExtState(STORAGE_KEYS.RESUME_URL, this.get('expectedURL'));
|
|
this.saveExtState(STORAGE_KEYS.RESUME_ROUTE, this.get('expectedRouteName'));
|
|
}
|
|
},
|
|
|
|
handleResume() {
|
|
let resumeURL = this.storage().getItem(STORAGE_KEYS.RESUME_URL);
|
|
if (!resumeURL) {
|
|
return;
|
|
}
|
|
this.get('router').transitionTo(resumeURL).followRedirects().then(() => {
|
|
this.set('expectedRouteName', this.storage().getItem(STORAGE_KEYS.RESUME_ROUTE));
|
|
this.set('expectedURL', resumeURL);
|
|
this.initializeMachines();
|
|
this.storage().removeItem(STORAGE_KEYS.RESUME_URL);
|
|
});
|
|
},
|
|
|
|
handleDismissed() {
|
|
this.storage().removeItem(STORAGE_KEYS.FEATURE_STATE);
|
|
this.storage().removeItem(STORAGE_KEYS.FEATURE_LIST);
|
|
this.storage().removeItem(STORAGE_KEYS.COMPONENT_STATE);
|
|
},
|
|
|
|
saveFeatures(features) {
|
|
this.set('featureList', features);
|
|
this.saveExtState(STORAGE_KEYS.FEATURE_LIST, this.get('featureList'));
|
|
this.buildFeatureMachine();
|
|
},
|
|
|
|
buildFeatureMachine() {
|
|
if (this.get('featureList') === null) {
|
|
return;
|
|
}
|
|
this.startFeature();
|
|
if (this.storageHasKey(STORAGE_KEYS.FEATURE_STATE)) {
|
|
this.saveState('featureState', this.getExtState(STORAGE_KEYS.FEATURE_STATE));
|
|
}
|
|
this.saveExtState(STORAGE_KEYS.FEATURE_STATE, this.get('featureState'));
|
|
let nextFeature =
|
|
this.get('featureList').length > 1
|
|
? this.get('featureList')
|
|
.objectAt(1)
|
|
.capitalize()
|
|
: 'Finish';
|
|
this.set('nextFeature', nextFeature);
|
|
let next;
|
|
if (this.get('currentMachine') === 'secrets' && this.get('featureState') === 'display') {
|
|
next = FeatureMachine.transition(this.get('featureState'), 'REPEAT', this.get('componentState'));
|
|
} else {
|
|
next = FeatureMachine.transition(this.get('featureState'), 'CONTINUE', this.get('componentState'));
|
|
}
|
|
this.saveState('nextStep', next.value);
|
|
let stateNodes = FeatureMachine.getStateNodes(this.get('featureState'));
|
|
this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'feature');
|
|
},
|
|
|
|
startFeature() {
|
|
const FeatureMachineConfig = MACHINES[this.get('featureList').objectAt(0)];
|
|
FeatureMachine = Machine(FeatureMachineConfig);
|
|
this.set('currentMachine', this.get('featureList').objectAt(0));
|
|
this.saveState('featureState', FeatureMachine.initialState);
|
|
},
|
|
|
|
completeFeature() {
|
|
let features = this.get('featureList');
|
|
let done = features.shift();
|
|
if (!this.getExtState(STORAGE_KEYS.COMPLETED_FEATURES)) {
|
|
let completed = [];
|
|
completed.push(done);
|
|
this.saveExtState(STORAGE_KEYS.COMPLETED_FEATURES, completed);
|
|
} else {
|
|
this.saveExtState(
|
|
STORAGE_KEYS.COMPLETED_FEATURES,
|
|
this.getExtState(STORAGE_KEYS.COMPLETED_FEATURES).toArray().addObject(done)
|
|
);
|
|
}
|
|
|
|
this.saveExtState(STORAGE_KEYS.FEATURE_LIST, features.length ? features : null);
|
|
this.storage().removeItem(STORAGE_KEYS.FEATURE_STATE);
|
|
if (features.length > 0) {
|
|
this.buildFeatureMachine();
|
|
} else {
|
|
this.storage().removeItem(STORAGE_KEYS.FEATURE_LIST);
|
|
FeatureMachine = null;
|
|
this.transitionTutorialMachine(this.get('currentState'), 'DONE');
|
|
}
|
|
},
|
|
|
|
storage() {
|
|
return getStorage();
|
|
},
|
|
});
|