[Bulk import]: fix added repositories count

janus-idp · Oct 8, 2024 · 3d4bd53 · 3d4bd53
1 parent 7db423f
commit 3d4bd53
Show file tree

Hide file tree

Showing 39 changed files with 799 additions and 458 deletions.
diff --git a/plugins/bulk-import/dev/index.tsx b/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;
   }

diff --git a/plugins/bulk-import/package.json b/plugins/bulk-import/package.json
@@ -48,6 +48,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",

diff --git a/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts b/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts
@@ -90,7 +90,7 @@ 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[1]));
       }
       return res(ctx.status(404));
     },
@@ -103,7 +103,7 @@ const handlers = [
       return res(
         ctx.status(200),
         ctx.json(
-          mockGetImportJobs.filter(r =>
+          mockGetImportJobs.imports.filter(r =>
             r.repository.name?.includes(searchParam),
           ),
         ),
@@ -288,7 +288,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'),
+        ),
       );
     });
 
@@ -316,7 +318,7 @@ describe('BulkImportBackendClient', () => {
       );
 
       expect(response.status).toBe(RepositoryStatus.WAIT_PR_APPROVAL);
-      expect(response).toEqual(mockGetImportJobs[1]);
+      expect(response).toEqual(mockGetImportJobs.imports[1]);
     });
   });
 

diff --git a/plugins/bulk-import/src/api/BulkImportBackendClient.ts b/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,11 +88,12 @@ 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',
         },
       },
     );

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx b/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;
   }

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
@@ -52,7 +52,7 @@ export const AddRepositoriesForm = ({
 }) => {
   const styles = useStyles();
   const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
-  const { setFieldValue, values } =
+  const { setFieldValue, values, status } =
     useFormikContext<AddRepositoriesFormValues>();
 
   const closeDrawer = () => {
@@ -118,7 +118,7 @@ export const AddRepositoriesForm = ({
         </div>
         <br />
       </FormControl>
-      <AddRepositoriesFormFooter />
+      <AddRepositoriesFormFooter error={status ?? error} />
       {openDrawer && (
         <PreviewFileSidebar
           open={openDrawer}

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles(theme => ({
 const sPad = (repositories: AddedRepositories) =>
   Object.keys(repositories || []).length > 1 ? 's' : '';
 
-export const AddRepositoriesFormFooter = () => {
+export const AddRepositoriesFormFooter = ({ error }: { error: any }) => {
   const styles = useStyles();
   const { values, handleSubmit, isSubmitting } =
     useFormikContext<AddRepositoriesFormValues>();
@@ -74,7 +74,12 @@ export const AddRepositoriesFormFooter = () => {
       color="primary"
       onClick={handleSubmit as any}
       className={styles.createButton}
-      disabled={disableCreate || isSubmitting}
+      disabled={
+        disableCreate ||
+        isSubmitting ||
+        error ||
+        Object.values(error || {}).length > 0
+      }
       startIcon={
         isSubmitting && <CircularProgress size="20px" color="inherit" />
       }

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx b/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;
   }

diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx b/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 ? (

diff --git a/plugins/bulk-import/src/components/AddRepositories/OrganizationTableRow.tsx b/plugins/bulk-import/src/components/AddRepositories/OrganizationTableRow.tsx
@@ -31,7 +31,7 @@ export const OrganizationTableRow = ({
   ).length;
 
   return (
-    <TableRow hover>
+    <TableRow hover key={data.id}>
       <TableCell component="th" scope="row" padding="none" sx={tableCellStyle}>
         {data.orgName}
       </TableCell>

diff --git a/plugins/bulk-import/src/components/AddRepositories/OrganizationsColumnHeader.ts b/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',
   },

diff --git a/plugins/bulk-import/src/components/AddRepositories/ReposSelectDrawerColumnHeader.ts b/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',
   },

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesColumnHeader.ts b/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',
   },

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx b/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,6 +46,9 @@ export const RepositoriesHeader = ({
     if (showOrganizations) {
       return OrganizationsColumnHeader;
     }
+    if (showImportJobs) {
+      return RepositoriesListColumns;
+    }
     if (isRepoSelectDrawer) {
       return ReposSelectDrawerColumnHeader;
     }
@@ -52,7 +58,7 @@ export const RepositoriesHeader = ({
   return (
     <TableHead>
       <TableRow>
-        {getColumnHeader().map((headCell, index) => (
+        {getColumnHeader()?.map((headCell, index) => (
           <TableCell
             key={headCell.id as string}
             align="left"
@@ -67,13 +73,21 @@ export const RepositoriesHeader = ({
             }}
             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 +99,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>

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx b/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

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
@@ -72,23 +72,17 @@ export const RepositoryTableRow = ({
       </TableCell>
       <TableCell align="left" className={classes.tableCellStyle}>
         <Link to={data.repoUrl || ''}>
-          <>
-            {urlHelper(data?.repoUrl || '')}
-            <OpenInNewIcon
-              style={{ verticalAlign: 'sub', paddingTop: '7px' }}
-            />
-          </>
+          {urlHelper(data?.repoUrl || '')}
+          <OpenInNewIcon style={{ verticalAlign: 'sub', paddingTop: '7px' }} />
         </Link>
       </TableCell>
       {!isDrawer && (
         <TableCell align="left" className={classes.tableCellStyle}>
           <Link to={data?.organizationUrl || ''}>
-            <>
-              {urlHelper(data?.organizationUrl || '')}
-              <OpenInNewIcon
-                style={{ verticalAlign: 'sub', paddingTop: '7px' }}
-              />
-            </>
+            {urlHelper(data?.organizationUrl || '')}
+            <OpenInNewIcon
+              style={{ verticalAlign: 'sub', paddingTop: '7px' }}
+            />
           </Link>
         </TableCell>
       )}

diff --git a/plugins/bulk-import/src/components/BulkImportPage.test.tsx b/plugins/bulk-import/src/components/BulkImportPage.test.tsx
@@ -38,12 +38,12 @@ describe('BulkImport Page', () => {
     mockUsePermission.mockReturnValue({ loading: false, allowed: true });
     mockUseAddedRepositories.mockReturnValue({
       loaded: true,
-      data: [],
+      data: { addedRepositories: [], totalJobs: 0 },
       retry: jest.fn(),
       error: undefined,
     });
     await renderInTestApp(<BulkImportPage />);
-    expect(screen.getByText('Added repositories (0)')).toBeInTheDocument();
+    expect(screen.getByText('Added repositories')).toBeInTheDocument();
   });
 
   it('should not render if user is not authorized to access the bulk import plugin', async () => {