Merge pull request #945 from trycompai/claudio/stripe

[dev] [claudfuen] claudio/stripe

Author: claudfuen

apps/app/src/actions/organization/add-frameworks-to-organization-action.ts

@@ -1,26 +1,29 @@
 'use server';
 
+import { authWithOrgAccessClient } from '../safe-action';
 import { addFrameworksSchema } from '@/actions/schema';
 import { db } from '@comp/db';
 import { Prisma } from '@comp/db/types';
-import { revalidatePath } from 'next/cache';
-import { z } from 'zod';
 import { _upsertOrgFrameworkStructureCore } from './lib/initialize-organization';
 
-// Duplicating the InitializeOrganizationInput type for clarity, can be shared if preferred
-export type AddFrameworksInput = z.infer<typeof addFrameworksSchema>;
-
 /**
  * Adds specified frameworks and their related entities (controls, policies, tasks)
  * to an existing organization. It ensures that entities are not duplicated if they
  * already exist (e.g., from a shared template or a previous addition).
  */
-export const addFrameworksToOrganizationAction = async (
-  input: AddFrameworksInput,
-): Promise<{ success: boolean; error?: string }> => {
-  try {
-    const validatedInput = addFrameworksSchema.parse(input);
-    const { frameworkIds, organizationId } = validatedInput;
+export const addFrameworksToOrganizationAction = authWithOrgAccessClient
+  .inputSchema(addFrameworksSchema)
+  .metadata({
+    name: 'add-frameworks-to-organization',
+    track: {
+      event: 'add-frameworks',
+      description: 'Add frameworks to organization',
+      channel: 'server',
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { user, member, organizationId } = ctx;
+    const { frameworkIds } = parsedInput;
 
     await db.$transaction(async (tx) => {
       // 1. Fetch FrameworkEditorFrameworks and their requirements for the given frameworkIds, filtering by visible: true
@@ -45,24 +48,13 @@ export const addFrameworksToOrganizationAction = async (
         organizationId,
         targetFrameworkEditorIds: finalFrameworkEditorIds,
         frameworkEditorFrameworks: frameworksAndRequirements,
-        tx: tx as unknown as Prisma.TransactionClient, // Use the transaction client from this action
+        tx: tx as unknown as Prisma.TransactionClient,
       });
-
-      // The rest of the logic (creating instances, relations) is now inside _upsertOrgFrameworkStructureCore
     });
 
-    revalidatePath('/'); // Revalidate all paths, or be more specific e.g. /${organizationId}/frameworks
-    return { success: true };
-  } catch (error) {
-    console.error('Error in addFrameworksToOrganizationAction:', error);
-    if (error instanceof z.ZodError) {
-      return {
-        success: false,
-        error: error.errors.map((e) => e.message).join(', '),
-      };
-    } else if (error instanceof Error) {
-      return { success: false, error: error.message };
-    }
-    return { success: false, error: 'An unexpected error occurred.' };
-  }
-};
+    // The safe action client will handle revalidation automatically
+    return {
+      success: true,
+      frameworksAdded: frameworkIds.length,
+    };
+  });

apps/app/src/app/(app)/[orgId]/frameworks/components/AddFrameworkModal.tsx

@@ -2,15 +2,17 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
-import { useState } from 'react';
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import type { z } from 'zod';
-import { useRouter } from 'next/navigation';
 
+import { addFrameworksToOrganizationAction } from '@/actions/organization/add-frameworks-to-organization-action';
+import { addFrameworksSchema } from '@/actions/schema';
+import { FrameworkCard } from '@/components/framework-card';
+import type { FrameworkEditorFramework } from '@comp/db/types';
 import { Button } from '@comp/ui/button';
