Merged main

.eslintrc.js

@@ -3,10 +3,10 @@ module.exports = {
   extends: ['next', 'plugin:storybook/recommended'],
   rules: {
     'import/no-anonymous-default-export': 'off',
-    'react/no-unescaped-entities': 'off',
+    'react/no-unescaped-entities': 0,
     'react/display-name': 'off',
   },
-  ignorePatterns: ['src/**/*.stories.js'],
+  ignorePatterns: ['src/**/*.stories.js', 'src/**/*.stories.tsx', 'src/tours'],
 
   overrides: [
     {

.github/workflows/ui-workflow.yaml

@@ -0,0 +1,98 @@
+name: Lagoon UI CI
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+      - cypress-test
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Install dependencies
+      run: yarn
+
+    - name: Checkout Repository
+      uses: actions/checkout@v4
+
+    - name: Formatting check
+      run: |
+        yarn add prettier@2.8.7 @trivago/prettier-plugin-sort-imports
+        yarn format-check
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v4
+
+    - name: Linting
+      run: |
+        yarn add typescript
+        yarn lint
+
+  cypress-tests:
+    runs-on: ubuntu-latest
+
+    needs: [format-check, lint]
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Build and start Lagoon-minimal
+      run: |
+        cd test
+        make up
+
+    - name: Start ui
+      env:
+        GRAPHQL_API: http://0.0.0.0:33000/graphql
+        KEYCLOAK_API: http://0.0.0.0:38088/auth
+      run: |
+        yarn install
+        yarn build
+        yarn start &
+
+    - name: Run RBAC Cypress Tests
+      uses: cypress-io/github-action@v6
+      with:
+        config-file: ./cypress/cypress.config.ts
+        auto-cancel-after-failures: 1
+        wait-on: 'http://localhost:3000'
+        command: yarn cypress:runRbac
+      continue-on-error: true
+
+    - name: Run General Cypress Tests
+      uses: cypress-io/github-action@v6
+      with:
+        config-file: ./cypress/cypress.config.ts
+        auto-cancel-after-failures: 1
+        wait-on: 'http://localhost:3000'
+        command: yarn cypress:runGeneral
+      continue-on-error: true
+
+    - name: Run Organization Cypress Tests
+      uses: cypress-io/github-action@v6
+      with:
+        config-file: ./cypress/cypress.config.ts
+        auto-cancel-after-failures: 1
+        wait-on: 'http://localhost:3000'
+        command: yarn cypress:runOrganizations
+      continue-on-error: true
+
+    - name: Stop Docker containers
+      run: |
+        cd test
+        make down

.prettierignore

@@ -1,4 +1,5 @@
 build
+public
 *.min.*
 *.yaml
 *.yml

.storybook/decorators/withLoadingSkeletons.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import ThemedSkeletonWrapper from '../../src/styles/ThemedSkeletonWrapper';
 import { darkTheme, lightTheme } from '../../src/styles/theme';
+
 const withLoadingSkeletons = (Story, context) => {
-  const initialTheme = (context.globals.theme === '' || context.globals.theme ==="dark") ? 'dark' : "light";
+  const initialTheme = context.globals.theme === '' || context.globals.theme === 'dark' ? 'dark' : 'light';
   const {
     //@ts-ignore
     skeleton: { base, highlight },

.storybook/decorators/withMockedAppContext.tsx

@@ -14,7 +14,7 @@ const withMockedAppContext = initialTheme => (Story, context) => {
 
   useEffect(() => {
     if (!isDocsPage) {
-      const initialTheme = (context.globals.theme === '' || context.globals.theme ==="dark") ? 'dark' : "light";
+      const initialTheme = context.globals.theme === '' || context.globals.theme === 'dark' ? 'dark' : 'light';
       const newBg = initialTheme === 'dark' ? '#333333' : '#F8F8F8';
 
       setGlobals({

.storybook/manager-head.html

@@ -1,2 +1 @@
-<link rel="shortcut icon" href="/favicon.ico">
-<link rel="icon" type="image/png" href="/logo.svg" sizes="192x192">
+<link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/logo.svg" sizes="192x192" />

.storybook/manager.ts

@@ -4,7 +4,7 @@ import LagoonTheme from './lagoonTheme';
 
 addons.setConfig({
   theme: LagoonTheme,
-  sidebar:{
+  sidebar: {
     showRoots: false,
-  }
+  },
 });

.storybook/mocks/api.ts

@@ -4,11 +4,11 @@ import {
   ProblemIdentifier,
   generateEnvironments,
   organizationEmails,
+  organizationEnvironments,
   organizationGroups,
   organizationNotifications,
   organizationOwners,
   organizationProjects,
-  organizationEnvironments
 } from './mocks';
 
 faker.setDefaultRefDate(new Date(`${new Date().getFullYear().toString()}-01-01`));
@@ -126,7 +126,7 @@ export const MockBulkDeployments = (seed: number) => {
       name: faker.lorem.slug({ min: 1, max: 5 }),
       created: faker.date.past().toDateString(),
       started: faker.date.past().toDateString(),
-      buildStep:faker.word.words(),
+      buildStep: faker.word.words(),
       completed: faker.date.past().toDateString(),
       buildLog: faker.word.words(),
       bulkId: faker.string.uuid(),

.storybook/mocks/mocks.ts

@@ -10,6 +10,7 @@ interface Tasks {
     created: string;
     service: string;
     status: string;
+    id: string;
   }[];
   environmentSlug: string;
   projectSlug: string;
@@ -27,8 +28,9 @@ interface Task {
     status: string;
     files: TaskFile[];
     logs: string;
-    taskName?: string;
+    taskName: string;
     name?: string;
+    id: string;
   };
 }
 faker.setDefaultRefDate(new Date(`${new Date().getFullYear().toString()}-01-01`));
@@ -45,6 +47,7 @@ export function createTasks(): Tasks {
       created: faker.date.anytime().toDateString(),
       service: 'cli',
       status: faker.helpers.arrayElement(['Pending', 'In progress', 'Completed']),
+      id: faker.string.uuid(),
     };
   });
 
@@ -66,7 +69,8 @@ export function createTask(): Task {
     `::group::${eventName}\n` +
     `::${status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]}:: Job '${jobName}'\n` +
     `::step-start::${stepName}\n` +
-    `::${status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]
+    `::${
+      status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]
     }:: Job '${jobName}' step '${stepName}'\n` +
     `::step-end::${stepName}::${duration}\n` +
     `${generateLogMessage()}\n` +
@@ -88,6 +92,7 @@ export function createTask(): Task {
       files,
       logs: log,
       taskName: faker.lorem.slug(2),
+      id: faker.string.uuid(),
     },
   };
 }
@@ -311,7 +316,7 @@ export const getDeployment = (seed: number) => {
     status: deployStatus(),
     created,
     started,
-    buildStep:faker.word.words(3),
+    buildStep: faker.word.words(3),
     completed,
     environment: generateEnvironments({ seed }),
     remoteId: faker.number.int(),