feat: Add permission check to Register Existing API button

Signed-off-by: rui ma <ruima@alauda.io>

.changeset/clever-meals-drop.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Add permission check to Register Existing API button

plugins/api-docs/package.json

@@ -38,7 +38,9 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",
+    "@backstage/plugin-catalog-common": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
+    "@backstage/plugin-permission-react": "workspace:^",
     "@graphiql/react": "^0.20.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.test.tsx

@@ -32,6 +32,7 @@ import {
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
 import {
+  MockPermissionApi,
   MockStorageApi,
   TestApiProvider,
   renderInTestApp,
@@ -41,6 +42,7 @@ import { screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { apiDocsConfigRef } from '../../config';
 import { DefaultApiExplorerPage } from './DefaultApiExplorerPage';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
 
 describe('DefaultApiExplorerPage', () => {
   const catalogApi: Partial<CatalogApi> = {
@@ -98,6 +100,7 @@ describe('DefaultApiExplorerPage', () => {
             new DefaultStarredEntitiesApi({ storageApi }),
           ],
           [apiDocsConfigRef, apiDocsConfig],
+          [permissionApiRef, new MockPermissionApi()],
         ]}
       >
         {children}

plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx

@@ -38,6 +38,8 @@ import {
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { registerComponentRouteRef } from '../../routes';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
 const defaultColumns: TableColumn<CatalogTableRow>[] = [
   CatalogTable.columns.createTitleColumn({ hidden: true }),
@@ -72,6 +74,9 @@ export const DefaultApiExplorerPage = (props: DefaultApiExplorerPageProps) => {
     configApi.getOptionalString('organization.name') ?? 'Backstage'
   } API Explorer`;
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission,
+  });
 
   return (
     <PageWithHeader
@@ -82,10 +87,12 @@ export const DefaultApiExplorerPage = (props: DefaultApiExplorerPageProps) => {
     >
       <Content>
         <ContentHeader title="">
-          <CreateButton
-            title="Register Existing API"
-            to={registerComponentLink?.()}
-          />
+          {allowed && (
+            <CreateButton
+              title="Register Existing API"
+              to={registerComponentLink?.()}
+            />
+          )}
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <EntityListProvider>

yarn.lock

@@ -4553,7 +4553,9 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"
+    "@backstage/plugin-catalog-common": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
+    "@backstage/plugin-permission-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@graphiql/react": ^0.20.0
     "@material-ui/core": ^4.12.2