From 223fc4d81fd58bbcca1ac9e8358785e05799bed4 Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Tue, 7 May 2024 21:18:00 -0700 Subject: [PATCH 1/5] fix schema registry config --- .../Sections/SchemaRegistry.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx index bd36ee893..7b9eb2445 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useState } from 'react'; import Input from 'components/common/Input/Input'; import { useFormContext } from 'react-hook-form'; import SectionHeader from 'widgets/ClusterConfigForm/common/SectionHeader'; @@ -6,24 +7,21 @@ import SSLForm from 'widgets/ClusterConfigForm/common/SSLForm'; import Credentials from 'widgets/ClusterConfigForm/common/Credentials'; const SchemaRegistry = () => { - const { setValue, watch } = useFormContext(); - const schemaRegistry = watch('schemaRegistry'); + const { setValue } = useFormContext(); + const [configOpen, setConfigOpen] = useState(false); const toggleConfig = () => { - setValue( - 'schemaRegistry', - schemaRegistry ? undefined : { url: '', isAuth: false }, - { shouldValidate: true, shouldDirty: true, shouldTouch: true } - ); + setConfigOpen((prevConfigOpen) => !prevConfigOpen); + setValue('schemaRegistry', { url: '', isAuth: false }); }; return ( <> - {schemaRegistry && ( + {configOpen && ( <> Date: Tue, 7 May 2024 23:53:01 -0700 Subject: [PATCH 2/5] retain old behavior --- frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx | 8 +++++--- .../ClusterConfigForm/Sections/SchemaRegistry.tsx | 9 +++++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx index 8d28ad65c..1b6fc2396 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx +++ b/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 = () => { <> - {ksql && ( + {configOpen && ( <> { - 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 ( <> From 396ba8f6549df87cd2033ea3d11abfa96ae06633 Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Wed, 8 May 2024 18:58:12 -0700 Subject: [PATCH 3/5] fix remaining components --- .../Sections/Authentication/Authentication.tsx | 13 ++++++++----- .../widgets/ClusterConfigForm/Sections/KSQL.tsx | 11 ++++++----- .../ClusterConfigForm/Sections/KafkaCluster.tsx | 11 +++++++---- .../widgets/ClusterConfigForm/Sections/Metrics.tsx | 14 +++++++++----- .../ClusterConfigForm/Sections/SchemaRegistry.tsx | 5 +++-- frontend/src/widgets/ClusterConfigForm/types.ts | 3 +++ .../utils/transformFormDataToPayload.ts | 8 ++++---- 7 files changed, 40 insertions(+), 25 deletions(-) diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx index 0fad2cbf1..e2064b4de 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx +++ b/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 ( <> - {hasAuth && ( + {configOpen && ( <> { const [configOpen, setConfigOpen] = useState(false); const toggleConfig = () => { setConfigOpen((prevConfigOpen) => !prevConfigOpen); - setValue('ksql', ksql ? undefined : { url: '', isAuth: false }, { - shouldValidate: true, - shouldDirty: true, - shouldTouch: true, - }); + setValue('ksql', ksql ? { isActive: false } : { isActive: false, url: '', isAuth: false }, { + shouldValidate: true, + shouldDirty: true, + shouldTouch: true, + } + ); }; return ( <> diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx index 8a1be6222..602a5a5b6 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx +++ b/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 ( <> diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx index e9d67f201..2c803e380 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx +++ b/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 ( <> - {visibleMetrics && ( + {configOpen && ( <> { const [configOpen, setConfigOpen] = useState(false); const toggleConfig = () => { setConfigOpen((prevConfigOpen) => !prevConfigOpen); - setValue('schemaRegistry', schemaRegistry ? undefined : { url: '', isAuth: false }, { + setValue('schemaRegistry', schemaRegistry ? { isActive: false }: { isActive: true, url: '', isAuth: false }, { shouldValidate: true, shouldDirty: true, shouldTouch: true, - }); + } + ); }; return ( <> diff --git a/frontend/src/widgets/ClusterConfigForm/types.ts b/frontend/src/widgets/ClusterConfigForm/types.ts index 6af74b5f8..d10199a61 100644 --- a/frontend/src/widgets/ClusterConfigForm/types.ts +++ b/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; diff --git a/frontend/src/widgets/ClusterConfigForm/utils/transformFormDataToPayload.ts b/frontend/src/widgets/ClusterConfigForm/utils/transformFormDataToPayload.ts index 91f9ad1e2..0dea696a1 100644 --- a/frontend/src/widgets/ClusterConfigForm/utils/transformFormDataToPayload.ts +++ b/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': From 73f51a4fa9e246a8bfbb6792780080b8ec7aeb16 Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Tue, 21 May 2024 15:47:44 +0900 Subject: [PATCH 4/5] fix linting --- .../Sections/Authentication/Authentication.tsx | 2 +- .../src/widgets/ClusterConfigForm/Sections/KSQL.tsx | 5 ++++- .../ClusterConfigForm/Sections/KafkaCluster.tsx | 2 +- .../src/widgets/ClusterConfigForm/Sections/Metrics.tsx | 2 +- .../ClusterConfigForm/Sections/SchemaRegistry.tsx | 10 +++++++--- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx index e2064b4de..94113f8c8 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/Authentication/Authentication.tsx @@ -1,4 +1,4 @@ -import React, {useState} 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'; diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx index 77d8bab7d..7dfb83f90 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx @@ -11,7 +11,10 @@ const KSQL = () => { const [configOpen, setConfigOpen] = useState(false); const toggleConfig = () => { setConfigOpen((prevConfigOpen) => !prevConfigOpen); - setValue('ksql', ksql ? { isActive: false } : { isActive: false, url: '', isAuth: false }, { + setValue( + 'ksql', + ksql ? { isActive: false } : { isActive: false, url: '', isAuth: false }, + { shouldValidate: true, shouldDirty: true, shouldTouch: true, diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx index 602a5a5b6..c63a1cc6e 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx @@ -1,4 +1,4 @@ -import React, {useState} 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'; diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx index 2c803e380..73b9d6d03 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/Metrics.tsx @@ -1,4 +1,4 @@ -import React, {useState} 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'; diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx index 7bda74a06..7196494eb 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/SchemaRegistry.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { useState } 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'; @@ -12,7 +11,12 @@ const SchemaRegistry = () => { const [configOpen, setConfigOpen] = useState(false); const toggleConfig = () => { setConfigOpen((prevConfigOpen) => !prevConfigOpen); - setValue('schemaRegistry', schemaRegistry ? { isActive: false }: { isActive: true, url: '', isAuth: false }, { + setValue( + 'schemaRegistry', + schemaRegistry + ? { isActive: false } + : { isActive: true, url: '', isAuth: false }, + { shouldValidate: true, shouldDirty: true, shouldTouch: true, From 28a34add17474c4295f1947d4e6f366aa105e3cd Mon Sep 17 00:00:00 2001 From: Mason Woodford <63433735+masonwoodford@users.noreply.github.com> Date: Wed, 22 May 2024 06:12:17 +0900 Subject: [PATCH 5/5] fix linting in ksql --- frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx b/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx index 7dfb83f90..4be3534ae 100644 --- a/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx +++ b/frontend/src/widgets/ClusterConfigForm/Sections/KSQL.tsx @@ -1,4 +1,4 @@ -import React, {useState} 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';