[dev] [tofikwest] tofik/policy-versions-ui-update (#2093)

* feat(policies): enhance policy versioning and status handling

* refactor(policies): simplify policy header layout and actions

* refactor(policies): update publish action to handle empty content and add pdfUrl

* refactor(policies): clear approval fields in publish action

* refactor(policies): sync draft content with published version in publish action

* refactor(policies): optimize initialVersionId change detection in PolicyDetails

* refactor(policies): add draft badge to policy details for better status indication

* refactor(policies): add lastPublishedAt to policy details and tabs for status display

* refactor(policies): implement transaction in publish action to prevent orphaned versions

* refactor(cloud-tests): update legacy integration filtering for cloud providers

---------

Co-authored-by: Tofik Hasanov <annexcies@gmail.com>

Author: github-actions[bot]

.cursor/rules/ui.mdc

@@ -1,6 +1,5 @@
 ---
-description: Use when building or modifying React components, styling, or working with the design system
-alwaysApply: false
+alwaysApply: true
 ---
 # UI Components
 

apps/api/src/trigger/tasks/onboarding/migrate-policies-for-org.ts

@@ -1,4 +1,4 @@
-import { db, type Prisma } from '@db';
+import { db, PolicyStatus, type Prisma } from '@db';
 import { logger, schemaTask } from '@trigger.dev/sdk';
 import { z } from 'zod';
 
@@ -20,6 +20,7 @@ export const migratePoliciesForOrg = schemaTask({
         id: true,
         content: true,
         pdfUrl: true,
+        status: true,
       },
     });
 
@@ -86,9 +87,17 @@ export const migratePoliciesForOrg = schemaTask({
                 },
               });
 
+              // Update policy - respect current policy status
+              const isPublished = policy.status === PolicyStatus.published;
+              
               await tx.policy.update({
                 where: { id: policy.id },
-                data: { currentVersionId: version.id },
+                data: {
+                  currentVersionId: version.id,
+                  draftContent: (policy.content as Prisma.InputJsonValue[]) || [],
+                  // Only set lastPublishedAt if policy is published
+                  ...(isPublished ? { lastPublishedAt: new Date() } : {}),
+                },
               });
 
               migrated++;

apps/app/src/actions/policies/deny-requested-policy-changes.ts

@@ -51,9 +51,9 @@ export const denyRequestedPolicyChangesAction = authActionClient
       }
 
       // Update policy status
