retain old behavior

Author: masonwoodford

frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Input from 'components/common/Input/Input';
 import { useFormContext } from 'react-hook-form';
 import SectionHeader from 'widgets/ClusterConfigForm/common/SectionHeader';
@@ -8,7 +8,9 @@ import Credentials from 'widgets/ClusterConfigForm/common/Credentials';
 const KSQL = () => {
   const { setValue, watch } = useFormContext();
   const ksql = watch('ksql');
+  const [configOpen, setConfigOpen] = useState(false);
   const toggleConfig = () => {
+    setConfigOpen((prevConfigOpen) => !prevConfigOpen);
     setValue('ksql', ksql ? undefined : { url: '', isAuth: false }, {
       shouldValidate: true,
       shouldDirty: true,
@@ -19,11 +21,11 @@ const KSQL = () => {
     <>
       <SectionHeader
         title="KSQL DB"
-        adding={!ksql}
+        adding={!configOpen}
         addButtonText="Configure KSQL DB"
         onClick={toggleConfig}
       />
-      {ksql && (
+      {configOpen && (
         <>
           <Input
             label="URL *"

frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx

@@ -7,11 +7,16 @@ import SSLForm from 'widgets/ClusterConfigForm/common/SSLForm';
 import Credentials from 'widgets/ClusterConfigForm/common/Credentials';
 
 const SchemaRegistry = () => {
-  const { setValue } = useFormContext();
+  const { setValue, watch } = useFormContext();
+  const schemaRegistry = watch('schemaRegistry');
   const [configOpen, setConfigOpen] = useState(false);
   const toggleConfig = () => {
     setConfigOpen((prevConfigOpen) => !prevConfigOpen);
-    setValue('schemaRegistry', { url: '', isAuth: false });
+    setValue('schemaRegistry', schemaRegistry ? undefined : { url: '', isAuth: false }, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+    });
   };
   return (
     <>