diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx index 0a6878c28fa07..062fbb1f80e8e 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx +++ b/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 = ({ streamFiel }; const toggledOn = field.value !== undefined; - const pageTokenOption = ( - - } - > - - - ); - - const pageSizeOption = ( - - 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: "", - }} - > - - - ); - return ( = ({ streamFiel - {pageSizeOption} - {pageTokenOption} + + ), }, @@ -123,8 +92,8 @@ export const PaginationSection: React.FC = ({ streamFiel tooltip="Page number to start requesting pages from" optional /> - {pageSizeOption} - {pageTokenOption} + + ), }, @@ -158,8 +127,10 @@ export const PaginationSection: React.FC = ({ streamFiel tooltip="Set the size of each page" optional /> - {pageSizeField.value && pageSizeField.value !== "" && pageSizeOption} - {pageTokenOption} + {pageSizeField.value && pageSizeField.value !== "" && ( + + )} + ), }, @@ -168,3 +139,51 @@ export const PaginationSection: React.FC = ({ streamFiel ); }; + +const PageTokenOption = ({ + label, + streamFieldPath, +}: { + label: string; + streamFieldPath: (fieldPath: string) => string; +}): JSX.Element => { + return ( + + } + > + + + ); +}; + +const PageSizeOption = ({ + label, + streamFieldPath, +}: { + label: string; + streamFieldPath: (fieldPath: string) => string; +}): JSX.Element => { + return ( + + 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: "", + }} + > + + + ); +};