fix: optimize condition editing logic in DatasetsFilterSettingsCompon…

…ent (SciCatProject#1673)

* fix: optimize condition editing logic in DatasetsFilterSettingsComponent

* if user creates duplicated condition, do nothing

* add snackbar notification for duplicate condition in DatasetsFilterSettingsComponent

* remove unused import

* remove panelClass from snackBar

* added e2e test for the change

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

@@ -93,4 +93,55 @@ describe("Datasets general", () => {
       cy.deleteProposal(proposalId);
     });
   });
+
+  describe.only("Dataset page filter and scientific condition UI test", () => {
+    it("should not be able to add duplicated conditions ", () => {
+      cy.visit("/datasets");
+
+      cy.get(".user-button").click();
+
+      cy.get("[data-cy=logout-button]").click();
+
+      cy.finishedLoading();
+
+      cy.visit("/datasets");
+
+      cy.get('[data-cy="more-filters-button"]').click();
+
+      cy.get('[data-cy="add-scientific-condition-button"]').click();
+
+      cy.get('input[name="lhs"]').type("test");
+      cy.get('input[name="rhs"]').type("1");
+
+      cy.get('button[type="submit"]').click();
+
+      cy.get('[data-cy="add-scientific-condition-button"]').click();
+
+      cy.get('input[name="lhs"]').type("test");
+      cy.get('input[name="rhs"]').type("1");
+
+      cy.get('button[type="submit"]').click();
+
+      cy.get(".snackbar-warning")
+        .should("contain", "Condition already exists")
+        .contains("Close")
+        .click();
+
+      cy.get('[data-cy="scientific-condition-filter-list"').should(
+        "have.length",
+        1,
+      );
+
+      cy.get('[data-cy="add-scientific-condition-button"]').click();
+
+      cy.get('input[name="lhs"]').type("test");
+      cy.get('input[name="rhs"]').type("2");
+
+      cy.get('button[type="submit"]').click();
+
+      cy.get('[data-cy="scientific-condition-filter-list"]')
+        .find("input")
+        .should("have.length", 2);
+    });
+  });
 });

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

@@ -17,15 +17,19 @@
       </ng-container>
     </ng-container>
 
-    <div class="section-container" *ngIf="appConfig.scienceSearchEnabled">
+    <div
+      class="section-container"
+      *ngIf="appConfig.scienceSearchEnabled"
+      data-cy="scientific-condition-filter-list"
+    >
       <ng-container *ngFor="let condition of scientificConditions$ | async">
         <ng-container
           *ngComponentOutlet="ConditionFilterComponent; inputs: { condition }"
         ></ng-container>
       </ng-container>
     </div>
 
-    <div class="section-container">
+    <div class="section-container" data-cy="more-filters-button">
       <button
         mat-button
         class="full-width-button"

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

@@ -102,6 +102,7 @@ <h2 mat-dialog-title>Configure Filters</h2>
       color="primary"
       *ngIf="appConfig.scienceSearchEnabled"
       (click)="addCondition()"
+      data-cy="add-scientific-condition-button"
     >
       <mat-icon>add</mat-icon>
       Add Conditions

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

@@ -36,6 +36,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { AppConfigService } from "app-config.service";
 import { DatasetsFilterSettingsComponent } from "./datasets-filter-settings.component";
 import { ConditionConfig } from "../../../shared/modules/filters/filters.module";
+import { MatSnackBar, MatSnackBarModule } from "@angular/material/snack-bar";
 
 export class MockMatDialog {
   open() {
@@ -82,6 +83,7 @@ describe("DatasetsFilterSettingsComponent", () => {
         MatSelectModule,
         MatNativeDateModule,
         ReactiveFormsModule,
+        MatSnackBarModule,
         SharedScicatFrontendModule,
         StoreModule.forRoot({}),
       ],
@@ -96,6 +98,7 @@ describe("DatasetsFilterSettingsComponent", () => {
         providers: [
           { provide: AppConfigService, useValue: { getConfig } },
           { provide: MatDialog, useClass: MockMatDialog },
+          { provide: MatSnackBar },
           { provide: MatDialogRef, useClass: MockMatDialogRef },
           {
             provide: MAT_DIALOG_DATA,

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
+import { Component, Inject } from "@angular/core";
 import {
   MAT_DIALOG_DATA,
   MatDialog,
@@ -22,12 +22,13 @@ import {
   ConditionConfig,
   FilterConfig,
 } from "../../../shared/modules/filters/filters.module";
+import { isEqual } from "lodash-es";
+import { MatSnackBar } from "@angular/material/snack-bar";
 
 @Component({
   selector: "app-type-datasets-filter-settings",
   templateUrl: `./datasets-filter-settings.component.html`,
   styleUrls: [`./datasets-filter-settings.component.scss`],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatasetsFilterSettingsComponent {
   metadataKeys$ = this.store.select(selectMetadataKeys);
@@ -39,6 +40,7 @@ export class DatasetsFilterSettingsComponent {
   constructor(
     public dialogRef: MatDialogRef<DatasetsFilterSettingsComponent>,
     public dialog: MatDialog,
+    private snackBar: MatSnackBar,
     private store: Store,
     private asyncPipe: AsyncPipe,
     private appConfigService: AppConfigService,
@@ -56,6 +58,18 @@ export class DatasetsFilterSettingsComponent {
       .subscribe((res) => {
         if (res) {
           const { data } = res;
+
+          // If the condition already exists, do nothing
+          const existingConditionIndex = this.data.conditionConfigs.findIndex(
+            (config) => isEqual(config.condition, data),
+          );
+          if (existingConditionIndex !== -1) {
+            this.snackBar.open("Condition already exists", "Close", {
+              duration: 2000,
+              panelClass: ["snackbar-warning"],
+            });
+            return;
+          }
           const condition = this.toggleCondition({
             condition: data,
             enabled: false,
@@ -66,15 +80,6 @@ export class DatasetsFilterSettingsComponent {
   }
 
   editCondition(condition: ConditionConfig, i: number) {
-    this.store.dispatch(
-      removeScientificConditionAction({ condition: condition.condition }),
-    );
-    this.store.dispatch(
-      deselectColumnAction({
-        name: condition.condition.lhs,
-        columnType: "custom",
-      }),
-    );
     this.dialog
       .open(SearchParametersDialogComponent, {
         data: {
@@ -86,6 +91,24 @@ export class DatasetsFilterSettingsComponent {
       .subscribe((res) => {
         if (res) {
           const { data } = res;
+
+          // If the condition is unchanged, do nothing
+          if (isEqual(condition.condition, data)) {
+            return;
+          }
+
+          this.store.dispatch(
+            removeScientificConditionAction({
+              condition: condition.condition,
+            }),
+          );
+          this.store.dispatch(
+            deselectColumnAction({
+              name: condition.condition.lhs,
+              columnType: "custom",
+            }),
+          );
+
           this.data.conditionConfigs[i] = {
             ...condition,
             condition: data,

src/app/datasets/datasets.module.ts

@@ -92,6 +92,7 @@ import { userReducer } from "state-management/reducers/user.reducer";
 import { AttachmentService } from "shared/services/attachment.service";
 import { OneDepComponent } from "./onedep/onedep.component";
 import { OrcidFormatterDirective } from "./onedep/onedep.directive";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
 
 @NgModule({
   imports: [
@@ -124,6 +125,7 @@ import { OrcidFormatterDirective } from "./onedep/onedep.directive";
     MatStepperModule,
     MatTableModule,
     MatTabsModule,
+    MatSnackBarModule,
     MatTooltipModule,
     NgxJsonViewerModule,
     ReactiveFormsModule,