-      // If there's a current published version, keep status as published
-      // Otherwise, set to draft
-      const newStatus = policy.currentVersionId ? PolicyStatus.published : PolicyStatus.draft;
+      // If the policy was previously published (has lastPublishedAt), keep status as published
+      // Otherwise, set to draft (the policy was never published)
+      const newStatus = policy.lastPublishedAt ? PolicyStatus.published : PolicyStatus.draft;
 
       await db.policy.update({
         where: {

apps/app/src/actions/policies/migrate-policies-to-versioning.ts

@@ -91,15 +91,17 @@ export const migratePoliciesAction = authActionClient
           });
 
           // Update policy to set currentVersionId
+          // Preserve the original status (draft, needs_review, or published)
+          const isPublished = policy.status === PolicyStatus.published;
+
           await tx.policy.update({
             where: { id: policy.id },
             data: {
               currentVersionId: version.id,
-              // Ensure status is set properly
-              status:
-                policy.status === PolicyStatus.published
-                  ? PolicyStatus.published
-                  : PolicyStatus.draft,
+              draftContent: (policy.content as Prisma.InputJsonValue[]) || [],
+              // Only set lastPublishedAt if policy is published
+              ...(isPublished ? { lastPublishedAt: new Date() } : {}),
+              // Status is preserved - no change needed
             },
           });
 
@@ -153,6 +155,8 @@ export async function ensurePolicyHasVersion(
   }
 
   // Create version 1
+  const isPublished = policy.status === PolicyStatus.published;
+
   const version = await db.$transaction(async (tx) => {
     const newVersion = await tx.policyVersion.create({
       data: {
@@ -169,6 +173,9 @@ export async function ensurePolicyHasVersion(
       where: { id: policy.id },
       data: {
         currentVersionId: newVersion.id,
+        draftContent: (policy.content as Prisma.InputJsonValue[]) || [],
+        // Only set lastPublishedAt if policy is published
+        ...(isPublished ? { lastPublishedAt: new Date() } : {}),
       },
     });
 

apps/app/src/actions/policies/publish-all.ts

@@ -1,7 +1,7 @@
 'use server';
 
 import { sendPublishAllPoliciesEmail } from '@/trigger/tasks/email/publish-all-policies-email';
-import { db, PolicyStatus, Role } from '@db';
+import { db, PolicyStatus, Role, type Prisma } from '@db';
 import { revalidatePath } from 'next/cache';
 import { z } from 'zod';
 import { authActionClient } from '../safe-action';
@@ -62,8 +62,12 @@ export const publishAllPoliciesAction = authActionClient
     }
 
     try {
+      // Get all policies that are not published (draft or needs_review)
       const policies = await db.policy.findMany({
-        where: { organizationId: parsedInput.organizationId, status: PolicyStatus.draft },
+        where: {
+          organizationId: parsedInput.organizationId,
+          status: { in: [PolicyStatus.draft, PolicyStatus.needs_review] },
+        },
       });
 
       if (!policies || policies.length === 0) {
@@ -75,14 +79,61 @@ export const publishAllPoliciesAction = authActionClient
 
       for (const policy of policies) {
         try {
-          const updatedPolicy = await db.policy.update({
-            where: { id: policy.id },
-            data: {
-              status: PolicyStatus.published,
-              assigneeId: member.id,
-              reviewDate: new Date(new Date().setDate(new Date().getDate() + 90)),
-            },
-          });
+          // Check if policy has a current version, if not create version 1
+          if (!policy.currentVersionId) {
+            // Use transaction to prevent orphaned versions on partial failure
+            await db.$transaction(async (tx) => {
+              // Create version 1 from current policy content
+              const newVersion = await tx.policyVersion.create({
+                data: {
+                  policyId: policy.id,
+                  version: 1,
+                  content: (policy.content as Prisma.InputJsonValue[]) || [],
+                  pdfUrl: policy.pdfUrl,
+                  publishedById: member.id,
+                  changelog: 'Initial published version',
+                },
+              });
+
+              // Update policy with the new version and publish
+              await tx.policy.update({
+                where: { id: policy.id },
+                data: {
+                  status: PolicyStatus.published,
+                  currentVersionId: newVersion.id,
+                  assigneeId: member.id,
+                  reviewDate: new Date(new Date().setDate(new Date().getDate() + 90)),
+                  lastPublishedAt: new Date(),
+                  draftContent: (policy.content as Prisma.InputJsonValue[]) || [],
+                  // Clear approval fields (in case policy was in needs_review)
+                  approverId: null,
+                  pendingVersionId: null,
+                },
+              });
+            });
+          } else {
+            // Policy already has a version, just update status
+            // Get the current version content to sync draftContent
+            const currentVersion = await db.policyVersion.findUnique({
+              where: { id: policy.currentVersionId },
+              select: { content: true },
+            });
+
+            await db.policy.update({
+              where: { id: policy.id },
+              data: {
+                status: PolicyStatus.published,
+                assigneeId: member.id,
+                reviewDate: new Date(new Date().setDate(new Date().getDate() + 90)),
+                lastPublishedAt: new Date(),
+                // Sync draftContent with the published version content
+                draftContent: (currentVersion?.content as Prisma.InputJsonValue[]) || (policy.content as Prisma.InputJsonValue[]) || [],
+                // Clear approval fields (in case policy was in needs_review)
+                approverId: null,
+                pendingVersionId: null,
+              },
+            });
+          }
         } catch (policyError) {
           console.error(`[publish-all-policies] Failed to update policy ${policy.id}:`, {
             error: policyError,

apps/app/src/actions/policies/submit-version-for-approval.ts

@@ -53,9 +53,10 @@ export const submitVersionForApprovalAction = authActionClient
       return { success: false, error: 'Version not found' };
     }
 
-    // Cannot submit the already-active version for approval
-    if (versionId === policy.currentVersionId) {
-      return { success: false, error: 'Cannot submit the currently published version for approval' };
+    // Cannot submit the already-published version for approval
+    // Only block if the policy is already published AND this is the current version
+    if (versionId === policy.currentVersionId && policy.status === PolicyStatus.published) {
+      return { success: false, error: 'This version is already published' };
     }
 
     // Verify approver exists and belongs to organization

apps/app/src/actions/policies/update-version-content.ts

@@ -2,7 +2,7 @@
 
 import { revalidatePath } from 'next/cache';
 import { z } from 'zod';
-import { db } from '@db';
+import { db, PolicyStatus } from '@db';
 import type { Prisma } from '@db';
 import { authActionClient } from '../safe-action';
 
@@ -66,12 +66,21 @@ export const updateVersionContentAction = authActionClient
   })
   .action(async ({ parsedInput, ctx }) => {
     const { policyId, versionId, content } = parsedInput;
-    const { activeOrganizationId } = ctx.session;
+    const { activeOrganizationId, userId } = ctx.session;
 
     if (!activeOrganizationId) {
       return { success: false, error: 'Not authorized' };
     }
 
+    // Get member ID for tracking who updated
+    const member = await db.member.findFirst({
+      where: {
+        organizationId: activeOrganizationId,
+        userId,
+      },
+      select: { id: true },
+    });
+
     // Verify version exists and belongs to organization
     const version = await db.policyVersion.findUnique({
       where: { id: versionId },
@@ -82,6 +91,7 @@ export const updateVersionContentAction = authActionClient
             organizationId: true,
             currentVersionId: true,
             pendingVersionId: true,
+            status: true,
           },
         },
       },
@@ -95,8 +105,8 @@ export const updateVersionContentAction = authActionClient
       return { success: false, error: 'Version does not belong to this policy' };
     }
 
-    // Cannot edit published version
-    if (version.id === version.policy.currentVersionId) {
+    // Cannot edit published version (only if the policy is actually published)
+    if (version.id === version.policy.currentVersionId && version.policy.status === PolicyStatus.published) {
       return {
         success: false,
         error: 'Cannot edit the published version. Create a new version to make changes.',
@@ -117,7 +127,11 @@ export const updateVersionContentAction = authActionClient
 
     await db.policyVersion.update({
       where: { id: versionId },
-      data: { content: processedContent },
+      data: {
+        content: processedContent,
+        // Update publishedById to track who last updated this version
+        ...(member?.id ? { publishedById: member.id } : {}),
+      },
     });
 
     revalidatePath(`/${activeOrganizationId}/policies/${policyId}`);

apps/app/src/app/(app)/[orgId]/cloud-tests/page.tsx

@@ -81,10 +81,10 @@ export default async function CloudTestsPage({ params }: { params: Promise<{ org
     },
   });
 
-  // Filter out legacy integrations that have been migrated to new platform
-  const newConnectionSlugs = new Set(newConnections.map((c) => c.provider.slug));
+  // Filter legacy integrations to cloud providers only
+  // NOTE: We now allow BOTH legacy and new connections to coexist for providers
+  // that support multiple connections (e.g., AWS with multiple accounts)
   const activeLegacyIntegrations = legacyIntegrations.filter((integration) => {
-    if (newConnectionSlugs.has(integration.integrationId)) return false;
     const manifest = getManifest(integration.integrationId);
     return manifest?.category === CLOUD_PROVIDER_CATEGORY;
   });

apps/app/src/app/(app)/[orgId]/policies/[policyId]/components/PolicyPageTabs.tsx

@@ -4,7 +4,7 @@ import type { Control, Member, Policy, PolicyVersion, User } from '@db';
 import type { JSONContent } from '@tiptap/react';
 import { Stack, Tabs, TabsContent, TabsList, TabsTrigger } from '@trycompai/design-system';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Comments } from '../../../../../../components/comments/Comments';
 import type { AuditLogWithRelations } from '../data';
 import { PolicyContentManager } from '../editor/components/PolicyDetails';
@@ -15,6 +15,7 @@ import { PolicyControlMappings } from './PolicyControlMappings';
 import { PolicyDeleteDialog } from './PolicyDeleteDialog';
 import { PolicyOverviewSheet } from './PolicyOverviewSheet';
 import { PolicySettingsCard } from './PolicySettingsCard';
+import { PolicyVersionsTab } from './PolicyVersionsTab';
 import { RecentAuditLogs } from './RecentAuditLogs';
 
 type PolicyVersionWithPublisher = PolicyVersion & {
@@ -68,6 +69,31 @@ export function PolicyPageTabs({
   const isPendingApproval = policy ? !!policy.approverId : initialIsPendingApproval;
 
   const isDeleteDialogOpen = searchParams.get('delete-policy') === 'true';
+  const tabFromUrl = searchParams.get('tab') || 'overview';
+  const versionIdFromUrl = searchParams.get('versionId');
+  const [activeTab, setActiveTab] = useState(tabFromUrl);
+
+  // Sync activeTab with URL param
+  useEffect(() => {
+    setActiveTab(tabFromUrl);
+  }, [tabFromUrl]);
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    const params = new URLSearchParams(searchParams.toString());
+    if (value === 'overview') {
+      params.delete('tab');
+      params.delete('versionId');
+    } else {
+      params.set('tab', value);
+      // Keep versionId if switching to content tab
+      if (value !== 'content') {
+        params.delete('versionId');
+      }
+    }
+    const query = params.toString();
+    router.push(query ? `${pathname}?${query}` : pathname);
+  };
 
   const handleCloseDeleteDialog = () => {
     const params = new URLSearchParams(searchParams.toString());
@@ -81,11 +107,12 @@ export function PolicyPageTabs({
       {/* Alerts always visible above tabs */}
       <PolicyAlerts policy={policy} isPendingApproval={isPendingApproval} onMutate={mutate} />
 
-      <Tabs defaultValue="overview">
+      <Tabs value={activeTab} onValueChange={handleTabChange}>
         <Stack gap="lg">
           <TabsList variant="underline">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="content">Content</TabsTrigger>
+            <TabsTrigger value="versions">Versions</TabsTrigger>
             <TabsTrigger value="activity">Activity</TabsTrigger>
             <TabsTrigger value="comments">Comments</TabsTrigger>
           </TabsList>
@@ -96,7 +123,6 @@ export function PolicyPageTabs({
                 policy={policy}
                 assignees={assignees}
                 isPendingApproval={isPendingApproval}
-                versions={versions}
                 onMutate={mutate}
               />
               <PolicyControlMappings
@@ -140,10 +166,26 @@ export function PolicyPageTabs({
               currentVersionId={policy?.currentVersionId ?? null}
               pendingVersionId={policy?.pendingVersionId ?? null}
               versions={versions}
+              policyStatus={policy?.status}
+              lastPublishedAt={policy?.lastPublishedAt}
+              assignees={assignees}
+              initialVersionId={versionIdFromUrl || undefined}
               onMutate={mutate}
             />
           </TabsContent>
 
+          <TabsContent value="versions">
+            {policy && (
+              <PolicyVersionsTab
+                policy={policy}
+                versions={versions}
+                assignees={assignees}
+                isPendingApproval={isPendingApproval}
+                onMutate={mutate}
+              />
+            )}
+          </TabsContent>
+
           <TabsContent value="activity">
             <RecentAuditLogs logs={logs} />
           </TabsContent>