show hide dn and pw

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -9,8 +9,9 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React, { useState } from "react";
+import _ from "lodash";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { Controller, UseFormMethods } from "react-hook-form";
+import { Controller, UseFormMethods, useWatch } from "react-hook-form";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { PasswordInput } from "../../components/password-input/PasswordInput";
@@ -36,6 +37,11 @@ export const LdapSettingsConnection = ({
 
   const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false);
 
+  const ldapBindType = useWatch({
+    control: form.control,
+    name: "config.authType",
+  });
+
   return (
     <>
       {showSectionHeading && (
@@ -231,12 +237,15 @@ export const LdapSettingsConnection = ({
                 variant={SelectVariant.single}
                 data-testid="ldap-bind-type"
               >
-                <SelectOption key={3} value="simple" />
-                <SelectOption key={4} value="none" />
+                <SelectOption key={0} value="simple" />
+                <SelectOption key={1} value="none" isPlaceholder />
               </Select>
             )}
           ></Controller>
         </FormGroup>
+
+        {_.isEqual(ldapBindType, ["simple"]) ? (
+          <>
             <FormGroup
               label={t("bindDn")}
               labelIcon={
@@ -308,6 +317,10 @@ export const LdapSettingsConnection = ({
                 {t("common:test")}
               </Button>
             </FormGroup>
+          </>
+        ) : (
+          <></>
+        )}
       </FormAccess>
     </>
   );