Add aura promotion in community

src/browser/modules/ClickToCode/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ClickToCode does not render if no children 1`] = `<div />`;
 exports[`ClickToCode renders all children 1`] = `
 <div>
   <code
-    class="sc-fzsDOv gpNFQu"
+    class="sc-jVODtj jXQeRt"
   >
     <div>
       <span>
@@ -20,7 +20,7 @@ exports[`ClickToCode renders all children 1`] = `
 exports[`ClickToCode renders children as code if no code is provided 1`] = `
 <div>
   <code
-    class="sc-fzsDOv gpNFQu"
+    class="sc-jVODtj jXQeRt"
   >
     hellohi!
   </code>
@@ -30,7 +30,7 @@ exports[`ClickToCode renders children as code if no code is provided 1`] = `
 exports[`ClickToCode renders code as the code when code is available 1`] = `
 <div>
   <code
-    class="sc-fzsDOv gpNFQu"
+    class="sc-jVODtj jXQeRt"
   >
     hello
   </code>

src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`CodeViews CodeStatusbar displays no statusBarMessage 1`] = `
     class="sc-ckVGcZ fsAzIa"
   >
     <div
-      class="sc-fMiknA kzCZTC"
+      class="sc-eqIVtm dNNpFH"
     />
   </div>
 </div>
@@ -18,7 +18,7 @@ exports[`CodeViews CodeStatusbar displays statusBarMessage 1`] = `
     class="sc-ckVGcZ fsAzIa"
   >
     <div
-      class="sc-fMiknA kzCZTC"
+      class="sc-eqIVtm dNNpFH"
     >
       Started streaming 1 records after 5 ms and completed after 10  ms.
     </div>

src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ErrorsViews ErrorsStatusbar displays error 1`] = `
       title="Test.Error: Test error description"
     >
       <i
-        class="sc-kUaPvJ duoQTJ fa fa-exclamation-triangle"
+        class="sc-fONwsr efNtcV fa fa-exclamation-triangle"
       />
 
       Test.Error: Test error description
@@ -61,7 +61,7 @@ exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`]
           class="sc-bMVAic kWTfCD"
         >
           <i
-            class="sc-gPWkxV hffcmY fa fa-play-circle-o"
+            class="sc-kUaPvJ dnTzuZ fa fa-play-circle-o"
           />
            List available procedures
         </a>

src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Visualization renders 1`] = `<div />`;
 exports[`Visualization renders with result and escapes any HTML 1`] = `
 <div>
   <div
-    class="sc-bYSBpT fHjFHH"
+    class="sc-jtRfpW iZdwsA"
   >
     <div
       class="sc-iAyFgw ikvPvE one-legend-row"
@@ -137,15 +137,15 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
             class="sc-cvbbAY ZoyPP faded zoom-in"
           >
             <i
-              class="sc-jXQZqI bMRwes sl-zoom-in"
+              class="sc-kasBVs dwyrqg sl-zoom-in"
               style="font-size: 1em;"
             />
           </button>
           <button
             class="sc-cvbbAY ZoyPP zoom-out"
           >
             <i
-              class="sc-iGPElx czYOXU sl-zoom-out"
+              class="sc-hgHYgh cHEuJX sl-zoom-out"
               style="font-size: 1em;"
             />
           </button>

src/browser/modules/Stream/CypherFrame/__snapshots__/relatable-view.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`RelatableViews RelatableView displays bodyMessage if no rows 1`] = `
     class="sc-ckVGcZ fsAzIa"
   >
     <div
-      class="sc-fMiknA kzCZTC"
+      class="sc-eqIVtm dNNpFH"
     >
       (no changes, no records)
     </div>
@@ -17,7 +17,7 @@ exports[`RelatableViews RelatableView displays bodyMessage if no rows 1`] = `
 exports[`RelatableViews RelatableView does not display bodyMessage if rows, and escapes HTML 1`] = `
 <div>
   <div
-    class="sc-dVhcbM bPSoTK"
+    class="sc-fAjcbJ Ooyas"
   >
     <div
       class="relatable css-1dne9dv"
@@ -90,7 +90,7 @@ exports[`RelatableViews TableStatusbar displays no statusBarMessage 1`] = `
     class="sc-ckVGcZ fsAzIa"
   >
     <div
-      class="sc-fMiknA kzCZTC"
+      class="sc-eqIVtm dNNpFH"
     />
   </div>
 </div>
@@ -102,7 +102,7 @@ exports[`RelatableViews TableStatusbar displays statusBarMessage 1`] = `
     class="sc-ckVGcZ fsAzIa"
   >
     <div
