Merge pull request #468 from sanger/upgrade-ci-actions

chore: Update GitHub Actions setup-node to v4 in ci.yml

.github/workflows/ci.yml

@@ -9,16 +9,12 @@ jobs:
     name: Run unit tests using Vitest
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Export node version
-        id: node_version
-        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
+      - uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-      - name: Node Information
-        run: node --version
+          cache: 'npm'
       - name: Install dependencides
         run: >-
           npm ci --legacy-peer-deps
@@ -33,39 +29,36 @@ jobs:
   cypress:
     name: Run Cypress tests
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.10.0-chrome-121.0.6167.85-1-ff-118.0.2-edge-118.0.2088.46-1
+      options: --user 1001
     steps:
-      - uses: actions/checkout@v2
-      - name: Export node version
-        id: node_version
-        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
+      - uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-      - name: Node Information
-        run: node --version
+          cache: 'npm'
       - name: Install dependencides
         run: >-
-          npm ci  --legacy-peer-deps
+          npm ci --legacy-peer-deps
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
-          start: npm start
-          #https://github.com/cypress-io/github-action/blob/master/README.md#wait-on-with-nodejs-18
-          wait-on: http://[::1]:5173/
+          start: npm run start:host
+          wait-on: http://localhost:5173/
           spec: 'tests/e2e/**/*'
-          config-file: cypress.config.cjs
+          config-file: cypress.config.js
           config: video=false
           install: false
-          timeout-minutes: 5
           browser: chrome
       # after the test run completes
       # store any screenshots
       # NOTE: screenshots will be generated only if E2E test failed
       # thus we store screenshots only on failures
       # Alternative: create and commit an empty cypress/screenshots folder
       # to always have something to upload
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots

cypress.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  fixturesFolder: 'tests/e2e/fixtures',
+  screenshotsFolder: 'tests/e2e/screenshots',
+  videosFolder: 'tests/e2e/videos',
+  e2e: {
+    // eslint-disable-next-line no-unused-vars
+    setupNodeEvents(on, config) {},
+    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.js',
+    baseUrl: 'http://localhost:5173/',
+    experimentalRunAllSpecs: true,
+  },
+})

jsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*", "tailwind.config.js"],
+  "include": ["src/**/*", "tailwind.config.js", "cypress.config.js"],
   "exclude": ["node_modules", "build", "dist"],
   "vueCompilerOptions": { "target": 3.3 },
   "compilerOptions": {

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "start:host": "npm-run-all -p serve:css serve:host",
     "start": "npm-run-all -p serve:css serve",
     "serve": "vite",
+    "serve:host": "vite --host",
     "build": "npm-run-all build:css build:js",
     "build:js": "vite build",
     "test:unit": "vitest run",
@@ -17,8 +19,8 @@
     "lint": "eslint .",
     "prettier-check": "prettier --check .",
     "prettify": "prettier --write .",
-    "serve:css": "postcss src/styles/tailwind.css --output build/app.css",
-    "build:css": "postcss src/styles/tailwind.css --output build/app.css --env production"
+    "serve:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
+    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css --env production"
   },
   "dependencies": {
     "@sanger/ui-styling": "^4.1.0",

src/main.js

@@ -1,10 +1,10 @@
 import { registerGlobal } from '@/components/shared'
 import { createApp } from 'vue'
 
-import '../build/app.css'
 import App from './App.vue'
 import router from './router'
 import storePlugin from './storePlugin'
+import './styles/index.css'
 
 const app = createApp(App)
 registerGlobal(app)

src/styles/index.css

@@ -0,0 +1,181 @@
+/* Import Tailwind's base styles from ui-styling package. Optional if you don't want to use them.**/
+@import '../../node_modules/@sanger/ui-styling/tailwind.css';
+
+/* Define your custom styles */
+.success-message {
+  --tw-bg-opacity: 1;
+  background-color: rgb(72 187 120 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.success-icon {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.success-icon:hover {
+  --tw-text-opacity: 1;
+  color: rgb(34 84 61 / var(--tw-text-opacity));
+}
+
+.failure-message {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 101 101 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.failure-icon {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.failure-icon:hover {
+  --tw-text-opacity: 1;
+  color: rgb(116 42 42 / var(--tw-text-opacity));
+}
+
+.warning-message {
+  background-color: #fff3cd;
+  color: #856404;
+}
+.warning-icon {
+  color: #856404;
+}
+.warning-icon:hover {
+  color: #856404;
+}
+
+#app {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav {
+  margin-bottom: 5px;
+}
+
+#nav {
+  margin-bottom: 5px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+
+#nav a.router-link-active {
+  color: #42b983;
+}
+
+a:hover {
+  text-decoration: none;
+  color: black;
+}
+
+.file {
+  visibility: hidden;
+  position: absolute;
+}
+
+.text-center {
+  text-align: center;
+}
+
+label {
+  font-size: 20px;
+}
+
+nav {
+  height: 30px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+nav a {
+  color: white;
+}
+
+nav a:hover,
+nav a:visited {
+  color: white;
+}
+
+th {
+  background-color: #ddd1c3;
+}
+
+.alert {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  color: white !important;
+}
+
+.wrapper {
+  overflow: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.table td {
+  border: 1px solid #dee2e6;
+}
+
+.table td,
+.table th {
+  min-height: 50px;
+  font-size: 12px;
+}
+
+.control {
+  color: white;
+  background-color: #006600;
+}
+
+.blank {
+  color: white;
+}
+
+.standard {
+  color: white;
+  background-color: #000066;
+}
+
+.empty {
+  color: white;
+}
+
+.inactive {
+  color: white;
+  background-color: gray;
+}
+
+.inspect {
+  color: white;
+  background-color: #a5191e;
+}
+
+.warning {
+  color: white;
+  background-color: #65009c;
+}
+
+.tooltip-text {
+  position: absolute;
+  z-index: 2;
+  width: 200px;
+  color: white;
+  font-size: 12px;
+  background-color: black;
+  border-radius: 10px;
+  padding: 10px 15px 10px 15px;
+}

src/styles/tailwind.css

@@ -1,5 +1,5 @@
 /* Import Tailwind's base styles from ui-styling package. Optional if you don't want to use them.**/
-@import '../node_modules/@sanger/ui-styling/tailwind.css';
+@import '../../node_modules/@sanger/ui-styling/tailwind.css';
 
 /* Define your custom styles */
 .success-message {