fixing the navigation to preview

Author: nnecla

src/browser/index.tsx

@@ -22,19 +22,23 @@ import ReactDOM from 'react-dom'
 
 import AppInit, { setupSentry } from './AppInit'
 import './init'
+import { navigateToPreview } from './modules/Stream/StartPreviewFrame'
 
 setupSentry()
 ;(async () => {
   const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false'
-
-  const response = await fetch('/preview/manifest.json')
-  if (response.status === 200) {
-    if (doesPreferQuery) {
-      window.location.pathname = '/preview/'
+  try {
+    const response = await fetch('./preview/manifest.json')
+    if (response.status === 200) {
+      if (doesPreferQuery) {
+        navigateToPreview()
+      } else {
+        localStorage.setItem('previewAvailable', 'true')
+      }
     } else {
-      localStorage.setItem('previewAvailable', 'true')
+      localStorage.setItem('previewAvailable', 'false')
     }
-  } else {
+  } catch (e) {
     localStorage.setItem('previewAvailable', 'false')
   }
 

src/browser/modules/Stream/PlayFrame.tsx

@@ -48,10 +48,6 @@ import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
 import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
 import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
 import { PreviewFrame } from './StartPreviewFrame'
-import {
-  experimentalFeaturePreviewName,
-  showFeature
-} from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'
 
 const AuraPromotion = () => {
   const theme = useContext(ThemeContext)
@@ -93,15 +89,13 @@ type PlayFrameProps = {
   showPromotion: boolean
   isFullscreen: boolean
   isCollapsed: boolean
-  isAdvertiseFlagOn: boolean
 }
 export function PlayFrame({
   stack,
   bus,
   showPromotion,
   isFullscreen,
-  isCollapsed,
-  isAdvertiseFlagOn
+  isCollapsed
 }: PlayFrameProps): JSX.Element {
   const [stackIndex, setStackIndex] = useState(0)
   const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
@@ -130,8 +124,7 @@ export function PlayFrame({
         bus,
         onSlide,
         initialPlay,
-        showPromotion,
-        isAdvertiseFlagOn
+        showPromotion
       )
       if (stillMounted) {
         setInitialPlay(false)
@@ -214,8 +207,7 @@ function generateContent(
   bus: Bus,
   onSlide: any,
   shouldUseSlidePointer: boolean,
-  showPromotion = false,
-  isAdvertiseFlagOn: boolean
+  showPromotion = false
 ): Content | Promise<Content> {
   // Not found
   if (stackFrame.response && stackFrame.response.status === 404) {
@@ -298,17 +290,16 @@ function generateContent(
   if (isPlayChapter(guideName)) {
     const isPreviewAvailable =
       localStorage.getItem('previewAvailable') === 'true'
-    const showAdvertiseTile = isAdvertiseFlagOn && isPreviewAvailable
     const { content, title, subtitle, slides = null } = chapters[guideName]
 
     const isPlayStart = stackFrame.cmd.trim() === ':play start'
     const updatedContent =
       isPlayStart && showPromotion ? (
         <>
-          {showAdvertiseTile ? <PreviewFrame /> : content}
+          {isPreviewAvailable ? <PreviewFrame /> : content}
           <AuraPromotion />
         </>
-      ) : showAdvertiseTile ? (
+      ) : isPreviewAvailable ? (
         <PreviewFrame />
       ) : (
         content
@@ -392,8 +383,7 @@ const mapStateToProps = (state: GlobalState) => ({
     (getEdition(state) !== null &&
       !isEnterprise(state) &&
       !isConnectedAuraHost(state)) ||
-    inDesktop(state),
-  isAdvertiseFlagOn: showFeature(state, experimentalFeaturePreviewName)
+    inDesktop(state)
 })
 
 export default connect(mapStateToProps)(withBus(PlayFrame))

src/browser/modules/Stream/StartPreviewFrame.tsx

@@ -19,6 +19,13 @@
  */
 import React from 'react'
 
+export const navigateToPreview = (): void => {
+  const path = window.location.pathname
+  if (!path.endsWith('/preview/')) {
+    window.location.pathname = `${path}${path.endsWith('/') ? '' : '/'}preview/`
+  }
+}
+
 export const PreviewFrame = () => {
   return (
     <>
@@ -27,15 +34,10 @@ export const PreviewFrame = () => {
           <img src="./assets/images/clusters.svg" className="img-advertise" />
           <h3>Discover the new Browser experience! ✨</h3>
           <p>
-            Take a tour of our redesigned interface, built for faster navigation
-            and ease of use.
+            Switch to our redesigned interface, built for faster navigation and
+            ease of use.
           </p>
-          <button
-            onClick={() => {
-              window.location.pathname = '/preview/'
-            }}
-            className="btn btn-advertise"
-          >
+          <button onClick={navigateToPreview} className="btn btn-advertise">
             Switch to new experience
           </button>
         </div>

src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts

@@ -9,20 +9,13 @@ export const showFeature = (state: any, name: any) =>
   !!(state[NAME][name] || {}).on
 
 export const experimentalFeatureSelfName = 'showSelf'
-export const experimentalFeaturePreviewName = 'advertisePreview'
 
 export const initialState = {
   [experimentalFeatureSelfName]: {
     name: experimentalFeatureSelfName,
     on: true,
     displayName: 'Show experimental features',
     tooltip: 'Show feature section in settings drawer'
-  },
-  [experimentalFeaturePreviewName]: {
-    name: experimentalFeaturePreviewName,
-    on: false,
-    displayName: 'Advertise preview of new browser',
-    tooltip: 'Enable the advertisement tile of the new browser'
   }
 }