improvement: align organization options in sidebar

Merge pull request #3117 from thomas-infisical/docs-components
docs: reorganize components documentation
2025-07-29 22:37:44 +00:00 · 2025-02-13 16:25:59 -08:00 · 2025-02-13 12:18:36 -08:00 · 2025-02-13 08:27:59 -08:00 · 2025-02-13 16:35:19 +01:00 · 2025-02-12 20:56:07 -08:00
10 changed files with 242 additions and 80 deletions
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -21,7 +21,7 @@
        "@fastify/etag": "^5.1.0",
        "@fastify/formbody": "^7.4.0",
        "@fastify/helmet": "^11.1.1",
-        "@fastify/multipart": "8.3.0",
+        "@fastify/multipart": "^8.3.1",
        "@fastify/passport": "^2.4.0",
        "@fastify/rate-limit": "^9.0.0",
        "@fastify/request-context": "^5.1.0",
@@ -48,8 +48,8 @@
        "@peculiar/x509": "^1.12.1",
        "@serdnam/pino-cloudwatch-transport": "^1.0.4",
        "@sindresorhus/slugify": "1.1.0",
-        "@slack/oauth": "^3.0.1",
-        "@slack/web-api": "^7.3.4",
+        "@slack/oauth": "^3.0.2",
+        "@slack/web-api": "^7.8.0",
        "@ucast/mongo2js": "^1.3.4",
        "ajv": "^8.12.0",
        "argon2": "^0.31.2",
@@ -81,7 +81,7 @@
        "mongodb": "^6.8.1",
        "ms": "^2.1.3",
        "mysql2": "^3.9.8",
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.8",
        "nodemailer": "^6.9.9",
        "odbc": "^2.4.9",
        "openid-client": "^5.6.5",
@@ -5423,13 +5423,10 @@
      }
    },
    "node_modules/@fastify/busboy": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
-      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.1.1.tgz",
+      "integrity": "sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw==",
+      "license": "MIT"
    },
    "node_modules/@fastify/cookie": {
      "version": "9.3.1",
@@ -5502,19 +5499,41 @@
      }
    },
    "node_modules/@fastify/multipart": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@fastify/multipart/-/multipart-8.3.0.tgz",
-      "integrity": "sha512-A8h80TTyqUzaMVH0Cr9Qcm6RxSkVqmhK/MVBYHYeRRSUbUYv08WecjWKSlG2aSnD4aGI841pVxAjC+G1GafUeQ==",
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@fastify/multipart/-/multipart-8.3.1.tgz",
+      "integrity": "sha512-pncbnG28S6MIskFSVRtzTKE9dK+GrKAJl0NbaQ/CG8ded80okWFsYKzSlP9haaLNQhNRDOoHqmGQNvgbiPVpWQ==",
      "license": "MIT",
      "dependencies": {
-        "@fastify/busboy": "^2.1.0",
-        "@fastify/deepmerge": "^1.0.0",
-        "@fastify/error": "^3.0.0",
+        "@fastify/busboy": "^3.0.0",
+        "@fastify/deepmerge": "^2.0.0",
+        "@fastify/error": "^4.0.0",
        "fastify-plugin": "^4.0.0",
        "secure-json-parse": "^2.4.0",
        "stream-wormhole": "^1.1.0"
      }
    },
+    "node_modules/@fastify/multipart/node_modules/@fastify/deepmerge": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-2.0.1.tgz",
+      "integrity": "sha512-hx+wJQr9Ph1hY/dyzY0SxqjumMyqZDlIF6oe71dpRKDHUg7dFQfjG94qqwQ274XRjmUrwKiYadex8XplNHx3CA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/multipart/node_modules/@fastify/error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@fastify/error/-/error-4.0.0.tgz",
+      "integrity": "sha512-OO/SA8As24JtT1usTUTKgGH7uLvhfwZPwlptRi2Dp5P4KKmJI3gvsZ8MIHnNwDs4sLf/aai5LzTyl66xr7qMxA==",
+      "license": "MIT"
+    },
    "node_modules/@fastify/passport": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@fastify/passport/-/passport-2.4.0.tgz",
