Upgrade dependancies

.github/workflows/ui-checks.yaml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   build:
-    runs-on: ['self-hosted']
+    runs-on: ["self-hosted"]
     defaults:
       run:
         working-directory: ./deepfence_frontend
@@ -26,7 +26,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 7
+          version: 9
           run_install: false
       - name: Get pnpm store directory
         id: pnpm-cache

Makefile

@@ -125,7 +125,7 @@ graphdb:
 ui:
 	git log --format="%h" -n 1 > $(DEEPFENCE_FRONTEND_DIR)/console_version.txt && \
 	echo $(subst v,,$(VERSION)) > $(DEEPFENCE_FRONTEND_DIR)/product_version.txt && \
-	docker run --rm --entrypoint=bash -v $(DEEPFENCE_FRONTEND_DIR):/app node:18-bullseye-slim -c "cd /app && corepack enable && corepack prepare pnpm@7.17.1 --activate && PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true pnpm install --frozen-lockfile --prefer-offline && ENABLE_ANALYTICS=true pnpm run build" && \
+	docker run --rm --entrypoint=bash -v $(DEEPFENCE_FRONTEND_DIR):/app node:18-bullseye-slim -c "cd /app && corepack enable && corepack prepare pnpm@9.10.0 --activate && PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true pnpm install --frozen-lockfile --prefer-offline && ENABLE_ANALYTICS=true pnpm run build" && \
 	docker build -f $(DEEPFENCE_FRONTEND_DIR)/Dockerfile -t $(IMAGE_REPOSITORY)/deepfence_ui_ce:$(DF_IMG_TAG) $(DEEPFENCE_FRONTEND_DIR) && \
 	rm -rf $(DEEPFENCE_FRONTEND_DIR)/console_version.txt $(DEEPFENCE_FRONTEND_DIR)/product_version.txt
 

deepfence_frontend/Dockerfile.dev

@@ -1,10 +1,11 @@
 FROM node:18-bullseye as build-stage
 
 ENV DEBIAN_FRONTEND=noninteractive
+ENV DO_NOT_TRACK=1
 
 RUN apt-get update && apt install -y --no-install-recommends default-jre
 RUN mkdir -p /app
 WORKDIR /app
 RUN corepack enable
-RUN corepack prepare pnpm@7.17.1 --activate
+RUN corepack prepare pnpm@9.10.0 --activate
 COPY . .

deepfence_frontend/apps/dashboard/package.json

@@ -19,59 +19,59 @@
     "@antv/g6-core": "^0.8.24",
     "@antv/layout": "^0.3.25",
     "@lukemorales/query-key-factory": "^1.3.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@suspensive/react": "^1.26.7",
-    "@suspensive/react-query": "^1.26.7",
-    "@tanstack/react-query": "^4.32.6",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@suspensive/react": "^1.27.0",
+    "@suspensive/react-query": "^1.27.0",
+    "@tanstack/react-query": "^4.36.1",
     "@yornaath/batshit": "^0.9.0",
     "cron-converter": "^2.0.1",
-    "cronstrue": "^2.49.0",
-    "dayjs": "^1.11.10",
-    "echarts": "^5.5.0",
+    "cronstrue": "^2.50.0",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
     "lodash-es": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.22.3",
