Merge pull request #519 from frankframework/feat/onboarding-and-version

Added better onboarding and fixed versioning

Author: stijnpotters1

.github/workflows/ci.yaml

@@ -112,20 +112,8 @@ jobs:
         run: pnpm install --frozen-lockfile --ignore-scripts
         working-directory: src/main/frontend
 
-
-      - name: Calculate Dynamic Version
-        run: |
-          RUN_NUM=${{ github.run_number }}
-          printf -v PADDED "%03d" $RUN_NUM
-          PATCH=${PADDED: -1}
-          MINOR=${PADDED: -2:1}
-          MAJOR=${PADDED:0:${#PADDED}-2}
-          NEW_VERSION="$MAJOR.$MINOR.$PATCH"
-          
-          echo "APP_VERSION=$NEW_VERSION" >> $GITHUB_ENV
-
       - name: Build
-        run: mvn clean package -DskipTests "-Dspring.profiles.active=prod" -Drevision="${{ env.APP_VERSION }}"
+        run: mvn clean package -DskipTests "-Dspring.profiles.active=prod" -Drevision="0.0.${{ github.run_number }}"
 
       # Install the cosign tool except on PR
       # https://github.com/sigstore/cosign-installer

src/main/frontend/cypress/e2e/release-details.cy.ts

@@ -2,6 +2,7 @@ describe('Release Details Page Journey', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.get('app-loader', { timeout: 10000 }).should('not.exist');
+    cy.dismissReleaseCatalogusModal()
   });
 
   it('should navigate to release details page and display all content correctly', () => {

src/main/frontend/cypress/e2e/release-graph.cy.ts

@@ -2,6 +2,7 @@ describe('Graph Rendering and Interaction', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.get('app-loader', { timeout: 5000 }).should('not.exist');
+    cy.dismissReleaseCatalogusModal();
     cy.get('.graph-container > svg').as('graphSvg');
   });
 

src/main/frontend/cypress/e2e/release-roadmap.cy.ts

@@ -34,6 +34,7 @@ describe('Release Roadmap End-to-End Tests', () => {
     cy.clock(TODAY.getTime(), ['Date', 'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval']);
 
     cy.visit('/');
+    cy.dismissReleaseCatalogusModal();
     cy.get('app-header').find('li').contains('Roadmap').click();
 
     cy.tick(5000);

src/main/frontend/cypress/e2e/release-vulnerabilities.cy.ts

@@ -2,6 +2,7 @@ describe('Release Vulnerabilities Component', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.get('app-loader', { timeout: 10000 }).should('not.exist');
+    cy.dismissReleaseCatalogusModal()
   });
 
   it('should display vulnerabilities when navigating to release details', () => {

src/main/frontend/cypress/e2e/routing.cy.ts

@@ -1,6 +1,7 @@
 describe('Application Routing', () => {
   beforeEach(() => {
     cy.visit('/');
+    cy.dismissReleaseCatalogusModal();
     cy.get('app-header').find('li').contains('Roadmap').click();
   });
 

src/main/frontend/cypress/support/commands.ts

@@ -8,30 +8,29 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+
+// Required for TypeScript to treat this as a module and allow `declare global`
+export {};
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      dismissReleaseCatalogusModal(): Chainable<void>;
+    }
+  }
+}
+
+/**
+ * Dismiss the release catalogus modal if it appears.
+ * The modal opens automatically on fresh sessions.
+ */
+Cypress.Commands.add('dismissReleaseCatalogusModal', () => {
+  cy.get('app-root', { timeout: 10000 }).should('exist');
+  cy.wait(500);
+  cy.get('body').then(($body) => {
+    if ($body.find('app-modal').length > 0) {
+      cy.get('app-modal button.close-btn').click();
+      cy.get('app-modal').should('not.exist');
+    }
+  });
+});

src/main/frontend/src/app/components/gesture/gesture.component.html

@@ -0,0 +1,4 @@
+<div class="gesture-indicator grab-gesture">
+  <img alt="Gesture image" class="icon" [src]="imageSrc" />
+  <span>{{ gestureDescription }}</span>
+</div>

src/main/frontend/src/app/components/gesture/gesture.component.scss

@@ -0,0 +1,47 @@
+.gesture-indicator {
+  width: 270px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  margin-block: 2rem;
+}
+
+.icon {
+  width: 50%;
+  height: auto;
+  animation: grab-move-right 2.5s infinite ease-in-out;
+}
+
+span {
+  text-align: center;
+}
+
+@keyframes grab-move-right {
+  0% {
+    transform: translateX(-60px) scale(1);
+    opacity: 0;
+  }
+
+  15% {
+    transform: translateX(-60px) scale(1);
+    opacity: 1;
+  }
+
+  25% {
+    transform: translateX(-60px) scale(0.9);
+    opacity: 1;
+  }
+
+  85% {
+    transform: translateX(60px) scale(0.9);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(60px) scale(1);
+    opacity: 0;
+  }
+}

src/main/frontend/src/app/components/gesture/gesture.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-gesture',
+  standalone: true,
+  imports: [],
+  templateUrl: './gesture.component.html',
+  styleUrl: './gesture.component.scss',
+})
+export class GestureComponent {
+  @Input() imageSrc = '';
+  @Input() gestureDescription = '';
+}