Update connection form to better reflect aura usage

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

@@ -35,14 +35,14 @@ import { toKeyString } from 'services/utils'
 import { stripScheme, getScheme } from 'services/boltscheme.utils'
 
 type AuthenticationMethod = typeof NATIVE | typeof NO_AUTH
-const authMethods: AuthenticationMethod[] = [NATIVE, NO_AUTH]
 const readableauthenticationMethods: Record<AuthenticationMethod, string> = {
   [NATIVE]: 'Username / Password',
   [NO_AUTH]: 'No authentication'
 }
 
 interface ConnectFormProps {
   allowedSchemes: string[]
+  allowedAuthMethods: AuthenticationMethod[]
   authenticationMethod: string
   host: string
   onAuthenticationMethodChange: () => void
@@ -102,16 +102,27 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
     props.onConnectClick(() => setConnecting(false))
   }
 
+  const hasSecureSchemes = ['neo4j+s', 'bolt+s'].every(scheme =>
+    props.allowedSchemes.includes(scheme)
+  )
+  const hoverText = `Pick neo4j${
+    hasSecureSchemes ? '+s' : ''
+  }:// for a routed connection, bolt${
+    hasSecureSchemes ? '+s' : ''
+  }:// for a direct connection to a DBMS instance.`
+
+  const multipleSchemesAllowed = props.allowedSchemes.length > 1
+
   return (
     <StyledConnectionForm onSubmit={onConnectClick}>
       <StyledConnectionFormEntry>
         <StyledConnectionLabel
           htmlFor="url-input"
-          title="Pick neo4j:// for a routed connection, bolt:// for a direct connection to a DBMS instance."
+          title={multipleSchemesAllowed ? hoverText : ''}
         >
           Connect URL
         </StyledConnectionLabel>
-        {props.allowedSchemes && props.allowedSchemes.length ? (
+        {multipleSchemesAllowed ? (
           <>
             <StyledSegment>
               <StyledConnectionSelect
@@ -137,8 +148,7 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
               />
             </StyledSegment>
             <StyledBoltUrlHintText className="url-hint-text">
-              Pick neo4j:// for a routed connection, bolt:// for a direct
-              connection to a DBMS.
+              {hoverText}
             </StyledBoltUrlHintText>
           </>
         ) : (
@@ -162,22 +172,24 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
         </StyledConnectionFormEntry>
       )}
 
-      <StyledConnectionFormEntry>
-        <StyledConnectionLabel>
-          Authentication type
-          <StyledConnectionSelect
-            data-testid="authenticationMethod"
-            onChange={props.onAuthenticationMethodChange}
-            value={props.authenticationMethod}
-          >
-            {authMethods.map(auth => (
-              <option value={auth} key={auth}>
-                {readableauthenticationMethods[auth]}
-              </option>
-            ))}
-          </StyledConnectionSelect>
-        </StyledConnectionLabel>
-      </StyledConnectionFormEntry>
+      {props.allowedAuthMethods.length > 1 && (
+        <StyledConnectionFormEntry>
+          <StyledConnectionLabel>
+            Authentication type
+            <StyledConnectionSelect
+              data-testid="authenticationMethod"
+              onChange={props.onAuthenticationMethodChange}
+              value={props.authenticationMethod}
+            >
+              {props.allowedAuthMethods.map(auth => (
+                <option value={auth} key={auth}>
+                  {readableauthenticationMethods[auth]}
+                </option>
+              ))}
+            </StyledConnectionSelect>
+          </StyledConnectionLabel>
+        </StyledConnectionFormEntry>
+      )}
 
       {props.authenticationMethod === NATIVE && (
         <StyledConnectionFormEntry>

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

@@ -46,7 +46,7 @@ import { NATIVE, NO_AUTH } from 'services/bolt/boltHelpers'
 import ConnectForm from './ConnectForm'
 import ConnectedView from './ConnectedView'
 import ChangePasswordForm from './ChangePasswordForm'
-import { getAllowedBoltSchemes } from 'shared/modules/app/appDuck'
+import { getAllowedBoltSchemes, inCloudEnv } from 'shared/modules/app/appDuck'
 import { FOCUS } from 'shared/modules/editor/editorDuck'
 import {
   generateBoltUrl,
@@ -293,7 +293,7 @@ export class ConnectionForm extends Component {
     } else if (
       this.props.isConnected &&
       this.props.activeConnectionData &&
-      this.props.activeConnectionData.authEnabled === false // excplicit false = auth disabled for sure
+      this.props.activeConnectionData.authEnabled === false // explicit false = auth disabled for sure
     ) {
       view = (
         <StyledConnectionBody>
@@ -315,6 +315,9 @@ export class ConnectionForm extends Component {
           username={this.state.username}
           password={this.state.password}
           database={this.state.requestedUseDb}
+          allowedAuthMethods={
+            this.props.inCloudEnv ? [NATIVE] : [NATIVE, NO_AUTH]
+          }
           authenticationMethod={this.state.authenticationMethod}
           used={this.state.used}
           allowedSchemes={this.props.allowedSchemes}
@@ -334,7 +337,8 @@ const mapStateToProps = state => {
     playImplicitInitCommands: getPlayImplicitInitCommands(state),
     storeCredentials: shouldRetainConnectionCredentials(state),
     isConnected: isConnected(state),
-    allowedSchemes: getAllowedBoltSchemes(state)
+    allowedSchemes: getAllowedBoltSchemes(state),
+    inCloudEnv: inCloudEnv(state)
   }
 }
 
@@ -356,6 +360,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     storeCredentials: stateProps.storeCredentials,
     isConnected: stateProps.isConnected,
     allowedSchemes: stateProps.allowedSchemes,
+    inCloudEnv: stateProps.onAura,
     ...ownProps,
     ...dispatchProps,
     executeInitCmd: () => {

src/browser/modules/Stream/Auth/ConnectionFrame.jsx

@@ -28,6 +28,8 @@ import { Lead } from 'browser-components/Text'
 
 import Render from 'browser-components/Render'
 import { StyledConnectionAside, StyledConnectionBodyContainer } from './styled'
+import { connect } from 'react-redux'
+import { inCloudEnv } from 'shared/modules/app/appDuck'
 
 export class ConnectionFrame extends Component {
   constructor(props) {
@@ -58,20 +60,21 @@ export class ConnectionFrame extends Component {
         contents={
           <>
             <StyledConnectionAside>
-              <Render if={!this.state.success}>
-                <React.Fragment>
+              {this.state.success ? (
+                <>
+                  <H3>Connected to Neo4j</H3>
+                  <Lead>Nice to meet you.</Lead>
+                </>
+              ) : (
+                <>
                   <H3>Connect to Neo4j</H3>
                   <Lead>
-                    Database access might require an authenticated connection.
+                    {this.props.inCloudEnv
+                      ? 'Database access on Neo4j Aura requires an authenticated connection'
+                      : 'Database access might require an authenticated connection.'}
                   </Lead>
-                </React.Fragment>
-              </Render>
-              <Render if={this.state.success}>
-                <React.Fragment>
-                  <H3>Connected to Neo4j</H3>
-                  <Lead>Nice to meet you.</Lead>
-                </React.Fragment>
-              </Render>
+                </>
+              )}
             </StyledConnectionAside>
             <StyledConnectionBodyContainer>
               <ConnectionForm
@@ -87,4 +90,10 @@ export class ConnectionFrame extends Component {
   }
 }
 
-export default ConnectionFrame
+const mapStateToProps = state => {
+  return {
+    inCloudEnv: inCloudEnv(state)
+  }
+}
+
+export default connect(mapStateToProps)(ConnectionFrame)

src/shared/modules/app/appDuck.js

@@ -39,8 +39,13 @@ export const getEnv = state => (state[NAME] || {}).env || WEB
 export const hasDiscoveryEndpoint = state =>
   [WEB, CLOUD].includes(getEnv(state))
 export const inWebEnv = state => getEnv(state) === WEB
+export const inCloudEnv = state => getEnv(state) === CLOUD
 export const inWebBrowser = state => [WEB, CLOUD].includes(getEnv(state))
 export const getAllowedBoltSchemes = (state, encryptionFlag) => {
+  if (inCloudEnv(state) /* Aura only allows neo4j+s */) {
+    return ['neo4j+s']
+  }
+
   const isHosted = inWebBrowser(state)
   const hostedUrl = getHostedUrl(state)
   return !isHosted

src/shared/modules/discovery/discoveryDuck.test.js

@@ -323,7 +323,7 @@ describe('discoveryOnStartupEpic cloud env', () => {
   })
   test('listens on APP_START and finds a bolt host and dispatches an action with the found host in cloud env', done => {
     // Given
-    const expectedHost = 'bolt://myhost:7777'
+    const expectedHost = 'neo4j+s://myhost:7777'
     const action = { type: APP_START, env: CLOUD }
     nock(getDiscoveryEndpoint())
       .get('/')