Integrated Unprocessed Entities with DevTools

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
2023-06-17 11:15:19 -05:00
parent 2a1caca3d6
commit 2c48694731
15 changed files with 124 additions and 20 deletions
@@ -44,6 +44,12 @@ Lists the status of configured External Dependencies based on your current runni

 ![Example of external dependencies tab](./docs/devtools-external-dependencies.png)

+### Catalog Unprocessed Entities
+
+The [Catalog Unprocessed Entities plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-unprocessed-entities) has an optional tab that you can also be added that will show unprocessed entities:
+
+![Example of unprocessed entities tab](./docs/catalog-unprocessed-entities-tab.png)
+
 ## Setup

 The following sections will help you get the DevTools plugin setup and running.
@@ -149,6 +155,43 @@ The DevTools plugin has been designed so that you can customize the tabs to suit

 With this setup you can add or remove the tabs as you'd like or add your own simply by editing your `CustomDevToolsPage.tsx` file

+### Adding Tabs From Other Plugins
+
+You can also add tabs to show content from other plugins that fit well with the other DevTools content.
+
+#### Catalog Unprocessed Entities Tab
+
+Here's how to add the Catalog Unprocessed Entities tab:
+
+1. Install and setup the [Catalog Unprocessed Entities plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-unprocessed-entities) as per its documentation
+2. Add the following import to your `CustomDevToolsPage.tsx`:
+
+   `import { UnprocessedEntitiesContent } from '@backstage/plugin-catalog-unprocessed-entities';`
+
+3. Then add a new `DevToolsLayout.Route` to the end of your `DevToolsLayout` like this:
+
+   ```diff
+     <DevToolsLayout>
+       <DevToolsLayout.Route path="info" title="Info">
+         <InfoContent />
+       </DevToolsLayout.Route>
+       <DevToolsLayout.Route path="config" title="Config">
+         <ConfigContent />
+       </DevToolsLayout.Route>
+       <DevToolsLayout.Route
+         path="external-dependencies"
+         title="External Dependencies"
+       >
+         <ExternalDependenciesContent />
+       </DevToolsLayout.Route>
+   +   <DevToolsLayout.Route path="unprocessed-entities" title="Unprocessed Entities">
+   +     <UnprocessedEntitiesContent />
+   +   </DevToolsLayout.Route>
+     </DevToolsLayout>
+   ```
+
+4. Now run `yarn dev` and navigate to the DevTools you'll see a new tab for Unprocessed Entities
+
 ## Permissions

 The DevTools plugin supports the [permissions framework](https://backstage.io/docs/permissions/overview), the following sections outline how you can use them with the assumption that you have the permissions framework setup and working.