@@ -9049,6 +9068,7 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@slack/logger/-/logger-4.0.0.tgz",
      "integrity": "sha512-Wz7QYfPAlG/DR+DfABddUZeNgoeY7d1J39OCR2jR+v7VBsB8ezulDK5szTnDDPDwLH5IWhLvXIHlCFZV7MSKgA==",
+      "license": "MIT",
      "dependencies": {
        "@types/node": ">=18.0.0"
      },
@@ -9058,12 +9078,13 @@
      }
    },
    "node_modules/@slack/oauth": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@slack/oauth/-/oauth-3.0.1.tgz",
-      "integrity": "sha512-TuR9PI6bYKX6qHC7FQI4keMnhj45TNfSNQtTU3mtnHUX4XLM2dYLvRkUNADyiLTle2qu2rsOQtCIsZJw6H0sDA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@slack/oauth/-/oauth-3.0.2.tgz",
+      "integrity": "sha512-MdPS8AP9n3u/hBeqRFu+waArJLD/q+wOSZ48ktMTwxQLc6HJyaWPf8soqAyS/b0D6IlvI5TxAdyRyyv3wQ5IVw==",
+      "license": "MIT",
      "dependencies": {
        "@slack/logger": "^4",
-        "@slack/web-api": "^7.3.4",
+        "@slack/web-api": "^7.8.0",
        "@types/jsonwebtoken": "^9",
        "@types/node": ">=18",
        "jsonwebtoken": "^9",
@@ -9075,24 +9096,26 @@
      }
    },
    "node_modules/@slack/types": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@slack/types/-/types-2.12.0.tgz",
