Merge branch 'main' into IrKa/ontology-class-item-requests

* main:
  fix: multi-language form default language (#1353)
  test: dashboard e2e tests for users and admin (#1355)
  fix: delete failing e2e test
  fix: add tooltip on non accessible list (#1345)
  fix: close dialog after update (#1352)

.eslintignore

@@ -9,3 +9,4 @@ tmp/
 
 # Ignore certain project files
 docs/assets/js/
+apps/dsp-app/cypress/

.gitignore

@@ -59,4 +59,4 @@ Thumbs.db
 
 #E2E
 /.nx
-apps/dsp-app-e2e/cypress/screenshots
+apps/dsp-app/cypress/screenshots

apps/dsp-app/cypress/e2e/logged-out-user/dashboard.cy.ts

@@ -0,0 +1,15 @@
+describe('Visual Check for Projects on Home Page', () => {
+  it.skip('should load clickable projects on the home page', () => {
+    cy.visit('/');
+
+    cy.get('[data-cy=accept-cookies]').click();
+
+    const projectTileSelector = '[data-cy=tile]';
+
+    cy.get(projectTileSelector).should('be.visible').should('have.length.greaterThan', 0);
+
+    cy.get(projectTileSelector).first().find('[data-cy=navigate-to-project-button]').click();
+
+    cy.url().should('include', '/project'); // Update with the expected URL
+  });
+});

apps/dsp-app/cypress/e2e/system-admin/dashboard.cy.ts

@@ -0,0 +1,15 @@
+const MY_TOKEN = '';
+localStorage.setItem('ACCESS_TOKEN', MY_TOKEN);
+
+describe('ADMIN TEST', () => {
+  it('should load clickable projects on the home page', () => {
+    cy.visit('/');
+    const projectTileSelector = '[data-cy=tile]';
+
+    cy.get(projectTileSelector).should('be.visible').should('have.length.greaterThan', 0);
+
+    cy.get(projectTileSelector).first().find('[data-cy=navigate-to-project-button]').click();
+
+    cy.url().should('include', '/project'); // Update with the expected URL
+  });
+});

apps/dsp-app/cypress/support/commands/login.ts

@@ -0,0 +1,25 @@
+import { User } from '../../models/user-profiles';
+
+Cypress.Commands.add('login', (user: User) => {
+  cy.session(
+    user,
+    () => {
+      cy.request({
+        method: 'POST',
+        url: `${Cypress.env('apiUrl')}/v2/authentication`,
+        body: {
+          username: user.username,
+          password: user.password,
+        },
+      }).then(response => {
+        localStorage.setItem('cookieBanner', 'false');
+        localStorage.setItem('ACCESS_TOKEN', response.body.token);
+      });
+    },
+    {
+      validate: () => {
+        expect(localStorage.getItem('ACCESS_TOKEN')).to.exist;
+      },
+    }
+  );
+});

apps/dsp-app-e2e/cypress/support/e2e.ts → apps/dsp-app/cypress/support/e2e.ts

@@ -9,14 +9,14 @@ beforeEach(() => {
     // read JSON data file
     users = json;
 
-    if (Cypress.spec.relative.startsWith('cypress/e2e/System_Admin')) {
+    if (Cypress.spec.relative.startsWith('cypress/e2e/system-admin')) {
       cy.login({
         username: users.systemAdmin_username_root,
         password: users.systemAdmin_password_root,
       });
     }
 
-    if (Cypress.spec.relative.startsWith('cypress/e2e/Project_Member')) {
+    if (Cypress.spec.relative.startsWith('cypress/e2e/project-member')) {
       cy.login({
         username: users.projectMember_username,
         password: users.projectMember_password,

apps/dsp-app/cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [],
+  "compilerOptions": {
+    "sourceMap": false,
+    "types": [
+      "cypress"
+    ]
+  }
+}

apps/dsp-app/project.json

@@ -190,8 +190,8 @@
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["apps/dsp-app/**/*.ts", "apps/dsp-app/**/*.html"]
-      }
+        "lintFilePatterns": ["apps/dsp-app/**/*.{ts,html}"]
+          }
     },
     "test": {
       "executor": "@angular-devkit/build-angular:karma",
@@ -221,6 +221,26 @@
           "browsers": "ChromeHeadless"
         }
       }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/dsp-app/cypress.config.ts"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "dsp-app:serve:production",
+          "env": {
+            "API_URL": "http://0.0.0.0:3333/api"
+          }
+        },
+        "development": {
+          "devServerTarget": "dsp-app:serve:development",
+          "env": {
+            "API_URL": "http://0.0.0.0:3333/api"
+          }
+        }
+      }
     }
   }
 }

apps/dsp-app/src/app/app.component.html

@@ -15,7 +15,7 @@
       <span class="link" (click)="goToCookiePolicy()">use of cookies</span>.
     </p>
     <div class="action">
-      <button mat-flat-button color="primary" (click)="closeCookieBanner()">ACCEPT</button>
+      <button mat-flat-button color="primary" (click)="closeCookieBanner()" data-cy="accept-cookies">ACCEPT</button>
     </div>
   </div>
 </div>

apps/dsp-app/src/app/project/data-models/data-models.component.html

@@ -10,50 +10,37 @@
     </mat-icon>
   </div>
   <div *ngIf="isAdmin$ | async" class="action-buttons">
-    <button color="primary" mat-raised-button class="create" (click)="open('add-ontology')">
+    <a color="primary" mat-raised-button class="create" [routerLink]="['..', RouteConstants.addOntology]">
       <mat-icon class="v-align-middle">add_circle</mat-icon>
       <span class="v-align-middle">Create New</span>
-    </button>
-    <button color="primary" mat-stroked-button class="docs" (click)="open('docs')">
+    </a>
+    <a
+      color="primary"
+      mat-stroked-button
+      class="docs"
+      href="https://docs.dasch.swiss/latest/DSP-APP/user-guide/project/#data-model"
+      target="_blank">
       Read Documentation About How To Create Data Models
       <mat-icon>chevron_right</mat-icon>
-    </button>
+    </a>
   </div>
   <div *ngIf="ontologiesMetadata$ | async" class="projectOntos">
     <div class="list" [class.top-padding]="isAdmin$ | async">
-      <ng-container *ngIf="(isLoggedIn$ | async) === true">
-        <div
-          class="list-item ontos"
-          *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn"
-          (click)="open('ontology', onto.id)">
-          <mat-icon class="icon-prefix">bubble_chart</mat-icon>
-          <p
-            class="label"
-            matTooltip="You must be logged in to view data models"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="true">
-            {{onto.label}}
-          </p>
-          <span class="fill-remaining-space"></span>
-          <mat-icon class="icon-suffix">chevron_right</mat-icon>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="(isLoggedIn$ | async) === false">
-        <div
-          class="list-item ontos no-click"
-          *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn">
-          <mat-icon class="icon-prefix">bubble_chart</mat-icon>
-          <p
-            class="label"
-            matTooltip="You must be logged in to view data models"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="false">
-            {{onto.label}}
-          </p>
-          <span class="fill-remaining-space"></span>
-          <mat-icon class="icon-suffix">chevron_right</mat-icon>
-        </div>
-      </ng-container>
+      <div
+        class="list-item ontos"
+        *ngFor="let onto of ontologiesMetadata$ | async; trackBy: trackByOntologyMetaFn"
+        (click)="navigateToOntology(onto.id)">
+        <mat-icon class="icon-prefix">bubble_chart</mat-icon>
+        <p
+          class="label"
+          matTooltip="You must be logged in to view data models"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="(isLoggedIn$ | async)">
+          {{onto.label}}
+        </p>
+        <span class="fill-remaining-space"></span>
+        <mat-icon class="icon-suffix">chevron_right</mat-icon>
+      </div>
     </div>
   </div>
   <div class="header">
@@ -67,19 +54,25 @@
     </mat-icon>
   </div>
   <div *ngIf="isAdmin$ | async" class="action-buttons">
-    <button color="primary" mat-raised-button class="create" (click)="open('add-list')">
+    <a color="primary" mat-raised-button class="create" [routerLink]="['..', RouteConstants.addList]">
       <mat-icon class="v-align-middle">add_circle</mat-icon>
       <span class="v-align-middle">Create New</span>
-    </button>
+    </a>
   </div>
   <div *ngIf="(listsInProject$ | async)?.length > 0" class="projectLists">
     <div class="list" [class.top-padding]="isAdmin$ | async">
       <div
         class="list-item"
         *ngFor="let list of (listsInProject$ | async); trackBy: trackByFn"
-        (click)="open('list', list.id)">
+        (click)="navigateToList(list.id)">
         <mat-icon class="icon-prefix">list</mat-icon>
-        <p class="label">{{list.labels | appStringifyStringLiteral}}</p>
+        <p
+          class="label"
+          matTooltip="You must be logged in to view data models"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="(isLoggedIn$ | async)">
+          {{list.labels | appStringifyStringLiteral}}
+        </p>
         <span class="fill-remaining-space"></span>
         <mat-icon class="icon-suffix">chevron_right</mat-icon>
       </div>