FE: Wizard: Fix sections collapsing (#399)

Co-authored-by: Roman Zabaluev <[email protected]>

Author: masonwoodford

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { AUTH_OPTIONS, SECURITY_PROTOCOL_OPTIONS } from 'lib/constants';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
@@ -10,25 +10,28 @@ const Authentication: React.FC = () => {
   const { watch, setValue } = useFormContext();
   const hasAuth = !!watch('auth');
   const authMethod = watch('auth.method');
+  const [configOpen, setConfigOpen] = useState(false);
   const hasSecurityProtocolField =
     authMethod && !['Delegation tokens', 'mTLS'].includes(authMethod);
 
-  const toggle = () =>
-    setValue('auth', hasAuth ? undefined : {}, {
+  const toggle = () => {
+    setConfigOpen((prevConfigOpen) => !prevConfigOpen);
+    setValue('auth', hasAuth ? { isActive: false } : { isActive: true }, {
       shouldValidate: true,
       shouldDirty: true,
       shouldTouch: true,
     });
+  };
 
   return (
     <>
       <SectionHeader
         title="Authentication"
-        adding={!hasAuth}
+        adding={!configOpen}
         addButtonText="Configure Authentication"
         onClick={toggle}
       />
-      {hasAuth && (
+      {configOpen && (
         <>
           <ControlledSelect
             name="auth.method"

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,22 +8,28 @@ import Credentials from 'widgets/ClusterConfigForm/common/Credentials';
 const KSQL = () => {
   const { setValue, watch } = useFormContext();
   const ksql = watch('ksql');
+  const [configOpen, setConfigOpen] = useState(false);
   const toggleConfig = () => {
-    setValue('ksql', ksql ? undefined : { url: '', isAuth: false }, {
-      shouldValidate: true,
-      shouldDirty: true,
-      shouldTouch: true,
-    });
+    setConfigOpen((prevConfigOpen) => !prevConfigOpen);
+    setValue(
+      'ksql',
+      ksql ? { isActive: false } : { isActive: false, url: '', isAuth: false },
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      }
+    );
   };
   return (
     <>
       <SectionHeader
         title="KSQL DB"
-        adding={!ksql}
+        adding={!configOpen}
         addButtonText="Configure KSQL DB"
         onClick={toggleConfig}
       />
-      {ksql && (
+      {configOpen && (
         <>
           <Input
             label="URL *"

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Input from 'components/common/Input/Input';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { FormError, InputHint } from 'components/common/Input/Input.styled';
@@ -21,19 +21,22 @@ const KafkaCluster: React.FC = () => {
     name: 'bootstrapServers',
   });
 
-  const hasTrustStore = !!watch('truststore');
+  const [hasTrustStore, setHasTrustStore] = useState(false);
 
-  const toggleSection = (section: string) => () =>
+  const toggleSection = (section: string) => () => {
+    setHasTrustStore((prevConfigOpen) => !prevConfigOpen);
     setValue(
       section,
       watch(section)
-        ? undefined
+        ? { isActive: false }
         : {
+            isActive: true,
             location: '',
             password: '',
           },
       { shouldValidate: true, shouldDirty: true, shouldTouch: true }
     );
+  };
 
   return (
     <>

frontend/src/widgets/ClusterConfigForm/Sections/Metrics.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 ControlledSelect from 'components/common/Select/ControlledSelect';
@@ -11,28 +11,32 @@ import Credentials from 'widgets/ClusterConfigForm/common/Credentials';
 const Metrics = () => {
   const { setValue, watch } = useFormContext();
   const visibleMetrics = !!watch('metrics');
-  const toggleMetrics = () =>
+  const [configOpen, setConfigOpen] = useState(false);
+  const toggleMetrics = () => {
+    setConfigOpen((prevConfigOpen) => !prevConfigOpen);
     setValue(
       'metrics',
       visibleMetrics
-        ? undefined
+        ? { isActive: false }
         : {
+            isActive: true,
             type: '',
             port: 0,
             isAuth: false,
           },
       { shouldValidate: true, shouldDirty: true, shouldTouch: true }
     );
+  };
 
   return (
     <>
       <SectionHeader
         title="Metrics"
-        adding={!visibleMetrics}
+        adding={!configOpen}
         addButtonText="Configure Metrics"
         onClick={toggleMetrics}
       />
-      {visibleMetrics && (
+      {configOpen && (
         <>
           <ControlledSelect
             name="metrics.type"

frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.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,22 +8,30 @@ import Credentials from 'widgets/ClusterConfigForm/common/Credentials';
 const SchemaRegistry = () => {
   const { setValue, watch } = useFormContext();
   const schemaRegistry = watch('schemaRegistry');
+  const [configOpen, setConfigOpen] = useState(false);
   const toggleConfig = () => {
+    setConfigOpen((prevConfigOpen) => !prevConfigOpen);
     setValue(
       'schemaRegistry',
-      schemaRegistry ? undefined : { url: '', isAuth: false },
-      { shouldValidate: true, shouldDirty: true, shouldTouch: true }
+      schemaRegistry
+        ? { isActive: false }
+        : { isActive: true, url: '', isAuth: false },
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      }
     );
   };
   return (
     <>
       <SectionHeader
         title="Schema Registry"
-        adding={!schemaRegistry}
+        adding={!configOpen}
         addButtonText="Configure Schema Registry"
         onClick={toggleConfig}
       />
-      {schemaRegistry && (
+      {configOpen && (
         <>
           <Input
             label="URL *"

frontend/src/widgets/ClusterConfigForm/types.ts

@@ -20,6 +20,7 @@ type WithAuth = {
 type URLWithAuth = WithAuth &
   WithKeystore & {
     url?: string;
+    isActive?: string;
   };
 
 type KafkaConnect = WithAuth &
@@ -30,6 +31,7 @@ type KafkaConnect = WithAuth &
 
 type Metrics = WithAuth &
   WithKeystore & {
+    isActive?: string;
     type: string;
     port: string;
   };
@@ -43,6 +45,7 @@ export type ClusterConfigFormValues = {
     password: string;
   };
   auth?: WithKeystore & {
+    isActive?: string;
     method: string;
     securityProtocol: SecurityProtocol;
     props: Record<string, string>;

frontend/src/widgets/ClusterConfigForm/utils/transformFormDataToPayload.ts

@@ -52,7 +52,7 @@ export const transformFormDataToPayload = (data: ClusterConfigFormValues) => {
   }
 
   // Schema Registry
-  if (data.schemaRegistry) {
+  if (data.schemaRegistry?.isActive) {
     config.schemaRegistry = data.schemaRegistry.url;
     config.schemaRegistryAuth = transformToCredentials(
       data.schemaRegistry.isAuth,
@@ -65,7 +65,7 @@ export const transformFormDataToPayload = (data: ClusterConfigFormValues) => {
   }
 
   // KSQL
-  if (data.ksql) {
+  if (data.ksql?.isActive) {
     config.ksqldbServer = data.ksql.url;
     config.ksqldbServerAuth = transformToCredentials(
       data.ksql.isAuth,
@@ -88,7 +88,7 @@ export const transformFormDataToPayload = (data: ClusterConfigFormValues) => {
   }
 
   // Metrics
-  if (data.metrics) {
+  if (data.metrics?.isActive) {
     config.metrics = {
       type: data.metrics.type,
       port: Number(data.metrics.port),
@@ -106,7 +106,7 @@ export const transformFormDataToPayload = (data: ClusterConfigFormValues) => {
   };
 
   // Authentication
-  if (data.auth) {
+  if (data.auth?.isActive) {
     const { method, props, securityProtocol, keystore } = data.auth;
     switch (method) {
       case 'SASL/JAAS':