Add pagination tab to query UI

packages/builder/src/constants/backend/index.js

@@ -211,3 +211,13 @@ export const RestBodyTypes = [
   { name: "raw (XML)", value: "xml" },
   { name: "raw (Text)", value: "text" },
 ]
+
+export const PaginationTypes = [
+  { label: "Page number based", value: "page" },
+  { label: "Cursor based", value: "cursor" },
+]
+
+export const PaginationLocations = [
+  { label: "Query parameters", value: "query" },
+  { label: "Request body", value: "body" },
+]

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -38,6 +38,8 @@
   import {
     RestBodyTypes as bodyTypes,
     SchemaTypeOptions,
+    PaginationLocations,
+    PaginationTypes,
   } from "constants/backend"
   import JSONPreview from "components/integration/JSONPreview.svelte"
   import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
@@ -203,6 +205,9 @@
     if (query && !query.fields.bodyType) {
       query.fields.bodyType = "none"
     }
+    if (query && !query.pagination) {
+      query.pagination = {}
+    }
   })
 </script>
 
@@ -270,6 +275,43 @@
             />
             <RestBodyInput bind:bodyType={query.fields.bodyType} bind:query />
           </Tab>
+          <Tab title="Pagination">
+            <div class="pagination">
+              <Select
+                label="Pagination type"
+                bind:value={query.pagination.type}
+                options={PaginationTypes}
+                placeholder="None"
+              />
+              {#if query.pagination.type}
+                <Select
+                  label="Pagination parameters location"
+                  bind:value={query.pagination.location}
+                  options={PaginationLocations}
+                  placeholer="Choose where to send pagination parameters"
+                />
+                <Input
+                  label={query.pagination.type === "page"
+                    ? "Page number parameter"
+                    : "Request cursor parameter"}
+                  bind:value={query.pagination.pageParam}
+                />
+                <Input
+                  label={query.pagination.type === "page"
+                    ? "Page size parameter"
+                    : "Request limit parameter"}
+                  bind:value={query.pagination.sizeParam}
+                  info="asdasd"
+                />
+                {#if query.pagination.type === "cursor"}
+                  <Input
+                    label="Response body parameter for cursor"
+                    bind:value={query.pagination.responseParam}
+                  />
+                {/if}
+              {/if}
+            </div>
+          </Tab>
           <Tab title="Transformer">
             <Layout noPadding>
               {#if !$flags.queryTransformerBanner}
@@ -458,4 +500,9 @@
   .auth-select {
     width: 200px;
   }
+  .pagination {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-m);
+  }
 </style>