airbytehq
diff --git a/‎airbyte-webapp/src/components/GroupControls/GroupControls.module.scss‎
Lines changed: 1 addition & 2 deletions b/‎airbyte-webapp/src/components/GroupControls/GroupControls.module.scss‎
Lines changed: 1 addition & 2 deletions
diff --git a/‎airbyte-webapp/src/components/GroupControls/GroupControls.tsx‎
Lines changed: 11 additions & 3 deletions b/‎airbyte-webapp/src/components/GroupControls/GroupControls.tsx‎
Lines changed: 11 additions & 3 deletions
diff --git a/‎airbyte-webapp/src/components/GroupControls/index.stories.tsx‎
Lines changed: 19 additions & 0 deletions b/‎airbyte-webapp/src/components/GroupControls/index.stories.tsx‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx‎
Lines changed: 27 additions & 20 deletions b/‎airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx‎
Lines changed: 27 additions & 20 deletions
diff --git a/‎airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx‎
Lines changed: 179 additions & 0 deletions b/‎airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx‎
Lines changed: 179 additions & 0 deletions
diff --git a/‎airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss‎
Lines changed: 1 addition & 0 deletions b/‎airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss‎
Lines changed: 1 addition & 0 deletions
@@ -36,11 +36,10 @@ $border-width: variables.$border-thick;
  white-space: nowrap;
 }
 
