generify YamlEditor

airbytehq · Nov 4, 2022 · decf6d6 · decf6d6
1 parent 96e8bf9
commit decf6d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/YamlEditor/YamlEditor.tsx b/airbyte-webapp/src/components/YamlEditor/YamlEditor.tsx
@@ -7,21 +7,23 @@ import { useDebounce, useLocalStorage } from "react-use";
 import { CodeEditor } from "components/ui/CodeEditor";
 
 import { StreamsListRequestBodyManifest } from "core/request/ConnectorBuilderClient";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { DownloadYamlButton } from "./DownloadYamlButton";
 import styles from "./YamlEditor.module.scss";
 import { template } from "./YamlTemplate";
 
-export const YamlEditor: React.FC = () => {
+interface YamlEditorProps {
+  localStorageKey: string;
+  setJsonValue: (value: Record<string, object>) => void;
+}
+
+export const YamlEditor: React.FC<YamlEditorProps> = ({ localStorageKey, setJsonValue }) => {
   const yamlEditorRef = useRef<editor.IStandaloneCodeEditor>();
 
-  const [locallyStoredYaml, setLocallyStoredYaml] = useLocalStorage<string>("connectorBuilderYaml", template);
+  const [locallyStoredYaml, setLocallyStoredYaml] = useLocalStorage<string>(localStorageKey, template);
   const [yamlValue, setYamlValue] = useState(locallyStoredYaml ?? template);
   useDebounce(() => setLocallyStoredYaml(yamlValue), 500, [yamlValue]);
 
-  const { setJsonManifest } = useConnectorBuilderState();
-
   const monaco = useMonaco();
 
   useEffect(() => {
@@ -32,7 +34,7 @@ export const YamlEditor: React.FC = () => {
 
       try {
         const json = load(yamlValue) as StreamsListRequestBodyManifest;
-        setJsonManifest(json);
+        setJsonValue(json);
 
         // clear editor errors
         if (yamlEditorModel) {
@@ -57,7 +59,7 @@ export const YamlEditor: React.FC = () => {
         }
       }
     }
-  }, [yamlValue, monaco, setJsonManifest]);
+  }, [yamlValue, monaco, setJsonValue]);
 
   return (
     <div className={styles.container}>

diff --git a/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx b/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx
@@ -12,13 +12,13 @@ import {
 import styles from "./ConnectorBuilderPage.module.scss";
 
 const ConnectorBuilderPageInner: React.FC = () => {
-  const { selectedStream } = useConnectorBuilderState();
+  const { selectedStream, setJsonManifest } = useConnectorBuilderState();
 
   return (
     <ResizablePanels
       className={styles.container}
       firstPanel={{
-        children: <YamlEditor />,
+        children: <YamlEditor localStorageKey="connectorBuilderYaml" setJsonValue={setJsonManifest} />,
         className: styles.leftPanel,
         minWidth: 400,
       }}