-      class="sc-fMiknA kzCZTC"
+      class="sc-eqIVtm dNNpFH"
     >
       Started streaming 1 records after 5 ms and completed after 10  ms.
     </div>

src/browser/modules/Stream/PlayFrame.tsx

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { withBus } from 'react-suber'
 import { fetchGuideFromAllowlistAction } from 'shared/modules/commands/commandsDuck'
 
@@ -38,6 +38,36 @@ import {
 } from 'browser-components/icons/Icons'
 import { splitMdxSlides } from '../Docs/MDX/splitMdx'
 import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
+import { connect } from 'react-redux'
+import { GlobalState } from 'shared/globalState'
+import { inCloudEnv } from 'shared/modules/app/appDuck'
+import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
+import { PromotionContainer, AuraPromoLink } from './styled'
+import { ThemeContext } from 'styled-components'
+import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
+
+const AuraPromotion = () => {
+  const theme = useContext(ThemeContext)
+  const isDarkTheme = theme.name === DARK_THEME
+
+  return (
+    <PromotionContainer>
+      <AuraPromoLink
+        href="https://neo4j.com/cloud/aura/pricing/?utm_medium=browser&utm_source=ce&utm_campaign=wl_v1"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Sign up
+      </AuraPromoLink>
+      for a free Neo4j cloud instance with
+      <img
+        src={`./assets/images/aura-logo${isDarkTheme ? '-inverted' : ''}.svg`}
+        alt="Neo4j"
+        style={{ marginLeft: '5px', width: '100%', maxWidth: '140px' }}
+      />
+    </PromotionContainer>
+  )
+}
 
 const {
   play: { chapters }
@@ -50,7 +80,7 @@ const checkHtmlForSlides = (html: any) => {
   return !!slides.length
 }
 
-export function PlayFrame({ stack, bus }: any): JSX.Element {
+export function PlayFrame({ stack, bus, showPromotion }: any): JSX.Element {
   const [stackIndex, setStackIndex] = useState(0)
   const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
   const [atSlideEnd, setAtSlideEnd] = useState<boolean | null>(null)
@@ -75,7 +105,8 @@ export function PlayFrame({ stack, bus }: any): JSX.Element {
         currentFrame,
         bus,
         onSlide,
-        shouldUseSlidePointer
+        shouldUseSlidePointer,
+        showPromotion
       )
       if (stillMounted) {
         setInitialPlay(false)
@@ -88,7 +119,7 @@ export function PlayFrame({ stack, bus }: any): JSX.Element {
       stillMounted = false
     }
     // The full dependency array causes a re-run which switches to slide 1
-  }, [bus, currentFrame])
+  }, [bus, currentFrame, showPromotion])
 
   const { guide, aside, hasCarousel, isRemote } = guideObj
 
@@ -158,7 +189,8 @@ function generateContent(
   stackFrame: any,
   bus: any,
   onSlide: any,
-  shouldUseSlidePointer: any
+  shouldUseSlidePointer: any,
+  showPromotion = false
 ): any {
   // Not found
   if (stackFrame.response && stackFrame.response.status === 404) {
@@ -242,13 +274,25 @@ function generateContent(
   // Check if content exists locally
   if (isPlayChapter(guideName)) {
     const { content, title, subtitle, slides = null } = chapters[guideName]
+
+    const isPlayStart = stackFrame.cmd.trim() === ':play start'
+    const updatedContent =
+      isPlayStart && showPromotion ? (
+        <>
+          {content}
+          <AuraPromotion />
+        </>
+      ) : (
+        content
+      )
+
     return {
       guide: (
         <Docs
           lastUpdate={stackFrame.ts}
           originFrameId={stackFrame.id}
           withDirectives
-          content={slides ? null : content}
+          content={slides ? null : updatedContent}
           slides={slides ? slides : null}
           initialSlide={initialSlide}
           onSlide={onSlide}
@@ -315,4 +359,9 @@ const unfound = (
   }
 }
 
-export default withBus(PlayFrame)
+const mapStateToProps = (state: GlobalState) => ({
+  showPromotion:
+    getEdition(state) !== null && !isEnterprise(state) && !inCloudEnv(state)
+})
+
+export default connect(mapStateToProps)(withBus(PlayFrame))