Handle more database states

src/browser/modules/DBMSInfo/DatabaseSelector.tsx

@@ -37,7 +37,6 @@ const Select = styled.select`
 const EMPTY_OPTION = 'Select db to use'
 
 const HOUSE_EMOJI = '\u{1F3E0}'
-const HOUR_GLASS_EMOJI = '\u{231B}'
 const NBSP_CHAR = '\u{00A0}'
 
 type DatabaseSelectorProps = {
@@ -92,19 +91,28 @@ export const DatabaseSelector = ({
             <option value={EMPTY_OPTION}>{EMPTY_OPTION}</option>
           )}
 
-          {databasesAndAliases.map(dbOrAlias => (
-            <option
-              key={dbOrAlias.name}
-              value={dbOrAlias.name}
-              disabled={dbOrAlias.status === 'unknown'}
-            >
-              {dbOrAlias.name}
-              {dbOrAlias === homeDb ? NBSP_CHAR + HOUSE_EMOJI : ''}
-              {dbOrAlias.status === 'unknown'
-                ? NBSP_CHAR + HOUR_GLASS_EMOJI
-                : ''}
-            </option>
-          ))}
+          {databasesAndAliases.map(dbOrAlias => {
+            /* When deduplicating the list of databases and aliases on clusters
+             we prefer to find ones that are "online". If our deduplicated
+             db is not online, it means none of the databases on the cluster with
+             that name is online, so we should disable it in the list and show 
+             one of the statuses as a simplification (even though they could 
+              technically be different)
+             */
+            const dbNotOnline = dbOrAlias.status !== 'online'
+
+            return (
+              <option
+                key={dbOrAlias.name}
+                value={dbOrAlias.name}
+                disabled={dbNotOnline}
+              >
+                {dbOrAlias.name}
+                {dbOrAlias === homeDb ? NBSP_CHAR + HOUSE_EMOJI : ''}
+                {dbNotOnline && ` [${dbOrAlias.status}]`}
+              </option>
+            )
+          })}
         </Select>
       </DrawerSectionBody>
     </DrawerSection>

src/browser/modules/Sidebar/GuideDrawer.tsx

@@ -27,7 +27,6 @@ import GuideCarousel from '../GuideCarousel/GuideCarousel'
 import GuidePicker from './GuidePicker'
 import {
   BackIconContainer,
-  GuideTitle,
   StyledDrawerSeparator,
   StyledGuideDrawer,
   StyledGuideDrawerHeader

src/browser/modules/Stream/ErrorFrame.tsx

@@ -31,7 +31,11 @@ import {
   StyledHelpFrame,
   StyledPreformattedArea
 } from './styled'
-import { UnknownCommandError, createErrorObject } from 'services/exceptions'
+import {
+  DatabaseUnavailableErrorType,
+  UnknownCommandError,
+  createErrorObject
+} from 'services/exceptions'
 
 export const ErrorView = ({ frame }: any) => {
   if (!frame) return null
@@ -69,6 +73,12 @@ export const ErrorView = ({ frame }: any) => {
           Use <AutoExecButton cmd="help commands" /> to list available commands.
         </>
       ) : null}
+      {errorCode === DatabaseUnavailableErrorType ? (
+        <>
+          Run <AutoExecButton cmd="SHOW DATABASES" isCypher /> or{' '}
+          <AutoExecButton cmd="sysinfo" /> for more information.
+        </>
+      ) : null}
     </StyledHelpFrame>
   )
 }

src/browser/modules/Stream/auto-exec-button.tsx

@@ -43,17 +43,21 @@ export function AutoExecButtonComponent({
   bus,
   cmd,
   displayText,
+  isCypher = false,
   ...rest
 }: any) {
   const onClick = useCallback(() => {
-    const action = executeCommand(`:${cmd}`, { source: commandSources.button })
+    const action = executeCommand(isCypher ? cmd : `:${cmd}`, {
+      source: commandSources.button
+    })
 
     bus.send(action.type, action)
   }, [cmd])
 
   return (
     <StyledAutoExecButton type="button" onClick={onClick} {...rest}>
-      <i className="fa fa-play-circle-o" /> {displayText ?? `:${cmd}`}
+      <i className="fa fa-play-circle-o" />{' '}
+      {displayText ?? (isCypher ? cmd : `:${cmd}`)}
     </StyledAutoExecButton>
   )
 }

src/shared/services/exceptions.ts

@@ -129,17 +129,17 @@ export function DatabaseNotFoundError({
   }
 }
 
+export const DatabaseUnavailableErrorType = 'DatabaseUnavailableError'
 export function DatabaseUnavailableError({
   dbName,
   dbMeta
 }: {
   dbName: string
   dbMeta: { status: string }
 }): BrowserError {
-  const type = 'DatabaseUnavailableError'
   return {
-    type,
-    code: type,
+    type: DatabaseUnavailableErrorType,
+    code: DatabaseUnavailableErrorType,
     message: `Database "${dbName}" is unavailable, its status is "${dbMeta.status}".`
   }
 }