Merge branch 'mw-onboarding-tour-utils' into 'master'

Add utilities for new user onboarding

See merge request gitlab-org/gitlab-ee!13369

ee/app/assets/javascripts/onboarding/constants.js

-const STORAGE_KEY = 'onboarding_state';
+export const ONBOARDING_DISMISSED_COOKIE_NAME = 'onboarding_dismissed';
 
-export default STORAGE_KEY;
+export const STORAGE_KEY = 'onboarding_state';
+
+export const AVAILABLE_TOURS = {
+  GUIDED_GITLAB_TOUR: 1,
+  CREATE_PROJECT_TOUR: 2,
+  INVITE_COLLEAGUES_TOUR: 3,
+};
+
+export const ONBOARDING_PROPS_DEFAULTS = {
+  tourKey: AVAILABLE_TOURS.GUIDED_GITLAB_TOUR,
+  lastStepIndex: -1,
+  createdProjectPath: '',
+};

ee/app/assets/javascripts/onboarding/onboarding_welcome/components/welcome_page.vue

@@ -3,7 +3,7 @@ import { __ } from '~/locale';
 import { GlLink, GlPopover } from '@gitlab/ui';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { resetOnboardingLocalStorage, updateLocalStorage } from './../../utils';
+import onboardingUtils from './../../utils';
 
 export default {
   components: {
@@ -48,11 +48,12 @@ export default {
   },
   methods: {
     startTour() {
-      resetOnboardingLocalStorage();
+      onboardingUtils.resetOnboardingLocalStorage();
+      onboardingUtils.updateOnboardingDismissed(false);
       redirectTo(this.projectFullPath);
     },
     skipTour() {
-      updateLocalStorage({ dismissed: true });
+      onboardingUtils.updateOnboardingDismissed(true);
       redirectTo(this.skipUrl);
     },
   },

ee/app/assets/javascripts/onboarding/utils.js

-import STORAGE_KEY from './constants';
+import Cookies from 'js-cookie';
+import AccessorUtilities from '~/lib/utils/accessor';
+import {
+  ONBOARDING_DISMISSED_COOKIE_NAME,
+  STORAGE_KEY,
+  ONBOARDING_PROPS_DEFAULTS,
+} from './constants';
 
-/**
- * onboarding_state:
- * activeTour: Number
- * dismissed: Boolean
- */
+const isOnboardingDismissed = () => Cookies.get(ONBOARDING_DISMISSED_COOKIE_NAME) === 'true';
 
-const ONBOARDING_PROPS_DEFAULTS = {
-  activeTourKey: 1,
-  dismissed: false,
-};
+const updateOnboardingDismissed = dismissed =>
+  Cookies.set(ONBOARDING_DISMISSED_COOKIE_NAME, dismissed);
 
-export const resetOnboardingLocalStorage = () => {
+const resetOnboardingLocalStorage = () => {
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(ONBOARDING_PROPS_DEFAULTS));
+  }
 };
 
-export const getOnboardingLocalStorageState = () => JSON.parse(localStorage.getItem(STORAGE_KEY));
+const getOnboardingLocalStorageState = () => {
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY));
+  }
+
+  return ONBOARDING_PROPS_DEFAULTS;
+};
 
-export const updateLocalStorage = updatedProps => {
+const updateLocalStorage = updatedProps => {
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
     let currentState = getOnboardingLocalStorageState();
 
     if (!currentState) {
@@ -30,4 +39,15 @@ export const updateLocalStorage = updatedProps => {
     };
 
     localStorage.setItem(STORAGE_KEY, JSON.stringify(onboardingState));
+  }
+};
+
+const onboardingUtils = {
+  isOnboardingDismissed,
+  updateOnboardingDismissed,
+  resetOnboardingLocalStorage,
+  getOnboardingLocalStorageState,
+  updateLocalStorage,
 };
+
+export default onboardingUtils;

ee/spec/javascripts/onboarding/utils_spec.js

+import Cookies from 'js-cookie';
+import AccessorUtilities from '~/lib/utils/accessor';
+import {
+  ONBOARDING_DISMISSED_COOKIE_NAME,
+  STORAGE_KEY,
+  ONBOARDING_PROPS_DEFAULTS,
+} from 'ee/onboarding/constants';
+import onboardingUtils from 'ee/onboarding/utils';
+
+describe('User onboarding utils', () => {
+  beforeEach(() => {
+    Cookies.remove(ONBOARDING_DISMISSED_COOKIE_NAME);
+    onboardingUtils.resetOnboardingLocalStorage();
+    spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(true);
+  });
+
+  describe('isOnboardingDismissed', () => {
+    it('return true if the cookie value is true', () => {
+      Cookies.set(ONBOARDING_DISMISSED_COOKIE_NAME, true);
+
+      expect(onboardingUtils.isOnboardingDismissed()).toBe(true);
+    });
+
+    it('return false if the cookie is not set', () => {
+      expect(onboardingUtils.isOnboardingDismissed()).toBe(false);
+    });
+  });
+
+  describe('updateOnboardingDismissed', () => {
+    it('set the dismissed state on the cookie', () => {
+      const dismissed = true;
+      Cookies.set(ONBOARDING_DISMISSED_COOKIE_NAME, dismissed);
+
+      expect(Cookies.get(ONBOARDING_DISMISSED_COOKIE_NAME)).toBe(`${dismissed}`);
+    });
+  });
+
+  describe('resetOnboardingLocalStorage', () => {
+    it('resets the onboarding props in the localStorage to the default', () => {
+      const modified = {
+        tourKey: 2,
+        lastStepIndex: 5,
+        createdProjectPath: 'foo',
+      };
+
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(modified));
+
+      onboardingUtils.resetOnboardingLocalStorage();
+
+      expect(JSON.parse(localStorage.getItem(STORAGE_KEY))).toEqual(ONBOARDING_PROPS_DEFAULTS);
+    });
+  });
+
+  describe('getOnboardingLocalStorageState', () => {
+    it('retrieves the proper values from localStorage', () => {
+      const modified = {
+        tourKey: 2,
+        lastStepIndex: 5,
+        createdProjectPath: 'foo',
+      };
+
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(modified));
+
+      expect(onboardingUtils.getOnboardingLocalStorageState()).toEqual(modified);
+    });
+  });
+
+  describe('updateLocalStorage', () => {
+    it('updates the onboarding state on the localStorage', () => {
+      spyOn(localStorage, 'setItem');
+
+      const modified = {
+        tourKey: 2,
+        lastStepIndex: 5,
+        createdProjectPath: 'foo',
+      };
+
+      onboardingUtils.updateLocalStorage(modified);
+
+      expect(localStorage.setItem).toHaveBeenCalledWith(STORAGE_KEY, JSON.stringify(modified));
+    });
+  });
+});