Add API PaginatedTable component (#2261)

* Refactor PaginatedTable to include API paginated option

* Refactor schedules table to API PaginatedTable

* export PaginatedRequest type and adjust styles

* Remove unnecessary styles

* Update message props and use slot fallback

Co-authored-by: Ross Edfort <[email protected]>

---------

Co-authored-by: Ross Edfort <[email protected]>
Co-authored-by: Ross Edfort <[email protected]>

Author: laurakwhit

src/lib/components/schedule/schedules-table-row.svelte

@@ -3,7 +3,6 @@
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import TableRow from '$lib/holocene/table/table-row.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import { formatDate } from '$lib/utilities/format-date';
@@ -43,7 +42,7 @@
   });
 </script>
 
-<TableRow class="schedule-row">
+<tr>
   <td class="cell">
     <WorkflowStatus status={schedule?.info?.paused ? 'Paused' : 'Running'} />
   </td>
@@ -53,7 +52,7 @@
   <td class="cell whitespace-pre-line break-words max-md:hidden">
     {schedule?.info?.workflowType?.name ?? ''}
   </td>
-  <td class="cell links truncate max-xl:hidden">
+  <td class="cell truncate">
     {#each sortRecentActions(schedule?.info?.recentActions) as run}
       <p>
         <Link
@@ -69,7 +68,7 @@
       </p>
     {/each}
   </td>
-  <td class="cell truncate max-xl:hidden">
+  <td class="cell truncate">
     {#each schedule?.info?.futureActionTimes?.slice(0, 5) ?? [] as run}
       <div>
         {formatDate(run, $timeFormat, {
@@ -79,18 +78,14 @@
       </div>
     {/each}
   </td>
-  <td class="cell hidden xl:table-cell">
+  <td class="cell">
     <p>{@html translate('common.timezone', { timezone: timezoneName })}</p>
     <ScheduleBasicFrequency {calendar} {interval} />
   </td>
-</TableRow>
+</tr>
 
 <style lang="postcss">
   .cell {
     @apply p-2 text-left;
   }
-
-  :global(.schedule-spec-row td) {
-    @apply !border-t-0;
-  }
 </style>

src/lib/components/schedule/schedules-table.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
-  import PaginatedTable from '$lib/holocene/table/paginated-table.svelte';
+  import TableEmptyState from '$lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte';
+  import PaginatedTable from '$lib/holocene/table/paginated-table/paginated.svelte';
   import { translate } from '$lib/i18n/translate';
   import { fetchAllChildWorkflows } from '$lib/services/workflow-service';
   import { showChildWorkflows } from '$lib/stores/filters';
@@ -61,6 +62,7 @@
 </script>
 
 <PaginatedTable
+  aria-label={translate('common.workflows')}
   perPageLabel={translate('common.per-page')}
   nextPageButtonLabel={translate('common.next-page')}
   previousPageButtonLabel={translate('common.previous-page')}
@@ -103,5 +105,9 @@
       {/each}
     {/if}
   {/each}
-  <slot name="cloud" slot="cloud" />
+  <svelte:fragment slot="empty" let:updating>
+    <TableEmptyState {updating}>
+      <slot name="cloud" slot="cloud" />
+    </TableEmptyState>
+  </svelte:fragment>
 </PaginatedTable>

src/lib/components/workflow/workflows-summary-configurable-table.svelte

@@ -61,14 +61,14 @@
 
 <style lang="postcss">
   .batch-actions-checkbox-table-cell {
-    @apply w-10 rounded-tl-lg px-2;
+    @apply w-10 rounded-tl-lg;
   }
 
   .batch-actions-table-cell {
-    @apply overflow-visible whitespace-nowrap px-2 text-left text-sm font-medium;
+    @apply overflow-visible whitespace-nowrap text-sm font-medium;
   }
 
   .configuration-button-table-cell {
-    @apply h-10 w-10 px-2 py-1;
+    @apply h-10 w-10 py-1;
   }
 </style>

src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte

@@ -47,7 +47,7 @@
   class:child
 >
   {#if !empty && $supportsBulkActions}
-    <td class="relative px-2">
+    <td class="relative">
       <Checkbox
         {label}
         labelHidden