FE follow up to Only allow deleting Code Components if there's 0 usages

Overview

As of 📌 Only allow deleting Code Components if there's 0 usages Active some new HTTP API endpoints have been introduced for component audit information. The client side can now use these endpoints to better figure out if a code component is in use or not.

These are:

1. /canvas/api/v0/usage/component/{component} - which provides a simple boolean true/false response for a specific component
2. /canvas/api/v0/usage/component/{component}/details - which provides detailed information about where a specific component is used
3. /canvas/api/v0/usage/component?page=N - provides a paginated per 50 components lists an object like {id1: true, id2: false, …, id50: true}

Proposed resolution

The client side should now use the /canvas/api/v0/usage/component/{component} endpoint when a user attempts to Delete a code component rather than checking the current component tree if a code component is used as that doesn't cover everywhere it might be used.

In 📌 Only allow deleting Code Components if there's 0 usages Active an update to the access check means that a user is now stopped from doing this and the dialog shows as:

And the following error "This code component is in use and cannot be deleted" is shown in the console.

The above dialog could instead show more detailed information via the details endpoint /canvas/api/v0/usage/component/{component}/details to provide the user more useful information.

The data for the details endpoint is structured like so:

{
  "content": [
    {
      "title": "Untitled page",
      "type": "canvas_page",
      "bundle": "canvas_page",
      "id": "4",
      "revision_id": "9"
    }
  ],
  "pattern": [
    {
      "title": "Test pattern",
      "id": "testpattern"
    }
  ]
}