Settings screen update / Fix Drizzle Kit Studio (#1109)

* Makes settings screen responsive

* Also optimizes some indexes for fetching data and then also fixes schema to get drizzlekit working

* Update e2e tests action

* Update all actions node to lts and concurrency check

Author: NiallJoeMaher

.github/workflows/alt-text-bot.yml

@@ -1,4 +1,5 @@
-name: Accessibility-alt-text-bot
+name: Accessibility Alt Text Bot
+
 on:
   issues:
     types: [opened, edited]
@@ -11,15 +12,19 @@ on:
   discussion_comment:
     types: [created, edited]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number || github.event.pull_request.number || github.event.discussion.number || github.ref }}
+  cancel-in-progress: true
+
 permissions:
   issues: write
   pull-requests: write
   discussions: write
 
 jobs:
   accessibility_alt_text_bot:
-    name: Check alt text is set on issue or pull requests
+    name: Check alt text on issues and pull requests
     runs-on: ubuntu-latest
     steps:
-      - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.4.0 # Set to latest
+      - name: Run Alt Text Bot
+        uses: github/accessibility-alt-text-bot@v1.4.0

.github/workflows/e2e-tests.yml

@@ -4,61 +4,106 @@ on:
   push:
     branches:
       - develop
-  pull_request:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
     branches:
       - develop
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
+  initial-checks:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 0
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
   e2e:
+    needs: initial-checks
     runs-on: ubuntu-latest
+    environment: production
 
     env:
       DATABASE_URL: "postgresql://postgres:secret@localhost:5432/postgres"
       NEXTAUTH_URL: http://localhost:3000/api/auth
       GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
       GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
-      NEXTAUTH_SECRET: "please_keep_this_secret"
+      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 0
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 'lts/*'
+        cache: 'npm'
+
+    - name: Cache Playwright browsers
+      uses: actions/cache@v3
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
 
     - name: Run docker-compose
-      uses: hoverkraft-tech/compose-action@v2.0.1
+      uses: isbang/compose-action@v1.5.1
       with:
         compose-file: "./docker-compose.yml"
+        down-flags: "--volumes"
         services: |
           db
 
     - name: Wait for DB to be ready
       run: |
-        until nc -z localhost 5432; do
-          echo "Waiting for database connection..."
-          sleep 5
-        done
+        timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+      shell: bash
 
     - name: Install dependencies
-      run: npm install
+      run: npm ci
 
     - name: Install Playwright browsers
       run: npx playwright install --with-deps
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
 
     - name: Seed database
       run: |
         npm run db:push
         npm run db:seed
 
     - name: Run Playwright tests
-      run: npx playwright test --reporter=html
+      id: playwright-tests
+      run: npx playwright test
+      continue-on-error: true
 
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
+    - name: Upload Playwright report
+      uses: actions/upload-artifact@v4
+      if: always()
       with:
         name: playwright-report
         path: playwright-report/
-        retention-days: 30
+        retention-days: 30
+
+    - name: Check test results
+      if: steps.playwright-tests.outcome == 'failure'
+      run: exit 1

.github/workflows/greetings.yml

@@ -6,13 +6,20 @@ on:
   pull_request_target:
     types: [opened]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number || github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   welcome-new-contributor:
     runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
     steps:
       - name: 'Greet the contributor'
         uses: garg3133/welcome-new-contributors@v1.2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: 'Hello @contributor_name, thanks for opening your first issue! your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.'
-          pr-message: 'Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!'
+          issue-message: 'Hello @{{ contributor }}, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.'
+          pr-message: 'Hello @{{ contributor }}, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!'

.github/workflows/pull-request.yml

@@ -1,23 +1,39 @@
-name: Check the pull request
+name: Code Quality Checks
 
 on:
   pull_request:
     types: [opened, synchronize, reopened, edited]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  check-pull-request:
-    name: Check code styling and run tests
+  lint-and-format:
+    name: Run ESLint and Prettier
     runs-on: ubuntu-latest
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4
-      - name: Use the correct Node.js version
+
+      - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.17.0"
+          node-version: 'lts/*'
+          cache: 'npm'
+
       - name: Install dependencies
         run: npm ci
+
       - name: Run ESLint
         run: npm run lint
+
       - name: Run Prettier
         run: npm run prettier
+
+      - name: Check for uncommitted changes
+        run: |
+          git diff --exit-code || \
+          (echo "Detected uncommitted changes after build. See status below:" && \
+           git diff && \
+           exit 1)