add db name error handling

prisma · Aug 29, 2019 · 8808ad8 · 8808ad8
1 parent 7ca1714
commit 8808ad8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/cli/introspection/src/prompt/components/helpers.ts b/cli/introspection/src/prompt/components/helpers.ts
@@ -26,6 +26,7 @@ export function action(key: Key): ActionKey {
     if (key.name === 'e') return 'last'
     if (key.name === 'g') return 'reset'
     if (key.name === 'u') return 'deleteToStart'
+    if (key.name === 'w') return 'deleteToStart'
   }
 
   if (key.name === 'return') return 'submit'

diff --git a/cli/introspection/src/prompt/screens/Step4DatabaseName.tsx b/cli/introspection/src/prompt/screens/Step4DatabaseName.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
 import { Color, Box } from 'ink'
 import BorderBox from '../components/BorderBox'
 import chalk from 'chalk'
@@ -7,17 +7,39 @@ import { TextInput } from '../components/inputs/TextInput'
 import { useInitState } from '../components/InitState'
 import { prettyDb } from '../utils/print'
 import { DatabaseType } from 'prisma-datamodel'
+import { RouterContext } from '../components/Router'
 
 // We can't use this screen yet, as we don't have SQLite introspection yet
 const Step4DatabaseName: React.FC = () => {
-  const [state, { setState }] = useInitState()
+  const [state, { setDbCredentials }] = useInitState()
 
   if (!state.dbCredentials) {
     throw new Error('Missing credentials in database name view')
   }
   const { dbCredentials } = state
   const db = prettyDb(dbCredentials.type)
   const schemaWord = dbCredentials.type === DatabaseType.postgres ? 'schema' : 'database'
+  const href = state.useStarterKit ? 'download-example' : 'language-selection'
+
+  const router = useContext(RouterContext)
+
+  const next = () => {
+    if (!error) {
+      router.setRoute(href)
+    }
+  }
+
+  const [error, setError] = useState<null | string>(null)
+
+  useEffect(() => {
+    const nameRegex = /[0-9a-zA-Z$_]+/
+    const schema = dbCredentials[schemaWord]!
+    if (!nameRegex.test(schema)) {
+      setError('Invalid database name')
+    } else {
+      setError(null)
+    }
+  }, [dbCredentials])
 
   return (
     <Box flexDirection="column">
@@ -31,17 +53,13 @@ const Step4DatabaseName: React.FC = () => {
         <TextInput
           tabIndex={0}
           label="Name"
-          value={state[schemaWord] || ''}
-          onChange={value => setState({ [schemaWord]: value })}
+          value={state.dbCredentials[schemaWord] || ''}
+          onChange={value => setDbCredentials({ [schemaWord]: value })}
           placeholder="my_db"
+          onSubmit={next}
         />
       </BorderBox>
-      <Link
-        label="Create"
-        href={state.useStarterKit ? 'download-example' : 'language-selection'}
-        tabIndex={1}
-        kind="forward"
-      />
+      {!error && <Link label="Create" href={href} tabIndex={1} kind="forward" />}
       <Link label="Back" description="(Database options)" tabIndex={2} kind="back" />
     </Box>
   )