feat: add advanced mode functionality for organizations (#1503)

- Introduced a new schema for managing the advanced mode setting in organizations.
- Implemented an action to update the advanced mode status in the database.
- Created a UI component for toggling advanced mode, integrated into the organization settings page.
- Updated the main menu and sidebar to conditionally display items based on the advanced mode status.
- Added a database migration to include the advancedModeEnabled column in the Organization model.

These changes enhance the application's capability to manage advanced features for organizations.

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/app/src/actions/organization/update-organization-advanced-mode-action.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import { db } from '@db';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
+import { authActionClient } from '../safe-action';
+import { organizationAdvancedModeSchema } from '../schema';
+
+export const updateOrganizationAdvancedModeAction = authActionClient
+  .inputSchema(organizationAdvancedModeSchema)
+  .metadata({
+    name: 'update-organization-advanced-mode',
+    track: {
+      event: 'update-organization-advanced-mode',
+      channel: 'server',
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { advancedModeEnabled } = parsedInput;
+    const { activeOrganizationId } = ctx.session;
+
+    if (!activeOrganizationId) {
+      throw new Error('No active organization');
+    }
+
+    try {
+      await db.$transaction(async () => {
+        await db.organization.update({
+          where: { id: activeOrganizationId },
+          data: { advancedModeEnabled },
+        });
+      });
+
+      const headersList = await headers();
+      let path = headersList.get('x-pathname') || headersList.get('referer') || '';
+      path = path.replace(/\/[a-z]{2}\//, '/');
+
+      revalidatePath(path);
+      revalidateTag(`organization_${activeOrganizationId}`);
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(error);
+      throw new Error('Failed to update advanced mode setting');
+    }
+  });

apps/app/src/actions/schema.ts

@@ -61,6 +61,10 @@ export const organizationWebsiteSchema = z.object({
     .max(255, 'Website cannot exceed 255 characters'),
 });
 
+export const organizationAdvancedModeSchema = z.object({
+  advancedModeEnabled: z.boolean(),
+});
+
 // Risks
 export const createRiskSchema = z.object({
   title: z

apps/app/src/app/(app)/[orgId]/settings/page.tsx

@@ -1,4 +1,5 @@
 import { DeleteOrganization } from '@/components/forms/organization/delete-organization';
+import { UpdateOrganizationAdvancedMode } from '@/components/forms/organization/update-organization-advanced-mode';
 import { UpdateOrganizationName } from '@/components/forms/organization/update-organization-name';
 import { UpdateOrganizationWebsite } from '@/components/forms/organization/update-organization-website';
 import { auth } from '@/utils/auth';
@@ -14,6 +15,9 @@ export default async function OrganizationSettings() {
     <div className="space-y-4">
       <UpdateOrganizationName organizationName={organization?.name ?? ''} />
       <UpdateOrganizationWebsite organizationWebsite={organization?.website ?? ''} />
+      <UpdateOrganizationAdvancedMode
+        advancedModeEnabled={organization?.advancedModeEnabled ?? false}
+      />
       <DeleteOrganization organizationId={organization?.id ?? ''} />
     </div>
   );
@@ -40,6 +44,7 @@ const organizationDetails = cache(async () => {
       name: true,
       id: true,
       website: true,
+      advancedModeEnabled: true,
     },
   });
 

apps/app/src/components/forms/organization/update-organization-advanced-mode.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { updateOrganizationAdvancedModeAction } from '@/actions/organization/update-organization-advanced-mode-action';
+import { organizationAdvancedModeSchema } from '@/actions/schema';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@comp/ui/card';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@comp/ui/form';
+import { Switch } from '@comp/ui/switch';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { useAction } from 'next-safe-action/hooks';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import type { z } from 'zod';
+
+export function UpdateOrganizationAdvancedMode({
+  advancedModeEnabled,
+}: {
+  advancedModeEnabled: boolean;
+}) {
+  const updateAdvancedMode = useAction(updateOrganizationAdvancedModeAction, {
+    onSuccess: () => {
+      toast.success('Advanced mode setting updated');
+    },
+    onError: () => {
+      toast.error('Error updating advanced mode setting');
+    },
+  });
+
+  const form = useForm<z.infer<typeof organizationAdvancedModeSchema>>({
+    resolver: zodResolver(organizationAdvancedModeSchema),
+    defaultValues: {
+      advancedModeEnabled,
+    },
+  });
+
+  const onSubmit = (data: z.infer<typeof organizationAdvancedModeSchema>) => {
+    updateAdvancedMode.execute(data);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Advanced Mode</CardTitle>
+            <CardDescription>
+              <div className="max-w-[600px]">
+                Enable advanced mode to access additional features like the Controls page. This
+                setting is designed for users who need access to more detailed compliance management
+                tools.
+              </div>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="advancedModeEnabled"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-xs border p-3">
+                  <div className="space-y-0.5">
+                    <div className="text-base">Advanced Mode</div>
+                    <div className="text-muted-foreground text-sm">
+                      Show advanced features and pages
+                    </div>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                        // Auto-submit when switch is toggled
+                        form.handleSubmit(onSubmit)();
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="flex justify-between">
+            <div className="text-muted-foreground text-xs">
+              Changes are saved automatically when toggled.
+            </div>
+            {updateAdvancedMode.status === 'executing' && (
+              <div className="flex items-center text-muted-foreground text-sm">
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </div>
+            )}
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  );
+}

apps/app/src/components/main-menu.tsx

@@ -44,7 +44,12 @@ interface ItemProps {
   itemRef: (el: HTMLDivElement | null) => void;
 }
 
-export function MainMenu({ organizationId, isCollapsed = false, onItemClick }: Props) {
+export function MainMenu({
+  organizationId,
+  organization,
+  isCollapsed = false,
+  onItemClick,
+}: Props) {
   const pathname = usePathname();
   const [activeStyle, setActiveStyle] = useState({ top: '0px', height: '0px' });
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -65,6 +70,7 @@ export function MainMenu({ organizationId, isCollapsed = false, onItemClick }: P
       disabled: false,
       icon: ShieldEllipsis,
       protected: false,
+      hidden: !organization?.advancedModeEnabled,
     },
     {
       id: 'policies',
@@ -314,6 +320,7 @@ const Item = ({
 
 type Props = {
   organizationId?: string;
+  organization?: { advancedModeEnabled?: boolean } | null;
   isCollapsed?: boolean;
   onItemClick?: () => void;
 };

apps/app/src/components/mobile-menu.tsx

@@ -45,7 +45,11 @@ export function MobileMenu({ organizationId, organizations }: MobileMenuProps) {
             organization={currentOrganization}
             isCollapsed={false}
           />
-          <MainMenu organizationId={organizationId} onItemClick={handleCloseSheet} />
+          <MainMenu
+            organizationId={organizationId}
+            organization={currentOrganization}
+            onItemClick={handleCloseSheet}
+          />
         </div>
       </SheetContent>
     </Sheet>

apps/app/src/components/sidebar.tsx

@@ -30,7 +30,11 @@ export async function Sidebar({
             organization={organization}
             isCollapsed={isCollapsed}
           />
-          <MainMenu organizationId={organization?.id ?? ''} isCollapsed={isCollapsed} />
+          <MainMenu
+            organizationId={organization?.id ?? ''}
+            organization={organization}
+            isCollapsed={isCollapsed}
+          />
         </div>
       </div>
       <div className="flex-1" />

packages/db/prisma/migrations/20250911162601_add_advanced_mode_to_organization/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Organization" ADD COLUMN     "advancedModeEnabled" BOOLEAN NOT NULL DEFAULT false;

packages/db/prisma/schema/organization.prisma

@@ -9,6 +9,7 @@ model Organization {
   website             String?
   onboardingCompleted Boolean     @default(false)
   hasAccess           Boolean     @default(false)
+  advancedModeEnabled Boolean     @default(false)
 
   // FleetDM
   fleetDmLabelId        Int?