🪟 🎨 Connector Builder UI: Rename offset pagination fields

airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx

@@ -1,4 +1,5 @@
 import { useField } from "formik";
+import capitalize from "lodash/capitalize";
 
 import GroupControls from "components/GroupControls";
 import { ControlLabels } from "components/LabeledControl";
@@ -39,38 +40,6 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
   };
   const toggledOn = field.value !== undefined;
 
-  const pageTokenOption = (
-    <GroupControls
-      label={
-        <ControlLabels
-          label="Page token option"
-          infoTooltipContent="Configures how the page token will be sent in requests to the source API"
-        />
-      }
-    >
-      <InjectRequestOptionFields path={streamFieldPath("paginator.pageTokenOption")} descriptor="page token" />
-    </GroupControls>
-  );
-
-  const pageSizeOption = (
-    <ToggleGroupField<RequestOption>
-      label="Page size option"
-      tooltip="Configures how the page size will be sent in requests to the source API"
-      fieldPath={streamFieldPath("paginator.pageSizeOption")}
-      initialValues={{
-        inject_into: "request_parameter",
-        type: "RequestOption",
-        field_name: "",
-      }}
-    >
-      <InjectRequestOptionFields
-        path={streamFieldPath("paginator.pageSizeOption")}
-        descriptor="page size"
-        excludeInjectIntoValues={["path"]}
-      />
-    </ToggleGroupField>
-  );
-
   return (
     <BuilderCard
       toggleConfig={{
@@ -97,11 +66,11 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                 <BuilderField
                   type="number"
                   path={streamFieldPath("paginator.strategy.page_size")}
-                  label="Page size"
-                  tooltip="Set the size of each page"
+                  label="Limit"
+                  tooltip="Set the limit of each page"
                 />
-                {pageSizeOption}
-                {pageTokenOption}
+                <PageSizeOption label="limit" streamFieldPath={streamFieldPath} />
+                <PageTokenOption label="offset" streamFieldPath={streamFieldPath} />
               </>
             ),
           },
@@ -123,8 +92,8 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                   tooltip="Page number to start requesting pages from"
                   optional
                 />
-                {pageSizeOption}
-                {pageTokenOption}
+                <PageSizeOption label="page size" streamFieldPath={streamFieldPath} />
+                <PageTokenOption label="page number" streamFieldPath={streamFieldPath} />
               </>
             ),
           },
@@ -158,8 +127,10 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                   tooltip="Set the size of each page"
                   optional
                 />
-                {pageSizeField.value && pageSizeField.value !== "" && pageSizeOption}
-                {pageTokenOption}
+                {pageSizeField.value && pageSizeField.value !== "" && (
+                  <PageSizeOption label="page size" streamFieldPath={streamFieldPath} />
+                )}
+                <PageTokenOption label="cursor value" streamFieldPath={streamFieldPath} />
               </>
             ),
           },
@@ -168,3 +139,51 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
     </BuilderCard>
   );
 };
+
+const PageTokenOption = ({
+  label,
+  streamFieldPath,
+}: {
+  label: string;
+  streamFieldPath: (fieldPath: string) => string;
+}): JSX.Element => {
+  return (
+    <GroupControls
+      label={
+        <ControlLabels
+          label={`${capitalize(label)} request option`}
+          infoTooltipContent={`Configures how the ${label} will be sent in requests to the source API`}
+        />
+      }
+    >
+      <InjectRequestOptionFields path={streamFieldPath("paginator.pageTokenOption")} descriptor={label} />
+    </GroupControls>
+  );
+};
+
+const PageSizeOption = ({
+  label,
+  streamFieldPath,
+}: {
+  label: string;
+  streamFieldPath: (fieldPath: string) => string;
+}): JSX.Element => {
+  return (
+    <ToggleGroupField<RequestOption>
+      label={`${capitalize(label)} request option`}
+      tooltip={`Configures how the ${label} will be sent in requests to the source API`}
+      fieldPath={streamFieldPath("paginator.pageSizeOption")}
+      initialValues={{
+        inject_into: "request_parameter",
+        type: "RequestOption",
+        field_name: "",
+      }}
+    >
+      <InjectRequestOptionFields
+        path={streamFieldPath("paginator.pageSizeOption")}
+        descriptor={label}
+        excludeInjectIntoValues={["path"]}
+      />
+    </ToggleGroupField>
+  );
+};