feat(md): set the new UI as the default one, and allow users to opt o…

…ut (#9290) Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Jun 4, 2021 · 995d622 · 995d622
1 parent 3bb4ffe
commit 995d622
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/app/scripts/modules/core/src/managed/Environments2.tsx b/app/scripts/modules/core/src/managed/Environments2.tsx
@@ -11,12 +11,21 @@ import './Environments2.less';
 import './overview/baseStyles.less';
 
 export const uiFeatureFlag = {
-  key: 'MD_new_ui',
+  key: 'MD_old_ui',
   value: '1',
 };
 
 export const getIsNewUI = () => {
-  return localStorage.getItem(uiFeatureFlag.key) === uiFeatureFlag.value;
+  return localStorage.getItem(uiFeatureFlag.key) !== uiFeatureFlag.value;
+};
+
+export const toggleIsNewUI = () => {
+  const isNew = getIsNewUI();
+  if (isNew) {
+    localStorage.setItem(uiFeatureFlag.key, uiFeatureFlag.value);
+  } else {
+    localStorage.removeItem(uiFeatureFlag.key);
+  }
 };
 
 export const UISwitcher = () => {
@@ -35,11 +44,7 @@ export const UISwitcher = () => {
     <a
       href={href}
       onClick={(e) => {
-        if (isNewUI) {
-          localStorage.removeItem(uiFeatureFlag.key);
-        } else {
-          localStorage.setItem(uiFeatureFlag.key, uiFeatureFlag.value);
-        }
+        toggleIsNewUI();
         logEvent({ action: isNewUI ? 'SwitchToOld' : 'SwitchToNew' });
         onClick(e);
       }}

diff --git a/app/scripts/modules/core/src/managed/managed.states.ts b/app/scripts/modules/core/src/managed/managed.states.ts
@@ -5,7 +5,7 @@ import { SETTINGS } from 'core/config';
 import { INestedState } from 'core/navigation/state.provider';
 
 import { Environments } from './Environments';
-import { getIsNewUI, uiFeatureFlag } from './Environments2';
+import { getIsNewUI } from './Environments2';
 import { Configuration } from './config/Configuration';
 import { EnvironmentsOverview } from './overview/EnvironmentsOverview';
 import { VersionsHistory } from './versionsHistory/VersionsHistory';
@@ -60,16 +60,6 @@ module(MANAGED_STATES, [APPLICATION_STATE_PROVIDER]).config([
   'applicationStateProvider',
   (applicationStateProvider: ApplicationStateProvider) => {
     if (SETTINGS.feature.managedDelivery) {
-      const isNewUI = () => {
-        const isNew = getIsNewUI();
-        if (isNew) {
-          localStorage.setItem(uiFeatureFlag.key, uiFeatureFlag.value);
-        } else {
-          localStorage.removeItem(uiFeatureFlag.key);
-        }
-        return isNew;
-      };
-
       const artifactVersion: INestedState = {
         name: 'artifactVersion',
         url: `/{reference}/{version}`,
@@ -79,7 +69,7 @@ module(MANAGED_STATES, [APPLICATION_STATE_PROVIDER]).config([
         },
         children: [],
         redirectTo: (transition) => {
-          if (isNewUI()) {
+          if (getIsNewUI()) {
             return transition.targetState().withState('home.applications.application.environments.history');
           }
           return undefined;
@@ -99,7 +89,7 @@ module(MANAGED_STATES, [APPLICATION_STATE_PROVIDER]).config([
         },
         children: [artifactVersion, ...routes],
         redirectTo: (transition) => {
-          if (isNewUI()) {
+          if (getIsNewUI()) {
             return transition.targetState().withState('home.applications.application.environments.overview');
           }
           return undefined;