🪟 🐛 Connector Builder: Fix default value user input behavior (#6688)

Co-authored-by: Joe Reuter <joe@airbyte.io>
airbytehq · May 19, 2023 · be3907f · be3907f
1 parent 15e31e1
commit be3907f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx
@@ -14,8 +14,11 @@ import { Tooltip } from "components/ui/Tooltip";
 import { SourceDefinitionSpecificationDraft } from "core/domain/connector";
 import { ConnectorConfig } from "core/request/ConnectorBuilderClient";
 import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
-import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
-import { useConnectorBuilderTestInputState } from "services/connectorBuilder/ConnectorBuilderTestInputService";
+import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
+import {
+  useConnectorBuilderFormState,
+  useConnectorBuilderTestRead,
+} from "services/connectorBuilder/ConnectorBuilderStateService";
 import { ConnectorForm } from "views/Connector/ConnectorForm";
 
 import styles from "./ConfigMenu.module.scss";
@@ -29,8 +32,9 @@ interface ConfigMenuProps {
 
 export const ConfigMenu: React.FC<ConfigMenuProps> = ({ testInputJsonErrors, isOpen, setIsOpen }) => {
   const { jsonManifest, editorView, setEditorView } = useConnectorBuilderFormState();
-  const { testInputJson, setTestInputJson } = useConnectorBuilderTestInputState();
+  const { testInputJson, setTestInputJson, testInputJsonDirty } = useConnectorBuilderTestRead();
   const { trackError } = useAppMonitoringService();
+  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
 
   const [showInputsWarning, setShowInputsWarning] = useLocalStorage<boolean>("connectorBuilderInputsWarning", true);
 
@@ -109,7 +113,7 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ testInputJsonErrors, isO
                 )}
                 <ConnectorForm
                   // re-mount the form when the form values change from the outside to avoid stale data in the form
-                  key={testInputJson === undefined ? "without-testinput" : "with-testinput"}
+                  key={testInputJsonDirty ? "with-testinput" : "without-testinput"}
                   formType="source"
                   bodyClassName={styles.formContent}
                   selectedConnectorDefinitionSpecification={connectorDefinitionSpecification}
@@ -119,13 +123,22 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ testInputJsonErrors, isO
                     setIsOpen(false);
                   }}
                   isEditMode
-                  renderFooter={({ dirty, isSubmitting }) => (
+                  renderFooter={({ dirty, isSubmitting, resetConnectorForm }) => (
                     <div className={styles.inputFormModalFooter}>
                       <FlexContainer>
                         <FlexItem grow>
                           <Button
                             onClick={() => {
-                              setTestInputJson(undefined);
+                              openConfirmationModal({
+                                title: "connectorBuilder.resetTestingValues.title",
+                                text: "connectorBuilder.resetTestingValues.text",
+                                submitButtonText: "connectorBuilder.resetTestingValues.submit",
+                                onSubmit: () => {
+                                  closeConfirmationModal();
+                                  setTestInputJson(undefined);
+                                  resetConnectorForm();
+                                },
+                              });
                             }}
                             type="button"
                             variant="danger"

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
@@ -12,8 +12,8 @@ import { Spec } from "core/request/ConnectorManifest";
 import {
   useConnectorBuilderFormState,
   useConnectorBuilderFormManagementState,
+  useConnectorBuilderTestRead,
 } from "services/connectorBuilder/ConnectorBuilderStateService";
-import { useConnectorBuilderTestInputState } from "services/connectorBuilder/ConnectorBuilderTestInputService";
 
 import addButtonScreenshot from "./add-button.png";
 import { ConfigMenu } from "./ConfigMenu";
@@ -43,7 +43,7 @@ function useTestInputJsonErrors(testInputJson: ConnectorConfig | undefined, spec
 export const StreamTestingPanel: React.FC<unknown> = () => {
   const { isTestInputOpen, setTestInputOpen } = useConnectorBuilderFormManagementState();
   const { jsonManifest, yamlEditorIsMounted, editorView } = useConnectorBuilderFormState();
-  const { testInputJson } = useConnectorBuilderTestInputState();
+  const { testInputJson } = useConnectorBuilderTestRead();
 
   const testInputJsonErrors = useTestInputJsonErrors(testInputJson, jsonManifest.spec);
 

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -917,6 +917,9 @@
   "connectorBuilder.maxLength": "Must be at most 256 characters",
   "connectorBuilder.slackChannel": "#help-connector-development",
   "connectorBuilder.slackChannelTooltip": "Ask any questions or provide feedback in our public slack channel",
+  "connectorBuilder.resetTestingValues.title": "Reset testing values",
+  "connectorBuilder.resetTestingValues.text": "The testing values form will be reset back to its default values, so any changes you made to the testing values will be lost. Are you sure you want to continue?",
+  "connectorBuilder.resetTestingValues.submit": "Reset",
 
   "jobs.noAttemptsFailure": "Failed to start job.",
 

diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
@@ -70,6 +70,9 @@ interface TestReadContext {
   testStreamIndex: number;
   streamRead: UseQueryResult<StreamRead, unknown>;
   isFetchingStreamList: boolean;
+  testInputJson: ConnectorConfig;
+  testInputJsonDirty: boolean;
+  setTestInputJson: (value: TestReadContext["testInputJson"] | undefined) => void;
 }
 
 interface FormManagementStateContext {
@@ -395,7 +398,7 @@ export const ConnectorBuilderTestReadProvider: React.FC<React.PropsWithChildren<
   const manifest = lastValidJsonManifest ?? DEFAULT_JSON_MANIFEST_VALUES;
 
   // config
-  const { testInputJson } = useConnectorBuilderTestInputState();
+  const { testInputJson, setTestInputJson } = useConnectorBuilderTestInputState();
 
   const testInputWithDefaults = useTestInputDefaultValues(testInputJson, manifest.spec);
 
@@ -443,6 +446,9 @@ export const ConnectorBuilderTestReadProvider: React.FC<React.PropsWithChildren<
     setTestStreamIndex,
     streamRead,
     isFetchingStreamList,
+    testInputJson: testInputWithDefaults,
+    testInputJsonDirty: Boolean(testInputJson),
+    setTestInputJson,
   };
 
   return <ConnectorBuilderTestReadContext.Provider value={ctx}>{children}</ConnectorBuilderTestReadContext.Provider>;