improve handling of database statuses

src/browser/modules/DBMSInfo/DatabaseSelector.tsx

@@ -80,15 +80,6 @@ export const DatabaseSelector = ({
     a.name.localeCompare(b.name)
   )
 
-  const unavailableStatuses = [
-    'unknown',
-    'starting',
-    'stopping',
-    'store copying',
-    'offline'
-  ]
-  const errorStatuses = ['dirty', 'quarantined']
-
   return (
     <DrawerSection>
       <DrawerSubHeader>Use database</DrawerSubHeader>
@@ -102,26 +93,24 @@ export const DatabaseSelector = ({
             <option value={EMPTY_OPTION}>{EMPTY_OPTION}</option>
           )}
 
-          {databasesAndAliases.map(dbOrAlias => (
-            <option
-              key={dbOrAlias.name}
-              value={dbOrAlias.name}
-              disabled={
-                unavailableStatuses.includes(dbOrAlias.status) ||
-                errorStatuses.includes(dbOrAlias.status)
-              }
-              title={`status: ${dbOrAlias.status}`}
-            >
-              {dbOrAlias.name}
-              {dbOrAlias === homeDb ? NBSP_CHAR + HOUSE_EMOJI : ''}
-              {unavailableStatuses.includes(dbOrAlias.status)
-                ? NBSP_CHAR + HOUR_GLASS_EMOJI
-                : ''}
-              {errorStatuses.includes(dbOrAlias.status)
-                ? NBSP_CHAR + RED_EXCLAIMATION_EMOJI
-                : ''}
-            </option>
-          ))}
+          {databasesAndAliases.map(dbOrAlias => {
+            // When deduplicating the list of databases and aliases
+            // we prefer to find on that is "online", so if the status is not online
+            // it means none of the databases on the cluster with that name
+            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.test.tsx

@@ -17,7 +17,7 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { AutoExecButtonComponent } from './auto-exec-button'
+import { AutoExecCypherButton } from './auto-exec-button'
 
 const send = jest.fn()
 
@@ -28,7 +28,7 @@ describe('AutoExecButton', function () {
   test('should display command with cmd char', () => {
     // Given
     const { getByText } = render(
-      <AutoExecButtonComponent bus={{ send }} cmd="help params" />
+      <AutoExecCypherButton bus={{ send }} cmd="help params" />
     )
 
     // Then
@@ -39,7 +39,7 @@ describe('AutoExecButton', function () {
   test('should auto execute when clicked', () => {
     // Given
     const { getByText } = render(
-      <AutoExecButtonComponent bus={{ send }} cmd="help params" />
+      <AutoExecCypherButton bus={{ send }} cmd="help params" />
     )
 
     fireEvent.click(getByText(':help params'))
@@ -62,7 +62,7 @@ describe('AutoExecButton', function () {
   test('supports any random cmd string', () => {
     // Given
     const { getByText } = render(
-      <AutoExecButtonComponent bus={{ send }} cmd="foo bar" />
+      <AutoExecCypherButton bus={{ send }} cmd="foo bar" />
     )
 
     fireEvent.click(getByText(':foo bar'))

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}".`
   }
 }