Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Connector Builder] Add stream slicer #20748

Merged
Merged
Changes from 1 commit
Commits
Show all changes
133 commits
Select commit Hold shift + click to select a range
699470e
move connector builder components into the same shared components/con…
lmossman Dec 1, 2022
827532b
move diff over from poc branch
lmossman Dec 1, 2022
4899673
save current progress
lmossman Dec 3, 2022
a1b62f1
add modal for adding streams
lmossman Dec 3, 2022
39e8ba8
focus stream after adding and reset button style
lmossman Dec 5, 2022
2352ef9
add reset confirm modal and select view on add
lmossman Dec 6, 2022
df492fa
style global config and streams buttons
lmossman Dec 6, 2022
5a99c7a
styling improvements
lmossman Dec 6, 2022
62fc08c
handle long stream names better
lmossman Dec 6, 2022
7b26b78
pull in connector manifest schema directly
lmossman Dec 6, 2022
71a88f1
add box shadows to resizable panels
lmossman Dec 6, 2022
d7bee54
upgrade orval and use connector manifest schema directly
lmossman Dec 6, 2022
162ecf2
remove airbyte protocol from connector builder api spec
lmossman Dec 6, 2022
def60b0
Merge branch 'master' into lmossman/use-connector-manifest-schema-dir…
lmossman Dec 6, 2022
ff9aa76
generate python models from openapi change
lmossman Dec 6, 2022
3678956
merge with lmossman/use-connector-manifest-schema-directly
lmossman Dec 6, 2022
b16d4a8
fix position of yaml toggle
lmossman Dec 6, 2022
67fb9dd
handle no stream case with better looking message
lmossman Dec 7, 2022
bb42007
group global fields into single object and fix console error
lmossman Dec 7, 2022
9bb1812
confirmation modal on toggling dirty form + cleanup
lmossman Dec 7, 2022
587ca2f
merge with master
lmossman Dec 7, 2022
81cf108
fix connector name display
lmossman Dec 7, 2022
094a045
undo change to manifest schema
lmossman Dec 7, 2022
d1c8c80
remove commented code
lmossman Dec 7, 2022
aebac20
remove unnecessary change
lmossman Dec 7, 2022
1e39be4
fix spacing
lmossman Dec 7, 2022
09cf875
use shadow mixin for connector img
lmossman Dec 7, 2022
ec65d67
add comment about connector img
lmossman Dec 7, 2022
f9a3fa1
Merge remote-tracking branch 'origin/master' into lmossman/connector-…
Dec 8, 2022
603820a
change onSubmit to no-op
lmossman Dec 8, 2022
cb2f299
remove console log
lmossman Dec 8, 2022
d1672a0
clean up styling
lmossman Dec 8, 2022
7255784
simplify sidebar to remove StreamSelectButton component
lmossman Dec 8, 2022
65cd42b
swap colors of toggle
lmossman Dec 8, 2022
10d7893
move FormikPatch to src/core/form
lmossman Dec 8, 2022
fc89001
move types up to connectorBuilder/ level
lmossman Dec 8, 2022
24eaaff
use grid display for ui yaml toggle button
lmossman Dec 8, 2022
de604f6
use spread instead of setting array index directly
lmossman Dec 8, 2022
e696e57
add intl in missing places
lmossman Dec 8, 2022
5952f70
merge with master
lmossman Dec 8, 2022
b7c08f6
pull connector manifest schema in through separate openapi spec
lmossman Dec 8, 2022
dd04e61
erge branch 'lmossman/connector-builder-config-ui' of github.com:airb…
Dec 9, 2022
d6f10b4
use correct intl string id
lmossman Dec 9, 2022
5ffe20e
throttle setting json manifest in yaml editor
lmossman Dec 9, 2022
b82ba2a
use button prop instead of manually styling
lmossman Dec 9, 2022
b9580b4
consolidate AddStreamButton styles
lmossman Dec 9, 2022
1587243
fix sidebar flex styles
lmossman Dec 9, 2022
62a60e5
use specific flex properties instead of flex
lmossman Dec 9, 2022
092821d
clean up download and reset button styles
lmossman Dec 10, 2022
7b8dec8
use row-reverse for yaml editor download button
lmossman Dec 10, 2022
6d68db9
fix stream selector styles to remove margins
lmossman Dec 10, 2022
91bc357
give connector setup guide panel same corner and shadow styles
lmossman Dec 10, 2022
4ffb969
remove blur from page display
lmossman Dec 10, 2022
70afdf8
set view to stream when selected in test panel
lmossman Dec 10, 2022
f656506
add placeholder when stream name is empty
lmossman Dec 10, 2022
c437d30
switch to index-based stream selection to preserve testing panel sele…
lmossman Dec 10, 2022
3cdbc70
handle empty name in stream selector
lmossman Dec 10, 2022
831f574
Merge branch 'lmossman/connector-builder-config-ui' of github.com:air…
Dec 12, 2022
e2730fe
Merge branch 'lmossman/connector-builder-config-ui' into flash1293/in…
Dec 12, 2022
269ae82
make connector form work in connector builder
Dec 12, 2022
901fc63
wip
Dec 12, 2022
4944d3f
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 13, 2022
3255298
fix small stuff
Dec 13, 2022
333fb0b
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 13, 2022
cec206f
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 13, 2022
ba28014
add basic input UI
Dec 13, 2022
53ad55f
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 14, 2022
5300933
Merge remote-tracking branch 'origin/master' into flash1293/integrate…
Dec 14, 2022
935188b
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 14, 2022
b694dc5
user inputs
Dec 14, 2022
e7d81ea
make most of inputs configuration work
Dec 14, 2022
3de021a
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 15, 2022
552fc65
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 15, 2022
ace1299
fix a bunch of stuff
Dec 15, 2022
7fa1752
handle unknown config types
Dec 15, 2022
7196409
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 16, 2022
4a37a67
add warning label
Dec 16, 2022
10fa73e
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 16, 2022
7e48ba5
fix label
Dec 16, 2022
75db697
fix some styling
Dec 16, 2022
b340ef4
Merge branch 'flash1293/connector-form-remove-ui-widget-state' into f…
Dec 16, 2022
98c146c
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 16, 2022
9835a5c
review comments
Dec 18, 2022
c352df0
Merge branch 'feature/connector-builder' into flash1293/integrate-con…
Dec 19, 2022
ed43eab
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 19, 2022
7958ef1
improve state management and error handling
Dec 19, 2022
beb4968
Merge branch 'feature/connector-builder' into flash1293/integrate-con…
Dec 19, 2022
b3cfb8f
Merge branch 'flash1293/integrate-connector-form' into flash1293/allo…
Dec 19, 2022
49f55a1
Merge branch 'flash1293/allow-configuring-inputs' of github.com:airby…
Dec 19, 2022
04d87cf
allow auth configuration
Dec 19, 2022
b796201
check for conflicts with the inferred inputs
Dec 19, 2022
18498c7
fix invisible inputs
Dec 19, 2022
9ffa34e
handle stored form values that don't contain new fields properly
lmossman Dec 19, 2022
8c4b6c7
Merge branch 'flash1293/allow-configuring-inputs' into flash1293/conn…
lmossman Dec 19, 2022
c0350d3
Merge branch 'flash1293/allow-configuring-inputs' of github.com:airby…
Dec 20, 2022
e98ebc1
Merge branch 'feature/connector-builder' into flash1293/allow-configu…
Dec 20, 2022
fb1ec21
Merge branch 'flash1293/allow-configuring-inputs' into flash1293/conn…
Dec 20, 2022
a17ab05
session token and oauth authentication
Dec 20, 2022
7b6470e
fill in session token variable
Dec 20, 2022
23f4fbe
fix merge of default values
lmossman Dec 20, 2022
d4975bf
add primaryKey and cursorField to builder types, and consolidate defa…
lmossman Dec 20, 2022
32213f8
add cursor and primary key fields to ui
lmossman Dec 20, 2022
3e20324
save
lmossman Dec 20, 2022
3ee0ffb
add page size and token option inputs
lmossman Dec 21, 2022
0576478
fixes after rebase
lmossman Dec 21, 2022
5e45f59
add pagination
lmossman Dec 21, 2022
f101602
fix pagination types
lmossman Dec 21, 2022
5fb62e2
handle empty field_name better
lmossman Dec 21, 2022
7cce350
Update airbyte-webapp/src/locales/en.json
Dec 21, 2022
20e8044
Update airbyte-webapp/src/components/connectorBuilder/Builder/InputsV…
Dec 21, 2022
50bddcb
inputs editing weirdness
Dec 21, 2022
0ca37ad
input form reset
Dec 21, 2022
8095fda
using the Label component
Dec 21, 2022
fbeb2e1
Merge branch 'flash1293/allow-configuring-inputs' into flash1293/conn…
Dec 21, 2022
1bccbbd
reduce redundancy and hide advanced input options for inferred inputs
Dec 21, 2022
eaec279
unnecessary validation
Dec 21, 2022
a338590
typo
Dec 21, 2022
2429d29
unnecessary effect hook
Dec 21, 2022
6dd02d9
build spec even for invalid forms but do not update stream list
Dec 21, 2022
84803ce
Merge branch 'flash1293/connector-builder-authentication' into flash1…
Dec 21, 2022
4bd0bdc
typos
Dec 21, 2022
ca0219b
make sure validation error does not go away
Dec 21, 2022
134fc17
Merge branch 'flash1293/oauth-session-auth' into lmossman/connector-b…
Dec 21, 2022
ed9860e
make primary key and cursor optional, and reorder
lmossman Dec 21, 2022
e029279
save toggle group progress
lmossman Dec 21, 2022
e964eb8
fix style of toggle label
lmossman Dec 21, 2022
a23ffb8
handle empty values better
lmossman Dec 21, 2022
e3c578d
fix page size/token option field validation and rendering
lmossman Dec 21, 2022
24bfc32
handle cursor pagination page size option correctly
lmossman Dec 21, 2022
25eb391
save stream slicer progress
lmossman Dec 21, 2022
3651ae2
finish stream slicer
lmossman Dec 21, 2022
1e3cad9
fix stream slicer fields and validation
lmossman Dec 22, 2022
e421e1e
Merge branch 'feature/connector-builder' into lmossman/connector-buil…
Dec 22, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
save current progress
lmossman committed Dec 3, 2022
commit 48996734df1982f6e3ce77c2067d72dbc6749431
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Formik } from "formik";
import { useState } from "react";

