refactor(api-docs): reorder extension definitions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app-next/app-config.yaml

@@ -11,6 +11,7 @@ app:
     # - apis.plugin.graphiql.browse.gitlab: true
     - graphiql-endpoint:graphiql/gitlab: true
 
+    # Entity page cards
     - entity-card:catalog/about
     - entity-card:catalog/labels
     - entity-card:catalog/links:
@@ -21,7 +22,21 @@ app:
         config:
           height: 300
     - entity-card:azure-devops/readme
+    - entity-card:api-docs/consumed-apis:
+        config:
+          filter: kind:component
+    - entity-card:api-docs/provided-apis:
+        config:
+          filter: kind:component
+    - entity-card:api-docs/providing-components:
+        config:
+          filter: kind:api
+    - entity-card:api-docs/consuming-components:
+        config:
+          filter: kind:api
+
     # Entity page content
+    - entity-content:api-docs/definition
     - entity-content:techdocs
     - entity-content:azure-devops/pipelines
     - entity-content:azure-devops/pull-requests

plugins/api-docs/src/alpha.tsx

@@ -32,7 +32,11 @@ import { ApiEntity } from '@backstage/catalog-model';
 import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
 import { rootRoute, registerComponentRouteRef } from './routes';
 import { apiDocsConfigRef } from './config';
-import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+import {
+  createEntityCardExtension,
+  createEntityContentExtension,
+} from '@backstage/plugin-catalog-react/alpha';
+import { Grid } from '@material-ui/core';
 
 const ApiDocsConfigApi = createApiExtension({
   factory: createApiFactory({
@@ -70,6 +74,13 @@ const ApiDocsExplorerPage = createPageExtension({
     ),
 });
 
+const ApiDocsHasApisEntityCard = createEntityCardExtension({
+  name: 'has-apis',
+  // we are skipping variants, see: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  // and columns are too complex to map to zod
+  loader: () => import('./components/ApisCards').then(m => <m.HasApisCard />),
+});
+
 const ApiDocsDefinitionEntityCard = createEntityCardExtension({
   name: 'api-definition',
   loader: () =>
@@ -89,13 +100,6 @@ const ApiDocsConsumedApisEntityCard = createEntityCardExtension({
     ),
 });
 
-const ApiDocsHasApisEntityCard = createEntityCardExtension({
-  name: 'has-apis',
-  // we are skipping variants, see: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
-  // and columns are too complex to map to zod
-  loader: () => import('./components/ApisCards').then(m => <m.HasApisCard />),
-});
-
 const ApiDocsProvidedApisEntityCard = createEntityCardExtension({
   name: 'provided-apis',
   // we are skipping variants, see: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
@@ -126,6 +130,23 @@ const ApiDocsProvidingComponentsEntityCard = createEntityCardExtension({
     ),
 });
 
+const ApiDocsDefinitionEntityContent = createEntityContentExtension({
+  name: 'definition',
+  defaultPath: '/defintion',
+  defaultTitle: 'Definition',
+  filter: 'is:api',
+  loader: async () =>
+    import('./components/ApiDefinitionCard').then(m =>
+      compatWrapper(
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <m.ApiDefinitionCard />
+          </Grid>
+        </Grid>,
+      ),
+    ),
+});
+
 export default createPlugin({
   id: 'api-docs',
   routes: {
@@ -143,5 +164,6 @@ export default createPlugin({
     ApiDocsConsumedApisEntityCard,
     ApiDocsConsumingComponentsEntityCard,
     ApiDocsProvidingComponentsEntityCard,
+    ApiDocsDefinitionEntityContent,
   ],
 });