From 65dbe1047cad613594f4210eab246b667d75e1a6 Mon Sep 17 00:00:00 2001 From: Lake Mossman Date: Tue, 16 Apr 2024 11:25:54 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=8E=A8=20(Second=20attempt?= =?UTF-8?q?)=20Fix=20page=20size=20conversion=20and=20user=20input=20butto?= =?UTF-8?q?n=20helper=20style=20(#12132)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../connectorBuilder/Builder/BuilderField.tsx | 4 ++++ .../Builder/BuilderFieldWithInputs.module.scss | 8 +++++--- .../Builder/BuilderFieldWithInputs.tsx | 11 +---------- .../Builder/ErrorHandlerSection.tsx | 2 ++ .../connectorBuilder/Builder/PaginationSection.tsx | 8 ++++++++ .../StreamTestingPanel/StreamTester.tsx | 2 +- .../StreamTestingPanel/TestingValuesMenu.tsx | 5 ++--- .../src/components/connectorBuilder/types.ts | 13 ++++++++++--- airbyte-webapp/src/locales/en.json | 2 +- 9 files changed, 34 insertions(+), 21 deletions(-) diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx index a1f6ec4c475..22c8bf9654d 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx @@ -59,6 +59,8 @@ export type BuilderFieldProps = BaseFieldProps & onChange?: (newValue: string) => void; onBlur?: (value: string) => void; disabled?: boolean; + step?: number; + min?: number; } | { type: "date" | "date-time"; onChange?: (newValue: string) => void } | { type: "boolean"; onChange?: (newValue: boolean) => void; disabled?: boolean; disabledTooltip?: string } @@ -217,6 +219,8 @@ const InnerBuilderField: React.FC = ({ readOnly={readOnly} adornment={adornment} disabled={props.disabled} + step={props.step} + min={props.min} onBlur={(e) => { field.onBlur(); props.onBlur?.(e.target.value); diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.module.scss index 8376bdea7fe..6be0513c44a 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.module.scss +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.module.scss @@ -7,6 +7,8 @@ border: none; background: none; color: colors.$grey-300; + padding: 0; + padding-right: variables.$spacing-md; &:hover { background: none; @@ -29,7 +31,7 @@ .container { position: absolute; - right: variables.$spacing-sm; + right: 0; top: 0; display: flex; flex-direction: column; @@ -48,14 +50,14 @@ background: none; border: none; display: flex; - gap: variables.$spacing-xs; color: inherit; align-items: center; cursor: pointer; + font-size: variables.$font-size-sm; } .inputWithHelper { - padding-right: 55px; + padding-right: 35px; } .newInput { diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx index 82dca201580..177e3e99b73 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx @@ -113,16 +113,7 @@ InnerUserInputHelper.displayName = "InnerUserInputHelper"; const UserInputHelperControlButton: React.FC> = () => { return ( - - {"{{"} - - {"}}"} - - } - placement="top" - > + } placement="top"> ); diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/ErrorHandlerSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/ErrorHandlerSection.tsx index 297259b6748..b4e10cc5182 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/ErrorHandlerSection.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/ErrorHandlerSection.tsx @@ -44,6 +44,8 @@ export const ErrorHandlerSection: React.FC = (props) = type="number" path={buildPath("backoff_strategy.backoff_time_in_seconds")} manifestPath="ConstantBackoffStrategy.properties.backoff_time_in_seconds" + step={1} + min={0} /> ), }, diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx index 5139aa547fa..184559f0151 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx @@ -90,6 +90,8 @@ export const PaginationSection: React.FC = ({ streamFiel manifestPath="OffsetIncrement.properties.page_size" path={streamFieldPath("paginator.strategy.page_size")} optional + step={1} + min={1} /> {pageSize ? ( = ({ streamFiel path={streamFieldPath("paginator.strategy.page_size")} manifestPath="PageIncrement.properties.page_size" optional + step={1} + min={1} /> {pageSize ? ( = ({ streamFiel } }} optional + step={1} + min={1} /> {pageSize ? ( = ({ testingVal {showInputsWarning && ( { setShowInputsWarning(false); }} - text={} + text={} /> )} {permission === "adminReadOnly" && ( diff --git a/airbyte-webapp/src/components/connectorBuilder/types.ts b/airbyte-webapp/src/components/connectorBuilder/types.ts index e05a3c2a4b7..5b183aa40f7 100644 --- a/airbyte-webapp/src/components/connectorBuilder/types.ts +++ b/airbyte-webapp/src/components/connectorBuilder/types.ts @@ -1098,10 +1098,17 @@ function pathToSafeJinjaAccess(path: string[]): string { function builderPaginationStrategyToManifest( strategy: BuilderPaginator["strategy"] ): DefaultPaginator["pagination_strategy"] { - if (strategy.type === "OffsetIncrement" || strategy.type === "PageIncrement") { - return strategy; + const correctedStrategy = { + ...strategy, + // must manually convert page_size to a number if it exists, because RHF watch() treats all numeric values as strings + page_size: strategy.page_size ? Number(strategy.page_size) : undefined, + }; + + if (correctedStrategy.type === "OffsetIncrement" || correctedStrategy.type === "PageIncrement") { + return correctedStrategy; } - const { cursor, ...rest } = strategy; + + const { cursor, ...rest } = correctedStrategy; return { ...rest, diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 209b6ce7003..3fef0e64a47 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -1210,7 +1210,7 @@ "connectorBuilder.value": "Value", "connectorBuilder.addKeyValue": "Add", "connectorBuilder.saveInputsForm": "Save", - "connectorBuilder.inputsFormWarning": "Testing values are not saved with the connector when publishing or releasing. They are required in order to test your streams, and will be asked to the end user in order to setup this connector", + "connectorBuilder.inputsFormMessage": "Testing values are not saved with the connector when publishing or releasing. They are required in order to test your streams, and will be asked to the end user in order to setup this connector", "connectorBuilder.inputsError": "User inputs form could not be rendered: {error}. Make sure the spec in the YAML conforms to the specified standard.", "connectorBuilder.inputsErrorDocumentation": "Check out the documentation", "connectorBuilder.goToYaml": "Switch to YAML view",