import { Button } from "components/ui/Button";
import { Modal, ModalBody, ModalFooter } from "components/ui/Modal";

import { FormikPatch } from "./Builder";
import { BuilderField } from "./BuilderField";

interface AddStreamValues {
streamName: string;
urlPath: string;
}

export const AddStreamButton: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<button onClick={() => setIsOpen(true)}>Add stream</button>
{isOpen && (
<Modal size="sm" title="New stream" onClose={() => setIsOpen(false)}>
<Formik
initialValues={{ streamName: "", urlPath: "" }}
onSubmit={(values: AddStreamValues) => {
console.log(values);
setIsOpen(false);
}}
>
<>
<FormikPatch />
<ModalBody>
<BuilderField path="streamName" type="text" label="Stream name" tooltip="Name of the new stream" />
<BuilderField
path="urlPath"
type="text"
label="URL Path"
tooltip="URL path of the endpoint for this stream"
/>
</ModalBody>
<ModalFooter>
<Button type="submit">Create</Button>
</ModalFooter>
</>
</Formik>
</Modal>
)}
</>
);
};
101 changes: 30 additions & 71 deletions airbyte-webapp/src/components/connectorBuilder/Builder/Builder.tsx
Original file line number Diff line number Diff line change
@@ -1,90 +1,49 @@
import { Form, Formik, useFormikContext } from "formik";
import { useEffect } from "react";
import { Form } from "formik";
import { useEffect, useState } from "react";

