docs(api-docs): add alpha readme file

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

packages/app-next/app-config.yaml

@@ -1,6 +1,7 @@
 app:
   experimental:
     packages: 'all' # ✨
+
   routes:
     bindings:
       catalog.viewTechDoc: techdocs.docRoot
@@ -22,6 +23,9 @@ app:
         config:
           height: 300
     - entity-card:azure-devops/readme
+    - entity-card:api-docs/has-apis:
+        config:
+          filter: kind:component
     - entity-card:api-docs/consumed-apis:
         config:
           filter: kind:component

plugins/api-docs/README.md

@@ -1,5 +1,8 @@
 # API Documentation
 
+> Disclaimer:
+> If you are looking for documentation on the experimental new frontend system support, please go [here](./README-alpha.md).
+
 This is an extension for the catalog plugin that provides components to discover and display API entities.
 APIs define the interface between components, see the [system model](https://backstage.io/docs/features/software-catalog/system-model) for details.
 They are defined in machine readable formats and provide a human readable documentation.

plugins/api-docs/src/alpha.tsx

@@ -42,8 +42,8 @@ import { useApp } from '@backstage/core-plugin-api';
 
 function ApiIcon() {
   const app = useApp();
-  const Component = app.getSystemIcon('kind:api')!;
-  return <Component />;
+  const KindApiSystemIcon = app.getSystemIcon('kind:api')!;
+  return <KindApiSystemIcon />;
 }
 
 const ApiDocsNavItem = createNavItemExtension({
@@ -165,7 +165,7 @@ const ApiDocsApisEntityContent = createEntityContentExtension({
   name: 'apis',
   defaultPath: '/apis',
   defaultTitle: 'APIs',
-  filter: 'kind:component has:apis',
+  filter: 'kind:component',
   loader: async () =>
     import('./components/ApisCards').then(m =>
       compatWrapper(