chore(ui): migrate from npm to pnpm (#9442)

.github/workflows/ui-e2e-tests.yml

@@ -117,29 +117,42 @@ jobs:
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '20.x'
-          cache: 'npm'
-          cache-dependency-path: './ui/package-lock.json'
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - name: Setup pnpm cache
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('ui/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install UI dependencies
         working-directory: ./ui
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Build UI application
         working-directory: ./ui
-        run: npm run build
+        run: pnpm run build
       - name: Cache Playwright browsers
         uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('ui/package-lock.json') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('ui/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-playwright-
       - name: Install Playwright browsers
         working-directory: ./ui
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npm run test:e2e:install
+        run: pnpm run test:e2e:install
       - name: Run E2E tests
         working-directory: ./ui
-        run: npm run test:e2e
+        run: pnpm run test:e2e
       - name: Upload test reports
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         if: failure()

.github/workflows/ui-tests.yml

@@ -48,17 +48,36 @@ jobs:
         uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-          cache-dependency-path: './ui/package-lock.json'
+
+      - name: Setup pnpm
+        if: steps.check-changes.outputs.any_changed == 'true'
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Get pnpm store directory
+        if: steps.check-changes.outputs.any_changed == 'true'
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        if: steps.check-changes.outputs.any_changed == 'true'
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('ui/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         if: steps.check-changes.outputs.any_changed == 'true'
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run healthcheck
         if: steps.check-changes.outputs.any_changed == 'true'
-        run: npm run healthcheck
+        run: pnpm run healthcheck
 
       - name: Build application
         if: steps.check-changes.outputs.any_changed == 'true'
-        run: npm run build
+        run: pnpm run build

README.md

@@ -154,7 +154,7 @@ You can find more information in the [Troubleshooting](./docs/troubleshooting.md
 
 * `git` installed.
 * `poetry` v2 installed: [poetry installation](https://python-poetry.org/docs/#installation).
-* `npm` installed: [npm installation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+* `pnpm` installed: [pnpm installation](https://pnpm.io/installation).
 * `Docker Compose` installed: https://docs.docker.com/compose/install/.
 
 **Commands to run the API**
@@ -210,9 +210,9 @@ python -m celery -A config.celery beat -l info --scheduler django_celery_beat.sc
 ``` console
 git clone https://github.com/prowler-cloud/prowler
 cd prowler/ui
-npm install
-npm run build
-npm start
+pnpm install
+pnpm run build
+pnpm start
 ```
 
 > Once configured, access the Prowler App at http://localhost:3000. Sign up using your email and password to get started.

ui/.husky/pre-commit

@@ -140,7 +140,7 @@ echo -e "${BLUE}🏥 Running healthcheck...${NC}"
 echo ""
 
 cd ui || cd .
-if npm run healthcheck; then
+if pnpm run healthcheck; then
   echo ""
   echo -e "${GREEN}✅ Healthcheck passed${NC}"
   echo ""
@@ -156,7 +156,7 @@ fi
 echo -e "${BLUE}🔨 Running build...${NC}"
 echo ""
 
-if npm run build; then
+if pnpm run build; then
   echo ""
   echo -e "${GREEN}✅ Build passed${NC}"
   echo ""

ui/.npmrc

@@ -1,2 +1,3 @@
-package-lock=true
+public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*
 save-exact=true

ui/AGENTS.md

@@ -196,15 +196,15 @@ ui/
 ## COMMANDS
 
 ```
-npm install && npm run dev          (Setup & start)
-npm run typecheck                   (Type check)
-npm run lint:fix                    (Fix linting)
-npm run format:write                (Format)
-npm run healthcheck                 (typecheck + lint)
-npm run test:e2e                    (E2E tests)
-npm run test:e2e:ui                 (E2E with UI)
-npm run test:e2e:debug              (Debug E2E)
-npm run build && npm start          (Build & start)
+pnpm install && pnpm run dev        (Setup & start)
+pnpm run typecheck                  (Type check)
+pnpm run lint:fix                   (Fix linting)
+pnpm run format:write               (Format)
+pnpm run healthcheck                (typecheck + lint)
+pnpm run test:e2e                   (E2E tests)
+pnpm run test:e2e:ui                (E2E with UI)
+pnpm run test:e2e:debug             (Debug E2E)
+pnpm run build && pnpm start        (Build & start)
 ```
 
 ---

ui/CHANGELOG.md

@@ -8,6 +8,11 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Finding Severity Over Time chart component to Overview page [(#9405)](https://github.com/prowler-cloud/prowler/pull/9405)
 - Attack Surface component to Overview page [(#9412)](https://github.com/prowler-cloud/prowler/pull/9412)
+
+### 🔄 Changed
+
+- Migrate package manager from npm to pnpm for faster installs and stricter dependency resolution [(#9442)](https://github.com/prowler-cloud/prowler/pull/9442)
+- Pin pnpm to version 10 in Dockerfile for consistent builds [(#9452)](https://github.com/prowler-cloud/prowler/pull/9452)
 - Compliance Watchlist component to Overview page [(#9199)](https://github.com/prowler-cloud/prowler/pull/9199)
 - Service Watchlist component to Overview page [(#9316)](https://github.com/prowler-cloud/prowler/pull/9316)
 - Risk Pipeline component with Sankey chart to Overview page [(#9317)](https://github.com/prowler-cloud/prowler/pull/9317)
@@ -23,7 +28,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Models list in Lighthouse selector when default model is not set for provider [(#9402)](https://github.com/prowler-cloud/prowler/pull/9402)
 - Sort compliance cards by name from the compliance overview [(#9422)](https://github.com/prowler-cloud/prowler/pull/9422)
-- Risk severity chart must show only FAIL findings [(#9448)](https://github.com/prowler-cloud/prowler/pull/XXXX)
+- Risk severity chart must show only FAIL findings [(#9452)](https://github.com/prowler-cloud/prowler/pull/9452)
 
 ### Security
 
@@ -54,7 +59,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 ---
 
-## [1.13.1] (Prolwer v5.13.1)
+## [1.13.1] (Prowler v5.13.1)
 
 ### 🔄 Changed
 
@@ -116,7 +121,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 ### 🐞 Fixed
 
-- Handle 4XX errors consistently and 204 responses properly[(#8722)](https://github.com/prowler-cloud/prowler/pull/8722)
+- Handle 4XX errors consistently and 204 responses properly [(#8722)](https://github.com/prowler-cloud/prowler/pull/8722)
 
 ## [1.12.1] (Prowler v5.12.1)
 
@@ -131,7 +136,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 ### 🚀 Added
 
-- Jira integration[(#8640)](https://github.com/prowler-cloud/prowler/pull/8640),[(#8649)](https://github.com/prowler-cloud/prowler/pull/8649)
+- Jira integration [(#8640)](https://github.com/prowler-cloud/prowler/pull/8640), [(#8649)](https://github.com/prowler-cloud/prowler/pull/8649)
 
 ### 🔄 Changed
 
@@ -293,7 +298,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Sync between filter buttons and URL when filters change [(#7928)](https://github.com/prowler-cloud/prowler/pull/7928)
 - Improve heatmap perfomance [(#7934)](https://github.com/prowler-cloud/prowler/pull/7934)
 - SelectScanProvider warning fixed with empty alias [(#7998)](https://github.com/prowler-cloud/prowler/pull/7998)
-- Prevent console warnings for accessibility and SVG[(#8019)](https://github.com/prowler-cloud/prowler/pull/8019)
+- Prevent console warnings for accessibility and SVG [(#8019)](https://github.com/prowler-cloud/prowler/pull/8019)
 
 ---
 
@@ -310,9 +315,9 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🐞 Fixed
 
 - Download report behaviour updated to show feedback based on API response [(#7758)](https://github.com/prowler-cloud/prowler/pull/7758)
-- Missing KISA and ProwlerThreat icons added to the compliance page [(#7860)(https://github.com/prowler-cloud/prowler/pull/7860)]
+- Missing KISA and ProwlerThreat icons added to the compliance page [(#7860)](https://github.com/prowler-cloud/prowler/pull/7860)
 - Retrieve more than 10 scans in /compliance page [(#7865)](https://github.com/prowler-cloud/prowler/pull/7865)
-- Improve CustomDropdownFilter component [(#7868)(https://github.com/prowler-cloud/prowler/pull/7868)]
+- Improve CustomDropdownFilter component [(#7868)](https://github.com/prowler-cloud/prowler/pull/7868)
 
 ---
 
@@ -397,7 +402,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - `exports` feature: Users can now download artifacts via a new button [(#7006)](https://github.com/prowler-cloud/prowler/pull/7006)
 - New sidebar with nested menus and integrated mobile navigation [(#7018)](https://github.com/prowler-cloud/prowler/pull/7018)
-- Animation for scan execution progress—it now updates automatically.[(#6972)](https://github.com/prowler-cloud/prowler/pull/6972)
+- Animation for scan execution progress—it now updates automatically [(#6972)](https://github.com/prowler-cloud/prowler/pull/6972)
 - `status_extended` attribute to finding details [(#6997)](https://github.com/prowler-cloud/prowler/pull/6997)
 - `Prowler version` to the sidebar [(#7086)](https://github.com/prowler-cloud/prowler/pull/7086)
 

ui/Dockerfile

@@ -1,6 +1,10 @@
 FROM node:20-alpine AS base
 
 LABEL maintainer="https://github.com/prowler-cloud"
+
+# Enable corepack for pnpm
+RUN corepack enable && corepack prepare pnpm@10 --activate
+
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -9,12 +13,9 @@ RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+COPY package.json pnpm-lock.yaml .npmrc ./
 COPY scripts ./scripts
-RUN \
-  if [ -f package-lock.json ]; then npm install; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+RUN pnpm install --frozen-lockfile
 
 
 # Rebuild the source code only when needed
@@ -34,10 +35,7 @@ ENV NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=${NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}
 ARG NEXT_PUBLIC_API_BASE_URL
 ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
 
-RUN \
-  if [ -f package-lock.json ]; then npm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+RUN pnpm run build
 
 # Development stage
 FROM base AS dev
@@ -49,7 +47,7 @@ ENV NEXT_TELEMETRY_DISABLED=1
 COPY --from=builder /app /app
 
 # Run development server with hot-reloading
-CMD ["npm", "run", "dev"]
+CMD ["pnpm", "run", "dev"]
 
 # Production stage
 FROM base AS prod

ui/README.md

@@ -38,13 +38,13 @@ git clone git@github.com:prowler-cloud/ui.git
 #### Build the project
 
 ```bash
-npm run build
+pnpm run build
 ```
 
 #### Run the production server
 
 ```bash
-npm start
+pnpm start
 ```
 
 ## 🧪 Development deployment
@@ -81,13 +81,11 @@ git clone git@github.com:prowler-cloud/ui.git
 
 #### Install dependencies
 
-You can use one of them `npm`, `yarn`, `pnpm`, `bun`, Example using `npm`:
-
 ```bash
-npm install
+pnpm install
 ```
 
-**Note:** The `npm install` command will automatically configure Git hooks for code quality checks. If you experience issues, you can manually configure them:
+**Note:** The `pnpm install` command will automatically configure Git hooks for code quality checks. If you experience issues, you can manually configure them:
 
 ```bash
 git config core.hooksPath "ui/.husky"
@@ -96,19 +94,9 @@ git config core.hooksPath "ui/.husky"
 #### Run the development server
 
 ```bash
-npm run dev
+pnpm run dev
 ```
 
-## Setup pnpm (optional)
-
-If you are using `pnpm`, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 ## Technologies Used
 
 - [Next.js 14](https://nextjs.org/docs/getting-started)

ui/components/filters/custom-date-picker.tsx

@@ -10,8 +10,9 @@ import {
   today,
 } from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
+import type { DateValue } from "@react-types/datepicker";
 import { useSearchParams } from "next/navigation";
-import React, { useCallback, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useUrlFilters } from "@/hooks/use-url-filters";
 
@@ -19,7 +20,7 @@ export const CustomDatePicker = () => {
   const searchParams = useSearchParams();
   const { updateFilter } = useUrlFilters();
 
-  const [value, setValue] = React.useState(() => {
+  const [value, setValue] = useState<DateValue | null>(() => {
     const dateParam = searchParams.get("filter[inserted_at]");
     if (!dateParam) return null;
     try {
@@ -35,16 +36,13 @@ export const CustomDatePicker = () => {
   const nextWeek = startOfWeek(now.add({ weeks: 1 }), locale);
   const nextMonth = startOfMonth(now.add({ months: 1 }));
 
-  const applyDateFilter = useCallback(
-    (date: any) => {
+  const applyDateFilter = (date: DateValue | null) => {
     if (date) {
       updateFilter("inserted_at", date.toString());
     } else {
       updateFilter("inserted_at", null);
     }
-    },
-    [updateFilter],
-  );
+  };
 
   const initialRender = useRef(true);
 
@@ -59,7 +57,7 @@ export const CustomDatePicker = () => {
     }
   }, [searchParams]);
 
-  const handleDateChange = (newValue: any) => {
+  const handleDateChange = (newValue: DateValue | null) => {
     setValue(newValue);
     applyDateFilter(newValue);
   };

ui/package.json

@@ -9,7 +9,7 @@
     "deps:log": "node scripts/update-dependency-log.js",
     "postinstall": "node scripts/postinstall.js",
     "typecheck": "tsc",
-    "healthcheck": "npm run typecheck && npm run lint:check",
+    "healthcheck": "pnpm run typecheck && pnpm run lint:check",
     "lint:check": "eslint . --ext .ts,.tsx -c .eslintrc.cjs",
     "lint:fix": "eslint . --ext .ts,.tsx -c .eslintrc.cjs --fix",
     "format:check": "./node_modules/.bin/prettier --check ./app",
@@ -25,8 +25,10 @@
   "dependencies": {
     "@ai-sdk/langchain": "1.0.59",
     "@ai-sdk/react": "2.0.59",
+    "@aws-sdk/client-bedrock-runtime": "3.943.0",
     "@heroui/react": "2.8.4",
     "@hookform/resolvers": "5.2.2",
+    "@internationalized/date": "3.10.0",
     "@langchain/aws": "0.1.15",
     "@langchain/core": "0.3.78",
     "@langchain/langgraph": "0.4.9",
@@ -34,17 +36,27 @@
     "@langchain/openai": "0.6.16",
     "@next/third-parties": "15.3.5",
     "@radix-ui/react-alert-dialog": "1.1.14",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-collapsible": "1.1.12",
     "@radix-ui/react-dialog": "1.1.14",
     "@radix-ui/react-dropdown-menu": "2.1.15",
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.2.5",
     "@radix-ui/react-separator": "1.1.7",
     "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-toast": "1.2.14",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@react-aria/i18n": "3.12.13",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/utils": "3.10.8",
+    "@react-types/datepicker": "3.13.2",
+    "@react-types/shared": "3.26.0",
+    "@sentry/browser": "10.11.0",
     "@sentry/nextjs": "10.11.0",
     "@tailwindcss/postcss": "4.1.13",
     "@tailwindcss/typography": "0.5.16",
@@ -64,6 +76,7 @@
     "jwt-decode": "4.0.0",
     "lucide-react": "0.543.0",
     "marked": "15.0.12",
+    "nanoid": "5.1.6",
     "next": "15.5.7",
     "next-auth": "5.0.0-beta.29",
     "next-themes": "0.2.1",
@@ -123,25 +136,18 @@
     "tailwindcss": "4.1.13",
     "typescript": "5.5.4"
   },
+  "pnpm": {
     "overrides": {
       "@react-types/shared": "3.26.0",
-    "alert": {
-      "react": "19.2.1",
-      "react-dom": "19.2.1"
-    },
-    "@react-aria/ssr": {
-      "react": "19.2.1",
-      "react-dom": "19.2.1"
-    },
-    "@react-aria/visually-hidden": {
-      "react": "19.2.1"
-    },
-    "@react-aria/interactions": {
-      "react": "19.2.1"
+      "@langchain/core": "0.3.77",
+      "@internationalized/date": "3.10.0",
+      "alert>react": "19.2.1",
+      "alert>react-dom": "19.2.1",
+      "@react-aria/ssr>react": "19.2.1",
+      "@react-aria/ssr>react-dom": "19.2.1",
+      "@react-aria/visually-hidden>react": "19.2.1",
+      "@react-aria/interactions>react": "19.2.1"
     }
   },
-  "resolutions": {
-    "@langchain/core": "0.3.77"
-  },
   "version": "0.0.1"
 }