feat(comments): add organization ID support for comment components (#1980)

github-actions[bot] · tofikwest · web-flow · commit f63164ed9b4a · 2026-01-05T17:49:28.000-05:00
Co-authored-by: Tofik Hasanov &lt;annexcies@gmail.com&gt;
diff --git a/apps/api/src/comments/comment-mention-notifier.service.ts b/apps/api/src/comments/comment-mention-notifier.service.ts
@@ -70,7 +70,8 @@ function tryNormalizeContextUrl(params: {
     if (!allowedOrigins.has(url.origin)) return null;
 
     // Ensure the URL is for the same org so we don't accidentally deep-link elsewhere.
-    if (!url.pathname.includes(`/${organizationId}/`)) return null;
+    // Use startsWith to prevent path traversal attacks (e.g., /attacker_org/victim_org/)
+    if (!url.pathname.startsWith(`/${organizationId}/`)) return null;
 
     return url.toString();
   } catch {
diff --git a/apps/app/src/app/(app)/[orgId]/policies/[policyId]/components/PolicyPage.tsx b/apps/app/src/app/(app)/[orgId]/policies/[policyId]/components/PolicyPage.tsx
@@ -13,6 +13,7 @@ export default function PolicyPage({
   allControls,
   isPendingApproval,
   policyId,
+  organizationId,
   logs,
 }: {
   policy: (Policy & { approver: (Member & { user: User }) | null }) | null;
@@ -21,6 +22,8 @@ export default function PolicyPage({
   allControls: Control[];
   isPendingApproval: boolean;
   policyId: string;
+  /** Organization ID - required for correct org context in comments */
+  organizationId: string;
   logs: AuditLogWithRelations[];
 }) {
   return (
@@ -42,7 +45,7 @@ export default function PolicyPage({
 
       <RecentAuditLogs logs={logs} />
 
-      <Comments entityId={policyId} entityType="policy" />
+      <Comments entityId={policyId} entityType="policy" organizationId={organizationId} />
     </>
   );
 }
diff --git a/apps/app/src/app/(app)/[orgId]/policies/[policyId]/page.tsx b/apps/app/src/app/(app)/[orgId]/policies/[policyId]/page.tsx
@@ -29,6 +29,7 @@ export default async function PolicyDetails({
       <PolicyPage
         policy={policy}
         policyId={policyId}
+        organizationId={orgId}
         assignees={assignees}
         mappedControls={mappedControls}
         allControls={allControls}
diff --git a/apps/app/src/app/(app)/[orgId]/risk/[riskId]/components/RiskActions.tsx b/apps/app/src/app/(app)/[orgId]/risk/[riskId]/components/RiskActions.tsx
@@ -23,12 +23,13 @@ import { useState } from 'react';
 import { toast } from 'sonner';
 import { useSWRConfig } from 'swr';
 
-export function RiskActions({ riskId }: { riskId: string }) {
+export function RiskActions({ riskId, orgId }: { riskId: string; orgId: string }) {
   const { mutate: globalMutate } = useSWRConfig();
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   
   // Get SWR mutate function to refresh risk data after mutations
-  const { mutate: refreshRisk } = useRisk(riskId);
+  // Pass orgId to ensure same cache key as RiskPageClient
+  const { mutate: refreshRisk } = useRisk(riskId, { organizationId: orgId });
   
   const regenerate = useAction(regenerateRiskMitigationAction, {
     onSuccess: () => {
diff --git a/apps/app/src/app/(app)/[orgId]/risk/[riskId]/components/RiskPageClient.tsx b/apps/app/src/app/(app)/[orgId]/risk/[riskId]/components/RiskPageClient.tsx
@@ -83,7 +83,7 @@ export function RiskPageClient({
       )}
       <TaskItems entityId={riskId} entityType="risk" organizationId={orgId} />
       {!isViewingTask && (
-        <Comments entityId={riskId} entityType={CommentEntityType.risk} />
+        <Comments entityId={riskId} entityType={CommentEntityType.risk} organizationId={orgId} />
       )}
     </div>
   );
diff --git a/apps/app/src/app/(app)/[orgId]/risk/[riskId]/page.tsx b/apps/app/src/app/(app)/[orgId]/risk/[riskId]/page.tsx
@@ -49,7 +49,7 @@ export default async function RiskPage({ searchParams, params }: PageProps) {
             ]
           : [{ label: risk.title, current: true }]),
       ]}
-      headerRight={<RiskActions riskId={riskId} />}
+      headerRight={<RiskActions riskId={riskId} orgId={orgId} />}
     >
       <RiskPageClient
         riskId={riskId}
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/[taskId]/components/SingleTask.tsx b/apps/app/src/app/(app)/[orgId]/tasks/[taskId]/components/SingleTask.tsx
@@ -215,6 +215,7 @@ export function SingleTask({
             <Comments
               entityId={task.id}
               entityType={CommentEntityType.task}
+              organizationId={orgId}
               variant="inline"
               title=""
             />
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorActions.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorActions.tsx
@@ -24,13 +24,14 @@ import { useState } from 'react';
 import { toast } from 'sonner';
 import { useSWRConfig } from 'swr';
 
-export function VendorActions({ vendorId }: { vendorId: string }) {
+export function VendorActions({ vendorId, orgId }: { vendorId: string; orgId: string }) {
   const { mutate: globalMutate } = useSWRConfig();
   const [_, setOpen] = useQueryState('vendor-overview-sheet');
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   // Get SWR mutate function to refresh vendor data after mutations
-  const { mutate: refreshVendor } = useVendor(vendorId);
+  // Pass orgId to ensure same cache key as VendorPageClient
+  const { mutate: refreshVendor } = useVendor(vendorId, { organizationId: orgId });
 
   const regenerate = useAction(regenerateVendorMitigationAction, {
     onSuccess: () => {
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx
@@ -100,7 +100,7 @@ export function VendorPageClient({
           organizationId={orgId}
         />
         {!isViewingTask && (
-          <Comments entityId={vendorId} entityType={CommentEntityType.vendor} />
+          <Comments entityId={vendorId} entityType={CommentEntityType.vendor} organizationId={orgId} />
         )}
       </div>
     </>
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/page.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/page.tsx
@@ -49,7 +49,7 @@ export default async function VendorPage({ params, searchParams }: PageProps) {
           current: !isViewingTask,
         },
       ]}
-      headerRight={<VendorActions vendorId={vendorId} />}
+      headerRight={<VendorActions vendorId={vendorId} orgId={orgId} />}
     >
       <VendorPageClient
         vendorId={vendorId}
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/review/page.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/review/page.tsx
@@ -49,7 +49,7 @@ export default async function ReviewPage({ params, searchParams }: ReviewPagePro
           current: !isViewingTask,
         },
       ]}
-      headerRight={<VendorActions vendorId={vendorId} />}
+      headerRight={<VendorActions vendorId={vendorId} orgId={orgId} />}
     >
       {!isViewingTask && <VendorHeader vendor={vendor} />}
       {!isViewingTask && <VendorTabs vendorId={vendorId} orgId={orgId} />}
diff --git a/apps/app/src/components/comments/CommentForm.tsx b/apps/app/src/components/comments/CommentForm.tsx
@@ -19,14 +19,16 @@ import type { JSONContent } from '@tiptap/react';
 import { CommentRichTextField } from './CommentRichTextField';
 import { useOrganizationMembers } from '@/hooks/use-organization-members';
 import { useMemo } from 'react';
-import { usePathname } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';
 
 interface CommentFormProps {
   entityId: string;
   entityType: CommentEntityType;
+  /** Optional org override; otherwise uses `orgId` from URL params */
+  organizationId?: string;
 }
 
-export function CommentForm({ entityId, entityType }: CommentFormProps) {
+export function CommentForm({ entityId, entityType, organizationId }: CommentFormProps) {
   const [newComment, setNewComment] = useState<JSONContent | null>(null);
   const [pendingFiles, setPendingFiles] = useState<File[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -35,9 +37,21 @@ export function CommentForm({ entityId, entityType }: CommentFormProps) {
   const [filesToAdd, setFilesToAdd] = useState<File[]>([]);
   const [isSelectingMention, setIsSelectingMention] = useState(false);
   const pathname = usePathname();
+  const params = useParams();
+  const orgIdFromParams =
+    typeof params?.orgId === 'string'
+      ? params.orgId
+      : Array.isArray(params?.orgId)
+        ? params.orgId[0]
+        : undefined;
+  const resolvedOrgId = organizationId ?? orgIdFromParams;
 
   // Use SWR hooks for generic comments
-  const { mutate: refreshComments } = useComments(entityId, entityType);
+  // Pass organizationId explicitly to ensure correct org context
+  const { mutate: refreshComments } = useComments(entityId, entityType, {
+    organizationId: resolvedOrgId,
+    enabled: Boolean(resolvedOrgId),
+  });
   const { createCommentWithFiles } = useCommentWithAttachments();
   const { members } = useOrganizationMembers();
 
diff --git a/apps/app/src/components/comments/Comments.tsx b/apps/app/src/components/comments/Comments.tsx
@@ -3,6 +3,7 @@
 import { useComments } from '@/hooks/use-comments-api';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@comp/ui/card';
 import { CommentEntityType } from '@db';
+import { useParams } from 'next/navigation';
 import { CommentForm } from './CommentForm';
 import { CommentList } from './CommentList';
 
@@ -29,6 +30,11 @@ export type CommentWithAuthor = {
 interface CommentsProps {
   entityId: string;
   entityType: CommentEntityType;
+  /**
+   * Optional organization ID override.
+   * Best practice: omit this and let the component use `orgId` from URL params.
+   */
+  organizationId?: string;
   /** Optional custom title for the comments section */
   title?: string;
   /** Optional custom description */
@@ -57,17 +63,30 @@ interface CommentsProps {
 export const Comments = ({
   entityId,
   entityType,
+  organizationId,
   title = 'Comments',
   description,
   variant = 'card',
 }: CommentsProps) => {
+  const params = useParams();
+  const orgIdFromParams =
+    typeof params?.orgId === 'string'
+      ? params.orgId
+      : Array.isArray(params?.orgId)
+        ? params.orgId[0]
+        : undefined;
+  const resolvedOrgId = organizationId ?? orgIdFromParams;
+
   // Use SWR hooks for real-time comment fetching
   const {
     data: commentsData,
     error: commentsError,
     isLoading: commentsLoading,
     mutate: refreshComments,
-  } = useComments(entityId, entityType);
+  } = useComments(entityId, entityType, {
+    organizationId: resolvedOrgId,
+    enabled: Boolean(resolvedOrgId),
+  });
 
   // Extract comments from SWR response
   const comments = commentsData?.data || [];
@@ -77,7 +96,7 @@ export const Comments = ({
 
   const content = (
     <div className="space-y-4">
-      <CommentForm entityId={entityId} entityType={entityType} />
+      <CommentForm entityId={entityId} entityType={entityType} organizationId={resolvedOrgId} />
 
       {commentsLoading && (
         <div className="space-y-3">
diff --git a/apps/app/src/hooks/use-comments-api.ts b/apps/app/src/hooks/use-comments-api.ts
@@ -52,14 +52,22 @@ interface UpdateCommentData {
 // Default polling interval for real-time updates (5 seconds)
 const DEFAULT_COMMENTS_POLLING_INTERVAL = 5000;
 
+export interface UseCommentsOptions extends UseApiSWROptions<Comment[]> {
+  /** Organization ID - MUST be passed to ensure correct org context */
+  organizationId?: string;
+}
+
 /**
  * Generic hook to fetch comments for any entity using SWR
  * Includes polling for real-time updates (e.g., when trigger.dev tasks create comments)
+ * 
+ * IMPORTANT: Always pass organizationId from URL params to ensure correct org context
+ * when user navigates to a different org's page while active org is different.
  */
 export function useComments(
   entityId: string | null,
   entityType: CommentEntityType | null,
-  options: UseApiSWROptions<Comment[]> = {},
+  options: UseCommentsOptions = {},
 ) {
   const endpoint =
     entityId && entityType ? `/v1/comments?entityId=${entityId}&entityType=${entityType}` : null;
@@ -126,10 +134,18 @@ export function useCommentActions() {
   };
 }
 
+export interface UseCommentWithAttachmentsOptions {
+  /** Organization ID - for consistency with other hooks */
+  organizationId?: string;
+}
+
 /**
  * Utility hook that combines file handling with comment creation
  */
-export function useCommentWithAttachments() {
+export function useCommentWithAttachments(_options: UseCommentWithAttachmentsOptions = {}) {
+  // Note: useCommentActions uses useApi which gets orgId from URL params
+  // The options.organizationId is accepted for API consistency but not currently used
+  // since useApi already handles org context from URL
   const { createComment } = useCommentActions();
 
   const createCommentWithFiles = useCallback(
@@ -322,7 +338,7 @@ export function useOptimisticComments(entityId: string, entityType: CommentEntit
 /**
  * Convenience hook for task comments
  */
-export function useTaskComments(taskId: string | null, options: UseApiSWROptions<Comment[]> = {}) {
+export function useTaskComments(taskId: string | null, options: UseCommentsOptions = {}) {
   return useComments(taskId, 'task', options);
 }
 
@@ -331,7 +347,7 @@ export function useTaskComments(taskId: string | null, options: UseApiSWROptions
  */
 export function usePolicyComments(
   policyId: string | null,
-  options: UseApiSWROptions<Comment[]> = {},
+  options: UseCommentsOptions = {},
 ) {
   return useComments(policyId, 'policy', options);
 }
@@ -341,15 +357,15 @@ export function usePolicyComments(
  */
 export function useVendorComments(
   vendorId: string | null,
-  options: UseApiSWROptions<Comment[]> = {},
+  options: UseCommentsOptions = {},
 ) {
   return useComments(vendorId, 'vendor', options);
 }
 
 /**
  * Convenience hook for risk comments
  */
-export function useRiskComments(riskId: string | null, options: UseApiSWROptions<Comment[]> = {}) {
+export function useRiskComments(riskId: string | null, options: UseCommentsOptions = {}) {
   return useComments(riskId, 'risk', options);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export default async function RiskPage({ searchParams, params }: PageProps) {`
`49`	`49`	`]`
`50`	`50`	`: [{ label: risk.title, current: true }]),`
`51`	`51`	`]}`
`52`		`- headerRight={<RiskActions riskId={riskId} />}`
	`52`	`+ headerRight={<RiskActions riskId={riskId} orgId={orgId} />}`
`53`	`53`	`>`
`54`	`54`	`<RiskPageClient`
`55`	`55`	`riskId={riskId}`