Implement sorting functionality for project tables (#2224)

Fixes OPS-4153

<img width="2742" height="568" alt="image"
src="https://github.com/user-attachments/assets/24d8a32c-7e70-4a76-8880-2ff06538a72d"
/>

---------

Author: rmnsnpk

packages/react-ui/src/app/features/connections/components/connection-table.tsx

@@ -1,6 +1,7 @@
 import { PermissionGuard } from '@/app/common/components/permission-guard';
 import { appConnectionsApi } from '@/app/features/connections/lib/app-connections-api';
 import { handleMutationError } from '@/app/interceptors/interceptor-utils';
+import { isSortDirection } from '@/app/lib/sort-direction';
 import { formatUtils } from '@/app/lib/utils';
 import {
   BlockIcon,
@@ -16,6 +17,7 @@ import {
 } from '@openops/components/ui';
 import {
   AppConnection,
+  AppConnectionSortBy,
   AppConnectionStatus,
   MinimalFlow,
   Permission,
@@ -34,6 +36,15 @@ import { useConnectionsContext } from './connections-context';
 import { DeleteConnectionDialog } from './delete-connection-dialog';
 import { EditConnectionDialog } from './edit-connection-dialog';
 
+const isAppConnectionSortBy = (
+  sortBy?: string,
+): sortBy is AppConnectionSortBy => {
+  return (
+    !!sortBy &&
+    Object.values(AppConnectionSortBy).includes(sortBy as AppConnectionSortBy)
+  );
+};
+
 type BlockIconWithBlockNameProps = {
   authProviderKey: string;
 };
@@ -160,6 +171,7 @@ const columns: (
   return [
     {
       accessorKey: 'authProviderKey',
+      enableSorting: false,
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title={t('App')} />
       ),
@@ -230,6 +242,7 @@ const columns: (
     },
     {
       accessorKey: 'actions',
+      enableSorting: false,
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="" />
       ),
@@ -264,6 +277,12 @@ const fetchData = async (
     cursor: pagination.cursor,
     limit: pagination.limit ?? 10,
     status: params.status,
+    sortBy: isAppConnectionSortBy(pagination.sortBy)
+      ? pagination.sortBy
+      : undefined,
+    sortDirection: isSortDirection(pagination.sortDirection)
+      ? pagination.sortDirection
+      : undefined,
   });
 };
 
@@ -278,6 +297,7 @@ function AppConnectionsTable() {
           fetchData={fetchData}
           refresh={refresh}
           filters={filters}
+          enableSorting={true}
         />
       </div>
     </div>

packages/react-ui/src/app/features/flow-runs/hooks/useRunsTableColumns.tsx

@@ -137,6 +137,7 @@ export const useRunsTableColumns = ({
         },
         {
           accessorKey: 'duration',
+          enableSorting: false,
           header: ({ column }) => (
             <DataTableColumnHeader column={column} title={t('Duration')} />
           ),
@@ -151,6 +152,7 @@ export const useRunsTableColumns = ({
         },
         {
           accessorKey: 'actions',
+          enableSorting: false,
           header: () => null,
           cell: ({ row }) => {
             const isFailed = isFailedState(row.original.status);

packages/react-ui/src/app/features/flows/flows-columns.tsx

@@ -34,6 +34,7 @@ export const nameColumn: FlowColumnDef = {
 
 export const integrationsColumn: FlowColumnDef = {
   accessorKey: 'integrations',
+  enableSorting: false,
   header: ({ column }) => (
     <DataTableColumnHeader column={column} title={t('Integrations')} />
   ),
@@ -98,6 +99,7 @@ export const updatedColumn: FlowColumnDef = {
 
 export const statusColumn: FlowColumnDef = {
   accessorKey: 'status',
+  enableSorting: false,
   header: ({ column }) => (
     <DataTableColumnHeader column={column} title={t('Status')} />
   ),
@@ -118,6 +120,7 @@ export const statusColumn: FlowColumnDef = {
 
 export const validColumn: FlowColumnDef = {
   accessorKey: 'valid',
+  enableSorting: false,
   header: ({ column }) => <DataTableColumnHeader column={column} title="" />,
   cell: ({ row }) => {
     const valid = row.original.version.valid;
@@ -154,6 +157,7 @@ export const createActionsColumn = (
   onTableRefresh: () => void,
 ): FlowColumnDef => ({
   accessorKey: 'actions',
+  enableSorting: false,
   header: ({ column }) => <DataTableColumnHeader column={column} title="" />,
   cell: ({ row }) => {
     const flow = row.original;

packages/react-ui/src/app/lib/sort-direction.ts

@@ -0,0 +1,10 @@
+import { SortDirection } from '@openops/shared';
+
+export function isSortDirection(
+  sortDirection?: string,
+): sortDirection is SortDirection {
+  return (
+    !!sortDirection &&
+    Object.values(SortDirection).includes(sortDirection as SortDirection)
+  );
+}

packages/react-ui/src/app/routes/flows/index.tsx

@@ -17,7 +17,17 @@ import {
 import { flowsApi } from '@/app/features/flows/lib/flows-api';
 import { FlowsFolderBreadcrumbsManager } from '@/app/features/folders/component/folder-breadcrumbs-manager';
 import { FLOWS_TABLE_FILTERS } from '@/app/features/folders/lib/flows-table-filters';
-import { FlowStatus, FlowVersionState, Permission } from '@openops/shared';
+import { isSortDirection } from '@/app/lib/sort-direction';
+import {
+  FlowSortBy,
+  FlowStatus,
+  FlowVersionState,
+  Permission,
+} from '@openops/shared';
+
+const isFlowSortBy = (sortBy?: string): sortBy is FlowSortBy => {
+  return !!sortBy && Object.values(FlowSortBy).includes(sortBy as FlowSortBy);
+};
 
 const FlowsPage = () => {
   useDefaultSidebarState('expanded');
@@ -43,6 +53,10 @@ const FlowsPage = () => {
       return flowsApi.list({
         cursor: pagination.cursor,
         limit: pagination.limit ?? 10,
+        sortBy: isFlowSortBy(pagination.sortBy) ? pagination.sortBy : undefined,
+        sortDirection: isSortDirection(pagination.sortDirection)
+          ? pagination.sortDirection
+          : undefined,
         status: params.status,
         versionState: params.versionState,
         name: params.name,
@@ -75,6 +89,7 @@ const FlowsPage = () => {
             columns={columns}
             fetchData={fetchData}
             filters={FLOWS_TABLE_FILTERS}
+            enableSorting={true}
             columnVisibility={columnVisibility}
             navigationExcludedColumns={['status', 'actions']}
             refresh={tableRefresh}

packages/react-ui/src/app/routes/runs/index.tsx

@@ -1,5 +1,9 @@
 import { DataTable, PaginationParams } from '@openops/components/ui';
-import { FlowRunStatus, FlowRunTriggerSource } from '@openops/shared';
+import {
+  FlowRunSortBy,
+  FlowRunStatus,
+  FlowRunTriggerSource,
+} from '@openops/shared';
 import { t } from 'i18next';
 import { CheckIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -11,8 +15,22 @@ import { useRunsTableColumns } from '@/app/features/flow-runs/hooks/useRunsTable
 import { flowRunUtils } from '@/app/features/flow-runs/lib/flow-run-utils';
 import { flowRunsApi } from '@/app/features/flow-runs/lib/flow-runs-api';
 import { flowsHooks } from '@/app/features/flows/lib/flows-hooks';
+import { isSortDirection } from '@/app/lib/sort-direction';
 import { formatUtils } from '@/app/lib/utils';
 
+const isFlowRunSortBy = (sortBy?: string): sortBy is FlowRunSortBy => {
+  return (
+    !!sortBy && Object.values(FlowRunSortBy).includes(sortBy as FlowRunSortBy)
+  );
+};
+
+const toFlowRunSortBy = (sortBy?: string): FlowRunSortBy | undefined => {
+  if (sortBy === 'flowId') {
+    return FlowRunSortBy.FLOW_NAME;
+  }
+  return isFlowRunSortBy(sortBy) ? sortBy : undefined;
+};
+
 const fetchData = async (
   params: {
     flowId: string[];
@@ -31,6 +49,10 @@ const fetchData = async (
     limit: pagination.limit ?? 10,
     createdAfter: pagination.createdAfter,
     createdBefore: pagination.createdBefore,
+    sortBy: toFlowRunSortBy(pagination.sortBy),
+    sortDirection: isSortDirection(pagination.sortDirection)
+      ? pagination.sortDirection
+      : undefined,
   });
 };
 
@@ -110,6 +132,7 @@ const FlowRunsPage = () => {
         <DataTable
           columns={columns}
           fetchData={fetchData}
+          enableSorting={true}
           navigationExcludedColumns={['actions']}
           filters={filters}
           refresh={refresh}

packages/server/api/src/app/app-connection/app-connection-service/app-connection-service.ts

@@ -7,6 +7,7 @@ import {
 import {
   AppConnection,
   AppConnectionId,
+  AppConnectionSortBy,
   AppConnectionStatus,
   AppConnectionType,
   AppConnectionValue,
@@ -21,6 +22,7 @@ import {
   PatchAppConnectionRequestBody as PatchAppConnectionRequestBodySchema,
   ProjectId,
   SeekPage,
+  SortDirection,
   UpsertAppConnectionRequestBody,
   UpsertAppConnectionRequestBody as UpsertAppConnectionRequestBodySchema,
   UserId,
@@ -48,6 +50,8 @@ import { oauth2Util } from './oauth2/oauth2-util';
 import { engineValidateAuth } from './validate-auth';
 
 const repo = repoFactory(AppConnectionEntity);
+const DEFAULT_APP_CONNECTION_SORT_BY = AppConnectionSortBy.UPDATED;
+const DEFAULT_APP_CONNECTION_SORT_DIRECTION = SortDirection.DESC;
 
 export const appConnectionService = {
   async upsert(params: UpsertParams): Promise<AppConnection> {
@@ -232,20 +236,26 @@ export const appConnectionService = {
     limit,
     connectionsIds,
     authProviders,
+    sortBy,
+    sortDirection,
   }: ListParams): Promise<SeekPage<AppConnection>> {
+    const sortingConfig = resolveAppConnectionSorting({
+      sortBy,
+      sortDirection,
+    });
     const decodedCursor = paginationHelper.decodeCursor(cursorRequest);
 
     const paginator = buildPaginator({
       entity: AppConnectionEntity,
       query: {
         limit,
-        order: 'DESC',
+        order: sortingConfig.order,
         afterCursor: decodedCursor.nextCursor,
         beforeCursor: decodedCursor.previousCursor,
       },
       customPaginationColumn: {
-        columnPath: 'updated',
-        columnName: 'app_connection.updated',
+        columnPath: sortingConfig.columnPath,
+        columnName: sortingConfig.columnName,
       },
     });
 
@@ -547,6 +557,8 @@ type ListParams = {
   status: AppConnectionStatus[] | undefined;
   limit: number;
   authProviders: string[] | undefined;
+  sortBy?: AppConnectionSortBy;
+  sortDirection?: SortDirection;
 };
 
 type CountByProjectParams = {
@@ -557,3 +569,42 @@ type ValidateConnectionValueParams = {
   connection: UpsertAppConnectionRequestBody;
   projectId: ProjectId;
 };
+
+function resolveAppConnectionSorting({
+  sortBy,
+  sortDirection,
+}: {
+  sortBy?: AppConnectionSortBy;
+  sortDirection?: SortDirection;
+}): {
+  columnPath: string;
+  columnName: string;
+  order: 'ASC' | 'DESC';
+} {
+  const resolvedSortBy = sortBy ?? DEFAULT_APP_CONNECTION_SORT_BY;
+  const resolvedSortDirection =
+    sortDirection ?? DEFAULT_APP_CONNECTION_SORT_DIRECTION;
+
+  const sortByToColumnMap: Record<
+    AppConnectionSortBy,
+    { columnPath: string; columnName: string }
+  > = {
+    [AppConnectionSortBy.NAME]: {
+      columnPath: 'name',
+      columnName: 'app_connection.name',
+    },
+    [AppConnectionSortBy.CREATED]: {
+      columnPath: 'created',
+      columnName: 'app_connection.created',
+    },
+    [AppConnectionSortBy.UPDATED]: {
+      columnPath: 'updated',
+      columnName: 'app_connection.updated',
+    },
+  };
+
+  return {
+    ...sortByToColumnMap[resolvedSortBy],
+    order: resolvedSortDirection === SortDirection.ASC ? 'ASC' : 'DESC',
+  };
+}

packages/server/api/src/app/app-connection/app-connection.controller.ts

@@ -79,6 +79,8 @@ export const appConnectionController: FastifyPluginCallbackTypebox = (
         cursorRequest: cursor ?? null,
         limit: limit ?? DEFAULT_PAGE_SIZE,
         authProviders,
+        sortBy: request.query.sortBy,
+        sortDirection: request.query.sortDirection,
       });
 
       return {

packages/server/api/src/app/flows/flow-run/flow-run-controller.ts

@@ -47,6 +47,8 @@ export const flowRunController: FastifyPluginCallbackTypebox = (
       limit: Number(request.query.limit ?? DEFAULT_PAGING_LIMIT),
       createdAfter: request.query.createdAfter,
       createdBefore: request.query.createdBefore,
+      sortBy: request.query.sortBy,
+      sortDirection: request.query.sortDirection,
     });
   });