From 8714e2e629abf55d98321ddfea609ee5caeb2ba0 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 18 Aug 2025 10:44:58 +0300
Subject: [PATCH 1/3] saved filters: loader

---
 .../saved-filters-panel.component.css         |  1 -
 .../saved-filters-panel.component.html        |  3 +-
 .../saved-filters-panel.component.ts          |  9 ++++--
 .../placeholder-saved-filters.component.css   | 31 +++++++++++++++++++
 .../placeholder-saved-filters.component.html  |  6 ++++
 ...laceholder-saved-filters.component.spec.ts | 23 ++++++++++++++
 .../placeholder-saved-filters.component.ts    | 10 ++++++
 7 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css
 create mode 100644 frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html
 create mode 100644 frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
 create mode 100644 frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts

diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index 2349c5918..447472251 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    margin: 20px 0 4px;
 }
 
 .saved-filters-list {
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
index 7384e9123..2d0f85d44 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
@@ -1,5 +1,6 @@
 <div class="saved-filters-container">
-    <div class="saved-filters-list">
+    <app-placeholder-saved-filters *ngIf="savedFilterData === null"></app-placeholder-saved-filters>
+    <div *ngIf="savedFilterData" class="saved-filters-list">
         <button *ngIf="accessLevel === 'edit' && savedFilterData?.length === 0"
             mat-button type="button"
             (click)="handleOpenSavedFiltersDialog()">
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
index 4106ef5a6..867ba33d4 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
@@ -18,6 +18,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { PlaceholderSavedFiltersComponent } from 'src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component';
 import { SavedFiltersDialogComponent } from './saved-filters-dialog/saved-filters-dialog.component';
 import { TablesService } from 'src/app/services/tables.service';
 import { UIwidgets } from 'src/app/consts/record-edit-types';
@@ -38,7 +39,8 @@ import { normalizeTableName } from 'src/app/lib/normalize';
     MatSelectModule,
     MatTabsModule,
     MatTooltipModule,
-    MatMenuModule
+    MatMenuModule,
+    PlaceholderSavedFiltersComponent
   ],
   templateUrl: './saved-filters-panel.component.html',
   styleUrl: './saved-filters-panel.component.css'
@@ -59,7 +61,7 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 
   private dynamicColumnValueDebounceTimer: any = null;
 
-  public savedFilterData: any[] = [];
+  public savedFilterData = null;
   public savedFilterMap: { [key: string]: any } = {};
 
   public selectedFilterSetId: string | null = null;
@@ -96,6 +98,9 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
     this.route.paramMap.subscribe(params => {
       const tableNameFromUrl = params.get('table-name');
       if (tableNameFromUrl) {
+        this.savedFilterData = null;
+        this.selectedFilterSetId = null;
+        this.selectedFilter = null;
         this.selectedTableName = tableNameFromUrl;
         this.loadSavedFilters();
       }
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css
new file mode 100644
index 000000000..6c20e81a7
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css
@@ -0,0 +1,31 @@
+.box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.edit-button {
+    height: 36px;
+    width: 36px;
+    border-radius: 50%;
+    margin-right: 8px;
+    /* mix-blend-mode: normal !important; */
+}
+
+.saved-filter {
+    height: 32px;
+    border-radius: 4px;
+}
+
+.saved-filter_1 {
+    width: 100px;
+}
+
+.saved-filter_2 {
+    width: 150px;
+}
+
+.saved-filter_3 {
+    width: 200px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html
new file mode 100644
index 000000000..397079f46
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html
@@ -0,0 +1,6 @@
+<div class="box skeleton">
+    <div class="bone edit-button"></div>
+    <div class="bone saved-filter saved-filter_1"></div>
+    <div class="bone saved-filter saved-filter_2"></div>
+    <div class="bone saved-filter saved-filter_3"></div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
new file mode 100644
index 000000000..1015104b6
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaceholderUserGroupComponent } from './placeholder-user-group.component';
+
+describe('PlaceholderUserGroupComponent', () => {
+  let component: PlaceholderUserGroupComponent;
+  let fixture: ComponentFixture<PlaceholderUserGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [PlaceholderUserGroupComponent]
+})
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlaceholderUserGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts
new file mode 100644
index 000000000..d1fa79aa5
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-placeholder-saved-filters',
+  templateUrl: './placeholder-saved-filters.component.html',
+  styleUrls: ['./placeholder-saved-filters.component.css']
+})
+export class PlaceholderSavedFiltersComponent {
+
+}