import { ConnectorManifest } from "core/request/ConnectorManifest";
import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
import { usePatchFormik } from "views/Connector/ConnectorForm/useBuildForm";

import styles from "./Builder.module.scss";
import { BuilderCard } from "./BuilderCard";
import { BuilderField } from "./BuilderField";
import { BuilderSidebar } from "./BuilderSidebar";
import { GlobalConfigView } from "./GlobalConfigView";
import { StreamConfigView } from "./StreamConfigView";
import { BuilderFormValues } from "./types";

const FormikPatch: React.FC = () => {
export const FormikPatch: React.FC = () => {
usePatchFormik();
return null;
};

const FormObserver: React.FC = () => {
const { values } = useFormikContext<ConnectorManifest>();
const { setJsonManifest } = useConnectorBuilderState();

useEffect(() => {
setJsonManifest(values);
}, [values, setJsonManifest]);

return null;
};

interface BuilderProps {
values: BuilderFormValues;
toggleYamlEditor: () => void;
}

export const Builder: React.FC<BuilderProps> = ({ toggleYamlEditor }) => {
const { jsonManifest } = useConnectorBuilderState();
export const Builder: React.FC<BuilderProps> = ({ values, toggleYamlEditor }) => {
const { setBuilderFormValues } = useConnectorBuilderState();
useEffect(() => {
setBuilderFormValues(values);
}, [values, setBuilderFormValues]);

const [selectedView, setSelectedView] = useState<"global" | number>("global");

console.log("values", values);

return (
<Formik
initialValues={jsonManifest}
onSubmit={(values: ConnectorManifest) => {
console.log(values);
}}
>
<>
<FormikPatch />
<div className={styles.container}>
<BuilderSidebar className={styles.sidebar} toggleYamlEditor={toggleYamlEditor} />
<Form className={styles.form}>
<FormObserver />
<BuilderCard>
{/* Note: we are explicitly NOT using intl for the BuilderField strings, in order to keep this easier to maintain */}
<BuilderField
type="text"
path="streams[0].retriever.requester.url_base"
label="API Url"
tooltip="Base URL of the API"
/>
</BuilderCard>
<BuilderCard>
<BuilderField
type="text"
path="streams[0].$options.name"
label="Stream Name"
tooltip="Name of the stream"
/>
<BuilderField
type="text"
path="streams[0].$options.path"
label="Path URL"
tooltip="Path of the endpoint that this stream represents."
/>
<BuilderField
type="array"
path="streams[0].retriever.record_selector.extractor.field_pointer"
label="Field Pointer"
tooltip="Pointer into the response that should be extracted as the final record"
/>
<BuilderField
type="enum"
path="streams[0].retriever.requester.http_method"
options={["GET", "POST"]}
label="HTTP Method"
tooltip="HTTP method to use for requests sent to the API"
/>
</BuilderCard>
</Form>
</div>
</>
</Formik>
<>
<FormikPatch />
<div className={styles.container}>
<BuilderSidebar
className={styles.sidebar}
toggleYamlEditor={toggleYamlEditor}
numStreams={values.streams.length}
onViewSelect={setSelectedView}
/>
<Form className={styles.form}>
{selectedView === "global" ? <GlobalConfigView /> : <StreamConfigView streamNum={selectedView} />}
</Form>
</div>
</>
);
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useField } from "formik";
import { useEffect } from "react";
import { FormattedMessage } from "react-intl";
import * as yup from "yup";

@@ -36,9 +35,9 @@ interface BaseFieldProps {
type BuilderFieldProps = BaseFieldProps & ({ type: "text" } | { type: "array" } | { type: "enum"; options: string[] });

const EnumField: React.FC<EnumFieldProps> = ({ options, value, setValue, error, ...props }) => {
useEffect(() => {
setValue(value);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// useEffect(() => {
// setValue(value);
// }, []); // eslint-disable-line react-hooks/exhaustive-deps

return (
<DropDown
@@ -54,9 +53,9 @@ const EnumField: React.FC<EnumFieldProps> = ({ options, value, setValue, error,
};

const ArrayField: React.FC<ArrayFieldProps> = ({ name, value, setValue, error }) => {
useEffect(() => {
setValue(value);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// useEffect(() => {
// setValue(value);
// }, []); // eslint-disable-line react-hooks/exhaustive-deps

return <TagInput name={name} fieldValue={value} onChange={(value) => setValue(value)} error={error} />;
};
@@ -83,6 +82,8 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({ path, label, tooltip
const [field, meta, helpers] = useField(fieldConfig);
const hasError = !!meta.error && meta.touched;

console.log(`path: ${path}, value: ${field.value}`);

return (
<ControlLabels className={styles.container} label={label} infoTooltipContent={tooltip} optional={optional}>
{props.type === "text" && <Input {...field} type={props.type} value={field.value ?? ""} error={hasError} />}
Original file line number Diff line number Diff line change
@@ -1,20 +1,50 @@
import classnames from "classnames";
import { useField, useFormikContext } from "formik";

import { Heading } from "components/ui/Heading";

import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";

import { DownloadYamlButton } from "../YamlEditor/DownloadYamlButton";
import { AddStreamButton } from "./AddStreamButton";
import styles from "./BuilderSidebar.module.scss";
import { UiYamlToggleButton } from "./UiYamlToggleButton";

export type BuilderView = "global" | number;

interface StreamSelectButtonProps {
streamPath: string;
onClick: () => void;
}

const StreamSelectButton: React.FC<StreamSelectButtonProps> = ({ streamPath, onClick }) => {
const streamNamePath = `${streamPath}.name`;
console.log("streamNamePath", streamNamePath);
const [field] = useField(streamNamePath);
console.log("field.value", field.value);

return <button onClick={onClick}>{field.value}</button>;
};

interface BuilderSidebarProps {
className?: string;
toggleYamlEditor: () => void;
numStreams: number;
onViewSelect: (selected: BuilderView) => void;
}

export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggleYamlEditor }) => {
const { yamlManifest } = useConnectorBuilderState();
export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({
className,
toggleYamlEditor,
numStreams,
onViewSelect,
}) => {
const { yamlManifest, resetBuilderFormValues } = useConnectorBuilderState();
const { resetForm } = useFormikContext();
const handleResetForm = () => {
resetBuilderFormValues();
resetForm();
};

return (
<div className={classnames(className, styles.container)}>
@@ -23,7 +53,22 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggl
<Heading as="h2" size="sm" className={styles.connectorName}>
Connector Name
</Heading>

<button onClick={() => onViewSelect("global")}>Global Configuration</button>

<Heading as="h3" size="sm">
Streams
</Heading>

<AddStreamButton />

{Array.from(Array(numStreams).keys()).map((streamNum) => {
const streamPath = `streams[${streamNum}]`;
return <StreamSelectButton key={streamPath} streamPath={streamPath} onClick={() => onViewSelect(streamNum)} />;
})}

<DownloadYamlButton className={styles.downloadButton} yamlIsValid yaml={yamlManifest} />
<button onClick={() => handleResetForm()}>Reset</button>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { BuilderCard } from "./BuilderCard";
import { BuilderField } from "./BuilderField";

export const GlobalConfigView: React.FC = () => {
return (
<>
<BuilderCard>
<BuilderField type="text" path="connectorName" label="Connector Name" />
</BuilderCard>
<BuilderCard>
<BuilderField type="text" path="urlBase" label="API URL" />
</BuilderCard>
</>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { BuilderCard } from "./BuilderCard";
import { BuilderField } from "./BuilderField";

interface StreamConfigViewProps {
streamNum: number;
}

export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum }) => {
const streamPath = (path: string) => `streams[${streamNum}].${path}`;

return (
<BuilderCard>
<BuilderField type="text" path={streamPath("name")} label="Stream Name" tooltip="Name of the stream" />
<BuilderField
type="text"
path={streamPath("urlPath")}
label="Path URL"
tooltip="Path of the endpoint that this stream represents."
/>
<BuilderField
type="array"
path={streamPath("fieldPointer")}
label="Field Pointer"
tooltip="Pointer into the response that should be extracted as the final record"
/>
<BuilderField
type="enum"
path={streamPath("httpMethod")}
options={["GET", "POST"]}
label="HTTP Method"
tooltip="HTTP method to use for requests sent to the API"
/>
</BuilderCard>
);
};
51 changes: 51 additions & 0 deletions airbyte-webapp/src/components/connectorBuilder/Builder/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { ConnectorManifest, DeclarativeStream, HttpRequesterAllOfAuthenticator } from "core/request/ConnectorManifest";

export interface BuilderFormValues {
connectorName: string;
urlBase: string;
// TODO: make required when authenticator is fully added
authenticator?: HttpRequesterAllOfAuthenticator;
streams: BuilderStream[];
}

export interface BuilderStream {
name: string;
urlPath: string;
fieldPointer: string[];
httpMethod: "GET" | "POST";
}

export const convertToManifest = (values: BuilderFormValues): ConnectorManifest => {
const manifestStreams: DeclarativeStream[] = values.streams.map((stream) => {
return {
name: stream.name,
retriever: {
name: stream.name,
requester: {
name: stream.name,
url_base: values.urlBase,
path: stream.urlPath,
authenticator: values.authenticator,
// TODO: remove these empty "config" values once they are no longer required in the connector manifest JSON schema
config: {},
},
record_selector: {
extractor: {
field_pointer: stream.fieldPointer,
config: {},
},
},
config: {},
},
config: {},
};
});

return {
version: "0.1.0",
check: {
stream_names: [],
},
streams: manifestStreams,
};
};
Original file line number Diff line number Diff line change
@@ -1,48 +1,64 @@
import classnames from "classnames";
import { Formik } from "formik";
import { useIntl } from "react-intl";
import { useToggle } from "react-use";

import { Builder } from "components/connectorBuilder/Builder/Builder";
import { BuilderFormValues } from "components/connectorBuilder/Builder/types";
import { StreamTestingPanel } from "components/connectorBuilder/StreamTestingPanel";
import { YamlEditor } from "components/connectorBuilder/YamlEditor";
import { ResizablePanels } from "components/ui/ResizablePanels";

import { ConnectorBuilderStateProvider } from "services/connectorBuilder/ConnectorBuilderStateService";
import {
ConnectorBuilderStateProvider,
useConnectorBuilderState,
} from "services/connectorBuilder/ConnectorBuilderStateService";

import styles from "./ConnectorBuilderPage.module.scss";

const ConnectorBuilderPageInner: React.FC = () => {
const { formatMessage } = useIntl();
const [showYamlEditor, toggleYamlEditor] = useToggle(true);
const [showYamlEditor, toggleYamlEditor] = useToggle(false);

const { builderFormValues } = useConnectorBuilderState();

return (
<ResizablePanels
className={classnames({ [styles.gradientBg]: showYamlEditor, [styles.solidBg]: !showYamlEditor })}
firstPanel={{
children: (
<>
{showYamlEditor ? (
<YamlEditor toggleYamlEditor={toggleYamlEditor} />
) : (
<Builder toggleYamlEditor={toggleYamlEditor} />
)}
</>
),
className: styles.leftPanel,
minWidth: 100,
}}
secondPanel={{
children: <StreamTestingPanel />,
className: styles.rightPanel,
flex: 0.33,
minWidth: 60,
overlay: {
displayThreshold: 325,
header: formatMessage({ id: "connectorBuilder.testConnector" }),
rotation: "counter-clockwise",
},
<Formik
initialValues={builderFormValues}
onSubmit={(values: BuilderFormValues) => {
console.log(values);
}}
/>
>
{({ values }) => (
<ResizablePanels
className={classnames({ [styles.gradientBg]: showYamlEditor, [styles.solidBg]: !showYamlEditor })}
firstPanel={{
children: (
<>
{showYamlEditor ? (
<YamlEditor toggleYamlEditor={toggleYamlEditor} />
) : (
<Builder values={values} toggleYamlEditor={toggleYamlEditor} />
)}
</>
),
className: styles.leftPanel,
minWidth: 100,
}}
secondPanel={{
children: <StreamTestingPanel />,
className: styles.rightPanel,
flex: 0.33,
minWidth: 60,
overlay: {
displayThreshold: 325,
header: formatMessage({ id: "connectorBuilder.testConnector" }),
rotation: "counter-clockwise",
},
}}
/>
)}
</Formik>
);
};

Original file line number Diff line number Diff line change
@@ -3,13 +3,30 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
import { useIntl } from "react-intl";
import { useLocalStorage } from "react-use";

import { BuilderFormValues, convertToManifest } from "components/connectorBuilder/Builder/types";

import { StreamReadRequestBodyConfig, StreamsListReadStreamsItem } from "core/request/ConnectorBuilderClient";
import { ConnectorManifest } from "core/request/ConnectorManifest";
import { useAppMonitoringService } from "hooks/services/AppMonitoringService";

import { useListStreams } from "./ConnectorBuilderApiService";

export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
connectorName: "",
urlBase: "",
streams: [],
};

const DEFAULT_JSON_MANIFEST_VALUES: ConnectorManifest = {
version: "0.1.0",
check: {
stream_names: [],
},
streams: [],
};

interface Context {
builderFormValues: BuilderFormValues;
jsonManifest: ConnectorManifest;
yamlManifest: string;
yamlEditorIsMounted: boolean;
@@ -19,6 +36,8 @@ interface Context {
selectedStream?: StreamsListReadStreamsItem;
configString: string;
configJson: StreamReadRequestBodyConfig;
resetBuilderFormValues: () => void;
setBuilderFormValues: (values: BuilderFormValues) => void;
setJsonManifest: (jsonValue: ConnectorManifest) => void;
setYamlManifest: (yamlValue: string) => void;
setYamlEditorIsMounted: (value: boolean) => void;
@@ -32,19 +51,25 @@ export const ConnectorBuilderStateContext = React.createContext<Context | null>(
export const ConnectorBuilderStateProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
const { formatMessage } = useIntl();

// json manifest
const defaultJsonManifest = {
version: "1.0.0",
check: {
stream_names: [],
},
streams: [],
};
const [builderFormValues, setBuilderFormValues] = useLocalStorage<BuilderFormValues>(
"connectorBuilderFormValues",
DEFAULT_BUILDER_FORM_VALUES
);
const formValues = builderFormValues ?? DEFAULT_BUILDER_FORM_VALUES;
const resetBuilderFormValues = () => setBuilderFormValues(DEFAULT_BUILDER_FORM_VALUES);
console.log("formValues", formValues);

const [jsonManifest, setJsonManifest] = useLocalStorage<ConnectorManifest>(
"connectorBuilderManifest",
defaultJsonManifest
"connectorBuilderJsonManifest",
DEFAULT_JSON_MANIFEST_VALUES
);
const manifest = jsonManifest ?? defaultJsonManifest;
const manifest = jsonManifest ?? DEFAULT_JSON_MANIFEST_VALUES;
console.log("manifest", manifest);

useEffect(() => {
setJsonManifest(convertToManifest(formValues));
}, [formValues, setJsonManifest]);

const [yamlIsValid, setYamlIsValid] = useState(true);
const [yamlEditorIsMounted, setYamlEditorIsMounted] = useState(true);

@@ -66,7 +91,7 @@ export const ConnectorBuilderStateProvider: React.FC<React.PropsWithChildren<unk
}
}, [configString]);

console.log("manifest", manifest);
// console.log("manifest", manifest);

// streams
const {
@@ -99,6 +124,7 @@ export const ConnectorBuilderStateProvider: React.FC<React.PropsWithChildren<unk
const selectedStream = streams.find((stream) => stream.name === selectedStreamName);

const ctx = {
builderFormValues: formValues,
jsonManifest: manifest,
yamlManifest,
yamlEditorIsMounted,
@@ -108,6 +134,8 @@ export const ConnectorBuilderStateProvider: React.FC<React.PropsWithChildren<unk
selectedStream,
configString,
configJson,
setBuilderFormValues,
resetBuilderFormValues,
setJsonManifest,
setYamlManifest,
setYamlIsValid,