fixes + UX

packages/datalib/src/TableGridDisplay.ts

@@ -81,7 +81,7 @@ export class TableGridDisplay extends GridDisplay {
     const childAlias = `${column.uniqueName}_ref`;
     if ((select.from.relations || []).find((x) => x.alias == childAlias)) return;
     const table = this.getFkTarget(column);
-    if (table) {
+    if (table && table.primaryKey) {
       select.from.relations = [
         ...(select.from.relations || []),
         {
@@ -118,7 +118,7 @@ export class TableGridDisplay extends GridDisplay {
           continue;
         }
         const table = this.getFkTarget(column);
-        if (table && table.columns && table.columns.length > 0) {
+        if (table && table.columns && table.columns.length > 0 && table.primaryKey) {
           const hintColumn = table.columns.find((x) => x?.dataType?.toLowerCase()?.includes('char'));
           if (hintColumn) {
             const parentUniqueName = column.uniquePath.slice(0, -1).join('.');

packages/engines/mysql/MySqlAnalyser.js

@@ -20,7 +20,7 @@ function getColumnInfo({
   if (numericPrecision && numericScale && isTypeNumeric(dataType))
     fullDataType = `${dataType}(${numericPrecision},${numericScale})`;
   return {
-    notNull: !isNullable,
+    notNull: !isNullable || isNullable == 'NO' || isNullable == 'no',
     autoIncrement: extra && extra.toLowerCase().includes('auto_increment'),
     columnName,
     dataType: fullDataType,

packages/web/src/widgets/DatabaseWidget.js

@@ -131,7 +131,7 @@ function SqlObjectListWrapper() {
     return (
       <>
         <WidgetTitle>Tables, views, functions</WidgetTitle>
-        <ErrorInfo message="Database not selected" />
+        <ErrorInfo message="Database not selected" icon="fas fa-exclamation-circle blue" />
       </>
     );
   }

packages/web/src/widgets/ErrorInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -11,14 +12,13 @@ const Container = styled.div`
 const Icon = styled.div`
   font-size: 20pt;
   margin: 10px;
-  color: red;
 `;
 
-export default function ErrorInfo({ message }) {
+export default function ErrorInfo({ message, icon = 'fas fa-times-circle red' }) {
   return (
     <Container>
       <Icon>
-        <i className="fas fa-times-circle" />
+        <FontIcon icon={icon} />
       </Icon>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -42,7 +42,7 @@ export default function StatusBar() {
         </Item>
       )}
 
-      {status && (
+      {connection && status && (
         <Item>
           {status.name == 'pending' && (
             <>
@@ -61,6 +61,13 @@ export default function StatusBar() {
           )}
         </Item>
       )}
+      {!connection && (
+        <Item>
+          <>
+            <FontIcon icon="fas fa-plug gray" /> Not connected
+          </>
+        </Item>
+      )}
     </Container>
   );
 }