Add more text on error , and some fix

app/src/components/Page/Page.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Layout, Modal, notification } from 'antd';
 import Markdown from 'markdown-to-jsx';
+import remarkGfm from 'remark-gfm';
 import { Flex, FlexProps } from 'reflexy';
 import classNames from 'classnames';
 import { IReactionDisposer, reaction } from 'mobx';
@@ -34,7 +35,11 @@ export default class Page extends React.Component<Props> {
             // Show
             Modal.error({
               title: n.title,
-              content: <Markdown>{(n.description ?? 'NULL').toString()}</Markdown>,
+              content: (
+                <Markdown remarkPlugins={[remarkGfm]}>
+                  {(n.description ?? 'NULL').toString()}
+                </Markdown>
+              ),
             });
           } else {
             notification.open({

app/src/services/api/Api.ts

@@ -24,10 +24,10 @@ export default class Api {
     try {
       version = await provider.fastGetVersion();
       console.log('Version CH', version);
-
-      // throw new Error('Cants');
+      //throw new Error('Cants');
     } catch (e) {
       let typeError = '';
+      console.log(e.name);
       if (e.name == 'AbortError') {
         typeError = 'AbortError';
       }
@@ -38,15 +38,18 @@ export default class Api {
       } as DescriptionError;
     }
     if (!version) {
-      throw new Error('Can`t fetch version server');
+      throw {
+        title: 'Can`t fetch version server',
+        description: connectGetErrorMessage(connection, 'version'),
+        error: new Error('Error on connection'),
+      } as DescriptionError;
     }
     const api = new Api(provider, version);
 
     console.log(`Connection - OK, version: ${version}`);
     console.log('CheckDatabaseStructure....');
     await api.provider.checkDatabaseStructure();
     console.log('Structure - OK, go work');
-    // if (pool.)
     return api;
   }
 

app/src/services/api/provider/connectGetErrorMessage.ts

@@ -1,9 +1,9 @@
 import Connection from '../../Connection';
 
 export default function connectGetErrorMessage(connection: Connection, type: string): string {
-  const host = new URL(connection.connectionUrl).host;
-  const protocol = new URL(connection.connectionUrl).protocol;
-  const port = new URL(connection.connectionUrl).port;
+  const url = new URL(connection.connectionUrl);
+
+  const proto = url.protocol.replace(/:$/g, '');
 
   return `
 ### Try resolve problem
@@ -12,13 +12,31 @@ export default function connectGetErrorMessage(connection: Connection, type: str
 
 2. Check username & password
 
-3. Check clickhouse-server settings if user in readonly mode   
-  
-host : \`${host}\`  
-protocol : \`${protocol}\`  
-port : \`${port}\`
-  
-\`\`\`CURL  \`\`\`
+3. Check clickhouse-server settings, if user in readonly mode   
+
+Your input:
+\`${proto}://${url.host}\`
   
-  ghi`;
+#### Try check in browser 
+
+1. Check host & port, open, must see OK:  \`${proto}://${url.host}\`
+
+2. Check login & password, open, see version:\`${proto}://${url.host}?user=demo&password=demo&query=SELECT%20version()%20as%20version%20FORMAT%20JSON\`
+
+3. Check can apply settings, open, see version:\`${proto}://${url.host}?add_http_cors_header=1&user=demo&password=demo&query=SELECT%20version()%20as%20version%20FORMAT%20JSON\`
+
+4. Check can apply settings, open, see version:\`${proto}://${url.host}?max_result_rows=123&add_http_cors_header=1&user=demo&password=demo&query=SELECT%20version()%20as%20version%20FORMAT%20JSON\`
+
+#### Result 
+
+If 1 -> check host,dns...
+
+if 2 -> check login/password 
+
+if 3 -> need edit config clickhouse server , add add_http_cors_header
+
+if 4 -> Tabix can not change \`max_result_rows\`, use readOnly mode. 
+
+if all OK, this new Error( -> create issue )       
+`;
 }

app/src/services/connectionsStorage.ts

@@ -25,7 +25,7 @@ export async function get(): Promise<Connection[]> {
 
 export async function saveConnections(connections: ReadonlyArray<Connection>) {
   try {
-    console.log('appStorage->saveConnections', connections);
+    // console.log('appStorage->saveConnections', connections);
     await appStorage.setItem(key, connections);
   } catch (e) {
     console.error(e);

app/src/views/SignInView/SignInView.tsx

@@ -5,7 +5,7 @@ import { Button, Layout, Typography, Tabs, Row, Col, Divider, Timeline, Badge }
 import { observer } from 'mobx-react';
 import { typedInject } from 'module/mobx-utils';
 import { SignInStore, Stores } from 'stores';
-import { Connection, ConnectionType, isDirectConnection } from 'services';
+import { Connection, ConnectionLike, ConnectionType, isDirectConnection } from 'services';
 import { ConnectionModel, DirectConnectionModel } from 'models';
 import Page from 'components/Page';
 import Splitter from 'components/Splitter';
@@ -80,8 +80,15 @@ class SignInView extends React.Component<RoutedProps> {
   }
 
   @observable
-  private onFinishForm = (values: keyof DirectConnectionModel): void => {
+  private onFinishForm = (values: ConnectionLike): void => {
     const { selectedConnection } = this.props.store;
+
+    // validate url
+    const u = new URL(values.connectionUrl);
+
+    console.log(`Connect to: ${u.host} : ${u.port} , ${u.protocol}`);
+
+    // -----------------------------------
     // Fackig mobx drop naxui
     // Update data
     // @ts-ignore

package.json

@@ -148,6 +148,7 @@
     "react-virtualized": "^9.22.3",
     "react-virtualized-tree": "2.3.10",
     "reflexy": "^2.3.3",
+    "remark-gfm": "^3.0.1",
     "sql-formatter": "^2.3.2",
     "typelevel-ts": "^0.3.5",
     "uuid": "8.3.2",