-      "integrity": "sha512-yFewzUomYZ2BYaGJidPuIgjoYj5wqPDmi7DLSaGIkf+rCi4YZ2Z3DaiYIbz7qb/PL2NmamWjCvB7e9ArI5HkKg==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@slack/types/-/types-2.14.0.tgz",
+      "integrity": "sha512-n0EGm7ENQRxlXbgKSrQZL69grzg1gHLAVd+GlRVQJ1NSORo0FrApR7wql/gaKdu2n4TO83Sq/AmeUOqD60aXUA==",
+      "license": "MIT",
      "engines": {
        "node": ">= 12.13.0",
        "npm": ">= 6.12.0"
      }
    },
    "node_modules/@slack/web-api": {
-      "version": "7.3.4",
-      "resolved": "https://registry.npmjs.org/@slack/web-api/-/web-api-7.3.4.tgz",
-      "integrity": "sha512-KwLK8dlz2lhr3NO7kbYQ7zgPTXPKrhq1JfQc0etJ0K8LSJhYYnf8GbVznvgDT/Uz1/pBXfFQnoXjrQIOKAdSuw==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@slack/web-api/-/web-api-7.8.0.tgz",
+      "integrity": "sha512-d4SdG+6UmGdzWw38a4sN3lF/nTEzsDxhzU13wm10ejOpPehtmRoqBKnPztQUfFiWbNvSb4czkWYJD4kt+5+Fuw==",
+      "license": "MIT",
      "dependencies": {
        "@slack/logger": "^4.0.0",
        "@slack/types": "^2.9.0",
        "@types/node": ">=18.0.0",
        "@types/retry": "0.12.0",
-        "axios": "^1.7.4",
+        "axios": "^1.7.8",
        "eventemitter3": "^5.0.1",
        "form-data": "^4.0.0",
        "is-electron": "2.2.2",
@@ -9110,6 +9133,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
      "engines": {
        "node": ">=8"
      },
@@ -10526,7 +10550,8 @@
    "node_modules/@types/retry": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT"
    },
    "node_modules/@types/safe-regex": {
      "version": "1.1.6",
@@ -11969,9 +11994,10 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.15.6",
        "form-data": "^4.0.0",
@@ -13926,7 +13952,8 @@
    "node_modules/eventemitter3": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
    },
    "node_modules/events": {
      "version": "3.3.0",
@@ -15942,7 +15969,8 @@
    "node_modules/is-electron": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/is-electron/-/is-electron-2.2.2.tgz",
-      "integrity": "sha512-FO/Rhvz5tuw4MCWkpMzHFKWD2LsfHzIb7i6MdPYZ/KW7AlxawyLkqdy+jPZP1WubqEADE3O4FUENlJHDfQASRg=="
+      "integrity": "sha512-FO/Rhvz5tuw4MCWkpMzHFKWD2LsfHzIb7i6MdPYZ/KW7AlxawyLkqdy+jPZP1WubqEADE3O4FUENlJHDfQASRg==",
+      "license": "MIT"
    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
@@ -18182,6 +18210,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "license": "MIT",
      "engines": {
        "node": ">=4"
      }
@@ -18228,6 +18257,7 @@
      "version": "6.6.2",
      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "license": "MIT",
      "dependencies": {
        "eventemitter3": "^4.0.4",
        "p-timeout": "^3.2.0"
@@ -18242,12 +18272,14 @@
    "node_modules/p-queue/node_modules/eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
    },
    "node_modules/p-retry": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
      "dependencies": {
        "@types/retry": "0.12.0",
        "retry": "^0.13.1"
@@ -18271,6 +18303,7 @@
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "license": "MIT",
      "dependencies": {
        "p-finally": "^1.0.0"
      },
--- a/backend/package.json
+++ b/backend/package.json
@@ -129,7 +129,7 @@
    "@fastify/etag": "^5.1.0",
    "@fastify/formbody": "^7.4.0",
    "@fastify/helmet": "^11.1.1",
-    "@fastify/multipart": "8.3.0",
+    "@fastify/multipart": "8.3.1",
    "@fastify/passport": "^2.4.0",
    "@fastify/rate-limit": "^9.0.0",
    "@fastify/request-context": "^5.1.0",
@@ -156,8 +156,8 @@
    "@peculiar/x509": "^1.12.1",
    "@serdnam/pino-cloudwatch-transport": "^1.0.4",
    "@sindresorhus/slugify": "1.1.0",
-    "@slack/oauth": "^3.0.1",
-    "@slack/web-api": "^7.3.4",
+    "@slack/oauth": "^3.0.2",
+    "@slack/web-api": "^7.8.0",
    "@ucast/mongo2js": "^1.3.4",
    "ajv": "^8.12.0",
    "argon2": "^0.31.2",
@@ -189,7 +189,7 @@
    "mongodb": "^6.8.1",
    "ms": "^2.1.3",
    "mysql2": "^3.9.8",
-    "nanoid": "^3.3.4",
+    "nanoid": "^3.3.8",
    "nodemailer": "^6.9.9",
    "odbc": "^2.4.9",
    "openid-client": "^5.6.5",
--- a/backend/src/db/migrations/utils/env-config.ts
+++ b/backend/src/db/migrations/utils/env-config.ts
@@ -42,7 +42,7 @@ export const getMigrationEnvConfig = () => {
    console.error("Invalid environment variables. Check the error below");
    // eslint-disable-next-line no-console
    console.error(
-      "Migration is now automatic at startup. Please remove this step from your workflow and start the application as normal."
+      "Infisical now automatically runs database migrations during boot up, so you no longer need to run them separately."
    );
    // eslint-disable-next-line no-console
    console.error(parsedEnv.error.issues);
--- a/docs/internals/components.mdx
+++ b/docs/internals/components.mdx
@@ -1,28 +1,34 @@
 ---
 title: "Components"
-description: "Infisical's components span multiple clients, an API, and a storage backend."
+description: "Understand Infisical's core architectural components and how they work together."
 ---

-## Infisical API
+## Overview

-The Infisical API (sometimes referred to as the **backend**) contains the core platform logic.
+Infisical is architected around several key components that work in concert to provide a secure and streamlined secret management experience. These components span the client, API, and storage layers, ensuring that secrets are protected at every stage of their lifecycle.

-## Storage backend
+## 1. API (Backend)

-Infisical relies on a storage backend to store data including users and secrets. Infisical's storage backend is Postgres.
+Infisical exposes a well-documented [REST API](https://infisical.com/docs/api-reference/overview/introduction) that enables programmatic interaction with the platform, enabling a wide range of use cases.

-## Redis
+## 2. Storage Backend

-Infisical uses [Redis](https://redis.com) to enable more complex workflows including a queuing system to manage long running asynchronous tasks, cron jobs, as well as reliable cache for frequently used resources.
+Infisical relies on a robust storage backend to durably store secrets, users, and other platform data. Infisical's storage backend is [PostgreSQL](https://www.postgresql.org/).

-## Infisical Web UI
+## 3. Caching Layer

-The Web UI is the browser-based portal that connects to the Infisical API.
+Infisical uses [Redis](https://redis.com) to enable more complex workflows including a queuing system to manage long-running asynchronous tasks, cron jobs, as well as reliable cache for frequently used resources.

-## Infisical clients
+## 4. Clients

-Clients are any application or infrastructure that connecting to the Infisical API using one of the below methods:
- Public API: Making API requests directly to the Infisical API.
- Client SDK: A platform-specific library with method abstractions for working with secrets. Currently, there are three official SDKs: [Node SDK](https://infisical.com/docs/sdks/languages/node), [Python SDK](https://infisical.com/docs/sdks/languages/python), and [Java SDK](https://infisical.com/docs/sdks/languages/java).
- CLI: A terminal-based interface for interacting with the Infisical API.
- Kubernetes Operator: This operator retrieves secrets from Infisical and securely store
+Clients are interfaces through which users and applications interact with the Infisical API:
+
+- **Web UI**: A browser-based portal providing a user-friendly interface for managing secrets, configurations, and performing administrative tasks.
+
+- [**CLI**](https://infisical.com/docs/cli): A terminal-based tool for interacting with the Infisical API, enabling automation, scripting, and integration into CI/CD pipelines.
+
+- **SDKs (Software Development Kits)**: Platform-specific libraries with method abstractions for working with secrets. Supported languages include [Node.js](https://infisical.com/docs/sdks/languages/node), [Python](https://infisical.com/docs/sdks/languages/python), [Java](https://infisical.com/docs/sdks/languages/java), [Golang](https://infisical.com/docs/sdks/languages/go), [Ruby](https://infisical.com/docs/sdks/languages/ruby) and [.NET](https://infisical.com/docs/sdks/languages/csharp).
+
+- [**Kubernetes Operator**](https://infisical.com/docs/integrations/platforms/kubernetes): A Kubernetes-native component that facilitates the secure retrieval and management of secrets within a Kubernetes cluster. The operator supports multiple custom resource definitions (CRDs) for syncing secrets.
+
+- [**Infisical Agent**](https://infisical.com/docs/integrations/platforms/infisical-agent): Daemon that automatically fetches and manages access tokens and secrets to be used in various client resources.
--- a/frontend/src/components/permissions/ProjectPermissionCan.tsx
+++ b/frontend/src/components/permissions/ProjectPermissionCan.tsx
@@ -57,6 +57,10 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
        const finalChild =
          typeof children === "function" ? children(isAllowed, ability as any) : children;

+        if (!isAllowed && renderGuardBanner) {
+          return <ProjectPermissionGuardBanner />;
+        }
+
        if (!isAllowed && passThrough) {
          return <Tooltip content={label}>{finalChild}</Tooltip>;
        }
@@ -65,10 +69,6 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
          return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
        }

-        if (!isAllowed && renderGuardBanner) {
-          return <ProjectPermissionGuardBanner />;
-        }
-
        if (!isAllowed) return null;

        return finalChild;
--- a/frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx
@@ -323,12 +323,12 @@ export const MinimizedOrgSidebar = () => {
                <DropdownMenuContent align="start" side="right" className="p-1">
                  <DropdownMenuLabel>Organization Options</DropdownMenuLabel>
                  <Link to="/organization/access-management">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faUsers} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUsers} />}>
                      Access Control
                    </DropdownMenuItem>
                  </Link>
                  <Link to="/organization/app-connections">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faPlug} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faPlug} />}>
                      App Connections
                    </DropdownMenuItem>
                  </Link>
@@ -336,18 +336,20 @@ export const MinimizedOrgSidebar = () => {
                    window.location.origin.includes("https://eu.infisical.com") ||
                    window.location.origin.includes("https://gamma.infisical.com")) && (
                    <Link to="/organization/billing">
-                      <DropdownMenuItem icon={<FontAwesomeIcon icon={faMoneyBill} />}>
+                      <DropdownMenuItem
+                        icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}
+                      >
                        Usage & Billing
                      </DropdownMenuItem>
                    </Link>
                  )}
                  <Link to="/organization/audit-logs">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faBook} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faBook} />}>
                      Audit Logs
                    </DropdownMenuItem>
                  </Link>
                  <Link to="/organization/settings">
-                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faCog} />}>
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
                      Organization Settings
                    </DropdownMenuItem>
                  </Link>
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
@@ -2,12 +2,15 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useParams } from "@tanstack/react-router";
+import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
  Button,