-.dropdown {
+.control {
  margin-left: auto;
  padding: 0 variables.$spacing-xs;
  background-color: colors.$white;
- min-width: calc(50% - 100px);
 }
 
 .content {
 
@@ -1,21 +1,29 @@
+import classNames from "classnames";
 import React from "react";
 
 import styles from "./GroupControls.module.scss";
 
 interface GroupControlsProps {
  label: React.ReactNode;
- dropdown?: React.ReactNode;
+ control?: React.ReactNode;
+ controlClassName?: string;
  name?: string;
 }
 
-const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({ label, dropdown, children, name }) => {
+const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({
+ label,
+ control,
+ children,
+ name,
+ controlClassName,
+}) => {
  return (
  // This outer div is necessary for .content > :first-child padding to be properly applied in the case of nested GroupControls
  <div>
  <div className={styles.container}>
  <div className={styles.title}>
  <div className={styles.label}>{label}</div>
- <div className={styles.dropdown}>{dropdown}</div>
+ <div className={classNames(styles.control, controlClassName)}>{control}</div>
  </div>
  <div className={styles.content} data-testid={name}>
  {children}
 
@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
+import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
@@ -73,3 +74,21 @@ WithContent.args = {
  </>
  ),
 };
+
+export const EmptyWithControl = Template.bind({});
+EmptyWithControl.args = {
+ label,
+ control: <Button variant="secondary">Control</Button>,
+};
+
+export const ControlAndContent = Template.bind({});
+ControlAndContent.args = {
+ label,
+ control: <Button variant="secondary">Control</Button>,
+ children: (
+ <>
+ <SectionContainer>Content part 1</SectionContainer>
+ <SectionContainer>Content part 2</SectionContainer>
+ </>
+ ),
+};
@@ -1,14 +1,17 @@
 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";
+import * as yup from "yup";
 
 import { Button } from "components/ui/Button";
 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";
 
@@ -19,44 +22,48 @@ interface AddStreamValues {
 
 interface AddStreamButtonProps {
  onAddStream: (addedStreamNum: number) => void;
+ button?: React.ReactElement;
+ initialValues?: Partial<BuilderStream>;
 }
 
-export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream }) => {
+export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream, button, initialValues }) => {
  const { formatMessage } = useIntl();
  const [isOpen, setIsOpen] = useState(false);
  const [streamsField, , helpers] = useField<BuilderStream[]>("streams");
  const numStreams = streamsField.value.length;
 
+ const buttonClickHandler = () => {
+ setIsOpen(true);
+ };
+
  return (
  <>
- <Button
- className={styles.addButton}
- onClick={() => {
-  setIsOpen(true);
-  }}
- icon={<PlusIcon />}
- />
+ {button ? (
+ React.cloneElement(button, {
+  onClick: buttonClickHandler,
+ })
+ ) : (
+ <Button className={styles.addButton} onClick={buttonClickHandler} icon={<PlusIcon />} />
+ )}
  {isOpen && (
  <Formik
  initialValues={{ streamName: "", urlPath: "" }}
  onSubmit={(values: AddStreamValues) => {
  helpers.setValue([
  ...streamsField.value,
- {
+ merge({}, DEFAULT_BUILDER_STREAM_VALUES, {
+ ...initialValues,
  name: values.streamName,
  urlPath: values.urlPath,
- fieldPointer: [],
- httpMethod: "GET",
- requestOptions: {
- requestParameters: [],
- requestHeaders: [],
- requestBody: [],
- },
- },
+ }),
  ]);
  setIsOpen(false);
  onAddStream(numStreams);
  }}
+ validationSchema={yup.object().shape({
+ streamName: yup.string().required("form.empty.error"),
+ urlPath: yup.string().required("form.empty.error"),
+ })}
  >
  <>
  <FormikPatch />
@@ -71,13 +78,13 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream })
  <ModalBody className={styles.body}>
  <BuilderField
  path="streamName"
- type="text"
+ type="string"
  label={formatMessage({ id: "connectorBuilder.addStreamModal.streamNameLabel" })}
  tooltip={formatMessage({ id: "connectorBuilder.addStreamModal.streamNameTooltip" })}
  />
  <BuilderField
  path="urlPath"
- type="text"
+ type="string"
  label={formatMessage({ id: "connectorBuilder.addStreamModal.urlPathLabel" })}
  tooltip={formatMessage({ id: "connectorBuilder.addStreamModal.urlPathTooltip" })}
  />
 
@@ -0,0 +1,179 @@
+import { BuilderCard } from "./BuilderCard";
+import { BuilderField } from "./BuilderField";
+import { BuilderOneOf } from "./BuilderOneOf";
+import { BuilderOptional } from "./BuilderOptional";
+import { KeyValueListField } from "./KeyValueListField";
+import { UserInputField } from "./UserInputField";
+
+export const AuthenticationSection: React.FC = () => {
+ return (
+ <BuilderCard>
+ <BuilderOneOf
+ path="global.authenticator"
+ label="Authentication"
+ tooltip="Authentication method to use for requests sent to the API"
+ options={[
+ { label: "No Auth", typeValue: "NoAuth" },
+ {
+ label: "API Key",
+ typeValue: "ApiKeyAuthenticator",
+ default: {
+ api_token: "{{ config['api_key'] }}",
+ header: "",
+ },
+ children: (
+ <>
+ <BuilderField
+ type="string"
+ path="global.authenticator.header"
+ label="Header"
+ tooltip="HTTP header which should be set to the API Key"
+ />
+ <UserInputField
+ label="API Key"
+ tooltip="The API key issued by the service. Fill it in in the user inputs"
+ />
+ </>
+ ),
+ },
+ {
+ label: "Bearer",
+ typeValue: "BearerAuthenticator",
+ default: {
+ api_token: "{{ config['api_key'] }}",
+ },
+ children: (
+ <UserInputField
+ label="API Key"
+ tooltip="The API key issued by the service. Fill it in in the user inputs"
+ />
+ ),
+ },
+ {
+ label: "Basic HTTP",
+ typeValue: "BasicHttpAuthenticator",
+ default: {
+ username: "{{ config['username'] }}",
+ password: "{{ config['password'] }}",
+ },
+ children: (
+ <>
+ <UserInputField label="Username" tooltip="The username for the login. Fill it in in the user inputs" />
+ <UserInputField label="Password" tooltip="The password for the login. Fill it in in the user inputs" />
+ </>
+ ),
+ },
+ {
+ label: "OAuth",
+ typeValue: "OAuthAuthenticator",
+ default: {
+ client_id: "{{ config['client_id'] }}",
+ client_secret: "{{ config['client_secret'] }}",
+ refresh_token: "{{ config['client_refresh_token'] }}",
+ refresh_request_body: [],
+ token_refresh_endpoint: "",
+ },
+ children: (
+ <>
+ <BuilderField
+ type="string"
+ path="global.authenticator.token_refresh_endpoint"
+ label="Token refresh endpoint"
+ tooltip="The URL to call to obtain a new access token"
+ />
+ <UserInputField label="Client ID" tooltip="The OAuth client ID" />
+ <UserInputField label="Client secret" tooltip="The OAuth client secret" />
+ <UserInputField label="Refresh token" tooltip="The OAuth refresh token" />
+ <BuilderOptional>
+ <BuilderField
+ type="array"
+ path="global.authenticator.scopes"
+ optional
+ label="Scopes"
+ tooltip="Scopes to request"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.token_expiry_date_format"
+ optional
+ label="Token expiry date format"
+ tooltip="The format of the expiry date of the access token as obtained from the refresh endpoint"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.expires_in_name"
+ optional
+ label="Token expiry property name"
+ tooltip="The name of the property which contains the token exipiry date in the response from the token refresh endpoint"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.access_token_name"
+ optional
+ label="Access token property name"
+ tooltip="The name of the property which contains the access token in the response from the token refresh endpoint"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.grant_type"
+ optional
+ label="Grant type"
+ tooltip="The grant type to request for access_token"
+ />
+ <KeyValueListField
+ path="global.authenticator.refresh_request_body"
+ label="Request Parameters"
+ tooltip="The request body to send in the refresh request"
+ />
+ </BuilderOptional>
+ </>
+ ),
+ },
+ {
+ label: "Session token",
+ typeValue: "SessionTokenAuthenticator",
+ default: {
+ username: "{{ config['username'] }}",
+ password: "{{ config['password'] }}",
+ session_token: "{{ config['session_token'] }}",
+ },
+ children: (
+ <>
+ <BuilderField
+ type="string"
+ path="global.authenticator.header"
+ label="Header"
+ tooltip="Specific HTTP header of source API for providing session token"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.session_token_response_key"
+ label="Session token response key"
+ tooltip="Key for retrieving session token from api response"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.login_url"
+ label="Login url"
+ tooltip="Url for getting a specific session token"
+ />
+ <BuilderField
+ type="string"
+ path="global.authenticator.validate_session_url"
+ label="Validate session url"
+ tooltip="Url to validate passed session token"
+ />
+ <UserInputField label="Username" tooltip="The username" />
+ <UserInputField label="Password" tooltip="The password" />
+ <UserInputField
+ label="Session token"
+ tooltip="Session token generated by user (if provided username and password are not required)"
+ />
+ </>
+ ),
+ },
+ ]}
+ />
+ </BuilderCard>
+ );
+};
@@ -18,4 +18,5 @@
 .form {
  flex: 1;
  padding: variables.$spacing-xl;
+ overflow: auto;
 }
Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,10 @@ $border-width: variables.$border-thick;`
`36`	`36`	`white-space: nowrap;`
`37`	`37`	`}`
`38`	`38`
`39`		`-.dropdown {`
	`39`	`+.control {`
`40`	`40`	`margin-left: auto;`
`41`	`41`	`padding: 0 variables.$spacing-xs;`
`42`	`42`	`background-color: colors.$white;`
`43`		`- min-width: calc(50% - 100px);`
`44`	`43`	`}`
`45`	`44`
`46`	`45`	`.content {`
Original file line number	Diff line number	Diff line change
`@@ -18,4 +18,5 @@`
`18`	`18`	`.form {`
`19`	`19`	`flex: 1;`
`20`	`20`	`padding: variables.$spacing-xl;`
	`21`	`+ overflow: auto;`
`21`	`22`	`}`