Refine Code Component deletion UX: allow deleting if not violating data integrity + explain impact of deleting
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3546947. -->
Reported by: [thoward216](https://www.drupal.org/user/3576535)
Related to !125
>>>
<h3 id="overview">Overview</h3>
<p>As of <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3530058" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3530058</a></span> some new HTTP API endpoints have been introduced for component audit information. The canvas U now <em>could</em> use these endpoints to inform the user in more detail <em>why</em> deletion is forbidden.</p>
<p>The new endpoints are: </p>
<ol>
<li><code>/canvas/api/v0/usage/component/{component}</code> - which provides a simple boolean true/false response for a specific <code>Component</code> (not <code>JavaScriptComponent</code>!)</li>
<li><code>/canvas/api/v0/usage/component/{component}/details</code> - which provides detailed information about where a specific specific <code>Component</code> (not <code>JavaScriptComponent</code>!) is used</li>
<li><code>/canvas/api/v0/usage/component?page=N</code> - provides a paginated per 50 <code>Component</code>s lists an object like {id1: true, id2: false, …, id50: true}</li>
</ol>
<p><strong>… however, the essence for this issue since <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3530058" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3530058</a></span> is this:</strong></p>
<ul>
<li>do not allow the user to delete a component if <code>links.delete-form === null</code> in <code>/canvas/api/v0/config/js_component/{id}</code>
</li><li>do allow it if otherwise
</li><li><strong>note this appears on <em>both</em> the "list" and "individual" API responses, meaning the code component editor UI knows immediately for ALL code components whether they should provide a delete operation in the contextual menu or not!</strong></li>
</ul>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>When component cannot be deleted, the delete link should appear disabled. When the link is being hovered, it should display a tooltip:</p>
<blockquote><p>Can't delete components that are being used..</p></blockquote>
<p>When user gets to the dialog we should always display following text:</p>
<blockquote><p>
You are about to permanently delete the [Component Name] component.
</p></blockquote>
<p>We should also display this if there are past revisions where the component is being used:</p>
<blockquote><p>
This will break [X] past versions. Reverting to past versions that rely on this component will appear broken.
</p></blockquote>
<p><strong>Component Usage</strong></p>
<p>In <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3530058" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3530058</a></span> an update to the access check means that a user is now stopped from doing this and the dialog shows as:</p>
<p><img src="https://www.drupal.org/files/issues/2025-09-16/Screenshot%202025-09-16%20at%2011.43.32_0.png" width="300" height="600" alt="current client side dialog"></p>
<p>With the following error "This code component is in use and cannot be deleted" shown in the browser console.</p>
<p><strong>Component usage details</strong></p>
<p>The component usage details endpoint <code>/canvas/api/v0/usage/component/{component}/details</code> returns detailed information about where a specific component is used.</p>
<p>(To go from code component ID to <code>Component</code> ID: prefix with <code>js.</code> — see <code>\Drupal\canvas\Plugin\Canvas\ComponentSource\JsComponent::componentIdFromJavascriptComponentId()</code>.)</p>
<p>The dialog that is now shown when a user attempts to delete a component could instead show more detailed information via the details endpoint to provide the user more useful information.</p>
<p>The returned data for the details endpoint is structured like so: </p>
<pre>{<br> "content": [<br> {<br> "title": "Untitled page",<br> "type": "canvas_page",<br> "bundle": "canvas_page",<br> "id": "4",<br> "revision_id": "9"<br> }<br> ],<br> "pattern": [<br> {<br> "title": "Test pattern",<br> "id": "testpattern"<br> }<br> ]<br>}</pre><p><strong>Component usage list</strong></p>
<p>Irrelevant for this issue for now.</p>
<p><strong><code>links.delete-form</code></strong></p>
<p>This should be used when the code component editor UI is loading to check if the 'delete' operation should be shown to the user based on its usage. Even if the 'delete' operation is shown at the time of loading the code editor UI, a component could be used by another user and therefore should be checked again using <code>/canvas/api/v0/config/js_component/{id}</code></p>
> Related issue: [Issue #3530058](https://www.drupal.org/node/3530058)
> Related issue: [Issue #3543533](https://www.drupal.org/node/3543533)
issue