Files
supabase/apps/studio/components
Jordi EnricandClaude Sonnet 4.6 4c011cf9c0 feat(reports): add optimistic delete for custom reports (#46803)
## Problem

Deleting a custom report waited for the API round trip before updating
the UI. The confirmation modal showed a loading spinner, the report
stayed visible in the sidebar until the request resolved, and the
interaction felt sluggish.

## Fix

The delete now applies optimistically. On confirm, the report is removed
from the sidebar immediately and the user is navigated away. The actual
delete runs in the background. If it fails, the cached list is rolled
back to its previous state and an error toast is shown.

The optimistic behavior lives inside `useContentDeleteMutation` (via
`onMutate` snapshot + `onError` rollback), so any current or future
caller of that hook gets it for free, no per-call wiring required.

## How to test

- Open a project with at least one custom report
- Click the kebab menu on a report and choose Delete report, then
confirm
- Expected result: the report disappears from the sidebar instantly and
a success toast appears
- To test rollback: throttle/offline the network or force the delete
endpoint to fail, then delete again
- Expected result: the report reappears in the sidebar and an error
toast is shown

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Improvements**
* Deletion flows now provide explicit loading, success and error
feedback; UI updates immediately on delete and will restore if the
action fails.

* **Removals**
* Removed the reports menu and individual report menu item UI components
(affects report-level rename/delete dropdowns and related menu
navigation).

* **Tests**
* Added tests covering content deletion behavior, multiple-deletion
cases, and data integrity after removals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-15 09:57:19 +02:00
..
…

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA