fix the name of the fields introduced test (#1199)

* fix the name of the fields introduced test

fixes: #1182

* changed to use display none to hide fields

cypress/integration/realm_settings_test.spec.ts

@@ -292,6 +292,23 @@ describe("Realm settings", () => {
     masthead.checkNotificationMessage("Realm successfully updated");
   });
 
+  it("Brute force detection", () => {
+    sidebarPage.goToRealmSettings();
+    cy.get("#pf-tab-securityDefences-securityDefences").click();
+    cy.get("#pf-tab-20-bruteForce").click();
+
+    cy.findByTestId("brute-force-tab-save").should("be.disabled");
+
+    cy.get("#bruteForceProtected").click({ force: true });
+    cy.findByTestId("waitIncrementSeconds").type("1");
+    cy.findByTestId("maxFailureWaitSeconds").type("1");
+    cy.findByTestId("maxDeltaTimeSeconds").type("1");
+    cy.findByTestId("minimumQuickLoginWaitSeconds").type("1");
+
+    cy.findByTestId("brute-force-tab-save").should("be.enabled").click();
+    masthead.checkNotificationMessage("Realm successfully updated");
+  });
+
   it("add session data", () => {
     sidebarPage.goToRealmSettings();
 

src/realm-settings/help.ts

@@ -60,13 +60,14 @@ export default {
     failureFactor: "How many failures before wait is triggered.",
     permanentLockout:
       "Lock the user permanently when the user exceeds the maximum login failures.",
-    waitIncrement:
+    waitIncrementSeconds:
       "When failure threshold has been met, how much time should the user be locked out?",
-    maxFailureWait: "Max time a user will be locked out.",
+    maxFailureWaitSeconds: "Max time a user will be locked out.",
-    maxDeltaTime: "When will failure count be reset?",
+    maxDeltaTimeSeconds: "When will failure count be reset?",
     quickLoginCheckMilliSeconds:
       "If a failure happens concurrently too quickly, lock out the user.",
-    minimumQuickLoginWait: "How long to wait after a quick login failure.",
+    minimumQuickLoginWaitSeconds:
+      "How long to wait after a quick login failure.",
     ssoSessionIdle:
       "Time a session is allowed to be idle before it expires. Tokens and browser sessions are invalidated when a session is expired.",
     ssoSessionMax:

src/realm-settings/messages.ts

@@ -611,11 +611,11 @@ export default {
     strictTransportSecurity: "HTTP Strict Transport Security (HSTS)",
     failureFactor: "Max login failures",
     permanentLockout: "Permanent lockout",
-    waitIncrement: "Wait increment",
+    waitIncrementSeconds: "Wait increment",
-    maxFailureWait: "Max wait",
+    maxFailureWaitSeconds: "Max wait",
-    maxDeltaTime: "Failure reset time",
+    maxDeltaTimeSeconds: "Failure reset time",
     quickLoginCheckMilliSeconds: "Quick login check milliseconds",
-    minimumQuickLoginWait: "Minimum quick login wait",
+    minimumQuickLoginWaitSeconds: "Minimum quick login wait",
   },
   "partial-import": {
     partialImportHeaderText:

src/realm-settings/security-defences/BruteForceDetection.tsx

@@ -62,100 +62,107 @@ export const BruteForceDetection = ({
           )}
         />
       </FormGroup>
-      {enable && (
+      <FormGroup
-        <>
+        label={t("failureFactor")}
-          <FormGroup
+        labelIcon={
-            label={t("failureFactor")}
+          <HelpItem
-            labelIcon={
+            helpText="realm-settings-help:failureFactor"
-              <HelpItem
+            forLabel={t("failureFactor")}
-                helpText="realm-settings-help:failureFactor"
+            forID="failureFactor"
-                forLabel={t("failureFactor")}
+          />
-                forID="failureFactor"
+        }
-              />
+        fieldId="failureFactor"
-            }
+        style={enable ? {} : { display: "none" }}
-            fieldId="failureFactor"
+      >
-          >
+        <Controller
-            <Controller
+          name="failureFactor"
-              name="failureFactor"
+          defaultValue={0}
-              defaultValue={0}
+          control={control}
-              control={control}
+          rules={{ required: true }}
-              rules={{ required: true }}
+          render={({ onChange, value }) => (
-              render={({ onChange, value }) => (
+            <NumberInput
-                <NumberInput
+              type="text"
-                  type="text"
+              id="failureFactor"
-                  id="failureFactor"
+              value={value}
-                  value={value}
+              onPlus={() => onChange(value + 1)}
-                  onPlus={() => onChange(value + 1)}
+              onMinus={() => onChange(value - 1)}
-                  onMinus={() => onChange(value - 1)}
+              onChange={(event) =>
-                  onChange={(event) =>
+                onChange(Number((event.target as HTMLInputElement).value))
-                    onChange(Number((event.target as HTMLInputElement).value))
+              }
-                  }
-                />
-              )}
             />
-          </FormGroup>
-          <FormGroup
-            label={t("permanentLockout")}
-            fieldId="permanentLockout"
-            hasNoPaddingTop
-          >
-            <Controller
-              name="permanentLockout"
-              defaultValue={false}
-              control={control}
-              render={({ onChange, value }) => (
-                <Switch
-                  id="permanentLockout"
-                  label={t("common:on")}
-                  labelOff={t("common:off")}
-                  isChecked={value}
-                  onChange={onChange}
-                />
-              )}
-            />
-          </FormGroup>
-
-          {!permanentLockout && (
-            <>
-              <Time name="waitIncrement" />
-              <Time name="maxFailureWait" />
-              <Time name="maxDeltaTime" />
-            </>
           )}
-
+        />
-          <FormGroup
+      </FormGroup>
-            label={t("quickLoginCheckMilliSeconds")}
+      <FormGroup
-            labelIcon={
+        label={t("permanentLockout")}
-              <HelpItem
+        fieldId="permanentLockout"
-                helpText="realm-settings-help:quickLoginCheckMilliSeconds"
+        hasNoPaddingTop
-                forLabel={t("quickLoginCheckMilliSeconds")}
+        style={enable ? {} : { display: "none" }}
-                forID="quickLoginCheckMilliSeconds"
+      >
-              />
+        <Controller
-            }
+          name="permanentLockout"
-            fieldId="quickLoginCheckMilliSeconds"
+          defaultValue={false}
-          >
+          control={control}
-            <Controller
+          render={({ onChange, value }) => (
-              name="quickLoginCheckMilliSeconds"
+            <Switch
-              defaultValue={0}
+              id="permanentLockout"
-              control={control}
+              label={t("common:on")}
-              render={({ onChange, value }) => (
+              labelOff={t("common:off")}
-                <NumberInput
+              isChecked={value}
-                  type="text"
+              onChange={onChange}
-                  id="quickLoginCheckMilliSeconds"
-                  value={value}
-                  onPlus={() => onChange(value + 1)}
-                  onMinus={() => onChange(value - 1)}
-                  onChange={(event) =>
-                    onChange(Number((event.target as HTMLInputElement).value))
-                  }
-                />
-              )}
             />
-          </FormGroup>
+          )}
+        />
+      </FormGroup>
 
-          <Time name="minimumQuickLoginWait" />
+      <Time
-        </>
+        name="waitIncrementSeconds"
-      )}
+        style={enable && !permanentLockout ? {} : { display: "none" }}
+      />
+      <Time
+        name="maxFailureWaitSeconds"
+        style={enable && !permanentLockout ? {} : { display: "none" }}
+      />
+      <Time
+        name="maxDeltaTimeSeconds"
+        style={enable && !permanentLockout ? {} : { display: "none" }}
+      />
+
+      <FormGroup
+        label={t("quickLoginCheckMilliSeconds")}
+        labelIcon={
+          <HelpItem
+            helpText="realm-settings-help:quickLoginCheckMilliSeconds"
+            forLabel={t("quickLoginCheckMilliSeconds")}
+            forID="quickLoginCheckMilliSeconds"
+          />
+        }
+        fieldId="quickLoginCheckMilliSeconds"
+        style={enable ? {} : { display: "none" }}
+      >
+        <Controller
+          name="quickLoginCheckMilliSeconds"
+          defaultValue={0}
+          control={control}
+          render={({ onChange, value }) => (
+            <NumberInput
+              type="text"
+              id="quickLoginCheckMilliSeconds"
+              value={value}
+              onPlus={() => onChange(value + 1)}
+              onMinus={() => onChange(value - 1)}
+              onChange={(event) =>
+                onChange(Number((event.target as HTMLInputElement).value))
+              }
+            />
+          )}
+        />
+      </FormGroup>
+
+      <Time
+        name="minimumQuickLoginWaitSeconds"
+        style={enable ? {} : { display: "none" }}
+      />
 
       <ActionGroup>
         <Button

src/realm-settings/security-defences/Time.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
 import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
@@ -6,11 +6,18 @@ import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
 
-export const Time = ({ name }: { name: string }) => {
+export const Time = ({
+  name,
+  style,
+}: {
+  name: string;
+  style?: CSSProperties;
+}) => {
   const { t } = useTranslation("realm-settings");
   const { control, errors } = useFormContext();
   return (
     <FormGroup
+      style={style}
       label={t(name)}
       fieldId={name}
       labelIcon={
@@ -32,6 +39,7 @@ export const Time = ({ name }: { name: string }) => {
         rules={{ required: true }}
         render={({ onChange, value }) => (
           <TimeSelector
+            data-testId={name}
             value={value}
             onChange={onChange}
             validated={