Fixes

frontend/src/app/app.component.ts

@@ -109,6 +109,8 @@ export class AppComponent {
     this.matIconRegistry.addSvgIcon("dynamodb", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/db-logos/dynamodb_logo.svg"));
     this.matIconRegistry.addSvgIcon("ibmdb2", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/db-logos/db2_logo.svg"));
     this.matIconRegistry.addSvgIcon("cassandra", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/db-logos/сassandra_logo.svg"));
+    this.matIconRegistry.addSvgIcon("redis", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/db-logos/redis_logo.svg"));
+    this.matIconRegistry.addSvgIcon("elasticsearch", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/db-logos/elasticsearch_logo.svg"));
     this.matIconRegistry.addSvgIcon("github", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/github.svg"));
     this.matIconRegistry.addSvgIcon("google", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/google.svg"));
     this.matIconRegistry.addSvgIcon("ai_rocket", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/icons/ai-rocket.svg"));

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -53,6 +53,7 @@
 
 .addConnectionLink {
     display: flex;
+    flex-direction: column;
     align-items: center;
     gap: 6px;
     border-radius: 4px;
@@ -62,8 +63,7 @@
         0px 0px 2px 0px rgba(0, 0, 0, 0.14);
     color: inherit;
     font-weight: 600;
-    height: 48px;
-    padding-left: 6px;
+    padding: 12px;
     text-decoration: none;
     transition: box-shadow 200ms, background 200ms, border 200ms;
 }
@@ -98,14 +98,14 @@
     justify-content: center;
     background-color: #fff;
     border-radius: 4px;
-    height: 36px;
-    width: 36px;
+    height: 40px;
+    width: 40px;
 }
 
 .addConnectionLink__icon {
     flex-shrink: 0;
-    height: 20px;
-    width: 20px;
+    height: 30px;
+    width: 30px;
 }
 
 .showAllButton {

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -126,7 +126,7 @@
 .actions {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
     margin-top: -16px;
 }
 
@@ -159,6 +159,26 @@
     pointer-events: none;
 }
 
+@media (prefers-color-scheme: light) {
+    .ai-insights-button {
+        background: var(--color-accentedPalette-50);
+    }
+
+    .ai-insights-button:hover {
+        background: var(--color-accentedPalette-100) !important;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-insights-button {
+        background: var(--color-accentedPalette-900);
+    }
+
+    .ai-insights-button:hover {
+        background: var(--color-accentedPalette-800) !important;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .ai-icon ::ng-deep svg path {
         fill: #fff;
@@ -169,6 +189,22 @@
     display: inline-block;
 }
 
+.db-table-manage-columns-button__count {
+    margin-left: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .db-table-manage-columns-button__count {
+        color: rgba(255, 255, 255, 0.56);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .db-table-manage-columns-button__count {
+        color: rgba(0, 0, 0, 0.64);
+    }
+}
+
 .active-filters {
     display: flex;
     align-items: center;

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html

@@ -65,6 +65,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
             </form>
             <div class="actions">
                 <button mat-button type="button"
+                    class="ai-insights-button"
                     matTooltip="AI assistant"
                     angulartics2On="click"
                     angularticsAction="Dashboard: AI is clicked"
@@ -96,9 +97,12 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         angulartics2On="click"
                         angularticsAction="Dashboard: columns multiselect is clicked">
                         <mat-icon fontSet="material-icons-outlined">view_week</mat-icon>
-                        Columns ({{ tableData.displayedDataColumns.length   }}
-                            /
-                            {{ tableData.columns.length }})
+                        Columns
+                            <span class="db-table-manage-columns-button__count">
+                                ({{ tableData.displayedDataColumns.length   }}
+                                /
+                                {{ tableData.columns.length }})
+                            </span>
                     </button>
                     <mat-menu #menu="matMenu">
                         <button mat-menu-item

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts

@@ -524,10 +524,6 @@ export class DbTableViewComponent implements OnInit {
   }
 
   exportData() {
-    console.log('export data');
-    console.log(this.selection.selected);
-
-    // Helper function to convert value to CSV-safe string
     const convertToCSVValue = (value: any): string => {
       // Handle null and undefined
       if (value === null || value === undefined) {
@@ -537,10 +533,8 @@ export class DbTableViewComponent implements OnInit {
       // Handle nested objects and arrays - convert to JSON string
       if (typeof value === 'object') {
         try {
-          // Convert object/array to JSON string
           value = JSON.stringify(value);
         } catch (e) {
-          // Handle circular references or other JSON stringify errors
           value = '[Object]';
         }
       }
@@ -563,20 +557,18 @@ export class DbTableViewComponent implements OnInit {
       return;
     }
 
-    const header = Object.keys(this.selection.selected[0]);
+    // Use the displayed columns order from the table
+    const columnsToExport = this.tableData.displayedDataColumns;
 
     // Create CSV rows with proper handling of foreign keys
     const csv = this.selection.selected.map((row) =>
-      header
+      columnsToExport
         .map((fieldName) => {
           let value = row[fieldName];
 
-          // Check if this field is a foreign key
           if (this.isForeignKey(fieldName) && value && typeof value === 'object') {
-            // Get the foreign key definition
             const foreignKey = this.tableData.foreignKeys[fieldName];
             if (foreignKey) {
-              // Extract only the primary key value from the foreign key object
               value = value[foreignKey.referenced_column_name];
             }
           }
@@ -586,8 +578,8 @@ export class DbTableViewComponent implements OnInit {
         .join(',')
     );
 
-    // Add header row
-    csv.unshift(header.map(h => convertToCSVValue(h)).join(','));
+    // Add header row using the same column order
+    csv.unshift(columnsToExport.map(h => convertToCSVValue(h)).join(','));
     const csvArray = csv.join('\r\n');
 
     const a = document.createElement('a');