Merge pull request #3609 from Infisical/ENG-2736

feat(org-settings): Option to hide certain products from the sidebar

frontend/src/hooks/api/organization/queries.tsx

@@ -112,7 +112,13 @@ export const useUpdateOrg = () => {
       selectedMfaMethod,
       allowSecretSharingOutsideOrganization,
       bypassOrgAuthEnabled,
-      userTokenExpiration
+      userTokenExpiration,
+      secretsProductEnabled,
+      pkiProductEnabled,
+      kmsProductEnabled,
+      sshProductEnabled,
+      scannerProductEnabled,
+      shareSecretsProductEnabled
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -124,7 +130,13 @@ export const useUpdateOrg = () => {
         selectedMfaMethod,
         allowSecretSharingOutsideOrganization,
         bypassOrgAuthEnabled,
-        userTokenExpiration
+        userTokenExpiration,
+        secretsProductEnabled,
+        pkiProductEnabled,
+        kmsProductEnabled,
+        sshProductEnabled,
+        scannerProductEnabled,
+        shareSecretsProductEnabled
       });
     },
     onSuccess: () => {

frontend/src/hooks/api/organization/types.ts

@@ -20,6 +20,12 @@ export type Organization = {
   allowSecretSharingOutsideOrganization?: boolean;
   userTokenExpiration?: string;
   userRole: string;
+  secretsProductEnabled: boolean;
+  pkiProductEnabled: boolean;
+  kmsProductEnabled: boolean;
+  sshProductEnabled: boolean;
+  scannerProductEnabled: boolean;
+  shareSecretsProductEnabled: boolean;
 };
 
 export type UpdateOrgDTO = {
@@ -34,6 +40,12 @@ export type UpdateOrgDTO = {
   allowSecretSharingOutsideOrganization?: boolean;
   bypassOrgAuthEnabled?: boolean;
   userTokenExpiration?: string;
+  secretsProductEnabled?: boolean;
+  pkiProductEnabled?: boolean;
+  kmsProductEnabled?: boolean;
+  sshProductEnabled?: boolean;
+  scannerProductEnabled?: boolean;
+  shareSecretsProductEnabled?: boolean;
 };
 
 export type BillingDetails = {

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -268,77 +268,91 @@ export const MinimizedOrgSidebar = () => {
               </DropdownMenu>
             </div>
             <div className="space-y-1">
-              <Link to="/organization/secret-manager/overview">
-                {({ isActive }) => (
-                  <MenuIconButton
-                    isSelected={
-                      isActive ||
-                      window.location.pathname.startsWith(
-                        `/organization/${ProjectType.SecretManager}`
-                      )
-                    }
-                    icon="sliding-carousel"
-                  >
-                    Secrets
-                  </MenuIconButton>
-                )}
-              </Link>
-              <Link to="/organization/cert-manager/overview">
-                {({ isActive }) => (
-                  <MenuIconButton
-                    isSelected={
-                      isActive ||
-                      window.location.pathname.startsWith(
-                        `/organization/${ProjectType.CertificateManager}`
-                      )
-                    }
-                    icon="note"
-                  >
-                    PKI
-                  </MenuIconButton>
-                )}
-              </Link>
-              <Link to="/organization/kms/overview">
-                {({ isActive }) => (
-                  <MenuIconButton
-                    isSelected={
-                      isActive ||
-                      window.location.pathname.startsWith(`/organization/${ProjectType.KMS}`)
-                    }
-                    icon="unlock"
-                  >
-                    KMS
-                  </MenuIconButton>
-                )}
-              </Link>
-              <Link to="/organization/ssh/overview">
-                {({ isActive }) => (
-                  <MenuIconButton
-                    isSelected={
-                      isActive ||
-                      window.location.pathname.startsWith(`/organization/${ProjectType.SSH}`)
-                    }
-                    icon="verified"
-                  >
-                    SSH
-                  </MenuIconButton>
-                )}
-              </Link>
-              <div className="w-full bg-mineshaft-500" style={{ height: "1px" }} />
-              <Link to="/organization/secret-scanning">
-                {({ isActive }) => (
-                  <MenuIconButton isSelected={isActive} icon="secret-scan">
-                    Scanner
-                  </MenuIconButton>
-                )}
-              </Link>
-              <Link to="/organization/secret-sharing">
-                {({ isActive }) => (
-                  <MenuIconButton isSelected={isActive} icon="lock-closed">
-                    Share
-                  </MenuIconButton>
-                )}
-              </Link>
+              {currentOrg.secretsProductEnabled && (
+                <Link to="/organization/secret-manager/overview">
+                  {({ isActive }) => (
+                    <MenuIconButton
+                      isSelected={
+                        isActive ||
+                        window.location.pathname.startsWith(
+                          `/organization/${ProjectType.SecretManager}`
+                        )
+                      }
+                      icon="sliding-carousel"
+                    >
+                      Secrets
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
+              {currentOrg.pkiProductEnabled && (
+                <Link to="/organization/cert-manager/overview">
+                  {({ isActive }) => (
+                    <MenuIconButton
+                      isSelected={
+                        isActive ||
+                        window.location.pathname.startsWith(
+                          `/organization/${ProjectType.CertificateManager}`
+                        )
+                      }
+                      icon="note"
+                    >
+                      PKI
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
+              {currentOrg.kmsProductEnabled && (
+                <Link to="/organization/kms/overview">
+                  {({ isActive }) => (
+                    <MenuIconButton
+                      isSelected={
+                        isActive ||
+                        window.location.pathname.startsWith(`/organization/${ProjectType.KMS}`)
+                      }
+                      icon="unlock"
+                    >
+                      KMS
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
+              {currentOrg.sshProductEnabled && (
+                <Link to="/organization/ssh/overview">
+                  {({ isActive }) => (
+                    <MenuIconButton
+                      isSelected={
+                        isActive ||
+                        window.location.pathname.startsWith(`/organization/${ProjectType.SSH}`)
+                      }
+                      icon="verified"
+                    >
+                      SSH
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
+              {(currentOrg.scannerProductEnabled || currentOrg.shareSecretsProductEnabled) && (
+                <div className="w-full bg-mineshaft-500" style={{ height: "1px" }} />
+              )}
+              {currentOrg.scannerProductEnabled && (
+                <Link to="/organization/secret-scanning">
+                  {({ isActive }) => (
+                    <MenuIconButton isSelected={isActive} icon="secret-scan">
+                      Scanner
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
+              {currentOrg.shareSecretsProductEnabled && (
+                <Link to="/organization/secret-sharing">
+                  {({ isActive }) => (
+                    <MenuIconButton isSelected={isActive} icon="lock-closed">
+                      Share
+                    </MenuIconButton>
+                  )}
+                </Link>
+              )}
               <div className="my-1 w-full bg-mineshaft-500" style={{ height: "1px" }} />
               <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
                 <DropdownMenuTrigger

frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,14 +3,18 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgProductSelectSection } from "../OrgProductSelectSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-      <OrgNameChangeSection />
-      <OrgIncidentContactsSection />
-      {membership && membership.role === "admin" && <OrgDeleteSection />}
-    </div>
+    <>
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+        <OrgNameChangeSection />
+        <OrgIncidentContactsSection />
+        {membership && membership.role === "admin" && <OrgDeleteSection />}
+      </div>
+      {membership && membership.role === "admin" && <OrgProductSelectSection />}
+    </>
   );
 };

frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/OrgProductSelectSection.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+
+import { Switch } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+import axios from "axios";
+import { createNotification } from "@app/components/notifications";
+
+export const OrgProductSelectSection = () => {
+  const [toggledProducts, setToggledProducts] = useState<{
+    [key: string]: { name: string; enabled: boolean };
+  }>({
+    secretsProductEnabled: {
+      name: "Secret Management",
+      enabled: true
+    },
+    pkiProductEnabled: {
+      name: "Certificate Management",
+      enabled: true
+    },
+    kmsProductEnabled: {
+      name: "KMS",
+      enabled: true
+    },
+    sshProductEnabled: {
+      name: "SSH",
+      enabled: true
+    },
+    scannerProductEnabled: {
+      name: "Scanner",
+      enabled: true
+    },
+    shareSecretsProductEnabled: {
+      name: "Share Secrets",
+      enabled: true
+    }
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { currentOrg } = useOrganization();
+  const { mutateAsync } = useUpdateOrg();
+
+  useEffect(() => {
+    Object.entries(currentOrg).forEach(([key, value]) => {
+      if (key in toggledProducts && typeof value === "boolean") {
+        setToggledProducts((products) => ({
+          ...products,
+          [key]: { ...products[key], enabled: value }
+        }));
+      }
+    });
+  }, [currentOrg]);
+
+  const onProductToggle = async (value: boolean, key: string) => {
+    setIsLoading(true);
+
+    setToggledProducts((products) => ({
+      ...products,
+      [key]: { ...products[key], enabled: value }
+    }));
+
+    try {
+      await mutateAsync({
+        orgId: currentOrg.id,
+        [key]: value
+      });
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        const { message = "Something went wrong" } = e.response?.data as { message: string };
+        createNotification({
+          type: "error",
+          text: message
+        });
+      }
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="text-xl font-semibold text-mineshaft-100">Organization Products</h2>
+      <p className="mb-4 text-gray-400">
+        Select which products are available for your organization.
+      </p>
+
+      <div className="grid grid-cols-2 gap-3">
+        {Object.entries(toggledProducts).map(([key, product]) => (
+          <Switch
+            key={key}
+            id={`enable-${key}`}
+            isDisabled={isLoading}
+            onCheckedChange={(value) => onProductToggle(value, key)}
+            isChecked={product.enabled}
+            className="ml-0"
+            containerClassName="flex-row-reverse gap-3 w-fit"
+          >
+            {product.name}
+          </Switch>
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgProductSelectSection/index.tsx

@@ -0,0 +1 @@
+export { OrgProductSelectSection } from "./OrgProductSelectSection";