+  Checkbox,
+  DeleteActionModal,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
@@ -18,8 +21,10 @@ import {
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useWorkspace } from "@app/context";
+import { usePopUp, useToggle } from "@app/hooks";
 import { useGetIntegration } from "@app/hooks/api";
-import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
+import { useDeleteIntegration, useSyncIntegration } from "@app/hooks/api/integrations/queries";
+import { ProjectType } from "@app/hooks/api/workspace/types";

 import { IntegrationAuditLogsSection } from "./components/IntegrationAuditLogsSection";
 import { IntegrationConnectionSection } from "./components/IntegrationConnectionSection";
@@ -38,9 +43,44 @@ export const IntegrationDetailsByIDPage = () => {
    refetchInterval: 4000
  });

+  const [shouldDeleteSecrets, setShouldDeleteSecrets] = useToggle(false);
+
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace.id;
  const { mutateAsync: syncIntegration } = useSyncIntegration();
+  const { mutateAsync: deleteIntegration } = useDeleteIntegration();
+
+  const navigate = useNavigate();
+
+  const handleIntegrationDelete = async (shouldDeleteIntegrationSecrets: boolean) => {
+    try {
+      await deleteIntegration({
+        id: integrationId,
+        workspaceId: currentWorkspace.id,
+        shouldDeleteIntegrationSecrets
+      });
+
+      createNotification({
+        type: "success",
+        text: "Deleted integration"
+      });
+
+      await navigate({
+        to: `/${ProjectType.SecretManager}/${projectId}/integrations`
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to delete integration"
+      });
+    }
+  };
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteConfirmation",
+    "deleteSecretsConfirmation"
+  ] as const);

  return (
    <>
@@ -90,7 +130,10 @@ export const IntegrationDetailsByIDPage = () => {
                            ? "hover:!bg-red-500 hover:!text-white"
                            : "pointer-events-none cursor-not-allowed opacity-50"
                        )}
