refactor: relocate and redesign search bar in dataset and proposal pages

angular.json

@@ -61,7 +61,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "8kb",
-                  "maximumError": "8kb"
+                  "maximumError": "10kb"
                 }
               ],
               "fileReplacements": [

cypress/e2e/datasets/datasets-general.cy.js

@@ -432,7 +432,7 @@ describe("Datasets general", () => {
 
       cy.get("mat-slide-toggle").click();
 
-      cy.get('[data-cy="search-button"]').click();
+      cy.get('[data-cy="filter-search-button"]').click();
 
       cy.get(".condition-panel").first().click();
 
@@ -609,7 +609,7 @@ describe("Datasets general", () => {
           cy.get("input[matInput]").eq(0).clear().type("3.1e4");
         });
 
-      cy.get('[data-cy="search-button"]').click();
+      cy.get('[data-cy="filter-search-button"]').click();
 
       cy.get(".dataset-table mat-table").should("exist");
 

cypress/e2e/other/elastic-search.cy.js

@@ -29,6 +29,7 @@ describe("Elastic search", () => {
 
       cy.finishedLoading();
 
+      cy.get('[data-cy="text-search"]').type(searchQuery1);
       cy.get('[data-cy="search-clear-button"]').click();
 
       cy.get('[data-cy="text-search"]').type(searchQuery1);
@@ -44,6 +45,7 @@ describe("Elastic search", () => {
 
       cy.finishedLoading();
 
+      cy.get('[data-cy="text-search"]').type(searchQuery2);
       cy.get('[data-cy="search-clear-button"]').click();
 
       cy.get('[data-cy="text-search"]').type(searchQuery2);
@@ -64,6 +66,7 @@ describe("Elastic search", () => {
 
     cy.finishedLoading();
 
+    cy.get('[data-cy="text-search"]').type(searchQueryIrrelevant);
     cy.get('[data-cy="search-clear-button"]').click();
 
     cy.get('[data-cy="text-search"]').type(searchQueryIrrelevant);

src/app/datasets/dashboard/dashboard.component.html

@@ -1,52 +1,51 @@
-<breadcrumb></breadcrumb>
-<full-text-search-bar
-  #searchBar
-  data-cy="dataset-text-search"
-  [placeholder]="'Type to search...'"
-  (textChange)="onTextChange($event)"
-  (searchAction)="onSearchAction()"
->
-</full-text-search-bar>
-<mat-sidenav-container [hasBackdrop]="false">
-  <mat-sidenav-content>
-    <div fxLayout="row" fxLayout.xs="column">
-      <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
-        <datasets-filter></datasets-filter>
-        <ng-template [ngIf]="this.loggedIn$ | async">
-          <ingestor-creation
-            #ingestor
-            style="display: none"
-          ></ingestor-creation>
-          <mat-card
-            *ngIf="appConfig.addDatasetEnabled"
-            class="add-card"
-            (click)="openDialog()"
-          >
-            <mat-card-content>
-              <mat-icon> add_circle </mat-icon>
-              Create Dataset
-            </mat-card-content>
-          </mat-card>
+<div class="dashboard-main">
+  <mat-sidenav-container [hasBackdrop]="false">
+    <mat-sidenav-content>
 
-          <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
-            <batch-card></batch-card>
-          </div>
-        </ng-template>
+      <div fxLayout="row" fxLayout.xs="column" class="dashboard-header">
+        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
+          <breadcrumb></breadcrumb>
+        </div>
+        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+          <ng-template [ngIf]="this.loggedIn$ | async">
+            <dataset-table-actions
+              [selectedSets]="selectedSets$ | async"
+            ></dataset-table-actions>
+          </ng-template>
+        </div>
       </div>
 
-      <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
-        <ng-template [ngIf]="this.loggedIn$ | async">
-          <dataset-table-actions
+      <div fxLayout="row" fxLayout.xs="column">
+        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
+          <datasets-filter></datasets-filter>
+          <ng-template [ngIf]="this.loggedIn$ | async">
+            <ingestor-creation
+              #ingestor
+              style="display: none"
+            ></ingestor-creation>
+            <mat-card
+              *ngIf="appConfig.addDatasetEnabled"
+              class="add-card"
+              (click)="openDialog()"
+            >
+              <mat-card-content>
+                <mat-icon> add_circle </mat-icon>
+                Create Dataset
+              </mat-card-content>
+            </mat-card>
+            <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
+              <batch-card></batch-card>
+            </div>
+          </ng-template>
+        </div>
+        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+          <dataset-table
             [selectedSets]="selectedSets$ | async"
-          ></dataset-table-actions>
-        </ng-template>
-
-        <dataset-table
-          [selectedSets]="selectedSets$ | async"
-          (rowClick)="onRowClick($event)"
-          (pageChange)="onPageChange($event)"
-        ></dataset-table>
+            (rowClick)="onRowClick($event)"
+            (pageChange)="onPageChange($event)"
+          ></dataset-table>
+        </div>
       </div>
-    </div>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>

src/app/datasets/dashboard/dashboard.component.scss

@@ -1,11 +1,20 @@
+.dashboard-main {
+  width: 100%;
+  max-width: 100%;
+}
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0; 
+}
+
 mat-sidenav-container {
   mat-sidenav-content {
     padding: 0.5rem;
     background-color: #ffffff;
 
-    :host-context(.anonymous-site) .action-column {
-      margin-top: 3.5rem;
-    }
     .action-column {
       margin-right: 0.5rem;
 
@@ -25,7 +34,6 @@ mat-sidenav-container {
     }
 
     .table-column {
-      margin-top: 0.5rem;
       padding-bottom: 1rem;
     }
   }

src/app/datasets/dataset-table/dataset-table.component.html

@@ -7,7 +7,11 @@
   [dataSource]="dataSource"
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
-  [showGlobalTextSearch]="showGlobalTextSearch"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  (globalTextSearchChange)="onTextSearchChange($event)"
+  (globalTextSearchApply)="onTextSearchAction()"
+  [globalTextSearchPlaceholder]="'Dataset name, Run number...'"
   [localization]="localization"
   [selectionIds]="selectionIds"
   (paginationChange)="onPageChange($event)"

src/app/datasets/dataset-table/dataset-table.component.ts

@@ -17,6 +17,10 @@ import {
   deselectDatasetAction,
   selectAllDatasetsAction,
   sortByColumnAction,
+  setSearchTermsAction,
+  setTextFilterAction,
+  fetchFacetCountsAction,
+  fetchDatasetsAction,
 } from "state-management/actions/datasets.actions";
 import { fetchInstrumentsAction } from "state-management/actions/instruments.actions";
 
@@ -103,6 +107,7 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
   instrumentMap: Map<string, Instrument> = new Map();
 
   @Output() rowClick = new EventEmitter<OutputDatasetObsoleteDto>();
+  @Output() textSearch = new EventEmitter<string>();
 
   tableDefaultSettingsConfig: ITableSetting = {
     visibleActionMenu: actionMenu,
@@ -147,6 +152,8 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
 
   tablesSettings: object;
 
+  globalTextSearch = "";
+
   constructor(
     public appConfigService: AppConfigService,
     private store: Store,
@@ -556,6 +563,24 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
         });
       }),
     );
+
+    this.subscriptions.push(
+      this.route.queryParams.subscribe((queryParams) => {
+        const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
+        this.globalTextSearch = searchQuery.text || "";
+      }),
+    );
+  }
+
+  onTextSearchChange(term: string) {
+    this.globalTextSearch = term;
+    this.store.dispatch(setSearchTermsAction({ terms: term }));
+    this.store.dispatch(setTextFilterAction({ text: term }));
+  }
+
+  onTextSearchAction() {
+    this.store.dispatch(fetchDatasetsAction());
+    this.store.dispatch(fetchFacetCountsAction());
   }
 
   ngOnDestroy() {

src/app/datasets/datasets-filter/datasets-filter.component.scss

@@ -1,6 +1,5 @@
 @use "@angular/material" as mat;
 mat-card {
-  margin-top: 0.5rem;
 
   .mat-mdc-form-field {
     width: 100%;

src/app/proposals/proposal-dashboard/proposal-dashboard.component.html

@@ -1,17 +1,19 @@
 <breadcrumb></breadcrumb>
 
-<proposal-search-bar></proposal-search-bar>
 <mat-sidenav-container [hasBackdrop]="false">
   <mat-sidenav-content>
     <div fxLayout="row" fxLayout.xs="column">
       <div class="action-column" fxFlex="0" fxFlex.lt-xl="0">
-        <proposal-side-filter></proposal-side-filter>
+        <proposal-side-filter
+          (collapsedChange)="onSideFilterCollapsedChange($event)"
+        ></proposal-side-filter>
       </div>
 
       <div class="table-column" fxFlex="100" fxFlex.lt-xl="100">
         <proposal-table
           [dataSource]="dataSource$"
           [defaultPageSize]="defaultPageSize"
+          [sideFilterCollapsed]="sideFilterCollapsed"
         ></proposal-table>
       </div>
     </div>

src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts

@@ -21,6 +21,7 @@ export class ProposalDashboardComponent implements OnInit, OnDestroy {
   dataSource$ = new BehaviorSubject<ProposalClass[]>([]);
   params$ = this.route.queryParams;
   defaultPageSize = 10;
+  sideFilterCollapsed = false;
 
   constructor(
     private store: Store,
@@ -55,6 +56,10 @@ export class ProposalDashboardComponent implements OnInit, OnDestroy {
     );
   }
 
+  onSideFilterCollapsedChange(collapsed: boolean) {
+    this.sideFilterCollapsed = collapsed;
+  }
+
   ngOnDestroy() {
     this.subscriptions.forEach((sub) => {
       sub.unsubscribe();

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss

@@ -34,7 +34,7 @@ mat-card {
   position: absolute;
   z-index: 10;
   background: none;
-  top: 1.125rem;
+  top: 2.125rem;
   left: 0.625rem;
   scale: 0.9;
   background: rgba($color: #000000, $alpha: 0.05);

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts

@@ -32,6 +32,7 @@ export class ProposalSideFilterComponent implements OnInit {
   appConfig = this.appConfigService.getConfig();
   activeFilters: Record<string, string[] | DateRange> = {};
   collapsed = false;
+  @Output() collapsedChange = new EventEmitter<boolean>();
 
   filterLists: FilterConfig[] = [];
 
@@ -235,6 +236,7 @@ export class ProposalSideFilterComponent implements OnInit {
 
   toggleCollapse() {
     this.collapsed = !this.collapsed;
+    this.collapsedChange.emit(this.collapsed);
   }
 
   reset() {

src/app/proposals/proposal-table/proposal-table.component.html

@@ -7,8 +7,13 @@
   [dataSource]="dataSource"
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
-  [showGlobalTextSearch]="showGlobalTextSearch"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  (globalTextSearchChange)="onTextSearchChange($event)"
+  (globalTextSearchApply)="onTextSearchAction()"
+  [globalTextSearchPlaceholder]="'Proposal id, Title, Abstract...'"
   [localization]="localization"
+  [sideFilterCollapsed] = "sideFilterCollapsed"
   (paginationChange)="onPageChange($event)"
   (onRowEvent)="onRowClick($event)"
   (settingChange)="onSettingChange($event)"