added the other two products and small UI tweaks

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

@@ -116,7 +116,9 @@ export const useUpdateOrg = () => {
       secretsProductEnabled,
       pkiProductEnabled,
       kmsProductEnabled,
-      sshProductEnabled
+      sshProductEnabled,
+      scannerProductEnabled,
+      shareSecretsProductEnabled
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -132,7 +134,9 @@ export const useUpdateOrg = () => {
         secretsProductEnabled,
         pkiProductEnabled,
         kmsProductEnabled,
-        sshProductEnabled
+        sshProductEnabled,
+        scannerProductEnabled,
+        shareSecretsProductEnabled
       });
     },
     onSuccess: () => {

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

@@ -24,6 +24,8 @@ export type Organization = {
   pkiProductEnabled: boolean;
   kmsProductEnabled: boolean;
   sshProductEnabled: boolean;
+  scannerProductEnabled: boolean;
+  shareSecretsProductEnabled: boolean;
 };
 
 export type UpdateOrgDTO = {
@@ -42,6 +44,8 @@ export type UpdateOrgDTO = {
   pkiProductEnabled?: boolean;
   kmsProductEnabled?: boolean;
   sshProductEnabled?: boolean;
+  scannerProductEnabled?: boolean;
+  shareSecretsProductEnabled?: boolean;
 };
 
 export type BillingDetails = {

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

@@ -332,21 +332,27 @@ export const MinimizedOrgSidebar = () => {
                   )}
                 </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.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/OrgProductSelectSection/OrgProductSelectSection.tsx

@@ -1,8 +1,8 @@
-import { createNotification } from "@app/components/notifications";
-import { Checkbox, Switch } from "@app/components/v2";
+import { useEffect, useState } from "react";
+
+import { Switch } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useUpdateOrg } from "@app/hooks/api";
-import { useEffect, useState } from "react";
 
 export const OrgProductSelectSection = () => {
   const [toggledProducts, setToggledProducts] = useState<{
@@ -23,6 +23,14 @@ export const OrgProductSelectSection = () => {
     sshProductEnabled: {
       name: "SSH",
       enabled: true
+    },
+    scannerProductEnabled: {
+      name: "Scanner",
+      enabled: true
+    },
+    shareSecretsProductEnabled: {
+      name: "Share Secrets",
+      enabled: true
     }
   });
 
@@ -30,14 +38,14 @@ export const OrgProductSelectSection = () => {
   const { mutateAsync } = useUpdateOrg();
 
   useEffect(() => {
-    for (const [key, value] of Object.entries(currentOrg)) {
+    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) => {
@@ -62,7 +70,7 @@ export const OrgProductSelectSection = () => {
         Select which products are available for your organization.
       </p>
 
-      <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3">
         {Object.entries(toggledProducts).map(([key, product]) => (
           <Switch
             key={key}