From a8a70940093b70c593e2bf95950f92214204f731 Mon Sep 17 00:00:00 2001 From: Ben Church Date: Mon, 26 Aug 2024 21:42:32 -0700 Subject: [PATCH] feat(ai-assist): add header modal (#13639) Co-authored-by: lmossman --- .../Builder/AddStreamButton.tsx | 4 +- .../Builder/{ => Assist}/AssistButton.tsx | 4 +- .../Assist/AssistConfigButton.module.scss | 21 +++ .../Builder/Assist/AssistConfigButton.tsx | 122 ++++++++++++++++++ .../{ => Assist}/AssistWaiting.module.scss | 0 .../Builder/{ => Assist}/AssistWaiting.tsx | 0 .../{ => Builder/Assist}/assist.ts | 4 +- .../Builder/{ => Assist}/assistwaiting.gif | Bin .../Builder/AssistSection.tsx | 71 ---------- .../Builder/AuthenticationSection.tsx | 2 +- .../connectorBuilder/Builder/BuilderField.tsx | 2 + .../Builder/GlobalConfigView.tsx | 4 +- .../Builder/PaginationSection.tsx | 2 +- .../Builder/RecordSelectorSection.tsx | 3 +- .../Builder/StreamConfigView.tsx | 2 +- .../MenuBar/MenuBar.module.scss | 5 - .../connectorBuilder/MenuBar/MenuBar.tsx | 14 +- airbyte-webapp/src/locales/en.json | 7 +- .../ConnectorBuilderEditPage.module.scss | 2 +- 19 files changed, 175 insertions(+), 94 deletions(-) rename airbyte-webapp/src/components/connectorBuilder/Builder/{ => Assist}/AssistButton.tsx (99%) create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.module.scss create mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.tsx rename airbyte-webapp/src/components/connectorBuilder/Builder/{ => Assist}/AssistWaiting.module.scss (100%) rename airbyte-webapp/src/components/connectorBuilder/Builder/{ => Assist}/AssistWaiting.tsx (100%) rename airbyte-webapp/src/components/connectorBuilder/{ => Builder/Assist}/assist.ts (92%) rename airbyte-webapp/src/components/connectorBuilder/Builder/{ => Assist}/assistwaiting.gif (100%) delete mode 100644 airbyte-webapp/src/components/connectorBuilder/Builder/AssistSection.tsx diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx index db5c479b490..503c921dc2b 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx @@ -25,10 +25,10 @@ import { Action, Namespace, useAnalyticsService } from "core/services/analytics" import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService"; import styles from "./AddStreamButton.module.scss"; -import { AssistWaiting } from "./AssistWaiting"; +import { convertToAssistFormValuesSync } from "./Assist/assist"; +import { AssistWaiting } from "./Assist/AssistWaiting"; import { BuilderField } from "./BuilderField"; import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs"; -import { convertToAssistFormValuesSync } from "../assist"; import { AssistData, BuilderStream, DEFAULT_BUILDER_STREAM_VALUES, DEFAULT_SCHEMA, useBuilderWatch } from "../types"; interface AddStreamResponse { diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistButton.tsx similarity index 99% rename from airbyte-webapp/src/components/connectorBuilder/Builder/AssistButton.tsx rename to airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistButton.tsx index 18ba4e31a0a..cecc64c5c96 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistButton.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistButton.tsx @@ -24,8 +24,8 @@ import { import { KnownExceptionInfo } from "core/api/types/AirbyteClient"; import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService"; -import { AssistKey, convertToAssistFormValuesSync } from "../assist"; -import { AssistData, BuilderFormInput, BuilderFormValues, useBuilderWatch } from "../types"; +import { AssistKey, convertToAssistFormValuesSync } from "./assist"; +import { AssistData, BuilderFormInput, BuilderFormValues, useBuilderWatch } from "../../types"; /** * HELPERS diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.module.scss new file mode 100644 index 00000000000..58c65e49d80 --- /dev/null +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.module.scss @@ -0,0 +1,21 @@ +@use "scss/variables"; +@use "scss/colors"; +@use "scss/z-indices"; + +.popoverPanel { + background-color: colors.$foreground; + z-index: z-indices.$modal; + border-radius: variables.$border-radius-md; + box-shadow: variables.$box-shadow-popup; + border: 1px solid colors.$yellow-600; +} + +.assistConfigPanel { + width: variables.$width-modal-md; + max-width: 100%; + padding: variables.$spacing-xl; +} + +.assistForm { + margin-top: variables.$spacing-md; +} diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.tsx new file mode 100644 index 00000000000..68c4ef690c9 --- /dev/null +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistConfigButton.tsx @@ -0,0 +1,122 @@ +import { useFloating, offset, flip, autoUpdate } from "@floating-ui/react-dom"; +import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"; +import { useIntl } from "react-intl"; + +import { Button, ButtonProps } from "components/ui/Button"; +import { FlexContainer } from "components/ui/Flex"; +import { Switch } from "components/ui/Switch"; +import { Text } from "components/ui/Text"; + +import { useExperiment } from "hooks/services/Experiment"; +import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService"; + +import styles from "./AssistConfigButton.module.scss"; +import { BuilderField } from "../BuilderField"; + +type ChangeEventFunction = (e: React.ChangeEvent) => void; + +export const AssistForm: React.FC = () => { + const { formatMessage } = useIntl(); + + return ( + + + + + ); +}; + +const AssistSwitch: React.FC = () => { + const { assistEnabled, setAssistEnabled } = useConnectorBuilderFormState(); + const onChange: ChangeEventFunction = (e) => { + setAssistEnabled(e.currentTarget.checked); + }; + + return ; +}; + +const AssistConfigPanel = () => { + const { formatMessage } = useIntl(); + const { setAssistEnabled, assistEnabled } = useConnectorBuilderFormState(); + + return ( + + + setAssistEnabled(!assistEnabled)} /> + + + + {formatMessage({ id: "connectorBuilder.assist.configModal.description" })} + + + + ); +}; + +const AIButton = (props: ButtonProps) => { + const { formatMessage } = useIntl(); + const { assistEnabled } = useConnectorBuilderFormState(); + + const variant = assistEnabled ? "highlight" : "secondary"; + + return ( + + ); +}; + +const AssistConfigButton = () => { + const isAIEnabled = useExperiment("connectorBuilder.aiAssist.enabled", false); + + const { x, y, reference, floating, strategy } = useFloating({ + middleware: [offset(5), flip()], + whileElementsMounted: autoUpdate, + placement: "bottom", + }); + + if (!isAIEnabled) { + return null; + } + + return ( + + {({ open }) => ( + <> + + + + {open && ( + + + + )} + + )} + + ); +}; + +export default AssistConfigButton; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistWaiting.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.module.scss similarity index 100% rename from airbyte-webapp/src/components/connectorBuilder/Builder/AssistWaiting.module.scss rename to airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.module.scss diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistWaiting.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.tsx similarity index 100% rename from airbyte-webapp/src/components/connectorBuilder/Builder/AssistWaiting.tsx rename to airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.tsx diff --git a/airbyte-webapp/src/components/connectorBuilder/assist.ts b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assist.ts similarity index 92% rename from airbyte-webapp/src/components/connectorBuilder/assist.ts rename to airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assist.ts index 565134f3178..4652063275e 100644 --- a/airbyte-webapp/src/components/connectorBuilder/assist.ts +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assist.ts @@ -1,8 +1,8 @@ import { BuilderAssistManifestResponse } from "core/api"; import { DeclarativeComponentSchema } from "core/api/types/ConnectorManifest"; -import { convertToBuilderFormValuesSync } from "./convertManifestToBuilderForm"; -import { BuilderFormValues } from "./types"; +import { convertToBuilderFormValuesSync } from "../../convertManifestToBuilderForm"; +import { BuilderFormValues } from "../../types"; export type AssistKey = "urlbase" | "auth" | "metadata" | "record_selector" | "paginator"; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/assistwaiting.gif b/airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assistwaiting.gif similarity index 100% rename from airbyte-webapp/src/components/connectorBuilder/Builder/assistwaiting.gif rename to airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assistwaiting.gif diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AssistSection.tsx deleted file mode 100644 index 26c6a36d3c9..00000000000 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/AssistSection.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { useIntl } from "react-intl"; - -import { Switch } from "components/ui/Switch/Switch"; - -import { useExperiment } from "hooks/services/Experiment"; -import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService"; - -import { BuilderCard } from "./BuilderCard"; -import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs"; - -type ChangeEventFunction = (e: React.ChangeEvent) => void; - -export const AssistSection: React.FC = () => { - const { formatMessage } = useIntl(); - const { assistEnabled, setAssistEnabled } = useConnectorBuilderFormState(); - const onChange: ChangeEventFunction = (e) => { - setAssistEnabled(e.currentTarget.checked); - }; - const isAIEnabled = useExperiment("connectorBuilder.aiAssist.enabled", false); - if (!isAIEnabled) { - return null; - } - - const rightComponent = ( - - ); - return ( - - - - - - - ); -}; - -const AssistSwitch: React.FC<{ - title: string; - assistEnabled: boolean; - onChange: ChangeEventFunction; -}> = ({ title, assistEnabled, onChange }) => { - return ( - <> - {title} - - - ); -}; - -const CollapsedChildren: React.FC> = ({ children, enabled }) => { - if (enabled) { - return <>{children}; - } - return null; -}; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx index aac1325ae7c..fe58abaf312 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx @@ -2,6 +2,7 @@ import { useCallback } from "react"; import { useFormContext } from "react-hook-form"; import { useIntl } from "react-intl"; +import { AssistButton } from "components/connectorBuilder/Builder/Assist/AssistButton"; import GroupControls from "components/GroupControls"; import { ControlLabels } from "components/LabeledControl"; @@ -12,7 +13,6 @@ import { import { Action, Namespace, useAnalyticsService } from "core/services/analytics"; import { links } from "core/utils/links"; -import { AssistButton } from "./AssistButton"; import { BuilderCard } from "./BuilderCard"; import { BuilderField } from "./BuilderField"; import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs"; diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx index 0c4af8b2fb2..b71e17e05d1 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx @@ -66,6 +66,7 @@ export type BuilderFieldProps = BaseFieldProps & onBlur?: (value: string) => void; step?: number; min?: number; + placeholder?: string; } | { type: "date" | "date-time"; onChange?: (newValue: string) => void } | { type: "boolean"; onChange?: (newValue: boolean) => void; disabledTooltip?: string } @@ -220,6 +221,7 @@ const InnerBuilderField: React.FC = ({ onChange={(e) => { setValue(e.target.value); }} + placeholder={props.placeholder} className={props.className} type={props.type} value={(fieldValue as string | number | undefined) ?? ""} diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/GlobalConfigView.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/GlobalConfigView.tsx index ada44764030..b9a85889d6a 100644 --- a/airbyte-webapp/src/components/connectorBuilder/Builder/GlobalConfigView.tsx +++ b/airbyte-webapp/src/components/connectorBuilder/Builder/GlobalConfigView.tsx @@ -1,11 +1,10 @@ import { useIntl } from "react-intl"; -import { AssistButton } from "components/connectorBuilder/Builder/AssistButton"; +import { AssistButton } from "components/connectorBuilder/Builder/Assist/AssistButton"; import { Action, Namespace, useAnalyticsService } from "core/services/analytics"; import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService"; -import { AssistSection } from "./AssistSection"; import { AuthenticationSection } from "./AuthenticationSection"; import { BuilderCard } from "./BuilderCard"; import { BuilderConfigView } from "./BuilderConfigView"; @@ -20,7 +19,6 @@ export const GlobalConfigView: React.FC = () => { return (
- { ); return ( - - + +