Merge branch 'main' into fix-css-budget

Author: lyubov-voloshko

autoadmin-ws-server/src/handlers/command.ts

@@ -42,7 +42,7 @@ export async function executeCommand(c: Context): Promise<Response> {
 			resolve(c.json({ error: message }, status as 400));
 		};
 
-		cacheResponse(resId, handleResolve, handleReject, handleSendError);
+		cacheResponse(resId, handleResolve, handleReject, handleSendError, connectionToken.token);
 
 		try {
 			sendCommandToClient(connectionToken.token, body, resId);

autoadmin-ws-server/src/handlers/websocket.ts

@@ -9,6 +9,10 @@ import { validateConnectionToken } from '../services/token-validator.js';
 import { hashToken } from '../utils/crypto.js';
 import { logger } from '../utils/logger.js';
 
+interface AuthenticatedSocket extends WebSocket {
+	agentToken?: string;
+}
+
 export function setupWebSocketServer(server: Server): WebSocketServer {
 	const wss = new WebSocketServer({ server });
 
@@ -46,12 +50,22 @@ export function setupWebSocketServer(server: Server): WebSocketServer {
 				);
 				connectionToken = hashedToken;
 				data.connectionToken = connectionToken;
+				(ws as AuthenticatedSocket).agentToken = hashedToken;
 			}
 
 			if (operationType === COMMAND_TYPE.dataFromAgent && resId) {
 				const cachedResponse = responseCache.get(resId);
 
 				if (cachedResponse) {
+					const socketToken = (ws as AuthenticatedSocket).agentToken;
+					if (!socketToken || socketToken !== cachedResponse.routedToken) {
+						logger.warn(
+							{ resId, authenticated: !!socketToken },
+							'Discarding dataFromAgent from a socket not bound to the routed connection token',
+						);
+						return;
+					}
+
 					logger.debug({ resId }, 'Received data from agent');
 					cachedResponse.resolve(rawMessage.toString());
 					responseCache.delete(resId);

autoadmin-ws-server/src/services/response-cache.ts

@@ -7,6 +7,7 @@ interface CachedResponse {
 	reject: (error: Error) => void;
 	sendError: (status: number, message: string) => void;
 	createdAt: Date;
+	routedToken: string;
 }
 
 export const responseCache = new LRUCache<string, CachedResponse>({
@@ -23,12 +24,14 @@ export function cacheResponse(
 	resolve: (data: string) => void,
 	reject: (error: Error) => void,
 	sendError: (status: number, message: string) => void,
+	routedToken: string,
 ): void {
 	responseCache.set(resId, {
 		resolve,
 		reject,
 		sendError,
 		createdAt: new Date(),
+		routedToken,
 	});
 	logger.debug({ resId }, 'Response cached');
 }

frontend/src/app/app.component.css

@@ -139,6 +139,20 @@
 .logo__image {
 	height: 24px;
 	margin-right: 12px;
+	display: block;
+	vertical-align: middle;
+}
+
+.logo picture {
+	display: inline-flex;
+	align-items: center;
+}
+
+@media (width <= 600px) {
+	.logo__image {
+		height: 28px;
+		margin-right: 8px;
+	}
 }
 
 .logo__demo-mark {

frontend/src/app/app.component.html

@@ -86,11 +86,18 @@
                 <a routerLink="/connections-list"
                     *ngIf="userLoggedIn"
                     class="logo">
-                    <img *ngIf="whiteLabelSettingsLoaded"
-                        [src]="whiteLabelSettings.logo || '../assets/rocketadmin_logo_white.svg'"
-                        alt="Logo"
-                        class="logo__image"
-                    >
+                    <ng-container *ngIf="whiteLabelSettingsLoaded">
+                        <img *ngIf="whiteLabelSettings.logo; else defaultRocketLogo"
+                            [src]="whiteLabelSettings.logo"
+                            alt="Logo"
+                            class="logo__image">
+                        <ng-template #defaultRocketLogo>
+                            <picture>
+                                <source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
+                                <img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
+                            </picture>
+                        </ng-template>
+                    </ng-container>
                 </a>
 
                 <a *ngIf="userLoggedIn === false" href="https://rocketadmin.com/" class="logo">

frontend/src/app/app.component.ts

@@ -304,7 +304,7 @@ export class AppComponent {
 					user_hash: res.intercom_hash,
 					user_id: res.id,
 					email: res.email,
-					hide_default_launcher: window.innerWidth > 600,
+					hide_default_launcher: window.innerWidth <= 600,
 				});
 
 			if (this.isDemo)

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

@@ -319,6 +319,10 @@
 	padding: 0;
 }
 
+.connectionItem {
+	min-width: 0;
+}
+
 .connection {
 	display: flex;
 	flex-direction: column;
@@ -357,6 +361,7 @@
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
+	min-width: 0;
 	gap: 12px;
 	background-color: var(--color-primaryPalette-500);
 	border-radius: 2px;
@@ -398,9 +403,14 @@
 	}
 
 	.connection {
+		gap: 4px;
 		padding: 8px;
 	}
 
+	.connection:has(.connectionSchemaButton) {
+		padding: 8px 8px 4px;
+	}
+
 	.connectionLogoPreview {
 		height: 56px;
 		padding: 6px 10px;
@@ -409,6 +419,7 @@
 
 	.connectionInfo .connectionInfo__connectionTitle {
 		font-size: 14px !important;
+		margin-bottom: -8px;
 	}
 
 	.connectionLogoPreview .mat-body-2 {

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -288,6 +288,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
 	openTableFilters(structure) {
 		let filterDialodRef = this.dialog.open(DbTableFiltersDialogComponent, {
 			width: '56em',
+			panelClass: 'mobile-bottom-sheet-dialog',
+			autoFocus: false,
 			data: {
 				connectionID: this.connectionID,
 				tableName: this.selectedTableName,

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

@@ -3,6 +3,43 @@
 	align-items: center;
 	justify-content: space-between;
 	margin-top: 16px;
+	margin-bottom: 12px;
+}
+
+.filters-header__settings {
+	flex: 0 0 auto;
+	margin-left: auto;
+}
+
+.filters-header__text {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
+	line-height: 1.2;
+	text-align: left;
+}
+
+@media (width <= 600px) {
+	.filters-header {
+		justify-content: flex-start;
+		gap: 12px;
+	}
+
+	.filters-header__text {
+		flex: 1 1 auto;
+	}
+}
+
+.filters-header__label {
+	font-size: 18px;
+	font-weight: 600;
+}
+
+.filters-header__table {
+	font-size: 12px;
+	font-weight: 500;
+	opacity: 0.6;
 }
 
 .filters-content {
@@ -11,6 +48,11 @@
 	grid-column-gap: 8px;
 	align-content: flex-start;
 	align-items: flex-start;
+	padding-top: 8px !important;
+}
+
+.filters-select {
+	margin-top: 4px;
 }
 
 .filters-select {
@@ -59,6 +101,48 @@
 	margin-top: 4px;
 }
 
+.filter-line ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+	display: none;
+}
+
+.filter-line {
+	margin-bottom: 12px;
+}
+
+@media (width <= 600px) {
+	.filters-content {
+		grid-template-columns: 1fr 32px;
+	}
+
+	.filter-line {
+		grid-template-columns: 1fr 32px;
+		grid-template-areas:
+			"name name"
+			"field button";
+		row-gap: 2px;
+	}
+
+	.column-name {
+		grid-area: name;
+		grid-column: 1 / -1;
+		margin: 0;
+		font-size: 12px;
+		font-weight: 600;
+		opacity: 0.6;
+	}
+
+	.filter-line__field {
+		grid-area: field;
+		grid-column: 1;
+	}
+
+	.filter-delete-button {
+		grid-area: button;
+		grid-column: 2;
+		margin-top: 0;
+	}
+}
+
 .settings-form__reset-button {
 	margin-right: auto;
 }

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

@@ -1,7 +1,11 @@
 <form #tableFiltersForm="ngForm" class="filters-form">
     <h1 mat-dialog-title class="filters-header">
-        <span>Filters for <strong>{{ data.displayTableName }}</strong> table</span>
+        <span class="filters-header__text">
+            <span class="filters-header__label">Filters</span>
+            <span class="filters-header__table">Table: {{ data.displayTableName }}</span>
+        </span>
         <a mat-icon-button mat-dialog-close
+            class="filters-header__settings"
             routerLink="/dashboard/{{data.connectionID}}/{{data.tableName}}/settings"
             matTooltip="Advanced settings">
             <mat-icon>settings</mat-icon>