fix(bulk-import): UI improvements and bug fixes (#2975)

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Author: its-mitesh-kumar

workspaces/bulk-import/.changeset/fix-nfs-duplicate-header.md

@@ -0,0 +1,7 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
+---
+
+- Fixed duplicate header in NFS app by adding `noHeader: true` to the PageBlueprint configuration
+- Persist selected approval tool (GitHub/GitLab) in URL parameter to survive page refresh
+- Fixed large empty space between table rows and pagination on the last page when rows is less than rows-per-page

workspaces/bulk-import/plugins/bulk-import/src/alpha.tsx

@@ -73,6 +73,7 @@ const bulkImportPage = PageBlueprint.make({
   params: {
     path: '/bulk-import',
     routeRef: rootRouteRef,
+    noHeader: true,
     loader: () => import('./components').then(({ Router }) => <Router />),
   },
 });

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

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { useApi } from '@backstage/core-plugin-api';
 
@@ -44,22 +45,34 @@ export const AddRepositoriesForm = ({
 }) => {
   const bulkImportApi = useApi(bulkImportApiRef);
   const queryClient = useQueryClient();
-  const { numberOfApprovalTools, gitlabConfigured } =
+  const [searchParams] = useSearchParams();
+  const { numberOfApprovalTools, gitlabConfigured, githubConfigured } =
     useNumberOfApprovalTools();
 
-  // Set default approval tool based on configuration
-  const getDefaultApprovalTool = () => {
+  // Get approval tool from URL or fallback to default based on configuration
+  const getInitialApprovalTool = useMemo(() => {
+    const urlApprovalTool = searchParams.get('approvalTool');
+
+    // Validate URL param against configured integrations
+    if (urlApprovalTool === ApprovalTool.Git && githubConfigured) {
+      return ApprovalTool.Git;
+    }
+    if (urlApprovalTool === ApprovalTool.Gitlab && gitlabConfigured) {
+      return ApprovalTool.Gitlab;
+    }
+
+    // Fallback to default based on configuration
     if (numberOfApprovalTools === 1) {
       return gitlabConfigured ? ApprovalTool.Gitlab : ApprovalTool.Git;
     }
     return ApprovalTool.Git; // Default to GitHub when both are configured
-  };
+  }, [searchParams, numberOfApprovalTools, gitlabConfigured, githubConfigured]);
 
   const initialValues: AddRepositoriesFormValues = {
     repositoryType: RepositorySelection.Repository,
     repositories: {},
     excludedRepositories: {},
-    approvalTool: getDefaultApprovalTool(),
+    approvalTool: getInitialApprovalTool,
   };
 
   const createImportJobs = (importOptions: {

workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/ApprovalTool.tsx

@@ -15,6 +15,7 @@
  */
 
 import type { ChangeEvent, FC } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import HelpIcon from '@mui/icons-material/HelpOutline';
 import Box from '@mui/material/Box';
@@ -38,11 +39,18 @@ const ApprovalTool: FC<ApprovalToolProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
+  const [searchParams, setSearchParams] = useSearchParams();
+
   const handleApprovalToolChange = (
     _event: ChangeEvent<{}>,
     newValue: string,
   ) => {
     setFieldValue('approvalTool', newValue);
+
+    // Persist approval tool selection in URL
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set('approvalTool', newValue);
+    setSearchParams(newSearchParams, { replace: true });
   };
   return (
     <Box

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

@@ -165,10 +165,6 @@ export const RepositoriesTable = ({
     return filteredData?.slice(startIndex, startIndex + rowsPerPage) || [];
   }, [filteredData, effectivePage, rowsPerPage]);
 
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows =
-    effectivePage > 0 ? Math.max(0, rowsPerPage - paginatedData.length) : 0;
-
   const handleClickAllForRepositoriesTable = (drawer?: boolean) => {
     let newSelectedRows: AddedRepositories = { ...selected };
 
@@ -321,7 +317,7 @@ export const RepositoriesTable = ({
           </div>
         )}
         <Table
-          style={{ minWidth: 750, height: '70%' }}
+          style={{ minWidth: 750 }}
           size="small"
           data-testid={ariaLabel()}
           className={classes.repositoriesTableFixedColumns}
@@ -343,7 +339,6 @@ export const RepositoriesTable = ({
             loading={loading}
             ariaLabel={ariaLabel()}
             rows={paginatedData}
-            emptyRows={emptyRows}
             onOrgRowSelected={handleOrgRowSelected}
             onClick={handleClick}
             selectedRepos={selected}
@@ -354,7 +349,6 @@ export const RepositoriesTable = ({
         </Table>
         {!isOpen && tableData?.length > 0 && (
           <TablePagination
-            style={{ height: '30%' }}
             rowsPerPageOptions={[
               { value: 5, label: t('table.pagination.rows5') },
               { value: 10, label: t('table.pagination.rows10') },

workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx

@@ -19,8 +19,6 @@ import type { MouseEvent } from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
 
 import { useTranslation } from '../../hooks/useTranslation';
 import { AddedRepositories, AddRepositoryData } from '../../types';
@@ -33,7 +31,6 @@ export const RepositoriesTableBody = ({
   ariaLabel,
   showOrganizations,
   rows,
-  emptyRows,
   onOrgRowSelected,
   onClick,
   selectedRepos,
@@ -42,7 +39,6 @@ export const RepositoriesTableBody = ({
 }: {
   loading: boolean;
   ariaLabel: string;
-  emptyRows: number;
   rows: AddRepositoryData[];
   onOrgRowSelected: (org: AddRepositoryData) => void;
   onClick: (_event: MouseEvent, repo: AddRepositoryData) => void;
@@ -100,15 +96,6 @@ export const RepositoriesTableBody = ({
             />
           );
         })}
-        {emptyRows > 0 && (
-          <TableRow
-            style={{
-              height: 55 * emptyRows,
-            }}
-          >
-            <TableCell />
-          </TableRow>
-        )}
       </TableBody>
     );
   }