Merge pull request #4640 from adamdmharvey/api-terminology

api-docs,catalog: Update messaging when no entities are in tables

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx

@@ -74,7 +74,7 @@ describe('<ConsumedApisCard />', () => {
     );
 
     expect(getByText(/Consumed APIs/i)).toBeInTheDocument();
-    expect(getByText(/No Component consumes this API/i)).toBeInTheDocument();
+    expect(getByText(/does not consume any APIs/i)).toBeInTheDocument();
   });
 
   it('shows consumed APIs', async () => {

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx

@@ -26,6 +26,7 @@ import {
   Progress,
   WarningPanel,
 } from '@backstage/core';
+import { Typography } from '@material-ui/core';
 import {
   EntityTable,
   useEntity,
@@ -71,11 +72,15 @@ export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {
       title="Consumed APIs"
       variant={variant}
       emptyContent={
-        <div>
-          No Component consumes this API.{' '}
-          <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">
-            Learn how to consume APIs.
-          </Link>
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            This {entity.kind.toLowerCase()} does not consume any APIs.
+          </Typography>
+          <Typography variant="body2">
+            <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">
+              Learn how to change this.
+            </Link>
+          </Typography>
         </div>
       }
       columns={apiEntityColumns}

plugins/api-docs/src/components/ApisCards/HasApisCard.test.tsx

@@ -74,7 +74,7 @@ describe('<HasApisCard />', () => {
     );
 
     expect(getByText('APIs')).toBeInTheDocument();
-    expect(getByText(/No API is part of this system/i)).toBeInTheDocument();
+    expect(getByText(/does not contain any APIs/i)).toBeInTheDocument();
   });
 
   it('shows related APIs', async () => {

plugins/api-docs/src/components/ApisCards/HasApisCard.tsx

@@ -23,6 +23,7 @@ import {
   TableColumn,
   WarningPanel,
 } from '@backstage/core';
+import { Typography } from '@material-ui/core';
 import {
   EntityTable,
   useEntity,
@@ -75,11 +76,15 @@ export const HasApisCard = ({ variant = 'gridItem' }: Props) => {
       title="APIs"
       variant={variant}
       emptyContent={
-        <div>
-          No API is part of this system.{' '}
-          <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api">
-            Learn how to add APIs.
-          </Link>
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            This {entity.kind.toLowerCase()} does not contain any APIs.
+          </Typography>
+          <Typography variant="body2">
+            <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api">
+              Learn how to change this.
+            </Link>
+          </Typography>
         </div>
       }
       columns={columns}

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx

@@ -74,7 +74,7 @@ describe('<ProvidedApisCard />', () => {
     );
 
     expect(getByText(/Provided APIs/i)).toBeInTheDocument();
-    expect(getByText(/No component provides this API/i)).toBeInTheDocument();
+    expect(getByText(/does not provide any APIs/i)).toBeInTheDocument();
   });
 
   it('shows consumed APIs', async () => {

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx

@@ -26,6 +26,7 @@ import {
   Progress,
   WarningPanel,
 } from '@backstage/core';
+import { Typography } from '@material-ui/core';
 import {
   EntityTable,
   useEntity,
@@ -71,11 +72,15 @@ export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {
       title="Provided APIs"
       variant={variant}
       emptyContent={
-        <div>
-          No component provides this API.{' '}
-          <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">
-            Learn how to provide APIs.
-          </Link>
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            This {entity.kind.toLowerCase()} does not provide any APIs.
+          </Typography>
+          <Typography variant="body2">
+            <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">
+              Learn how to change this.
+            </Link>
+          </Typography>
         </div>
       }
       columns={apiEntityColumns}

plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx

@@ -26,6 +26,7 @@ import {
   Progress,
   WarningPanel,
 } from '@backstage/core';
+import { Typography } from '@material-ui/core';
 import {
   EntityTable,
   useEntity,
@@ -70,11 +71,15 @@ export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {
       title="Consumers"
       variant={variant}
       emptyContent={
-        <div>
-          No component consumes this API.{' '}
-          <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">
-            Learn how to consume APIs.
-          </Link>
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            No component consumes this API.
+          </Typography>
+          <Typography variant="body2">
+            <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">
+              Learn how to change this.
+            </Link>
+          </Typography>
         </div>
       }
       columns={EntityTable.componentEntityColumns}

plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx

@@ -26,6 +26,7 @@ import {
   Progress,
   WarningPanel,
 } from '@backstage/core';
+import { Typography } from '@material-ui/core';
 import {
   EntityTable,
   useEntity,
@@ -70,11 +71,15 @@ export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {
       title="Providers"
       variant={variant}
       emptyContent={
-        <div>
-          No component provides this API.{' '}
-          <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">
-            Learn how to provide APIs.
-          </Link>
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            No component provides this API.
+          </Typography>
+          <Typography variant="body2">
+            <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">
+              Learn how to change this.
+            </Link>
+          </Typography>
         </div>
       }
       columns={EntityTable.componentEntityColumns}