feat: unify enterToApply and checkBoxFilterClickTrigger into autoApplyFilters

CI/e2e/frontend.config.e2e.json

@@ -3,7 +3,7 @@
     "nonAuthenticatedUser": "DATASETS",
     "authenticatedUser": "PROPOSALS"
   },
-  "checkBoxFilterClickTrigger": false,
+  "autoApplyFilters": false,
   "accessTokenPrefix": "Bearer ",
   "addDatasetEnabled": false,
   "allowConfigOverrides": true,  

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

@@ -777,4 +777,80 @@ describe("Datasets general", () => {
       cy.get('[data-cy="remove-condition-button"]').click();
     });
   });
+
+  describe("Auto apply filters", () => {
+    beforeEach(() => {
+      cy.clearLocalStorage();
+      cy.createDataset({ keywords: ["test auto apply"] });
+      cy.createDataset({ keywords: ["another keyword"] });
+    });
+
+    it("should apply checkbox filters when user clicks", () => {
+      cy.readFile("CI/e2e/frontend.config.e2e.json").then((baseConfig) => {
+        const testConfig = {
+          ...baseConfig,
+          autoApplyFilters: true,
+          defaultDatasetsListSettings: {
+            ...baseConfig.defaultDatasetsListSettings,
+            filters: [
+              {
+                key: "keywords",
+                label: "Keyword",
+                type: "checkbox",
+                description: "Filter by keywords in the dataset",
+                enabled: true,
+              },
+            ],
+          },
+        };
+
+        cy.intercept("GET", "**/admin/config", testConfig).as("getConfig");
+      });
+
+      cy.visit("/datasets");
+      cy.wait("@getConfig", { timeout: 20000 });
+      cy.finishedLoading();
+
+      cy.get(".checkbox-list mat-checkbox")
+        .contains(/test auto apply/i)
+        .click({ force: true });
+    });
+
+    it("should apply typed filters when user presses Enter", () => {
+      cy.readFile("CI/e2e/frontend.config.e2e.json").then((baseConfig) => {
+        const testConfig = {
+          ...baseConfig,
+          autoApplyFilters: true,
+          defaultDatasetsListSettings: {
+            ...baseConfig.defaultDatasetsListSettings,
+            filters: [
+              {
+                key: "keywords",
+                label: "Keyword",
+                type: "multiSelect",
+                description: "Filter by keywords in the dataset",
+                enabled: true,
+              },
+            ],
+          },
+        };
+
+        cy.intercept("GET", "**/admin/config", testConfig).as("getConfig");
+      });
+
+      cy.visit("/datasets");
+      cy.wait("@getConfig", { timeout: 20000 });
+      cy.finishedLoading();
+
+      cy.get("mat-form-field#keywords input.item-input")
+        .click()
+        .type("test auto apply");
+      cy.get("mat-option")
+        .contains(/test auto apply/i)
+        .click();
+      cy.get("mat-form-field#keywords input.item-input")
+        .click()
+        .type("{enter}");
+    });
+  });
 });

src/app/admin/schema/frontend.config.jsonforms.json

@@ -18,7 +18,6 @@
       },
       "skipSciCatLoginPageEnabled": { "type": "boolean" },
       "allowConfigOverrides": { "type": "boolean" },
-      "checkBoxFilterClickTrigger": { "type": "boolean" },
       "dateFormat": { "type": "string" },
       "accessTokenPrefix": { "type": "string" },
       "addDatasetEnabled": { "type": "boolean" },
@@ -56,6 +55,7 @@
       "logbookEnabled": { "type": "boolean" },
       "loginFormEnabled": { "type": "boolean" },
       "metadataPreviewEnabled": { "type": "boolean" },
+      "autoApplyFilters": { "type": "boolean" },
       "metadataStructure": { "type": "string" },
       "multipleDownloadAction": { "type": "string" },
       "multipleDownloadEnabled": { "type": "boolean" },
@@ -437,10 +437,6 @@
           { "type": "Control", "scope": "#/properties/siteSciCatLogo" },
           { "type": "Control", "scope": "#/properties/statusBannerMessage" },
           { "type": "Control", "scope": "#/properties/statusBannerCode" },