-import { Checkbox } from '@comp/ui/checkbox';
-import { cn } from '@comp/ui/cn';
 import {
   DialogContent,
   DialogDescription,
@@ -19,9 +21,6 @@ import {
   DialogTitle,
 } from '@comp/ui/dialog';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@comp/ui/form';
-import type { FrameworkEditorFramework } from '@comp/db/types';
-import { addFrameworksToOrganizationAction } from '@/actions/organization/add-frameworks-to-organization-action'; // Will create this action next
-import { addFrameworksSchema } from '@/actions/schema'; // Will create/update this schema
 
 type Props = {
   onOpenChange: (isOpen: boolean) => void;
@@ -34,7 +33,6 @@ type Props = {
 
 export function AddFrameworkModal({ onOpenChange, availableFrameworks, organizationId }: Props) {
   const router = useRouter();
-  const [isExecuting, setIsExecuting] = useState(false);
 
   const form = useForm<z.infer<typeof addFrameworksSchema>>({
     resolver: zodResolver(addFrameworksSchema),
@@ -45,22 +43,30 @@ export function AddFrameworkModal({ onOpenChange, availableFrameworks, organizat
     mode: 'onChange',
   });
 
-  const onSubmit = async (data: z.infer<typeof addFrameworksSchema>) => {
-    setIsExecuting(true);
-    try {
-      const result = await addFrameworksToOrganizationAction(data);
-      if (result.success) {
-        toast.success('Success'); // Assuming a generic success message
-        onOpenChange(false);
-        router.refresh(); // Refresh page to show new frameworks
+  const { execute, isExecuting } = useAction(addFrameworksToOrganizationAction, {
+    onSuccess: (data) => {
+      toast.success(
+        `Successfully added ${data.data?.frameworksAdded ?? 0} framework${
+          data.data?.frameworksAdded && data.data?.frameworksAdded > 1 ? 's' : ''
+        }`,
+      );
+      onOpenChange(false);
+      router.refresh();
+    },
+    onError: (error) => {
+      if (error.error.serverError) {
+        toast.error(error.error.serverError);
+      } else if (error.error.validationErrors) {
+        const errorMessages = Object.values(error.error.validationErrors).flat().join(', ');
+        toast.error(errorMessages || 'Validation error occurred');
       } else {
-        toast.error(result.error || 'Error');
+        toast.error('Failed to add frameworks');
       }
-    } catch (error) {
-      toast.error('Error');
-    } finally {
-      setIsExecuting(false);
-    }
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof addFrameworksSchema>) => {
+    execute(data);
   };
 
   const handleOpenChange = (open: boolean) => {
@@ -69,125 +75,94 @@ export function AddFrameworkModal({ onOpenChange, availableFrameworks, organizat
   };
 
   return (
-    <DialogContent className="max-w-[455px]">
-      <DialogHeader className="my-4">
-        <DialogTitle>{'Add New Frameworks'}</DialogTitle>
-        <DialogDescription>
+    <DialogContent className="max-w-md">
+      <DialogHeader className="space-y-2">
+        <DialogTitle className="text-base font-medium">Add Frameworks</DialogTitle>
+        <DialogDescription className="text-muted-foreground text-sm">
           {availableFrameworks.length > 0
-            ? 'Select the compliance frameworks you want to add to your organization.'
-            : 'There are no new frameworks available to add at this time.'}
+            ? 'Select the compliance frameworks to add to your organization.'
+            : 'No new frameworks are available to add at this time.'}
         </DialogDescription>
       </DialogHeader>
 
       {!isExecuting && availableFrameworks.length > 0 && (
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6"
-            suppressHydrationWarning
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <FormField
               control={form.control}
               name="frameworkIds"
               render={({ field }) => (
-                <FormItem className="space-y-2">
-                  <FormLabel className="text-sm font-medium">{'Select Frameworks'}</FormLabel>
+                <FormItem>
+                  <FormLabel className="text-sm font-normal">Available Frameworks</FormLabel>
                   <FormControl>
-                    <fieldset className="flex flex-col gap-2 select-none">
-                      <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
-                        {availableFrameworks
-                          .filter((framework) => framework.visible)
-                          .map((framework) => {
-                            const frameworkId = framework.id;
-                            return (
-                              <label
-                                key={frameworkId}
-                                htmlFor={`add-framework-${frameworkId}`}
-                                className={cn(
-                                  'focus-within:ring-ring relative flex w-full cursor-pointer flex-col rounded-sm border p-4 text-left transition-colors focus-within:ring-2 focus-within:ring-offset-2',
-                                  field.value.includes(frameworkId) &&
-                                    'border-primary bg-primary/5',
-                                )}
-                              >
-                                <div className="flex items-start justify-between">
-                                  <div>
-                                    <h3 className="font-semibold">{framework.name}</h3>
-                                    <p className="text-muted-foreground mt-1 text-sm">
-                                      {framework.description}
-                                    </p>
-                                    <p className="text-muted-foreground/75 mt-2 text-xs">
-                                      {`${'Version'}: ${framework.version}`}
-                                    </p>
-                                  </div>
-                                  <div>
-                                    <Checkbox
-                                      id={`add-framework-${frameworkId}`}
-                                      checked={field.value.includes(frameworkId)}
-                                      className="mt-1"
-                                      onCheckedChange={(checked) => {
-                                        const newValue = checked
-                                          ? [...field.value, frameworkId]
-                                          : field.value.filter((id) => id !== frameworkId);
-                                        field.onChange(newValue);
-                                      }}
-                                    />
-                                  </div>
-                                </div>
-                              </label>
-                            );
-                          })}
-                      </div>
-                    </fieldset>
+                    <div className="max-h-80 space-y-3 overflow-y-auto pr-1">
+                      {availableFrameworks
+                        .filter((framework) => framework.visible)
+                        .map((framework) => (
+                          <FrameworkCard
+                            key={framework.id}
+                            framework={framework}
+                            isSelected={field.value.includes(framework.id)}
+                            onSelectionChange={(checked) => {
+                              const newValue = checked
+                                ? [...field.value, framework.id]
+                                : field.value.filter((id) => id !== framework.id);
+                              field.onChange(newValue);
+                            }}
+                          />
+                        ))}
+                    </div>
                   </FormControl>
-                  <FormMessage className="text-xs" />
+                  <FormMessage />
                 </FormItem>
               )}
             />
-            <DialogFooter>
-              <div className="space-x-4">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => handleOpenChange(false)}
-                  disabled={isExecuting}
-                >
-                  {'Cancel'}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={
-                    isExecuting ||
-                    form.getValues('frameworkIds').length === 0 ||
-                    availableFrameworks.length === 0
-                  }
-                  suppressHydrationWarning
-                >
-                  {isExecuting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                  {'Add'}
-                </Button>
-              </div>
+
+            <DialogFooter className="gap-2 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => handleOpenChange(false)}
+                disabled={isExecuting}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                size="sm"
+                disabled={isExecuting || form.getValues('frameworkIds').length === 0}
+              >
+                {isExecuting && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}
+                Add Selected
+              </Button>
             </DialogFooter>
           </form>
         </Form>
       )}
 
       {!isExecuting && availableFrameworks.length === 0 && (
-        <div className="py-8 text-center">
-          <p className="text-md text-foreground">
-            {'All available frameworks are already enabled in your account.'}
-          </p>
-          <DialogFooter className="mt-8">
-            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
-              {'Close'}
+        <div className="py-6 text-center">
+          <div className="text-muted-foreground text-sm">
+            All available frameworks are already enabled in your organization.
+          </div>
+          <DialogFooter className="mt-6 border-t pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => handleOpenChange(false)}
+            >
+              Close
             </Button>
           </DialogFooter>
         </div>
       )}
 
       {isExecuting && (
-        <div className="flex items-center justify-center p-8">
-          <Loader2 className="text-primary h-12 w-12 animate-spin" />
-          <p className="text-muted-foreground ml-4">{'Adding frameworks...'}</p>
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+          <span className="text-muted-foreground ml-3 text-sm">Adding frameworks...</span>
         </div>
       )}
     </DialogContent>

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -37,7 +37,7 @@ export default async function Layout({
   });
 
   const isOnboardingRunning = !!onboarding?.triggerJobId && !onboarding.completed;
-  const navbarHeight = 69 + 1; // 1 for border
+  const navbarHeight = 53 + 1; // 1 for border
   const onboardingHeight = 132 + 1; // 1 for border
 
   const pixelsOffset = isOnboardingRunning ? navbarHeight + onboardingHeight : navbarHeight;