Replace usage of implementsApis with relations

plugins/api-docs/src/catalog/MissingImplementsApisEmptyState/MissingImplementsApisEmptyState.tsx

@@ -28,7 +28,7 @@ spec:
   type: service
   lifecycle: production
   owner: guest
-  implementsApis:
+  providesApis:
     - example-api
 `;
 
@@ -49,8 +49,7 @@ export const MissingImplementsApisEmptyState = () => {
       description={
         <Typography>
           Components can implement APIs that are displayed on this page. You
-          need to fill the <code>implementsApis</code> field to enable this
-          tool.
+          need to fill the <code>providesApis</code> field to enable this tool.
         </Typography>
       }
       action={
@@ -71,7 +70,7 @@ export const MissingImplementsApisEmptyState = () => {
           <Button
             variant="contained"
             color="primary"
-            href="https://backstage.io/docs/features/software-catalog/descriptor-format#specimplementsapis-optional"
+            href="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional"
           >
             Read more
           </Button>

plugins/api-docs/src/catalog/Router.tsx

@@ -15,14 +15,15 @@
  */
 
 import React from 'react';
-import { Entity } from '@backstage/catalog-model';
+import { Entity, RELATION_PROVIDES_API } from '@backstage/catalog-model';
 import { Route, Routes } from 'react-router';
 import { catalogRoute } from '../routes';
 import { EntityPageApi } from './EntityPageApi';
 import { MissingImplementsApisEmptyState } from './MissingImplementsApisEmptyState';
 
 const isPluginApplicableToEntity = (entity: Entity) => {
-  return ((entity.spec?.implementsApis as string[]) || []).length > 0;
+  // TODO: Als support RELATION_CONSUMES_API
+  return entity.relations?.some(r => r.type === RELATION_PROVIDES_API);
 };
 
 export const Router = ({ entity }: { entity: Entity }) =>

plugins/api-docs/src/components/useComponentApiNames.ts

@@ -14,8 +14,16 @@
  * limitations under the License.
  */
 
-import { ComponentEntity } from '@backstage/catalog-model';
+import {
+  ComponentEntity,
+  RELATION_PROVIDES_API,
+} from '@backstage/catalog-model';
 
 export const useComponentApiNames = (entity: ComponentEntity) => {
-  return (entity.spec?.implementsApis as string[]) || [];
+  // TODO: This code doesn't handle namespaces and kinds correctly, but will be removed soon
+  return (
+    entity.relations
+      ?.filter(r => r.type === RELATION_PROVIDES_API)
+      ?.map(r => r.target.name) || []
+  );
 };