fix(bulk-import): updated bulk import ui to show the correct import jobs count

.changeset/heavy-mails-doubt.md

@@ -0,0 +1,5 @@
+---
+"@janus-idp/backstage-plugin-bulk-import": minor
+---
+
+update bulk import ui as per the api response

plugins/bulk-import/dev/index.tsx

@@ -27,6 +27,7 @@ import { BulkImportPage, bulkImportPlugin } from '../src/plugin';
 import {
   APITypes,
   ImportJobResponse,
+  ImportJobs,
   ImportJobStatus,
   OrgAndRepoResponse,
   RepositoryStatus,
@@ -78,7 +79,7 @@ class MockBulkImportApi implements BulkImportAPI {
     _page: number,
     _size: number,
     _seachString: string,
-  ): Promise<ImportJobStatus[]> {
+  ): Promise<ImportJobs> {
     return mockGetImportJobs;
   }
 
@@ -112,7 +113,7 @@ class MockBulkImportApi implements BulkImportAPI {
     repo: string,
     _defaultBranch: string,
   ): Promise<ImportJobStatus | Response> {
-    return mockGetImportJobs.find(
+    return mockGetImportJobs.imports.find(
       i => i.repository.url === repo,
     ) as ImportJobStatus;
   }

plugins/bulk-import/package.json

@@ -51,6 +51,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "5.16.4",
     "@mui/material": "^5.12.2",
+    "@tanstack/react-query": "^4.29.21",
     "formik": "^2.4.5",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",

plugins/bulk-import/src/api/BulkImportBackendClient.test.ts

@@ -90,7 +90,12 @@ const handlers = [
     (req, res, ctx) => {
       const test = req.headers.get('Content-Type');
       if (test === 'application/json') {
-        return res(ctx.status(200), ctx.json(mockGetImportJobs[1]));
+        return res(
+          ctx.status(200),
+          ctx.json(
+            mockGetImportJobs.imports.find(i => i.id === 'org/dessert/donut'),
+          ),
+        );
       }
       return res(ctx.status(404));
     },
@@ -103,7 +108,7 @@ const handlers = [
       return res(
         ctx.status(200),
         ctx.json(
-          mockGetImportJobs.filter(r =>
+          mockGetImportJobs.imports.filter(r =>
             r.repository.name?.includes(searchParam),
           ),
         ),
@@ -138,9 +143,9 @@ const handlers = [
     (req, res, ctx) => {
       const test = req.headers.get('Content-Type');
       if (test === 'application/json') {
-        return res(ctx.status(200));
+        return res(ctx.json({ status: 200, ok: true }));
       }
-      return res(ctx.status(404));
+      return res(ctx.json({ status: 404, ok: false }));
     },
   ),
 ];
@@ -288,7 +293,9 @@ describe('BulkImportBackendClient', () => {
     it('getImportJobs should retrieve the import jobs based on search string', async () => {
       const jobs = await bulkImportApi.getImportJobs(1, 2, 'cup');
       expect(jobs).toEqual(
-        mockGetImportJobs.filter(r => r.repository.name?.includes('cup')),
+        mockGetImportJobs.imports.filter(r =>
+          r.repository.name?.includes('cup'),
+        ),
       );
     });
 
@@ -308,15 +315,19 @@ describe('BulkImportBackendClient', () => {
 
       expect(response.status).toBe(200);
     });
+  });
 
+  describe('getImportAction', () => {
     it('getImportAction should retrive the status of the repo', async () => {
       const response = await bulkImportApi.getImportAction(
         'org/dessert/donut',
         'master',
       );
 
       expect(response.status).toBe(RepositoryStatus.WAIT_PR_APPROVAL);
-      expect(response).toEqual(mockGetImportJobs[1]);
+      expect(response).toEqual(
+        mockGetImportJobs.imports.find(i => i.id === 'org/dessert/donut'),
+      );
     });
   });
 

plugins/bulk-import/src/api/BulkImportBackendClient.ts

@@ -8,6 +8,7 @@ import {
   APITypes,
   CreateImportJobRepository,
   ImportJobResponse,
+  ImportJobs,
   ImportJobStatus,
   OrgAndRepoResponse,
 } from '../types';
@@ -25,7 +26,7 @@ export type BulkImportAPI = {
     page: number,
     size: number,
     searchString: string,
-  ) => Promise<ImportJobStatus[] | Response>;
+  ) => Promise<ImportJobs | Response>;
   createImportJobs: (
     importRepositories: CreateImportJobRepository[],
     dryRun?: boolean,
@@ -87,18 +88,19 @@ export class BulkImportBackendClient implements BulkImportAPI {
     const { token: idToken } = await this.identityApi.getCredentials();
     const backendUrl = this.configApi.getString('backend.baseUrl');
     const jsonResponse = await fetch(
-      `${backendUrl}/api/bulk-import/imports?pagePerIntegration=${page}&sizePerIntegration=${size}&search=${searchString}`,
+      `${backendUrl}/api/bulk-import/imports?page=${page}&size=${size}&search=${searchString}`,
       {
         headers: {
           'Content-Type': 'application/json',
           ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          'api-version': 'v2',
         },
       },
     );
-    if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
+    if (!jsonResponse.ok) {
       return jsonResponse;
     }
-    return jsonResponse.json();
+    return jsonResponse.status === 204 ? null : jsonResponse.json();
   }
 
   async createImportJobs(
@@ -136,10 +138,11 @@ export class BulkImportBackendClient implements BulkImportAPI {
         },
       },
     );
-    if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
-      return jsonResponse.json();
+    if (!jsonResponse.ok) {
+      const errorResponse = await jsonResponse.json();
+      throw errorResponse.err;
     }
-    return jsonResponse;
+    return jsonResponse.status === 204 ? null : await jsonResponse.json();
   }
 
   async getImportAction(repo: string, defaultBranch: string) {

plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx

@@ -49,7 +49,7 @@ class MockBulkImportApi {
     repo: string,
     _defaultBranch: string,
   ): Promise<ImportJobStatus | Response> {
-    return mockGetImportJobs.find(
+    return mockGetImportJobs.imports.find(
       i => i.repository.url === repo,
     ) as ImportJobStatus;
   }

plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx

@@ -44,7 +44,7 @@ class MockBulkImportApi {
     repo: string,
     _defaultBranch: string,
   ): Promise<ImportJobStatus | Response> {
-    return mockGetImportJobs.find(
+    return mockGetImportJobs.imports.find(
       i => i.repository.url === repo,
     ) as ImportJobStatus;
   }

plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx

@@ -11,13 +11,16 @@ export const AddRepositoriesTable = ({ title }: { title: string }) => {
   const { values } = useFormikContext<AddRepositoriesFormValues>();
   const [searchString, setSearchString] = React.useState<string>('');
   const [page, setPage] = React.useState<number>(0);
-
+  const handleSearch = (str: string) => {
+    setSearchString(str);
+    setPage(0);
+  };
   return (
     <Box sx={{ width: '100%' }}>
       <Paper style={{ width: '100%' }}>
         <AddRepositoriesTableToolbar
           title={title}
-          setSearchString={setSearchString}
+          setSearchString={handleSearch}
           onPageChange={setPage}
         />
         {values.repositoryType === RepositorySelection.Repository ? (

plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx

@@ -10,7 +10,7 @@ import {
   AddRepositoriesFormValues,
   RepositorySelection,
 } from '../../types';
-import { RepositoriesSearchBar } from './AddRepositoriesSearchBar';
+import { RepositoriesSearchBar } from './RepositoriesSearchBar';
 
 const useStyles = makeStyles(() => ({
   toolbar: {
@@ -73,7 +73,11 @@ export const AddRepositoriesTableToolbar = ({
 
   return (
     <Toolbar className={classes.toolbar}>
-      <Typography sx={{ flex: '1 1 100%' }} variant="h5" id={title}>
+      <Typography
+        sx={{ flex: '1 1 100%', fontWeight: 'bold' }}
+        variant="h5"
+        id={title}
+      >
         {`${title} (${selectedReposNumber})`}
       </Typography>
       {!activeOrganization && (

plugins/bulk-import/src/components/AddRepositories/OrganizationsColumnHeader.ts

@@ -8,12 +8,12 @@ export const OrganizationsColumnHeader: TableColumn[] = [
   },
   { id: 'url', title: 'URL', field: 'organizationUrl' },
   {
-    id: 'selectedRepositories',
+    id: 'selected-repositories',
     title: 'Selected repositories',
     field: 'selectedRepositories',
   },
   {
-    id: 'catalogInfoYaml',
+    id: 'cataloginfoyaml',
     title: 'catalog-info.yaml',
     field: 'catalogInfoYaml.status',
   },

plugins/bulk-import/src/components/AddRepositories/ReposSelectDrawerColumnHeader.ts

@@ -12,7 +12,7 @@ export const ReposSelectDrawerColumnHeader: TableColumn[] = [
     field: 'repoUrl',
   },
   {
-    id: 'catalogInfoYaml',
+    id: 'cataloginfoyaml',
     title: '',
     field: 'catalogInfoYaml.status',
   },

plugins/bulk-import/src/components/AddRepositories/RepositoriesColumnHeader.ts

@@ -17,7 +17,7 @@ export const RepositoriesColumnHeader: TableColumn[] = [
     field: 'organizationUrl',
   },
   {
-    id: 'catalogInfoYaml',
+    id: 'cataloginfoyaml',
     title: 'catalog-info.yaml',
     field: 'catalogInfoYaml.status',
   },

plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx

@@ -9,6 +9,7 @@ import {
 } from '@material-ui/core';
 
 import { Order } from '../../types';
+import { RepositoriesListColumns } from '../Repositories/RepositoriesListColumns';
 import { OrganizationsColumnHeader } from './OrganizationsColumnHeader';
 import { RepositoriesColumnHeader } from './RepositoriesColumnHeader';
 import { ReposSelectDrawerColumnHeader } from './ReposSelectDrawerColumnHeader';
@@ -22,15 +23,17 @@ export const RepositoriesHeader = ({
   onRequestSort,
   isDataLoading,
   showOrganizations,
+  showImportJobs,
   isRepoSelectDrawer = false,
 }: {
-  numSelected: number;
+  numSelected?: number;
   onRequestSort: (event: React.MouseEvent<unknown>, property: any) => void;
   order: Order;
   orderBy: string | undefined;
-  rowCount: number;
+  rowCount?: number;
   isDataLoading?: boolean;
   showOrganizations?: boolean;
+  showImportJobs?: boolean;
   isRepoSelectDrawer?: boolean;
   onSelectAllClick?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
@@ -43,37 +46,56 @@ export const RepositoriesHeader = ({
     if (showOrganizations) {
       return OrganizationsColumnHeader;
     }
+    if (showImportJobs) {
+      return RepositoriesListColumns;
+    }
     if (isRepoSelectDrawer) {
       return ReposSelectDrawerColumnHeader;
     }
     return RepositoriesColumnHeader;
   };
 
+  const tableCellStyle = () => {
+    if (showImportJobs) {
+      return undefined;
+    }
+    if (showOrganizations) {
+      return '15px 16px 15px 24px';
+    }
+    return '15px 16px 15px 6px';
+  };
+
   return (
     <TableHead>
       <TableRow>
-        {getColumnHeader().map((headCell, index) => (
+        {getColumnHeader()?.map((headCell, index) => (
           <TableCell
             key={headCell.id as string}
             align="left"
             padding="normal"
             style={{
               lineHeight: '1.5rem',
               fontSize: '0.875rem',
-              padding: showOrganizations
-                ? '15px 16px 15px 24px'
-                : '15px 16px 15px 6px',
+              padding: tableCellStyle(),
               fontWeight: '700',
             }}
             sortDirection={orderBy === headCell.field ? order : 'asc'}
           >
-            {index === 0 && !showOrganizations && (
+            {index === 0 && !showOrganizations && !showImportJobs && (
               <Checkbox
                 disableRipple
                 color="primary"
                 style={{ padding: '0 12px' }}
-                indeterminate={numSelected > 0 && numSelected < rowCount}
-                checked={rowCount > 0 && numSelected === rowCount}
+                indeterminate={
+                  (numSelected &&
+                    rowCount &&
+                    numSelected > 0 &&
+                    numSelected < rowCount) ||
+                  false
+                }
+                checked={
+                  ((rowCount ?? 0) > 0 && numSelected === rowCount) || false
+                }
                 onChange={onSelectAllClick}
                 inputProps={{
                   'aria-label': 'select all repositories',
@@ -85,6 +107,7 @@ export const RepositoriesHeader = ({
               active={orderBy === headCell.field}
               direction={orderBy === headCell.field ? order : 'asc'}
               onClick={createSortHandler(headCell.field)}
+              disabled={headCell.sorting === false}
             >
               {headCell.title}
             </TableSortLabel>

plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx

@@ -39,7 +39,7 @@ export const RepositoriesTable = ({
   drawerOrganization?: string;
   updateSelectedReposInDrawer?: (repos: AddedRepositories) => void;
 }) => {
-  const { setFieldValue, values } =
+  const { setFieldValue, values, setStatus } =
     useFormikContext<AddRepositoriesFormValues>();
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<string>();
@@ -200,6 +200,7 @@ export const RepositoriesTable = ({
 
   const updateSelection = (newSelected: AddedRepositories) => {
     setSelected(newSelected);
+    setStatus(null);
 
     if (drawerOrganization && updateSelectedReposInDrawer) {
       // Update in the context of the drawer