feat(bulk-import): Remove interactive column sorting and fix case-insensitive sort ordering

workspaces/bulk-import/.changeset/violet-ties-arrive.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': patch
+---
+
+Remove interactive column sorting and fix case-insensitive sort ordering.

workspaces/bulk-import/packages/app/e2e-tests/app.test.ts

@@ -110,13 +110,13 @@ test.describe('Bulk Import', () => {
           - row "select all repositories ${translations.table.headers.name} ${translations.table.headers.url} ${translations.table.headers.organization} ${translations.table.headers.status}":
             - columnheader "select all repositories ${translations.table.headers.name}":
               - checkbox "select all repositories"
-              - button "${translations.table.headers.name}"
+              - text: ${translations.table.headers.name}
             - columnheader "${translations.table.headers.url}":
-              - button "${translations.table.headers.url}"
+              - text: ${translations.table.headers.url}
             - columnheader "${translations.table.headers.organization}":
-              - button "${translations.table.headers.organization}"
+              - text: ${translations.table.headers.organization}
             - columnheader "${translations.table.headers.status}":
-              - button "${translations.table.headers.status}"
+              - text: ${translations.table.headers.status}
       `);
 
     await runAccessibilityTests(sharedPage, testInfo);

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

@@ -14,40 +14,33 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent, MouseEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 import Checkbox from '@mui/material/Checkbox';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
 
 import { useGitlabConfigured } from '../../hooks';
 import { useImportFlow } from '../../hooks/useImportFlow';
 import { useTranslation } from '../../hooks/useTranslation';
-import { ImportFlow, Order } from '../../types';
+import { ImportFlow } from '../../types';
 import { getRepositoriesListColumns } from '../Repositories/RepositoriesListColumns';
 import { getOrganizationsColumnHeader } from './OrganizationsColumnHeader';
 import { getRepositoriesColumnHeader } from './RepositoriesColumnHeader';
 import { getReposSelectDrawerColumnHeader } from './ReposSelectDrawerColumnHeader';
 
 export const RepositoriesHeader = ({
   onSelectAllClick,
-  order,
-  orderBy,
   numSelected,
   rowCount,
-  onRequestSort,
   isDataLoading,
   showOrganizations,
   showImportJobs,
   isRepoSelectDrawer = false,
   isApprovalToolGitlab = false,
 }: {
   numSelected?: number;
-  onRequestSort: (event: MouseEvent<unknown>, property: any) => void;
-  order: Order;
-  orderBy: string | undefined;
   rowCount?: number;
   isDataLoading?: boolean;
   showOrganizations?: boolean;
@@ -57,9 +50,6 @@ export const RepositoriesHeader = ({
   onSelectAllClick?: (event: ChangeEvent<HTMLInputElement>) => void;
 }) => {
   const { t } = useTranslation();
-  const createSortHandler = (property: any) => (event: MouseEvent<unknown>) => {
-    onRequestSort(event, property);
-  };
 
   const gitlabConfigured = useGitlabConfigured();
   const importFlow = useImportFlow();
@@ -110,7 +100,6 @@ export const RepositoriesHeader = ({
               padding: tableCellStyle(),
               fontWeight: '700',
             }}
-            sortDirection={orderBy === headCell.field ? order : 'asc'}
           >
             {index === 0 && !showOrganizations && !showImportJobs && (
               <Checkbox
@@ -134,14 +123,7 @@ export const RepositoriesHeader = ({
                 disabled={isDataLoading}
               />
             )}
-            <TableSortLabel
-              active={orderBy === headCell.field}
-              direction={orderBy === headCell.field ? order : 'asc'}
-              onClick={createSortHandler(headCell.field)}
-              disabled={headCell.sorting === false}
-            >
-              {headCell.title}
-            </TableSortLabel>
+            {headCell.title}
           </TableCell>
         ))}
       </TableRow>

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

@@ -31,7 +31,6 @@ import {
   AddedRepositories,
   AddRepositoriesFormValues,
   AddRepositoryData,
-  Order,
   RepositoryStatus,
 } from '../../types';
 import {
@@ -84,8 +83,6 @@ export const RepositoriesTable = ({
   const { t } = useTranslation();
   const { setFieldValue, values, setStatus } =
     useFormikContext<AddRepositoriesFormValues>();
-  const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState<string>();
   const [selected, setSelected] = useState<AddedRepositories>({});
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const [tableData, setTableData] = useState<AddRepositoryData[]>([]);
@@ -139,17 +136,11 @@ export const RepositoriesTable = ({
       : evaluateRowForOrg(tableData, values.repositories);
 
     filteredRows = [...(filteredRows || [])]?.sort(
-      getComparator(order, orderBy as string),
+      getComparator('asc', 'repoName'),
     );
 
     return filteredRows;
-  }, [tableData, order, orderBy, values?.repositories, showOrganizations]);
-
-  const handleRequestSort = (_event: MouseEvent<unknown>, property: string) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
+  }, [tableData, values?.repositories, showOrganizations]);
 
   const updateSelectedRepositories = useCallback(
     (newSelected: AddedRepositories) => {
@@ -330,10 +321,7 @@ export const RepositoriesTable = ({
                 : selectedRepositoriesOnActivePage.length
             }
             isDataLoading={loading}
-            order={order}
-            orderBy={orderBy}
             onSelectAllClick={handleSelectAllClick}
-            onRequestSort={handleRequestSort}
             rowCount={getRowCount() || 0}
             showOrganizations={drawerOrganization ? false : showOrganizations}
             isRepoSelectDrawer={!!drawerOrganization}

workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import type { MouseEvent } from 'react';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Table } from '@backstage/core-components';
@@ -45,20 +44,13 @@ export const RepositoriesList = () => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const { t } = useTranslation();
-  const [order, setOrder] = useState<SortingOrderEnum>(SortingOrderEnum.Asc);
-  const [orderBy, setOrderBy] = useState<string>('repoName');
   const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();
   const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
   const [pageNumber, setPageNumber] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const gitlabConfigured = useGitlabConfigured();
 
-  const orderByColumn = useMemo(() => {
-    return orderBy?.replace(/\.([a-zA-Z])/g, (_, char) =>
-      char.toUpperCase('en-US'),
-    ) as keyof typeof AddedRepositoryColumnNameEnum;
-  }, [orderBy]);
   const {
     data: importJobs,
     error: errJobs,
@@ -68,8 +60,8 @@ export const RepositoriesList = () => {
     pageNumber + 1,
     rowsPerPage,
     debouncedSearch,
-    AddedRepositoryColumnNameEnum[orderByColumn],
-    order,
+    AddedRepositoryColumnNameEnum.repoName,
+    SortingOrderEnum.Asc,
   );
 
   const closeDialog = () => {
@@ -87,12 +79,6 @@ export const RepositoriesList = () => {
     setOpenDrawer(false);
   };
 
-  const handleRequestSort = (_event: MouseEvent<unknown>, property: string) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? SortingOrderEnum.Desc : SortingOrderEnum.Asc);
-    setOrderBy(property);
-  };
-
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     pageNumber > 0 ? Math.max(0, rowsPerPage - importJobs.totalJobs) : 0;
@@ -135,14 +121,7 @@ export const RepositoriesList = () => {
           },
         }}
         components={{
-          Header: () => (
-            <RepositoriesHeader
-              order={order}
-              orderBy={orderBy}
-              onRequestSort={handleRequestSort}
-              showImportJobs
-            />
-          ),
+          Header: () => <RepositoriesHeader showImportJobs />,
           Body: () => (
             <AddedRepositoriesTableBody
               error={errJobs}

workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.tsx

@@ -102,6 +102,13 @@ export const descendingComparator = (
     value1 = order[(value1 as ImportStatus) || RepositoryStatus.NotGenerated];
     value2 = order[(value2 as ImportStatus) || RepositoryStatus.NotGenerated];
   }
+
+  // Convert strings to lowercase for case-insensitive comparison
+  if (typeof value1 === 'string' && typeof value2 === 'string') {
+    value1 = value1.toLowerCase();
+    value2 = value2.toLowerCase();
+  }
+
   if (value2 < value1) {
     return -1;
   }