Gate Project copy destinations across query and cached UI

Author: mzxchandra

apps/sim/app/workspace/[workspaceId]/files/components/file-copy-modal.test.tsx

@@ -0,0 +1,108 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { FileCopyModal } from '@/app/workspace/[workspaceId]/files/components/file-copy-modal'
+import { FeatureFlagsProvider } from '@/app/workspace/[workspaceId]/providers/feature-flags-provider'
+import { workspaceKeys } from '@/hooks/queries/workspace'
+
+vi.mock(
+  'next/navigation',
+  async () => (await import('@sim/testing/mocks/next-navigation.mock')).nextNavigationMock
+)
+
+let client: QueryClient
+let root: Root
+let container: HTMLDivElement
+const requests: string[] = []
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.useFakeTimers()
+  requests.length = 0
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  client.setQueryData(workspaceKeys.list(), { workspaces: [] })
+  vi.stubGlobal('fetch', async (input: string) => {
+    requests.push(input)
+    return Response.json(
+      input.startsWith('/api/projects')
+        ? {
+            projects: [
+              {
+                id: 'project',
+                name: 'Cached Project',
+                organizationId: null,
+                ownerId: 'user',
+                archivedAt: null,
+                createdAt: '2026-10-08T00:00:00Z',
+                updatedAt: '2026-10-08T00:00:00Z',
+                environments: [],
+                capabilities: { administer: true, issues: true },
+              },
+            ],
+            nextCursor: 'next-page',
+          }
+        : { workspaces: [] }
+    )
+  })
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  client.clear()
+  container.remove()
+  vi.useRealTimers()
+})
+async function render(projects: boolean, projectFiles: boolean) {
+  await act(async () =>
+    root.render(
+      <QueryClientProvider client={client}>
+        <FeatureFlagsProvider
+          flags={{
+            projects,
+            'project-files': projectFiles,
+            dashboards: false,
+            'mothership-model-selector': false,
+            'mothership-plan-mode': false,
+          }}
+        >
+          <FileCopyModal
+            source={{
+              owner: { entityType: 'workspace', entityId: 'workspace' },
+              fileIds: ['file'],
+              folderIds: [],
+            }}
+            onClose={() => {}}
+          />
+        </FeatureFlagsProvider>
+      </QueryClientProvider>
+    )
+  )
+}
+
+it.each([
+  [false, true],
+  [true, false],
+  [false, false],
+])(
+  'stops Project destination reads and pagination after flags become %s/%s',
+  async (projects, projectFiles) => {
+    await render(true, true)
+    await act(async () => vi.advanceTimersByTimeAsync(10))
+    expect(document.body.textContent).toContain('Load more Projects')
+    const selector = document.querySelector('[aria-label="Copy destination"]')
+    if (!selector) throw new Error('Copy destination selector is unavailable')
+    await act(async () =>
+      selector.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    )
+    expect(document.body.textContent).toContain('Cached Project')
+    requests.length = 0
+    await render(projects, projectFiles)
+    await act(async () => client.invalidateQueries())
+    expect(requests.filter((url) => url.startsWith('/api/projects'))).toEqual([])
+    expect(document.body.textContent).not.toContain('Load more Projects')
+    expect(document.body.textContent).not.toContain('Cached Project')
+  }
+)

apps/sim/app/workspace/[workspaceId]/files/components/file-copy-modal.tsx

@@ -16,6 +16,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import type { FileCopySource } from '@/lib/api/contracts/file-copy-input'
 import { MAX_WORKSPACE_FILE_BULK_REQUEST_IDS } from '@/lib/workspace-files/limits'
 import type { EditableFileOwner } from '@/lib/workspace-files/ownership'
+import { useFeatureFlag } from '@/app/workspace/[workspaceId]/providers/feature-flags-provider'
 import { useCopyFileItems, useFileCopyDestination } from '@/hooks/queries/file-copy'
 import { useProjects } from '@/hooks/queries/projects'
 import { useWorkspacesQuery } from '@/hooks/queries/workspace'
@@ -62,7 +63,10 @@ export function FileCopyModal({ source, onClose }: FileCopyModalProps) {
 
 function FileCopyDestinationPicker({ source, onClose }: FileCopyModalProps) {
   const workspaces = useWorkspacesQuery()
-  const projects = useProjects()
+  const projectsEnabled = useFeatureFlag('projects')
+  const projectFilesEnabled = useFeatureFlag('project-files')
+  const projectDestinationsEnabled = projectsEnabled && projectFilesEnabled
+  const projects = useProjects(undefined, { enabled: projectDestinationsEnabled })
   const copy = useCopyFileItems()
   const [selection, setSelection] = useState('')
   const destinations = useMemo(() => {
@@ -72,14 +76,14 @@ function FileCopyDestinationPicker({ source, onClose }: FileCopyModalProps) {
         owner: { entityType: 'workspace', entityId: workspace.id },
         name: workspace.name,
       })
-    for (const page of projects.data?.pages ?? [])
+    for (const page of projectDestinationsEnabled ? (projects.data?.pages ?? []) : [])
       for (const project of page.projects)
         result.set(`project:${project.id}`, {
           owner: { entityType: 'project', entityId: project.id },
           name: project.name,
         })
     return result
-  }, [workspaces.data, projects.data])
+  }, [workspaces.data, projects.data, projectDestinationsEnabled])
   const destination = destinations.get(selection)
   const groups = ['project', 'workspace'].map((kind) => ({
     section: kind === 'project' ? 'Projects' : 'Environments',
@@ -92,7 +96,11 @@ function FileCopyDestinationPicker({ source, onClose }: FileCopyModalProps) {
       type='custom'
       title='Destination'
       hint='Copies saved content. The original files stay in their current location.'
-      error={workspaces.isError && projects.isError ? 'Could not load destinations.' : undefined}
+      error={
+        workspaces.isError && (!projectDestinationsEnabled || projects.isError)
+          ? 'Could not load destinations.'
+          : undefined
+      }
     >
       <ChipSelect
         aria-label='Copy destination'
@@ -103,12 +111,14 @@ function FileCopyDestinationPicker({ source, onClose }: FileCopyModalProps) {
         searchable
         fullWidth
         placeholder={
-          workspaces.isPending && projects.isPending
+          workspaces.isPending && (!projectDestinationsEnabled || projects.isPending)
             ? 'Loading...'
-            : 'Choose a Project or environment'
+            : projectDestinationsEnabled
+              ? 'Choose a Project or environment'
+              : 'Choose an environment'
         }
       />
-      {projects.hasNextPage && (
+      {projectDestinationsEnabled && projects.hasNextPage && (
         <Chip disabled={projects.isFetchingNextPage} onClick={() => void projects.fetchNextPage()}>
           {projects.isFetchingNextPage ? 'Loading...' : 'Load more Projects'}
         </Chip>