feat(bulk-import): show bulk-import to authorized users

janus-idp · Aug 9, 2024 · fdb2674 · fdb2674
1 parent ea13949
commit fdb2674
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 36 deletions.
diff --git a/plugins/bulk-import/package.json b/plugins/bulk-import/package.json
@@ -39,7 +39,9 @@
     "@backstage/theme": "^0.5.6",
     "@backstage/catalog-model": "^1.5.0",
     "@backstage/plugin-catalog-react": "^1.12.2",
+    "@backstage/plugin-permission-react": "^0.4.24",
     "@backstage/plugin-catalog-import": "^0.12.1",
+    "@janus-idp/backstage-plugin-bulk-import-common": "0.2.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/icons": "^4.11.3",

diff --git a/plugins/bulk-import/src/api/BulkImportBackendClient.ts b/plugins/bulk-import/src/api/BulkImportBackendClient.ts
@@ -13,6 +13,7 @@ import { CreateImportJobRepository } from '../types/types';
 
 // @public
 export type BulkImportAPI = {
+  getUserAuthorization: () => Promise<{ status: string }>;
   getRepositories: (page: number, size: number) => Promise<OrgAndRepoResponse>;
   getRepositoriesFromOrg: (
     orgName: string,
@@ -45,22 +46,36 @@ export const bulkImportApiRef = createApiRef<BulkImportAPI>({
 export class BulkImportBackendClient implements BulkImportAPI {
   // @ts-ignore
   private readonly configApi: ConfigApi;
-  // private readonly identityApi: IdentityApi;
+  private readonly identityApi: IdentityApi;
 
   constructor(options: Options) {
     this.configApi = options.configApi;
-    // this.identityApi = options.identityApi;
+    this.identityApi = options.identityApi;
+  }
+
+  async getUserAuthorization() {
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const backendUrl = this.configApi.getString('backend.baseUrl');
+    const jsonResponse = await fetch(
+      `${backendUrl}/api/bulk-import-backend/ping`,
+      {
+        headers: {
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
+        },
+      },
+    );
+    return jsonResponse.json();
   }
 
   async getRepositories(page: number, size: number) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/repositories?pagePerIntegration=${page}&sizePerIntegration=${size}`,
       {
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },
@@ -72,14 +87,14 @@ export class BulkImportBackendClient implements BulkImportAPI {
   }
 
   async getOrganizations(page: number, size: number) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/organizations?pagePerIntegration=${page}&sizePerIntegration=${size}`,
       {
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },
@@ -91,14 +106,14 @@ export class BulkImportBackendClient implements BulkImportAPI {
   }
 
   async getRepositoriesFromOrg(orgName: string, page: number, size: number) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/organizations/${orgName}/repositories?pagePerIntegration=${page}&sizePerIntegration=${size}`,
       {
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },
@@ -113,7 +128,7 @@ export class BulkImportBackendClient implements BulkImportAPI {
     importRepositories: CreateImportJobRepository[],
     dryRun?: boolean,
   ) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
@@ -123,7 +138,7 @@ export class BulkImportBackendClient implements BulkImportAPI {
       {
         method: 'POST',
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(importRepositories),
@@ -133,15 +148,15 @@ export class BulkImportBackendClient implements BulkImportAPI {
   }
 
   async getImportJobs(page: number, size: number) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/imports?pagePerIntegration=${page}&sizePerIntegration=${size}`,
       {
         method: 'GET',
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },
@@ -153,15 +168,15 @@ export class BulkImportBackendClient implements BulkImportAPI {
   }
 
   async checkImportStatus(repo: string, defaultBranch: string) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/import/by-repo?repo=${repo}&defaultBranch=${defaultBranch}`,
       {
         method: 'GET',
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },
@@ -171,15 +186,15 @@ export class BulkImportBackendClient implements BulkImportAPI {
   }
 
   async removeRepository(repo: string, defaultBranch: string) {
-    // const { token: idToken } = await this.identityApi.getCredentials();
+    const { token: idToken } = await this.identityApi.getCredentials();
 
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
       `${backendUrl}/api/bulk-import-backend/import/by-repo?repo=${repo}&defaultBranch=${defaultBranch}`,
       {
         method: 'DELETE',
         headers: {
-          // ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
         },
       },

diff --git a/plugins/bulk-import/src/components/BulkImportIcon.tsx b/plugins/bulk-import/src/components/BulkImportIcon.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
+import useAsync from 'react-use/esm/useAsync';
 
 import { SidebarItem } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
+import { bulkImportApiRef } from '../api/BulkImportBackendClient';
 import { getImageForIconClass } from '../utils/icons';
 
 export const icon = () => {
@@ -15,9 +18,24 @@ export const icon = () => {
 };
 
 export const BulkImportIcon = () => {
-  // permission logic
-
-  return (
-    <SidebarItem text="Bulk import" to="bulk-import/repositories" icon={icon} />
+  const bulkImportApi = useApi(bulkImportApiRef);
+  const { loading: isUserLoading, value: result } = useAsync(
+    async () => await bulkImportApi.getUserAuthorization(),
+    [],
   );
+
+  const config = useApi(configApiRef);
+  const isPermissionFrameworkEnabled =
+    config.getOptionalBoolean('permission.enabled');
+
+  if (!isUserLoading && isPermissionFrameworkEnabled) {
+    return result?.status === 'ok' ? (
+      <SidebarItem
+        text="Bulk import"
+        to="bulk-import/repositories"
+        icon={icon}
+      />
+    ) : null;
+  }
+  return null;
 };
diff --git a/plugins/bulk-import/src/components/BulkImportPage.tsx b/plugins/bulk-import/src/components/BulkImportPage.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
 import { Header, Page, TabbedLayout } from '@backstage/core-components';
+import { RequirePermission } from '@backstage/plugin-permission-react';
 
 import FormControl from '@mui/material/FormControl';
 import { Formik } from 'formik';
 
+import { bulkImportPermission } from '@janus-idp/backstage-plugin-bulk-import-common';
+
 import { AddRepositoriesFormValues, RepositorySelection } from '../types/types';
 import { RepositoriesList } from './Repositories/RepositoriesList';
 
@@ -17,21 +20,26 @@ export const BulkImportPage = () => {
   };
 
   return (
-    <Page themeId="tool">
-      <Header title="Bulk import" />
-      <TabbedLayout>
-        <TabbedLayout.Route path="/" title="Repositories">
-          <Formik
-            initialValues={initialValues}
-            enableReinitialize
-            onSubmit={async (_values: AddRepositoriesFormValues) => {}}
-          >
-            <FormControl fullWidth>
-              <RepositoriesList />
-            </FormControl>
-          </Formik>
-        </TabbedLayout.Route>
-      </TabbedLayout>
-    </Page>
+    <RequirePermission
+      permission={bulkImportPermission}
+      resourceRef={bulkImportPermission.resourceType}
+    >
+      <Page themeId="tool">
+        <Header title="Bulk import" />
+        <TabbedLayout>
+          <TabbedLayout.Route path="/" title="Repositories">
+            <Formik
+              initialValues={initialValues}
+              enableReinitialize
+              onSubmit={async (_values: AddRepositoriesFormValues) => {}}
+            >
+              <FormControl fullWidth>
+                <RepositoriesList />
+              </FormControl>
+            </Formik>
+          </TabbedLayout.Route>
+        </TabbedLayout>
+      </Page>
+    </RequirePermission>
   );
 };