-          {
-            "type": "Control",
-            "scope": "#/properties/checkBoxFilterClickTrigger"
-          },
           { "type": "Control", "scope": "#/properties/addDatasetEnabled" },
           {
             "type": "Control",
@@ -467,7 +463,8 @@
           { "type": "Control", "scope": "#/properties/jsonMetadataEnabled" },
           { "type": "Control", "scope": "#/properties/logbookEnabled" },
           { "type": "Control", "scope": "#/properties/loginFormEnabled" },
-          { "type": "Control", "scope": "#/properties/metadataPreviewEnabled" }
+          { "type": "Control", "scope": "#/properties/metadataPreviewEnabled" },
+          { "type": "Control", "scope": "#/properties/autoApplyFilters" }
         ]
       },
       {

src/app/app-config.service.ts

@@ -164,12 +164,12 @@ export interface AppConfigInterface {
   siteHeaderLogoUrl?: string;
   mainMenu?: MainMenuConfiguration;
   supportEmail?: string;
-  checkBoxFilterClickTrigger?: boolean;
   hideEmptyMetadataTable?: boolean;
   ingestorComponent?: IngestorComponentConfig;
   defaultTab?: DefaultTab;
   statusBannerMessage?: string;
   statusBannerCode?: "INFO" | "WARN";
+  autoApplyFilters?: boolean;
 }
 
 function isMainPageConfiguration(obj: any): obj is MainPageConfiguration {

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

@@ -51,6 +51,7 @@
         (numericRangeChange)="numericRangeChange(filter.key, $event)"
         [filterValue]="activeFilters[filter.key]"
         [collapsible]="filter.type === 'checkbox'"
+        (applyEnterKey)="applyFilters()"
       ></shared-filter>
     </ng-container>
 

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

@@ -298,7 +298,7 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
     // This applies to both multiselect type and checkBoxFilter
     // skip PID text input to avoid triggering on keystrokes
     // Array check can be removed when we remove text input filter type
-    if (Array.isArray(value) && this.appConfig.checkBoxFilterClickTrigger) {
+    if (Array.isArray(value) && this.appConfig.autoApplyFilters) {
       this.applyFilters();
     }
   }

src/app/files/files-dashboard/files-dashboard.component.html

@@ -8,7 +8,7 @@
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
   [globalTextSearch]="globalTextSearch"
-  globalTextSearchPlaceholder="Global text search"
+  globalTextSearchPlaceholder="Filename, Size..."
   (paginationChange)="onPaginationChange($event)"
   (globalTextSearchChange)="onGlobalTextSearchChange($event)"
   (onRowEvent)="onRowClick($event)"

src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts

@@ -16,6 +16,7 @@ import {
 import { TablePagination } from "shared/modules/dynamic-material-table/models/table-pagination.model";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { TranslateService } from "@ngx-translate/core";
+import { AppConfigService } from "app-config.service";
 
 describe("InstrumentsDashboardComponent", () => {
   let component: InstrumentsDashboardComponent;
@@ -49,6 +50,7 @@ describe("InstrumentsDashboardComponent", () => {
           ],
         }),
         { provide: TranslateService, useValue: { instant: (k: string) => k } },
+        { provide: AppConfigService, useValue: { getConfig: () => ({}) } },
       ],
     });
     TestBed.overrideComponent(InstrumentsDashboardComponent, {

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

@@ -26,6 +26,7 @@
         (dateRangeChange)="setDateFilter(filter.key, $event)"
         [filterValue]="activeFilters[filter.key]"
         [collapsible]="filter.type === 'checkbox'"
+        (applyEnterKey)="applyFilters()"
       ></shared-filter>
     </ng-container>
     <div class="section-container">

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

@@ -34,7 +34,7 @@ describe("ProposalSideFilterComponent", () => {
     mockRoute = { snapshot: { queryParams: {} } };
     mockRouter = { navigate: jasmine.createSpy("navigate") };
     const getConfig = () => ({
-      checkBoxFilterClickTrigger: false,
+      autoApplyFilters: false,
       defaultProposalsListSettings: {
         filters: [
           {
@@ -188,8 +188,8 @@ describe("ProposalSideFilterComponent", () => {
     expect(component.clearFilters).toBeFalse();
   }));
 
-  it("should call applyFilters on setFilter if checkBoxFilterClickTrigger is true", () => {
-    component.appConfig.checkBoxFilterClickTrigger = true;
+  it("should call applyFilters on setFilter if autoApplyFilters is true", () => {
+    component.appConfig.autoApplyFilters = true;
 
     spyOn(component, "applyFilters");
     component.setFilter("proposalId", ["test123"]);

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

@@ -133,7 +133,7 @@ export class ProposalSideFilterComponent implements OnInit {
         }),
       );
     }
-    if (this.appConfig.checkBoxFilterClickTrigger) {
+    if (this.appConfig.autoApplyFilters) {
       this.applyFilters();
     }
   }

src/app/proposals/related-proposals/related-proposals.component.spec.ts

@@ -15,6 +15,7 @@ import { DynamicMatTableModule } from "shared/modules/dynamic-material-table/tab
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { TranslateService } from "@ngx-translate/core";
 import { SharedScicatFrontendModule } from "shared/shared.module";
+import { AppConfigService } from "app-config.service";
 
 describe("RelatedProposalsComponent", () => {
   let component: RelatedProposalsComponent;
@@ -56,6 +57,7 @@ describe("RelatedProposalsComponent", () => {
         { provide: Router, useValue: router },
         { provide: ActivatedRoute, useClass: MockActivatedRoute },
         { provide: TranslateService, useValue: { instant: (k: string) => k } },
+        { provide: AppConfigService, useValue: { getConfig: () => ({}) } },
       ],
     }).compileComponents();
 

src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html

@@ -17,6 +17,14 @@
         (keydown.escape)="onGlobalTextSearchClear()"
         data-cy="text-search"
       />
+      <span
+        matSuffix
+        class="enter-hint"
+        matTooltip="Press Enter to search"
+        matTooltipPosition="below"
+        matTooltipShowDelay="500"
+        >↵</span
+      >
       <button
         mat-icon-button
         matSuffix

src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts

@@ -77,6 +77,7 @@ import {
 } from "../models/table-menu.model";
 import { TableDataSource } from "../cores/table-data-source";
 import { DatePipe } from "@angular/common";
+import { AppConfigService } from "app-config.service";
 
 export interface IDynamicCell {
   row: TableRow;
@@ -319,6 +320,8 @@ export class DynamicMatTableComponent<T extends TableRow>
   @Input() emptyIcon = "info";
   @Input() sideFilterCollapsed = false;
 
+  appConfig = this.appConfigService.getConfig();
+
   constructor(
     public dialog: MatDialog,
     private renderer: Renderer2,
@@ -329,6 +332,7 @@ export class DynamicMatTableComponent<T extends TableRow>
     private overlayPositionBuilder: OverlayPositionBuilder,
     public readonly config: TableSetting,
     private datePipe: DatePipe,
+    public appConfigService: AppConfigService,
   ) {
     super(tableService, cdr, config);
 
@@ -874,6 +878,11 @@ export class DynamicMatTableComponent<T extends TableRow>
     this.globalTextSearchApply.emit("");
   }
 
+  onGlobalTextSearchEnter(event: Event) {
+    event.preventDefault();
+    this.onGlobalTextSearchApply();
+  }
+
   autoHeight() {
     const minHeight =
       this.headerHeight +

src/app/shared/modules/filters/multiselect-filter.component.html

@@ -1,5 +1,5 @@
 <mat-form-field [id]="key">
-  <mat-label>{{ label }}</mat-label>
+  <mat-label>{{ label }} </mat-label>
   <mat-chip-grid #chipList>
     <mat-chip-row
       *ngFor="let item of currentFilter$ | async"
@@ -20,6 +20,15 @@
     matTooltip="{{ tooltip }}"
     matTooltipPosition="after"
   />
+  <span
+    *ngIf="appConfig.autoApplyFilters"
+    matSuffix
+    class="enter-hint"
+    matTooltip="Press Enter to apply"
+    matTooltipPosition="after"
+    matTooltipShowDelay="500"
+    >↵</span
+  >
 
   <mat-autocomplete #mutiselection="matAutocomplete">
     <mat-option

src/app/shared/modules/search-parameters-dialog/search-parameters-dialog.component.html

@@ -2,7 +2,9 @@ <h2 mat-dialog-title>Add Characteristic</h2>
 <form [formGroup]="parametersForm" class="search-parameters-form">
   <mat-dialog-content>
     <mat-form-field class="search-field">
-      <mat-label>Field</mat-label>
+      <mat-label
+        >Field
+      </mat-label>
       <input
         matInput
         autocomplete="off"

src/app/shared/modules/shared-filter/shared-filter.component.html

@@ -3,26 +3,37 @@
   <ng-container [ngSwitch]="filterType">
     <ng-container *ngSwitchDefault>
       <mat-form-field [id]="key">
-        <mat-label>{{ label }}</mat-label>
+        <mat-label>{{ label }} </mat-label>
         <input
           matInput
           #input
           type="text"
           (input)="onInput($event)"
+          (keydown.enter)="onApplyEnter($event)"
           [matTooltip]="tooltip"
           matTooltipPosition="after"
           formControlName="textField"
         />
+        <span
+          *ngIf="appConfig.autoApplyFilters"
+          matSuffix
+          class="enter-hint"
+          matTooltip="Press Enter to apply"
+          matTooltipPosition="after"
+          matTooltipShowDelay="500"
+          >↵</span
+        >
       </mat-form-field>
     </ng-container>
 
     <ng-container *ngSwitchCase="'dateRange'">
       <mat-form-field
+        class="date-range-field"
         [matTooltip]="tooltip"
         matTooltipPosition="after"
         [id]="key"
       >
-        <mat-label>{{ label }}</mat-label>
+        <mat-label>{{ label }} </mat-label>
         <mat-date-range-input
           formGroupName="dateRangeField"
           [rangePicker]="picker"
@@ -32,14 +43,25 @@
             (dateChange)="dateChanged($event, 'begin')"
             formControlName="start"
             data-cy="creation-time-begin"
+            (keydown.enter)="onApplyEnter($event)"
           />
           <input
             matEndDate
             (dateChange)="dateChanged($event, 'end')"
             formControlName="end"
             data-cy="creation-time-end"
+            (keydown.enter)="onApplyEnter($event)"
           />
         </mat-date-range-input>
+        <span
+          *ngIf="appConfig.autoApplyFilters"
+          matSuffix
+          class="enter-hint"
+          matTooltip="Press Enter to apply"
+          matTooltipPosition="after"
+          matTooltipShowDelay="500"
+          >↵</span
+        >
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>
       </mat-form-field>
@@ -108,6 +130,7 @@
         (selectionChange)="onSelectionChange($event)"
         [facetCounts$]="facetCounts$"
         [currentFilter$]="currentFilter$"
+        (keydown.enter)="onApplyEnter($event)"
       ></multiselect-filter>
     </ng-container>
     <ng-container *ngSwitchCase="'number'">