From e23a6d8c2b3bcfbf2c47206082bb1b2ef194963f Mon Sep 17 00:00:00 2001 From: Lake Mossman Date: Thu, 22 Dec 2022 02:55:02 -0800 Subject: [PATCH] [Connector Builder] Add paginator (#20698) * move connector builder components into the same shared components/connectorBuilder directory * move diff over from poc branch * save current progress * add modal for adding streams * focus stream after adding and reset button style * add reset confirm modal and select view on add * style global config and streams buttons * styling improvements * handle long stream names better * pull in connector manifest schema directly * add box shadows to resizable panels * upgrade orval and use connector manifest schema directly * remove airbyte protocol from connector builder api spec * generate python models from openapi change * fix position of yaml toggle * handle no stream case with better looking message * group global fields into single object and fix console error * confirmation modal on toggling dirty form + cleanup * fix connector name display * undo change to manifest schema * remove commented code * remove unnecessary change * fix spacing * use shadow mixin for connector img * add comment about connector img * change onSubmit to no-op * remove console log * clean up styling * simplify sidebar to remove StreamSelectButton component * swap colors of toggle * move FormikPatch to src/core/form * move types up to connectorBuilder/ level * use grid display for ui yaml toggle button * use spread instead of setting array index directly * add intl in missing places * pull connector manifest schema in through separate openapi spec * use correct intl string id * throttle setting json manifest in yaml editor * use button prop instead of manually styling * consolidate AddStreamButton styles * fix sidebar flex styles * use specific flex properties instead of flex * clean up download and reset button styles * use row-reverse for yaml editor download button * fix stream selector styles to remove margins * give connector setup guide panel same corner and shadow styles * remove blur from page display * set view to stream when selected in test panel * add placeholder when stream name is empty * switch to index-based stream selection to preserve testing panel selected stream on rename * handle empty name in stream selector * make connector form work in connector builder * wip * fix small stuff * add basic input UI * user inputs * make most of inputs configuration work * fix a bunch of stuff * handle unknown config types * add warning label * fix label * fix some styling * review comments * improve state management and error handling * allow auth configuration * check for conflicts with the inferred inputs * fix invisible inputs * handle stored form values that don't contain new fields properly * session token and oauth authentication * fill in session token variable * fix merge of default values * add primaryKey and cursorField to builder types, and consolidate default valeues to types.ts * add cursor and primary key fields to ui * save * add page size and token option inputs * fixes after rebase * add pagination * fix pagination types * handle empty field_name better * Update airbyte-webapp/src/locales/en.json Co-authored-by: Lake Mossman * Update airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx Co-authored-by: Lake Mossman * inputs editing weirdness * input form reset * using the Label component * reduce redundancy and hide advanced input options for inferred inputs * unnecessary validation * typo * unnecessary effect hook * build spec even for invalid forms but do not update stream list * typos * make sure validation error does not go away * make primary key and cursor optional, and reorder * save toggle group progress * fix style of toggle label * handle empty values better * fix page size/token option field validation and rendering * handle cursor pagination page size option correctly Co-authored-by: Joe Reuter --- .../Builder/AddStreamButton.tsx | 14 +- .../Builder/Builder.module.scss | 1 + .../Builder/BuilderCard.module.scss | 5 + .../connectorBuilder/Builder/BuilderCard.tsx | 29 +++- .../connectorBuilder/Builder/BuilderField.tsx | 3 + .../Builder/BuilderSidebar.tsx | 8 +- .../Builder/InjectRequestOptionFields.tsx | 49 ++++++ .../connectorBuilder/Builder/InputsView.tsx | 2 +- .../Builder/PaginationSection.tsx | 164 ++++++++++++++++++ .../Builder/StreamConfigView.tsx | 11 +- .../Builder/ToggleGroupField.module.scss | 12 ++ .../Builder/ToggleGroupField.tsx | 39 +++++ .../src/components/connectorBuilder/types.ts | 100 +++++++++++ .../ConnectorBuilderStateService.tsx | 16 +- 14 files changed, 420 insertions(+), 33 deletions(-) create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.module.scss create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.tsx diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx index f4a72b90aa35..73c9b18d4d1b 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx @@ -1,4 +1,5 @@ import { Form, Formik, useField } from "formik"; +import merge from "lodash/merge"; import { useState } from "react"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -9,7 +10,7 @@ import { Modal, ModalBody, ModalFooter } from "components/ui/Modal"; import { FormikPatch } from "core/form/FormikPatch"; import { ReactComponent as PlusIcon } from "../../connection/ConnectionOnboarding/plusIcon.svg"; -import { BuilderStream } from "../types"; +import { BuilderStream, DEFAULT_BUILDER_STREAM_VALUES } from "../types"; import styles from "./AddStreamButton.module.scss"; import { BuilderField } from "./BuilderField"; @@ -49,18 +50,11 @@ export const AddStreamButton: React.FC = ({ onAddStream, b onSubmit={(values: AddStreamValues) => { helpers.setValue([ ...streamsField.value, - { - fieldPointer: [], - httpMethod: "GET", - requestOptions: { - requestParameters: [], - requestHeaders: [], - requestBody: [], - }, + merge({}, DEFAULT_BUILDER_STREAM_VALUES, { ...initialValues, name: values.streamName, urlPath: values.urlPath, - }, + }), ]); setIsOpen(false); onAddStream(numStreams); diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss index 4c361af3aa4e..8ece94e80807 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss @@ -18,4 +18,5 @@ .form { flex: 1; padding: variables.$spacing-xl; + overflow: auto; } diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss index 48fedff9a2a0..552148a02cf6 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss @@ -6,3 +6,8 @@ flex-direction: column; gap: variables.$spacing-xl; } + +.toggleContainer { + display: flex; + gap: variables.$spacing-md; +} diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx index 312884a7a2b4..deec879b8c91 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx @@ -2,13 +2,38 @@ import classNames from "classnames"; import React from "react"; import { Card } from "components/ui/Card"; +import { CheckBox } from "components/ui/CheckBox"; import styles from "./BuilderCard.module.scss"; interface BuilderCardProps { className?: string; + toggleConfig?: { + label: React.ReactNode; + toggledOn: boolean; + onToggle: (newToggleValue: boolean) => void; + }; } -export const BuilderCard: React.FC> = ({ children, className }) => { - return {children}; +export const BuilderCard: React.FC> = ({ + children, + className, + toggleConfig, +}) => { + return ( + + {toggleConfig && ( +
+ { + toggleConfig.onToggle(event.target.checked); + }} + /> + {toggleConfig.label} +
+ )} + {(!toggleConfig || toggleConfig.toggledOn) && children} + + ); }; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx index 1bffdfcc8d72..30171879af3f 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx @@ -97,6 +97,9 @@ export const BuilderField: React.FC = ({ {...field} onChange={(e) => { field.onChange(e); + if (e.target.value === "") { + helpers.setValue(undefined); + } props.onChange?.(e.target.value); }} type={props.type} diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx index 3894595d67bd..7bd54599ea6b 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx @@ -10,14 +10,10 @@ import { Heading } from "components/ui/Heading"; import { Text } from "components/ui/Text"; import { useConfirmationModalService } from "hooks/services/ConfirmationModal"; -import { - BuilderView, - DEFAULT_BUILDER_FORM_VALUES, - useConnectorBuilderState, -} from "services/connectorBuilder/ConnectorBuilderStateService"; +import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService"; import { DownloadYamlButton } from "../DownloadYamlButton"; -import { BuilderFormValues, getInferredInputs } from "../types"; +import { BuilderFormValues, DEFAULT_BUILDER_FORM_VALUES, getInferredInputs } from "../types"; import { useBuilderErrors } from "../useBuilderErrors"; import { AddStreamButton } from "./AddStreamButton"; import styles from "./BuilderSidebar.module.scss"; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx new file mode 100644 index 000000000000..7f556b44cc0e --- /dev/null +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx @@ -0,0 +1,49 @@ +import { useField } from "formik"; + +import { RequestOption } from "core/request/ConnectorManifest"; + +import { injectIntoValues } from "../types"; +import { BuilderField } from "./BuilderField"; + +interface InjectRequestOptionFieldsProps { + path: string; + descriptor: string; + excludeInjectIntoValues?: string[]; +} + +export const InjectRequestOptionFields: React.FC = ({ + path, + descriptor, + excludeInjectIntoValues, +}) => { + const [field, , helpers] = useField(path); + + return ( + <> + !excludeInjectIntoValues.includes(val)) + : injectIntoValues + } + onChange={(newValue) => { + if (newValue === "path") { + helpers.setValue({ inject_into: newValue, field_name: undefined }); + } + }} + label="Inject into" + tooltip={`Configures where the ${descriptor} should be set on the HTTP requests`} + /> + {field.value.inject_into !== "path" && ( + + )} + + ); +}; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx index a934422b60f6..77095bd805fc 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx @@ -334,7 +334,7 @@ const InputItem = ({ isInferredInput: boolean; }): JSX.Element => { return ( -
  • +
  • {input.definition.title || input.key}