🪟 🎨 (Second attempt) Fix page size conversion and user input button h…

…elper style (#12132)
airbytehq · Apr 16, 2024 · 65dbe10 · 65dbe10
1 parent ba4c105
commit 65dbe10
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 21 deletions.
diff --git 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<BuilderFieldProps> = ({
           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
@@ -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
@@ -113,16 +113,7 @@ InnerUserInputHelper.displayName = "InnerUserInputHelper";
 
 const UserInputHelperControlButton: React.FC<ListBoxControlButtonProps<string | undefined>> = () => {
   return (
-    <Tooltip
-      control={
-        <div className={styles.buttonContent}>
-          {"{{"}
-          <Icon type="user" />
-          {"}}"}
-        </div>
-      }
-      placement="top"
-    >
+    <Tooltip control={<Icon type="user" size="sm" className={styles.buttonContent} />} placement="top">
       <FormattedMessage id="connectorBuilder.interUserInputValue" />
     </Tooltip>
   );

diff --git 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<ErrorHandlerSectionProps> = (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
@@ -90,6 +90,8 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                   manifestPath="OffsetIncrement.properties.page_size"
                   path={streamFieldPath("paginator.strategy.page_size")}
                   optional
+                  step={1}
+                  min={1}
                 />
                 {pageSize ? (
                   <PageSizeOption
@@ -119,12 +121,16 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                   path={streamFieldPath("paginator.strategy.page_size")}
                   manifestPath="PageIncrement.properties.page_size"
                   optional
+                  step={1}
+                  min={1}
                 />
                 <BuilderField
                   type="number"
                   path={streamFieldPath("paginator.strategy.start_from_page")}
                   manifestPath="PageIncrement.properties.start_from_page"
                   optional
+                  step={1}
+                  min={0}
                 />
                 {pageSize ? (
                   <PageSizeOption
@@ -261,6 +267,8 @@ export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFiel
                     }
                   }}
                   optional
+                  step={1}
+                  min={1}
                 />
                 {pageSize ? (
                   <PageSizeOption

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
@@ -186,7 +186,7 @@ export const StreamTester: React.FC<{
       )}
       {!isFetching && streamReadData && streamReadData.test_read_limit_reached && showLimitWarning && (
         <Message
-          type="warning"
+          type="info"
           text={
             <FormattedMessage
               id="connectorBuilder.streamTestLimitReached"

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/TestingValuesMenu.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/TestingValuesMenu.tsx
@@ -101,12 +101,11 @@ export const TestingValuesMenu: React.FC<TestingValuesMenuProps> = ({ testingVal
               <FlexContainer direction="column">
                 {showInputsWarning && (
                   <Message
-                    className={styles.warningBox}
-                    type="warning"
+                    type="info"
                     onClose={() => {
                       setShowInputsWarning(false);
                     }}
-                    text={<FormattedMessage id="connectorBuilder.inputsFormWarning" />}
+                    text={<FormattedMessage id="connectorBuilder.inputsFormMessage" />}
                   />
                 )}
                 {permission === "adminReadOnly" && (

diff --git 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
@@ -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: <b>{error}</b>. Make sure the spec in the YAML conforms to the specified standard.",
   "connectorBuilder.inputsErrorDocumentation": "Check out the documentation",
   "connectorBuilder.goToYaml": "Switch to YAML view",