feat(advanced search): try to reuse resource and property selection (DSP-1587)

.github/workflows/main.yml

@@ -62,7 +62,6 @@ jobs:
         run: npm run build-lib
       - name: Run knora stack
         run: make knora-stack
-      - run: npm run webdriver-update
       - name: Run e2e tests
         run: npm run e2e
         env:

e2e/src/app.e2e-spec.ts

@@ -88,9 +88,7 @@ describe('Test App', () => {
 
             const loader = ProtractorHarnessEnvironment.loader();
 
-            const submitButton = await page.getAdvancedSearchSubmitButton(loader);
-
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectOntos = await page.getAdvancedSearchOntologySelection(loader, timeout);
 
@@ -121,7 +119,7 @@ describe('Test App', () => {
 
             await resClasses.clickOptions({ text: 'Thing'});
 
-            expect(await submitButton.isDisabled()).toBe(false);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(false);
 
             // browser.sleep(200000);
 
@@ -134,9 +132,7 @@ describe('Test App', () => {
 
             const loader = ProtractorHarnessEnvironment.loader();
 
-            const submitButton = await page.getAdvancedSearchSubmitButton(loader);
-
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectOntos = await page.getAdvancedSearchOntologySelection(loader, timeout);
 
@@ -146,33 +142,33 @@ describe('Test App', () => {
             await browser.wait(EC.presenceOf(element(by.css('.select-resource-class'))), timeout,
                 'Wait for resource class options to be visible.');
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const addPropButton = await page.getAdvancedSearchPropertyAddButton(loader);
 
             await addPropButton.click();
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectProps = await page.getAdvancedSearchPropertySelection(loader);
 
             await selectProps.open();
 
             await selectProps.clickOptions({text: 'Integer'});
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectCompOps = await page.getAdvancedSearchComparisonOperatorSelection(loader);
 
             await selectCompOps.clickOptions({ text: 'is equal to'});
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const input = await loader.getHarness(MatInputHarness);
 
             await input.setValue('1');
 
-            expect(await submitButton.isDisabled()).toBe(false);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(false);
 
             // browser.sleep(200000);
         });
@@ -184,9 +180,7 @@ describe('Test App', () => {
 
             const loader = ProtractorHarnessEnvironment.loader();
 
-            const submitButton = await page.getAdvancedSearchSubmitButton(loader);
-
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectOntos = await page.getAdvancedSearchOntologySelection(loader, timeout);
 
@@ -196,27 +190,27 @@ describe('Test App', () => {
             await browser.wait(EC.presenceOf(element(by.css('.select-resource-class'))), timeout,
                 'Wait for resource class options to be visible.');
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const addPropButton = await page.getAdvancedSearchPropertyAddButton(loader);
 
             await addPropButton.click();
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectProps = await page.getAdvancedSearchPropertySelection(loader);
 
             await selectProps.open();
 
             await selectProps.clickOptions({text: 'Another thing'});
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const selectCompOps = await page.getAdvancedSearchComparisonOperatorSelection(loader);
 
             await selectCompOps.clickOptions({ text: 'is equal to'});
 
-            expect(await submitButton.isDisabled()).toBe(true);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(true);
 
             const input = await loader.getHarness(MatInputHarness);
 
@@ -236,7 +230,7 @@ describe('Test App', () => {
 
             await options[0].click();
 
-            expect(await submitButton.isDisabled()).toBe(false);
+            expect(await (await page.getAdvancedSearchSubmitButton(loader)).isDisabled()).toBe(false);
 
             // browser.sleep(200000);
         });

package.json

@@ -30,8 +30,7 @@
     "yalc-publish-lib": "npm run build-lib && yalc publish dist/@dasch-swiss/dsp-ui",
     "build-app": "ng b --prod",
     "lint": "ng lint",
-    "e2e": "ng e2e --prod=true --protractor-config=./e2e/protractor.conf.js --webdriver-update=false",
-    "webdriver-update": "webdriver-manager update --standalone false --gecko false --versions.chrome 2.37"
+    "e2e": "ng e2e --prod=true --protractor-config=./e2e/protractor.conf.js --webdriver-update"
   },
   "private": true,
   "dependencies": {

projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.html

@@ -2,41 +2,14 @@
 
     <div *ngIf="ontologiesMetadata?.ontologies.length > 0">
         <dsp-select-ontology [formGroup]="form" [ontologiesMetadata]="ontologiesMetadata"
-                             (ontologySelected)="getResourceClassesAndPropertiesForOntology($event)"></dsp-select-ontology>
+                             (ontologySelected)="setActiveOntology($event)"></dsp-select-ontology>
     </div>
 
-    <div class="select-resource-class">
-        <dsp-select-resource-class *ngIf="resourceClasses?.length > 0"
-            #resourceClass
-            [formGroup]="form"
-            [resourceClassDefinitions]="resourceClasses"
-            (resourceClassSelected)="getPropertiesForResourceClass($event)">
-        </dsp-select-resource-class>
-    </div>
-
-    <div class="select-property" *ngIf="properties !== undefined">
-        <div *ngFor="let prop of activeProperties; let i = index">
-
-            <dsp-select-property #property [activeResourceClass]="activeResourceClass" [formGroup]="form" [index]="i"
-                                 [properties]="properties"></dsp-select-property>
-
-        </div>
-    </div>
-
-    <div class="select-property buttons">
-        <button mat-mini-fab class="property-button add-property-button" color="primary" type="button"
-                (click)="addProperty()" [disabled]="activeOntology === undefined || activeProperties.length >= 4">
-            <mat-icon aria-label="add a property">add</mat-icon>
-        </button>
-
-        <button mat-mini-fab class="property-button remove-property-button" color="primary" type="button"
-                (click)="removeProperty()" [disabled]="activeProperties.length == 0">
-            <mat-icon aria-label="remove property">remove</mat-icon>
-        </button>
-    </div>
+    <dsp-resource-and-property-selection *ngIf="activeOntology !== undefined" #resAndPropSel [formGroup]="form" [activeOntology]="activeOntology">
+    </dsp-resource-and-property-selection>
 
     <div class="dsp-form-action">
-        <button class="reset" mat-button type="button" (click)="resetForm()" [disabled]="this.activeOntology === undefined">
+        <button class="reset" mat-button type="button" (click)="resourceAndPropertySelection?.resetForm()" [disabled]="this.activeOntology === undefined">
             Reset
         </button>
         <span class="fill-remaining-space"></span>

projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.scss

@@ -1,10 +1 @@
-.select-resource-class {
-  margin-left: 8px;
-}
-.select-property {
-  margin-left: 16px;
 
-  .property-button {
-    margin: 0 12px 64px 0;
-  }
-}