-                        onClick={() => {}}
+                        onClick={() => {
+                          setShouldDeleteSecrets.off();
+                          handlePopUpOpen("deleteConfirmation", integration);
+                        }}
                        disabled={!isAllowed}
                      >
                        <div className="flex items-center gap-2">
@@ -120,6 +163,57 @@ export const IntegrationDetailsByIDPage = () => {
          </div>
        )}
      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.deleteConfirmation.isOpen}
+        title={`Are you sure want to remove ${integration?.integration || " "} integration for ${
+          integration?.app || "this project"
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={
+          (integration?.integration === "azure-app-configuration" &&
+            integration?.app?.split("//")[1]?.split(".")[0]) ||
+          integration?.app ||
+          integration?.owner ||
+          integration?.path ||
+          integration?.integration ||
+          ""
+        }
+        onDeleteApproved={async () => {
+          if (shouldDeleteSecrets) {
+            handlePopUpOpen("deleteSecretsConfirmation");
+            return;
+          }
+
+          await handleIntegrationDelete(false);
+
+          handlePopUpClose("deleteConfirmation");
+        }}
+      >
+        {integration?.integration === "github" && (
+          <div className="mt-4">
+            <Checkbox
+              id="delete-integration-secrets"
+              checkIndicatorBg="text-white"
+              onCheckedChange={() => setShouldDeleteSecrets.toggle()}
+            >
+              Delete previously synced secrets from the destination
+            </Checkbox>
+          </div>
+        )}
+      </DeleteActionModal>
+      <DeleteActionModal
+        isOpen={popUp.deleteSecretsConfirmation.isOpen}
+        title={`Are you sure you also want to delete secrets on ${integration?.integration}?`}
+        subTitle="By confirming, you acknowledge that all secrets managed by this integration will be removed from the destination. This action is irreversible."
+        onChange={(isOpen) => handlePopUpToggle("deleteSecretsConfirmation", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={async () => {
+          await handleIntegrationDelete(true);
+          handlePopUpClose("deleteSecretsConfirmation");
+          handlePopUpClose("deleteConfirmation");
+        }}
+      />
    </>
  );
 };
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -8,6 +8,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import { Badge, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { IntegrationsListPageTabs } from "@app/types/integrations";

 import {
@@ -100,8 +101,7 @@ export const IntegrationsListPage = () => {
            <TabPanel value={IntegrationsListPageTabs.SecretSyncs}>
              <ProjectPermissionCan
                renderGuardBanner
-                passThrough={false}
-                I={ProjectPermissionActions.Read}
+                I={ProjectPermissionSecretSyncActions.Read}
                a={ProjectPermissionSub.SecretSyncs}
              >
                <SecretSyncsTab />
@@ -110,7 +110,6 @@ export const IntegrationsListPage = () => {
            <TabPanel value={IntegrationsListPageTabs.NativeIntegrations}>
              <ProjectPermissionCan
                renderGuardBanner
-                passThrough={false}
                I={ProjectPermissionActions.Read}
                a={ProjectPermissionSub.Integrations}
              >
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
@@ -3,7 +3,12 @@ import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

 import { workspaceKeys } from "@app/hooks/api";
-import { fetchSecretSyncsByProjectId, secretSyncKeys } from "@app/hooks/api/secretSyncs";
+import { TIntegration } from "@app/hooks/api/integrations/types";
+import {
+  fetchSecretSyncsByProjectId,
+  secretSyncKeys,
+  TSecretSync
+} from "@app/hooks/api/secretSyncs";
 import { fetchWorkspaceIntegrations } from "@app/hooks/api/workspace/queries";
 import { IntegrationsListPageTabs } from "@app/types/integrations";

@@ -20,10 +25,22 @@ export const Route = createFileRoute(
  validateSearch: zodValidator(IntegrationsListPageQuerySchema),
  beforeLoad: async ({ context, search, params: { projectId } }) => {
    if (!search.selectedTab) {
-      const secretSyncs = await context.queryClient.ensureQueryData({
-        queryKey: secretSyncKeys.list(projectId),
-        queryFn: () => fetchSecretSyncsByProjectId(projectId)
-      });
+      let secretSyncs: TSecretSync[];
+
+      try {
+        secretSyncs = await context.queryClient.ensureQueryData({
+          queryKey: secretSyncKeys.list(projectId),
+          queryFn: () => fetchSecretSyncsByProjectId(projectId)
+        });
+      } catch {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations }
+        });
+      }

      if (secretSyncs.length) {
        throw redirect({
@@ -35,10 +52,21 @@ export const Route = createFileRoute(
        });
      }

-      const integrations = await context.queryClient.ensureQueryData({
-        queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
-        queryFn: () => fetchWorkspaceIntegrations(projectId)
-      });
+      let integrations: TIntegration[];
+      try {
+        integrations = await context.queryClient.ensureQueryData({
+          queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
+          queryFn: () => fetchWorkspaceIntegrations(projectId)
+        });
+      } catch {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
+        });
+      }

      if (integrations.length) {
        throw redirect({
--- a/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/OctopusDeployConfigurePage.tsx
@@ -88,7 +88,7 @@ export const OctopusDeployConfigurePage = () => {
      {
        integrationAuthId,
        spaceId: currentSpace?.Id,
-        resourceId: currentResource.appId!,
+        resourceId: currentResource?.appId || "",
        scope: currentScope
      },
      { enabled: Boolean(currentSpace && currentResource) }
Author	SHA1	Message	Date
Scott Wilson	4b9e3e44e2	improvement: align organization options in sidebar	2025-02-13 16:25:59 -08:00
Vlad Matsiiako	b2a680ebd7	Merge pull request #3117 from thomas-infisical/docs-components docs: reorganize components documentation	2025-02-13 12:18:36 -08:00
Scott Wilson	b269bb81fe	Merge pull request #3115 from Infisical/fix-check-permissions-on-before-load-integrations Fix (temp): Wrap Integrations beforeLoad in Try/Catch and RenderBannerGuard if order	2025-02-13 08:27:59 -08:00
Thomas	5ca7ff4f2d	refactor: reorganize components documentation for clarity and structure	2025-02-13 16:35:19 +01:00
Scott Wilson	ec12d57862	fix: refine try/catch	2025-02-12 20:56:07 -08:00
Scott Wilson	2d16f5f258	fix (temp): wrap integrations before load in try/catch, fix render banner guard	2025-02-12 20:35:00 -08:00
Daniel Hougaard	93912da528	Merge pull request #3114 from Infisical/daniel/fix-octopus-integration fix: octopus deploy integration error	2025-02-13 08:02:18 +04:00
Daniel Hougaard	ffc5e61faa	Update OctopusDeployConfigurePage.tsx	2025-02-13 07:56:24 +04:00
Maidul Islam	70e68f4441	Merge pull request #3113 from Infisical/maidul-adidsd Update auto migratiom msg	2025-02-12 19:21:09 -05:00
Maidul Islam	a004934a28	update auto migration msg	2025-02-12 19:20:24 -05:00
Daniel Hougaard	0811192eed	Merge pull request #3098 from Infisical/daniel/delete-integration fix(native-integrations): delete integrations from details page	2025-02-13 04:01:38 +04:00
Maidul Islam	1e09487572	Merge pull request #2871 from Infisical/snyk-fix-85b2bc501b20e7ef8b4f85e965b21c49 [Snyk] Fix for 2 vulnerabilities	2025-02-12 19:01:09 -05:00
Maidul Islam	86202caa95	Merge pull request #3062 from Infisical/snyk-fix-dc81ef6fa0253f665c563233d6aa0a54 [Snyk] Security upgrade @fastify/multipart from 8.3.0 to 8.3.1	2025-02-12 19:00:32 -05:00
Scott Wilson	285fca4ded	Merge pull request #3099 from Infisical/databricks-connection-and-sync Feature: Databricks Connection & Sync	2025-02-12 12:16:41 -08:00
Daniel Hougaard	da35ec90bc	fix(native-integrations): delete integrations from details page	2025-02-11 05:18:14 +04:00
snyk-bot	00e69e6632	fix: backend/package.json & backend/package-lock.json to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-FASTIFYMULTIPART-8660811	2025-01-29 04:35:48 +00:00
snyk-bot	cedb22a39a	fix: backend/package.json & backend/package-lock.json to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-NANOID-8492085 - https://snyk.io/vuln/SNYK-JS-AXIOS-6671926	2024-12-12 00:58:08 +00:00