-    "react-use": "^17.5.0",
+    "react-router-dom": "^6.26.2",
+    "react-use": "^17.5.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
-    "sonner": "^1.4.41",
+    "sonner": "^1.5.0",
     "tailwind-preset": "workspace:*",
     "ui-components": "workspace:*"
   },
   "devDependencies": {
-    "@openapitools/openapi-generator-cli": "^2.13.1",
-    "@tailwindcss/typography": "^0.5.12",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.3.0",
+    "@openapitools/openapi-generator-cli": "^2.13.5",
+    "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.75",
-    "@types/react-dom": "^18.2.24",
-    "@types/uuid": "^9.0.6",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.4.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "msw": "^2.2.13",
-    "postcss": "^8.4.38",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "msw": "^2.4.5",
+    "postcss": "^8.4.45",
     "resize-observer-polyfill": "^1.5.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.4",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2",
     "uuid": "^9.0.1",
-    "vite": "^5.2.8",
-    "vite-plugin-webfont-dl": "^3.9.3",
-    "vitest": "^1.4.0",
+    "vite": "^5.4.4",
+    "vite-plugin-webfont-dl": "^3.9.5",
+    "vitest": "^1.6.0",
     "whatwg-fetch": "^3.6.20"
   },
   "engines": {

deepfence_frontend/apps/dashboard/src/components/UserInfoGuard.tsx

@@ -328,6 +328,7 @@ const UserInfoModalContent = ({
             className="p-0 tracking-normal"
             type="submit"
             variant="flat"
+            data-testid="resendButton"
             disabled={
               fetcher.state !== 'idle' &&
               fetcher.formData?.get('resendIntent') === SEND_EMAIL
@@ -350,6 +351,7 @@ const UserInfoModalContent = ({
           size="md"
           variant="outline"
           type="button"
+          data-testid="cancelButton"
           onClick={() => {
             closeModal(false);
           }}
@@ -362,6 +364,7 @@ const UserInfoModalContent = ({
             <Button
               size="md"
               type="submit"
+              data-testid="registerButton"
               disabled={
                 fetcher.state !== 'idle' &&
                 fetcher.formData?.get('intent') === SAVE_LICENSE &&
@@ -387,6 +390,7 @@ const UserInfoModalContent = ({
               type="submit"
               disabled={fetcher.state !== 'idle'}
               loading={fetcher.state !== 'idle'}
+              data-testid="getLicenseKeyButton"
             >
               Get license key
             </Button>

deepfence_frontend/apps/dashboard/src/components/registries-connector/AmazonECRConnectorForm.tsx

@@ -185,7 +185,11 @@ export const AmazonECRConnectorForm = ({
             )}
           </div>
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/AzureCRConnectorForm.tsx

@@ -79,7 +79,11 @@ export const AzureCRConnectorForm = ({
             required
           />
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/DockerConnectorForm.tsx

@@ -99,7 +99,11 @@ export const DockerConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
             Supported Versions: API version v2
           </div>
         </div>
-        {errorMessage && <p className="text-status-error text-p7a">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="text-status-error text-p7a" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/DockerPrivateConnectorForm.tsx

@@ -104,7 +104,11 @@ export const DockerPriavateConnectorForm = ({
             Supported Versions: API version v2
           </div>
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/GitLabConnectorForm.tsx

@@ -99,7 +99,11 @@ export const GitLabConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
             Supported Versions: 11.8 and above
           </div>
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/GoogleCRConnectorForm.tsx

@@ -64,7 +64,11 @@ export const GoogleCRConnectorForm = ({
             helperText={fieldErrors?.['service_account_json']}
           />
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/HarborConnectorForm.tsx

@@ -109,7 +109,11 @@ export const HarborConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormP
             Supported Versions: 1.8.2 and above
           </div>
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/JfrogConnectorForm.tsx

@@ -111,7 +111,11 @@ export const JfrogConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormPr
             Supported Versions: 6.19.1 and above
           </div>
         </div>
-        {errorMessage && <p className="mt-2 text-status-error text-p7">{errorMessage}</p>}
+        {errorMessage && (
+          <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+            {errorMessage}
+          </p>
+        )}
       </Card>
     </>
   );

deepfence_frontend/apps/dashboard/src/components/registries-connector/QuayConnectorForm.tsx

@@ -97,7 +97,9 @@ export const QuayConnectorForm = ({ errorMessage, fieldErrors }: RegistryFormPro
           )}
 
           {errorMessage && (
-            <p className="mt-2 text-status-error text-p7">{errorMessage}</p>
+            <p className="mt-2 text-status-error text-p7" data-testid="errorMessage">
+              {errorMessage}
+            </p>
           )}
         </div>
       </Card>

deepfence_frontend/apps/dashboard/src/components/remediation/RemediationError.tsx

@@ -15,7 +15,9 @@ export const RemediationError = ({
       <div className="h-10 w-10 mx-auto">
         <ErrorStandardLineIcon />
       </div>
-      <div className="text-center text-xl mt-4">{errorMessage}</div>
+      <div className="text-center text-xl mt-4" data-testid="errorMessage">
+        {errorMessage}
+      </div>
       {onBackButtonClick && (
         <div className="flex justify-center mt-4">
           <Button

deepfence_frontend/apps/dashboard/src/components/remediation/RemediationNoIntegration.tsx

@@ -31,6 +31,7 @@ export const RemediationNoIntegration = ({
           permission to Amazon Bedrock, please{' '}
           <button
             type="button"
+            data-testid="addAutoIntegrationButton"
             className="text-text-link hover:underline focus:underline"
             onClick={(e) => {
               e.preventDefault();
@@ -61,6 +62,7 @@ export const RemediationNoIntegration = ({
           <Button
             variant="outline"
             size="sm"
+            data-testid="goBackButton"
             startIcon={
               <div className="-rotate-90">
                 <ArrowLine />

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/ComplianceScanConfigureForm.tsx

@@ -610,17 +610,25 @@ export const ComplianceScanConfigureForm = ({
             loading={state !== 'idle'}
             size="sm"
             type="submit"
+            data-testid="startScanButton"
           >
             Start Scan
           </Button>
           {onCancel ? (
-            <Button type="button" variant="outline" onClick={() => onCancel?.()}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onCancel?.()}
+              data-testid="cancelButton"
+            >
               Cancel
             </Button>
           ) : null}
         </div>
         {fetcherData?.message && (
-          <p className="text-status-error text-p7a py-3">{fetcherData.message}</p>
+          <p className="text-status-error text-p7a py-3" data-testid="errorMessage">
+            {fetcherData.message}
+          </p>
         )}
       </fetcher.Form>
     </>

deepfence_frontend/apps/dashboard/src/components/scan-configure-forms/MalwareScanConfigureForm.tsx

@@ -377,15 +377,27 @@ export const MalwareScanConfigureForm = ({
       {showScheduleScanOptions && <ScheduleScanForm />}
       {wantDeepfenceSystem(data) ? <ScanDeepfenceSystem /> : null}
       {fetcherData?.message && (
-        <p className="text-status-error text-p7 mt-4">{fetcherData.message}</p>
+        <p className="text-status-error text-p7 mt-4" data-testid="errorMessage">
+          {fetcherData.message}
+        </p>
       )}
 
       <div className="flex gap-3 mt-14">
-        <Button disabled={state !== 'idle'} loading={state !== 'idle'} type="submit">
+        <Button
+          disabled={state !== 'idle'}
+          loading={state !== 'idle'}
+          type="submit"
+          data-testid="startScanButton"
+        >
           Start Scan
         </Button>
         {onCancel ? (
-          <Button type="button" variant="outline" onClick={() => onCancel?.()}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onCancel?.()}
+            data-testid="cancelButton"
+          >
             Cancel
           </Button>
         ) : null}