add custom sandbox code

src/browser/AppInit.tsx

@@ -59,6 +59,9 @@ import reducers from 'shared/rootReducer'
 import { getTelemetrySettings } from 'shared/utils/selectors'
 import { URL } from 'whatwg-url'
 
+/* Sandbox Custom Code */
+import SandboxAuth from './modules/App/SandboxSidebar/SandboxAuth'
+
 // Configure localstorage sync
 applyKeys(
   'connections',
@@ -290,7 +293,11 @@ const AppInit = (): JSX.Element => {
       <BusProvider bus={bus}>
         <ApolloProvider client={client}>
           <DndProvider backend={HTML5Backend}>
-            <App />
+            {/* Sandbox Custom Code */}
+            {/* <App /> */}
+            <SandboxAuth>
+              <App />
+            </SandboxAuth>
           </DndProvider>
         </ApolloProvider>
       </BusProvider>

src/browser/modules/App/SandboxSidebar/SandboxAuth.tsx

@@ -0,0 +1,125 @@
+/* @SandboxCustomCode */
+
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import { withBus } from 'react-suber'
+import { GlobalState } from 'shared/globalState'
+import {
+  CONNECT,
+  setActiveConnection
+} from 'shared/modules/connections/connectionsDuck'
+import { isServerConfigDone } from 'shared/modules/dbMeta/dbMetaDuck'
+import { FrameStack, getFrames } from 'shared/modules/frames/framesDuck'
+import { SidebarState } from 'shared/modules/sidebar/sidebarDuck'
+
+import constants from './constants'
+import { Overlay } from './modules/loadingOverlay.class'
+import Sandbox from './modules/sandbox'
+
+declare global {
+  interface Window {
+    _neo4jSandbox: {
+      data: null | {
+        usecase: string
+        password: string
+        ip: string
+        sandboxHashkey: string
+        auth0_key: string
+      }
+    }
+  }
+}
+
+interface IProps {
+  children: React.ReactNode
+  setActiveConnection: Function
+  bus: any
+  isServerConfigDone: boolean
+  sidebar: SidebarState
+  frames: FrameStack[]
+}
+
+const SandboxAuth = (props: any) => {
+  const [isCredentialingDone, setIsCredentialingDone] = useState(false)
+  const [isCredentialingError, setIsCredentialingError] = useState(false)
+
+  const { sidebar, frames } = props
+
+  useEffect(() => {
+    const handleTask = async () => {
+      // Credentialing
+      const sandbox = new Sandbox()
+      console.log('doing sandbox auth')
+      const sandboxData = await sandbox.handleBrowserCredentialing()
+
+      if (!sandboxData || !sandboxData.data || !sandboxData.data.password) {
+        window._neo4jSandbox = {
+          data: null
+        }
+        console.warn('credentialing not complete')
+        setIsCredentialingDone(true)
+        setIsCredentialingError(true)
+        return
+      }
+
+      const connectionDetails = {
+        id: 'Sandbox',
+        host: `bolt+s://${sandboxData?.data['sandboxHashkey']}.${constants.SANDBOX_DOMAIN}:${sandboxData?.data['boltPort']}`,
+        username: 'neo4j',
+        password: sandboxData?.data.password,
+        authenticationMethod: 'NATIVE'
+      }
+
+      props.bus.self(CONNECT, connectionDetails, () => {
+        props.setActiveConnection(connectionDetails.id)
+      })
+
+      // Tracking
+      window._neo4jSandbox = {
+        data: sandboxData?.data
+      }
+
+      setIsCredentialingDone(true)
+    }
+    handleTask()
+  }, [])
+
+  useEffect(() => {
+    Overlay.addOverlay()
+    Overlay.autoProgess()
+  }, [])
+
+  useEffect(() => {
+    // If there was an error in credntialing, then immediately hide the overlay
+    if (isCredentialingError) {
+      Overlay.hideOverlay()
+      return
+    }
+
+    const isGuideFrame = frames.some((frame: FrameStack) => {
+      const firstStackFram = frame.stack[0]
+      return firstStackFram.type === 'play-remote'
+    })
+    const isSidebarGuide = sidebar.drawer === 'guides'
+    if (isCredentialingDone && (isGuideFrame || isSidebarGuide))
+      Overlay.hideOverlay()
+  }, [isCredentialingDone, isCredentialingError, frames, sidebar])
+
+  return <div>{isCredentialingDone && props.children}</div>
+}
+
+const mapStateToProps = (state: GlobalState) => ({
+  isServerConfigDone: isServerConfigDone(state),
+  sidebar: state.sidebar,
+  frames: getFrames(state)
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    setActiveConnection: (id: any) => dispatch(setActiveConnection(id))
+  }
+}
+
+export default withBus(
+  connect(mapStateToProps, mapDispatchToProps)(SandboxAuth)
+)

src/browser/modules/App/SandboxSidebar/constants.ts

@@ -0,0 +1,74 @@
+{
+  /* @SandboxCustomCode */
+}
+
+import tokens from '@neo4j-ndl/base/lib/tokens/js/tokens'
+
+const ENV = 'prod'
+// window.location.href.indexOf('.neo4jsandbox.com') > -1 &&
+// window.location.href.indexOf('development.neo4jsandbox.com') === -1
+// ? 'prod'
+// : 'dev'
+
+interface Props {
+  ENV: string
+  INTERNAL_API_BASE_URL: string
+  API_BASE_URL: string
+  SANDBOX_DOMAIN: string
+  styles: any
+}
+
+const constants: Props = {
+  ENV,
+  INTERNAL_API_BASE_URL: 'https://internal-api.neo4j.com',
+  API_BASE_URL:
+    ENV !== 'prod'
+      ? 'https://1dziw625ea.execute-api.us-east-1.amazonaws.com/development'
+      : 'https://efz1cnte2e.execute-api.us-east-1.amazonaws.com/main',
+  SANDBOX_DOMAIN:
+    ENV !== 'prod' ? 'development.neo4jsandbox.com' : 'neo4jsandbox.com',
+  styles: {
+    container: `    
+        position: absolute;
+        width: 100%;
+        height: 100vh;
+        background: #EEF1F8;
+        top: 0;
+        left: 0;
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 2s linear;
+      `,
+    loadingContainer: `
+        box-shadow: none;
+        background: rgba(0,0,0,.1);
+        padding: 0;
+        border-radius: .28571429rem;
+        position: relative;
+        width: 600px;
+        height: 20px;
+        border-radius: 20px;
+      `,
+    bar: `
+        transition-duration: 300ms;
+        width: 20%;
+        background-color: ${tokens.colors.primary[40]};
+        position: relative;
+        min-width: 2em;
+        height: 20px;
+        border-radius: 10px;
+      `,
+    label: `
+        text-align: center;
+        margin-top: 18px;
+        color: #525865;
+        font-family: sans-serif;
+      `
+  }
+}
+
+export default constants

src/browser/modules/App/SandboxSidebar/modules/loadingOverlay.class.ts

@@ -0,0 +1,52 @@
+/* @SandboxCustomCode */
+
+import constants from '../constants'
+
+export class Overlay {
+  constructor() {
+    return this
+  }
+
+  static addOverlay() {
+    const container = document.createElement('div')
+    container.setAttribute('id', 'sandbox-browser-loader')
+    container.setAttribute('style', constants.styles.container)
+
+    const loadingContainer = document.createElement('div')
+    loadingContainer.setAttribute('style', constants.styles.loadingContainer)
+
+    const bar = document.createElement('div')
+    bar.setAttribute('id', 'bar')
+    bar.setAttribute('style', constants.styles.bar)
+
+    const label = document.createElement('div')
+    label.setAttribute('style', constants.styles.label)
+    label.innerHTML = 'Firing up Neo4j Browser'
+
+    loadingContainer.appendChild(bar)
+    loadingContainer.appendChild(label)
+    container.appendChild(loadingContainer)
+    document.body.appendChild(container)
+  }
+
+  static autoProgess() {
+    const barElement = document.getElementById('bar')
+    if (!barElement) return
+    let currentLoaderPercent = 5
+    const incrementLoader = () => {
+      currentLoaderPercent = currentLoaderPercent + 4
+      if (currentLoaderPercent > 90) return
+      barElement.style.width = `${currentLoaderPercent}%`
+      setTimeout(incrementLoader, 1000)
+    }
+    incrementLoader()
+  }
+
+  static hideOverlay() {
+    const container = document.getElementById('sandbox-browser-loader')
+    if (!container) return
+    container.style.transition = 'visibility 0s .5s, opacity .5s linear'
+    container.style.opacity = '0'
+    container.style.visibility = 'hidden'
+  }
+}

src/browser/modules/App/SandboxSidebar/modules/sandbox.ts

@@ -0,0 +1,64 @@
+/* @SandboxCustomCode */
+
+import constants from '../constants'
+
+class Sandbox {
+  constructor() {
+    return this
+  }
+
+  async handleBrowserCredentialing() {
+    let auth0key, usecase, res
+
+    try {
+      const hash = window.location.hash || window.location.search
+      if (!hash || hash === '') {
+        console.warn('no hash avaiable to perform credentialising')
+        return
+      }
+
+      const pwfetch: any = new URLSearchParams(window.location.search)
+
+      const [, hashKey, token] = pwfetch.get('token').split(':')
+      res = await this.getCredentials(hashKey, token)
+      if (!res || !res.sandboxHashkey || !res.password) {
+        return
+      }
+      auth0key = res['auth0_key']
+
+      usecase = res['usecase']
+      document.cookie = 'intcmusr=' + auth0key + '; path=/'
+      document.cookie = 'intcmsbox=' + usecase + '; path=/'
+    } catch (e) {
+      console.warn(e)
+      return
+    }
+
+    return {
+      auth0key,
+      usecase,
+      data: res
+    }
+  }
+
+  getCredentials(hashKey: string, token: string) {
+    return fetch(
+      `${constants.API_BASE_URL}/SandboxAuthdGetInstanceByHashKey?sandboxHashKey=${hashKey}`,
+      {
+        headers: {
+          Authorization: token,
+          Accept: 'application/json'
+        }
+      }
+    )
+      .then(res => res.json())
+      .then(res => {
+        return res
+      })
+      .catch(e => {
+        console.log(e)
+      })
+  }
+}
+
+export default Sandbox

src/browser/modules/Segment/index.tsx

@@ -121,7 +121,9 @@ export class Segment extends Component<any> {
               const { category, label, data } = metricsData
               window.analytics.track(category + '-' + label, {
                 ...data,
-                desktop: inDesktop
+                desktop: inDesktop,
+                /* @SandboxCustomCode */
+                isSandbox: true
               })
             }
 

src/browser/modules/Stream/Auth/ConnectionForm.tsx

@@ -430,7 +430,9 @@ export class ConnectionForm extends Component<any, ConnectionFormState> {
         />
       )
     }
-    return view
+    /* Sandbox Custom Code */
+    // return view
+    return view || null
   }
 }