Replace usage of implementsApis with relations

.changeset/fifty-nails-pay.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': patch
+---
+
+Replace usage of implementsApis with relations

.changeset/short-singers-serve.md

@@ -4,7 +4,7 @@
 
 Marked the field `spec.implementsApis` on `Component` entities for deprecation on Dec 14th, 2020.
 
-Code that consumes these fields should remove those usages as soon as possible as migrate to using
+Code that consumes these fields should remove those usages as soon as possible and migrate to using
 relations instead. Producers should fill the field `spec.providesApis` instead, which has the same
 semantic.
 

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) || []
+  );
 };

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -18,6 +18,7 @@ import {
   Entity,
   ENTITY_DEFAULT_NAMESPACE,
   RELATION_OWNED_BY,
+  RELATION_PROVIDES_API,
   serializeEntityRef,
 } from '@backstage/catalog-model';
 import {
@@ -111,6 +112,8 @@ type AboutCardProps = {
 export function AboutCard({ entity, variant }: AboutCardProps) {
   const classes = useStyles();
   const codeLink = getCodeLinkInfo(entity);
+  // TODO: Also support RELATION_CONSUMES_API here
+  const hasApis = entity.relations?.some(r => r.type === RELATION_PROVIDES_API);
 
   return (
     <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
@@ -146,9 +149,9 @@ export function AboutCard({ entity, variant }: AboutCardProps) {
               }/${entity.kind}/${entity.metadata.name}`}
             />
             <IconLinkVertical
-              disabled={!entity.spec?.implementsApis}
+              disabled={!hasApis}
               label="View API"
-              title={!entity.spec?.implementsApis ? 'No APIs available' : ''}
+              title={hasApis ? '' : 'No APIs available'}
               icon={<ExtensionIcon />}
               href="api"
             />