add pagination for workflows

api-contracts/openapi/paths/workflow/workflow.yaml

@@ -13,6 +13,28 @@ withTenant:
           format: uuid
           minLength: 36
           maxLength: 36
+      - description: The number to skip
+        in: query
+        name: offset
+        required: false
+        schema:
+          type: integer
+          format: int
+          default: 0
+      - description: The number to limit by
+        in: query
+        name: limit
+        required: false
+        schema:
+          type: integer
+          format: int
+          default: 50
+      - description: Search by name
+        in: query
+        name: name
+        required: false
+        schema:
+          type: string
     responses:
       "200":
         content:

api/v1/server/handlers/workflows/list.go

@@ -14,12 +14,30 @@ import (
 func (t *WorkflowService) WorkflowList(ctx echo.Context, request gen.WorkflowListRequestObject) (gen.WorkflowListResponseObject, error) {
 	tenant := ctx.Get("tenant").(*db.TenantModel)
 
-	limit := 50
-	offset := 0
+	if request.Params.Limit == nil {
+		request.Params.Limit = new(int)
+		*request.Params.Limit = 50
+	}
+
+	if request.Params.Offset == nil {
+		request.Params.Offset = new(int)
+		*request.Params.Offset = 0
+	}
+
+	if request.Params.Name == nil {
+		request.Params.Name = new(string)
+
+	}
+
+	name := *request.Params.Name
+
+	limit := *request.Params.Limit
+	offset := *request.Params.Offset
 
 	listOpts := &repository.ListWorkflowsOpts{
 		Limit:  &limit,
 		Offset: &offset,
+		Name:   &name,
 	}
 
 	listResp, err := t.config.APIRepository.Workflow().ListWorkflows(tenant.ID, listOpts)

frontend/app/src/components/molecules/data-table/data-table-pagination.tsx

@@ -19,20 +19,27 @@ import { Label } from '@radix-ui/react-label';
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   onSetPageSize?: (pageSize: number) => void;
+  showSelectedRows?: boolean;
 }
 
 export function DataTablePagination<TData>({
   table,
   onSetPageSize,
+  showSelectedRows = true,
 }: DataTablePaginationProps<TData>) {
   const pagination = table.getState().pagination;
 
   return (
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-gray-600 dark:text-gray-400">
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {showSelectedRows && (
+          <div>
+            {table.getFilteredSelectedRowModel().rows.length} of{' '}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+        )}
       </div>
+
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
           <Label

frontend/app/src/components/molecules/data-table/data-table.tsx

@@ -55,6 +55,7 @@ interface DataTableProps<TData extends IDGetter, TValue> {
   setColumnFilters?: OnChangeFn<ColumnFiltersState>;
   pagination?: PaginationState;
   setPagination?: OnChangeFn<PaginationState>;
+  showSelectedRows?: boolean;
   pageCount?: number;
   onSetPageSize?: (pageSize: number) => void;
   showColumnToggle?: boolean;
@@ -99,6 +100,7 @@ export function DataTable<TData extends IDGetter, TValue>({
   setPagination,
   pageCount,
   onSetPageSize,
+  showSelectedRows = true,
   showColumnToggle,
   columnVisibility,
   setColumnVisibility,
@@ -259,7 +261,11 @@ export function DataTable<TData extends IDGetter, TValue>({
         {!card ? getTable() : getCards()}
       </div>
       {pagination && (
-        <DataTablePagination table={table} onSetPageSize={onSetPageSize} />
+        <DataTablePagination
+          table={table}
+          onSetPageSize={onSetPageSize}
+          showSelectedRows={showSelectedRows}
+        />
       )}
     </div>
   );

frontend/app/src/lib/api/generated/Api.ts

@@ -1116,10 +1116,30 @@ export class Api<SecurityDataType = unknown> extends HttpClient<SecurityDataType
    * @request GET:/api/v1/tenants/{tenant}/workflows
    * @secure
    */
-  workflowList = (tenant: string, params: RequestParams = {}) =>
+  workflowList = (
+    tenant: string,
+    query?: {
+      /**
+       * The number to skip
+       * @format int
+       * @default 0
+       */
+      offset?: number;
+      /**
+       * The number to limit by
+       * @format int
+       * @default 50
+       */
+      limit?: number;
+      /** Search by name */
+      name?: string;
+    },
+    params: RequestParams = {},
+  ) =>
     this.request<WorkflowList, APIErrors>({
       path: `/api/v1/tenants/${tenant}/workflows`,
       method: 'GET',
+      query: query,
       secure: true,
       format: 'json',
       ...params,

frontend/app/src/lib/api/queries.ts

@@ -8,6 +8,7 @@ type ListEventQuery = Parameters<typeof api.eventList>[1];
 type ListRateLimitsQuery = Parameters<typeof api.rateLimitList>[1];
 type ListLogLineQuery = Parameters<typeof api.logLineList>[1];
 type ListWorkflowRunsQuery = Parameters<typeof api.workflowRunList>[1];
+type ListWorkflowsQuery = Parameters<typeof api.workflowList>[1];
 export type ListCloudLogsQuery = Parameters<typeof cloudApi.logList>[1];
 export type GetCloudMetricsQuery = Parameters<typeof cloudApi.metricsCpuGet>[1];
 type WorkflowRunMetrics = Parameters<typeof api.workflowRunGetMetrics>[1];
@@ -159,9 +160,9 @@ export const queries = createQueryKeyStore({
     }),
   },
   workflows: {
-    list: (tenant: string) => ({
+    list: (tenant: string, query?: ListWorkflowsQuery) => ({
       queryKey: ['workflow:list', tenant],
-      queryFn: async () => (await api.workflowList(tenant)).data,
+      queryFn: async () => (await api.workflowList(tenant, query)).data,
     }),
     get: (workflow: string) => ({
       queryKey: ['workflow:get', workflow],

frontend/app/src/pages/main/events/index.tsx

@@ -314,7 +314,7 @@ function EventsTable() {
     isLoading: workflowKeysIsLoading,
     error: workflowKeysError,
   } = useQuery({
-    ...queries.workflows.list(tenant.metadata.id),
+    ...queries.workflows.list(tenant.metadata.id, { limit: 200 }),
   });
 
   const workflowKeyFilters = useMemo((): FilterOption[] => {

frontend/app/src/pages/main/recurring/components/recurring-table.tsx

@@ -157,7 +157,7 @@ export function CronsTable() {
   };
 
   const { data: workflowKeys } = useQuery({
-    ...queries.workflows.list(tenant.metadata.id),
+    ...queries.workflows.list(tenant.metadata.id, { limit: 200 }),
   });
 
   const workflowKeyFilters = useMemo((): FilterOption[] => {

frontend/app/src/pages/main/scheduled-runs/components/scheduled-runs-table.tsx

@@ -199,7 +199,7 @@ export function ScheduledRunsTable({
     isLoading: workflowKeysIsLoading,
     error: workflowKeysError,
   } = useQuery({
-    ...queries.workflows.list(tenant.metadata.id),
+    ...queries.workflows.list(tenant.metadata.id, { limit: 200 }),
   });
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

frontend/app/src/pages/main/workflow-runs/components/workflow-runs-table.tsx

@@ -332,7 +332,7 @@ export function WorkflowRunsTable({
     isLoading: workflowKeysIsLoading,
     error: workflowKeysError,
   } = useQuery({
-    ...queries.workflows.list(tenant.metadata.id),
+    ...queries.workflows.list(tenant.metadata.id, { limit: 200 }),
   });
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

frontend/app/src/pages/main/workflows/$workflow/components/trigger-workflow-form.tsx

@@ -80,7 +80,7 @@ export function TriggerWorkflowForm({
   });
 
   const { data: workflowKeys, isFetched } = useQuery({
-    ...queries.workflows.list(tenant.metadata.id),
+    ...queries.workflows.list(tenant.metadata.id, { limit: 200 }),
   });
 
   const workflow = useMemo(() => {