From 2338340df6c9438658bcea8d629931c6bfc03fcb Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 18 Aug 2025 11:05:05 +0300
Subject: [PATCH 2/3] saved filters: add amplitude events on Set up button and
 on create success

---
 .../saved-filters-dialog.component.ts               | 13 +++++++++++--
 .../saved-filters-panel.component.html              |  6 +++++-
 .../saved-filters-panel.component.ts                |  4 +++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
index ee1ba6552..ecf219811 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
@@ -22,6 +22,7 @@ import { UIwidgets } from 'src/app/consts/record-edit-types';
 import { TableField, TableForeignKey } from 'src/app/models/table';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
 import { omitBy } from 'lodash';
+import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
 
 @Component({
   selector: 'app-saved-filters-dialog',
@@ -40,7 +41,8 @@ import { omitBy } from 'lodash';
     RouterModule,
     MatDialogModule,
     MatSnackBarModule,
-    ContentLoaderComponent
+    ContentLoaderComponent,
+    Angulartics2OnModule
   ],
   templateUrl: './saved-filters-dialog.component.html',
   styleUrl: './saved-filters-dialog.component.css'
@@ -73,7 +75,8 @@ export class SavedFiltersDialogComponent implements OnInit {
     private _tables: TablesService,
     private _connections: ConnectionsService,
     private dialogRef: MatDialogRef<SavedFiltersDialogComponent>,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private angulartics2: Angulartics2,
   ) {}
 
   ngOnInit(): void {
@@ -279,8 +282,14 @@ export class SavedFiltersDialogComponent implements OnInit {
       } else {
         this._tables.createSavedFilter(this.data.connectionID, this.data.tableName, payload)
         .subscribe(() => {
+          this.angulartics2.eventTrack.next({
+            action: 'Saved filters: saved filter is created successfully',
+          });
           this.dialogRef.close(true);
         }, (error) => {
+          this.angulartics2.eventTrack.next({
+            action: 'Saved filters: error creating saved filter',
+          });
           console.error('Error saving filter:', error);
           this.snackBar.open('Error saving filter', 'Close', { duration: 3000 });
         });
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
index 2d0f85d44..9350958d9 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
@@ -3,6 +3,8 @@
     <div *ngIf="savedFilterData" class="saved-filters-list">
         <button *ngIf="accessLevel === 'edit' && savedFilterData?.length === 0"
             mat-button type="button"
+            angulartics2On="click"
+            angularticsAction="Saved filters: first time setup is clicked"
             (click)="handleOpenSavedFiltersDialog()">
             <mat-icon>tune</mat-icon>
             Setup custom filters
@@ -10,7 +12,9 @@
 
         <button *ngIf="accessLevel === 'edit' && savedFilterData.length !== 0"
             mat-icon-button type="button"
-            [matMenuTriggerFor]="menu">
+            [matMenuTriggerFor]="menu"
+            angulartics2On="click"
+            angularticsAction="Saved filters: open menu is clicked">
             <mat-icon>tune</mat-icon>
         </button>
         <mat-menu #menu="matMenu">
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
index 867ba33d4..02b511e50 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
@@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angu
 import { TableField, TableForeignKey } from 'src/app/models/table';
 
 import { AccessLevel } from 'src/app/models/user';
+import { Angulartics2OnModule } from 'angulartics2';
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DynamicModule } from 'ng-dynamic-component';
@@ -40,7 +41,8 @@ import { normalizeTableName } from 'src/app/lib/normalize';
     MatTabsModule,
     MatTooltipModule,
     MatMenuModule,
-    PlaceholderSavedFiltersComponent
+    PlaceholderSavedFiltersComponent,
+    Angulartics2OnModule
   ],
   templateUrl: './saved-filters-panel.component.html',
   styleUrl: './saved-filters-panel.component.css'

From fd7252c9ce6d62ca780416999712520bdfdcd286 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 18 Aug 2025 11:11:54 +0300
Subject: [PATCH 3/3] fixed unit tests

---
 .../saved-filters-dialog.component.spec.ts     |  4 +++-
 .../saved-filters-panel.component.spec.ts      | 18 ++++++++++--------
 ...placeholder-saved-filters.component.spec.ts | 12 ++++++------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts
index 0e9e1c3c4..139a26feb 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts
@@ -8,6 +8,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { SavedFiltersDialogComponent } from './saved-filters-dialog.component';
 import { TablesService } from 'src/app/services/tables.service';
 import { of } from 'rxjs';
+import { Angulartics2Module } from 'angulartics2';
 
 describe('SavedFiltersDialogComponent', () => {
   let component: SavedFiltersDialogComponent;
@@ -26,7 +27,8 @@ describe('SavedFiltersDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         SavedFiltersDialogComponent,
-        RouterTestingModule
+        RouterTestingModule,
+        Angulartics2Module.forRoot(),
       ],
       providers: [
         { provide: TablesService, useValue: tableSpy },
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts
index 38fd06149..88f7b0be7 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts
@@ -1,6 +1,7 @@
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { Angulartics2Module } from 'angulartics2';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MatDialog } from '@angular/material/dialog';
@@ -14,7 +15,7 @@ class JsonURLMock {
   static stringify(obj: any): string {
     return JSON.stringify(obj);
   }
-  
+
   static parse(str: string): any {
     try {
       return JSON.parse(str);
@@ -77,7 +78,8 @@ describe('SavedFiltersPanelComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         SavedFiltersPanelComponent,
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        Angulartics2Module.forRoot(),
       ],
       providers: [
         { provide: TablesService, useValue: tablesServiceMock },
@@ -99,10 +101,10 @@ describe('SavedFiltersPanelComponent', () => {
     component.tableTypes = {};
     component.selectedTableDisplayName = 'Users';
     component.tableForeignKeys = [];
-    
+
     // Mock filterSelected event emitter
     spyOn(component.filterSelected, 'emit');
-    
+
     fixture.detectChanges();
   });
 
@@ -164,10 +166,10 @@ describe('SavedFiltersPanelComponent', () => {
         filters: { city: { eq: 'New York' } }
       }
     };
-    
+
     // Spy on applyDynamicColumnChanges to prevent it from executing
     spyOn(component, 'applyDynamicColumnChanges');
-    
+
     // Replace setTimeout with a function that executes immediately
     spyOn<any>(window, 'setTimeout').and.callFake((fn) => {
       // Execute function immediately instead of waiting
@@ -175,10 +177,10 @@ describe('SavedFiltersPanelComponent', () => {
       // Return a fake timer ID
       return 999;
     });
-    
+
     // Call the method under test
     component.updateDynamicColumnValue('Chicago');
-    
+
     // Verify the value was updated
     expect(component.savedFilterMap.filter1.dynamicColumn.value).toBe('Chicago');
     expect(component.applyDynamicColumnChanges).toHaveBeenCalled();
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
index 1015104b6..2094d1a1f 100644
--- a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
+++ b/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PlaceholderUserGroupComponent } from './placeholder-user-group.component';
+import { PlaceholderSavedFiltersComponent } from './placeholder-saved-filters.component';
 
-describe('PlaceholderUserGroupComponent', () => {
-  let component: PlaceholderUserGroupComponent;
-  let fixture: ComponentFixture<PlaceholderUserGroupComponent>;
+describe('PlaceholderSavedFiltersComponent', () => {
+  let component: PlaceholderSavedFiltersComponent;
+  let fixture: ComponentFixture<PlaceholderSavedFiltersComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-    imports: [PlaceholderUserGroupComponent]
+    imports: [PlaceholderSavedFiltersComponent]
 })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PlaceholderUserGroupComponent);
+    fixture = TestBed.createComponent(PlaceholderSavedFiltersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });