feat(bulk-import): integrate bulk import apis in the bulk import fron…

…tend plugin (janus-idp#2013)

feat(bulk-import): integrate bulk import apis

plugins/bulk-import/README.md

@@ -2,17 +2,34 @@
 
 This plugin allows bulk import of multiple catalog entities into the catalog.
 
----
+## For administrators
 
-**NOTE**
+### Installation
+
+#### Installing as a dynamic plugin?
+
+The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
+
+- follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
+- add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
 
-The plugin work is still work in progress
+#### Prerequisites
+
+- Follow the Bulk import backend plugin [README](https://github.com/janus-idp/backstage-plugins/blob/main/plugins/bulk-import-backend/README.md) to integrate bulk import in your Backstage instance.
+
+- Follow the [GitHub Locations](https://backstage.io/docs/integrations/github/locations) to integrate GitHub integrations in your Backstage instance. For now, the plugin only supports loading catalog entities from github.com or GitHub Enterprise.
 
 ---
 
-## For administrators
+**NOTE**
 
-### Installation
+- When RBAC permission framework is enabled, for non-admin users wanting to access bulk import UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file:
+
+```CSV
+p, role:default/team_a, catalog-entity.read, read, allow
+p, role:default/team_a, catalog-entity.create, create, allow
+g, user:default/<login-id/user-name>, role:default/team_a
+```
 
 #### Procedure
 
@@ -45,14 +62,14 @@ The plugin work is still work in progress
 
    ```tsx title="packages/app/src/components/Root/Root.tsx"
    /* highlight-add-next-line */
-   import { BulkImportIcon } from '@janus-idp/backstage-plugin-bulk-import';
+   import { BulkImportSidebarItem } from '@janus-idp/backstage-plugin-bulk-import';
 
    export const Root = ({ children }: PropsWithChildren<{}>) => (
     <SidebarPage>
       <Sidebar>
       ...
       /* highlight-add-next-line */
-      <BulkImportIcon />
+      <BulkImportSidebarItem />
       ...
     </SidebarPage>
    );

plugins/bulk-import/dev/index.tsx

@@ -6,25 +6,118 @@ import { TestApiProvider } from '@backstage/test-utils';
 
 import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
-import { icon } from '../src/components/BulkImportIcon';
+import {
+  BulkImportAPI,
+  bulkImportApiRef,
+} from '../src/api/BulkImportBackendClient';
+import { BulkImportIcon } from '../src/components/BulkImportSidebarItem';
+import {
+  mockGetImportJobs,
+  mockGetOrganizations,
+  mockGetRepositories,
+} from '../src/mocks/mockData';
 import { mockEntities } from '../src/mocks/mockEntities';
 import { BulkImportPage, bulkImportPlugin } from '../src/plugin';
+import {
+  APITypes,
+  ImportJobResponse,
+  ImportJobStatus,
+  OrgAndRepoResponse,
+  RepositoryStatus,
+} from '../src/types';
 
 const mockCatalogApi = {
   getEntities: async () => ({ items: mockEntities }),
 };
 
+class MockBulkImportApi implements BulkImportAPI {
+  async dataFetcher(
+    _page: number,
+    _size: number,
+    options: APITypes,
+  ): Promise<OrgAndRepoResponse> {
+    if (options.orgName) {
+      return {
+        ...mockGetRepositories,
+        repositories: mockGetRepositories.repositories?.filter(r =>
+          r.id?.includes(options.orgName as string),
+        ),
+        totalCount: mockGetRepositories.repositories?.filter(r =>
+          r.id?.includes(options.orgName as string),
+        ).length,
+      };
+    }
+
+    if (options.fetchRepositories) {
+      return mockGetRepositories;
+    }
+    if (options.fetchOrganizations) {
+      return mockGetOrganizations;
+    }
+    return mockGetRepositories;
+  }
+
+  async getImportJobs(
+    _page: number,
+    _size: number,
+  ): Promise<ImportJobStatus[]> {
+    return mockGetImportJobs;
+  }
+
+  async createImportJobs(
+    _importRepositories: any[],
+    _dryRun?: boolean,
+  ): Promise<ImportJobResponse[]> {
+    return [
+      {
+        errors: [],
+        status: RepositoryStatus.WAIT_PR_APPROVAL,
+        catalogEntityName: '',
+        repository: {
+          id: 'REPO',
+          url: 'das',
+          organization: 'dasa',
+          defaultBranch: 'main',
+          name: 'jhk',
+        },
+      },
+    ] as ImportJobResponse[];
+  }
+
+  async deleteImportAction(
+    _repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return {} as Response;
+  }
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
+const mockBulkImportApi = new MockBulkImportApi();
+
 createDevApp()
   .registerPlugin(bulkImportPlugin)
   .addThemes(getAllThemes())
   .addPage({
     element: (
-      <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
+      <TestApiProvider
+        apis={[
+          [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
+        ]}
+      >
         <BulkImportPage />
       </TestApiProvider>
     ),
     title: 'Bulk import',
     path: '/bulk-import/repositories',
-    icon,
+    icon: BulkImportIcon,
   })
   .render();

plugins/bulk-import/package.json

@@ -13,9 +13,9 @@
     "role": "frontend-plugin",
     "supported-versions": "1.28.4",
     "pluginId": "bulk-import",
-    "pluginPackage": "@janus-idp/backstage-plugin-bulk-import",
     "pluginPackages": [
       "@janus-idp/backstage-plugin-bulk-import",
+      "@janus-idp/backstage-plugin-bulk-import-backend",
       "@janus-idp/backstage-plugin-bulk-import-common"
     ]
   },
@@ -48,7 +48,8 @@
     "@mui/material": "^5.12.2",
     "formik": "^2.4.5",
     "lodash": "^4.17.21",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "yaml": "^2.0.0"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.0.0",