[web] Drop support for disabled fieldsets

web/src/components/core/Fieldset.jsx

@@ -38,35 +38,21 @@ import "./fieldset.scss";
  *     <EncryptionPassword />
  *   </Fieldset>
  *
- * @example <caption>Using a complex legend and isDisabled prop</caption>
- *   <Fieldset
- *     legend={
- *       <Switch label="Use Encryption" isChecked={isChecked} onChange={handleChange} isReversed />
- *     }
- *     isDisabled={!encryptionAllowed}
- *   >
- *     <EncryptionType />
- *     <EncryptionPassword />
- *   </Fieldset>
- *
  * @param {object} props
  * @param {React.ReactNode} props.legend - The lengend
- * @param {boolean} [props.isDisabled=false] - whether the descendant form controls, except any inside legend, are disable
  * @param {string} [props.className] - additionally CSS class names
  * @param {JSX.Element} [props.children] - the section content
  * @param {object} [props.otherProps] fieldset element attributes, see {@link https://html.spec.whatwg.org/#the-fieldset-element}
  */
 export default function Fieldset({
   legend,
-  isDisabled,
   className,
   children,
   ...otherProps
 }) {
   return (
     <fieldset
       className={classNames("d-installer-fieldset", className)}
-      disabled={isDisabled}
       {...otherProps}
     >
       {legend && <legend>{legend}</legend>}

web/src/components/core/Fieldset.test.jsx

@@ -51,25 +51,4 @@ describe("Fieldset", () => {
     const checkbox = within(fieldset).getByRole("checkbox");
     expect(checkbox).toBeInTheDocument();
   });
-
-  it("sets children (except legend) as disabled when isDisabled prop is given", () => {
-    installerRender(
-      <Fieldset legend={<ComplexLegend />} isDisabled>
-        <label htmlFor="username">Username</label>
-        <input type="text" id="username" />
-        <label htmlFor="superuser">Superuser</label>
-        <input type="checkbox" id="superuser" />
-      </Fieldset>
-    );
-
-    const fieldset = screen.getByRole("group", { name: /Using a checkbox/i });
-    const legendCheckbox = within(fieldset).getByRole("checkbox", { name: "Using a checkbox in the legend" });
-    const inputText = within(fieldset).getByRole("textbox", { name: "Username" });
-    const checkbox = within(fieldset).getByRole("checkbox", { name: "Superuser" });
-
-    expect(fieldset).toHaveAttribute("disabled");
-    expect(legendCheckbox).not.toBeDisabled();
-    expect(inputText).toBeDisabled();
-    expect(checkbox).toBeDisabled();
-  });
 });

web/src/components/core/PasswordAndConfirmationInput.jsx

@@ -25,7 +25,7 @@ import {
   TextInput
 } from "@patternfly/react-core";
 
-const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
+const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled }) => {
   const [confirmation, setConfirmation] = useState(value || "");
   const [error, setError] = useState("");
 
@@ -61,6 +61,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
           type="password"
           aria-label="User password"
           value={value}
+          isDisabled={isDisabled}
           onChange={onChangeValue}
           onBlur={() => validate(value, confirmation)}
         />
@@ -77,6 +78,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
           type="password"
           aria-label="User password confirmation"
           value={confirmation}
+          isDisabled={isDisabled}
           onChange={onChangeConfirmation}
           onBlur={() => validate(value, confirmation)}
           validated={error === "" ? "default" : "error"}

web/src/components/core/PasswordAndConfirmationInput.test.jsx

@@ -38,8 +38,8 @@ describe("when the passwords do not match", () => {
 });
 
 it("uses the given password value for confirmation too", async () => {
-  const { user } = plainRender(
-    <PasswordAndConfirmationInput value={"12345"} />
+  plainRender(
+    <PasswordAndConfirmationInput value="12345" />
   );
 
   const passwordInput = screen.getByLabelText("Password");
@@ -48,3 +48,15 @@ it("uses the given password value for confirmation too", async () => {
   expect(passwordInput.value).toEqual("12345");
   expect(passwordInput.value).toEqual(confirmationInput.value);
 });
+
+it("disables both, password and confirmation, when isDisabled prop is given", async () => {
+  plainRender(
+    <PasswordAndConfirmationInput value="12345" isDisabled />
+  );
+
+  const passwordInput = screen.getByLabelText("Password");
+  const confirmationInput = screen.getByLabelText("Password confirmation");
+
+  expect(passwordInput).toBeDisabled();
+  expect(confirmationInput).toBeDisabled();
+});

web/src/components/storage/ProposalSettingsForm.jsx

@@ -91,7 +91,6 @@ export default function ProposalSettingsForm({ id, proposal, onSubmit, onValidat
         onChange={onLvmChange}
       />
       <Fieldset
-        isDisabled={!state.encryption}
         legend={
           <Switch
             id="encryption"
@@ -105,6 +104,7 @@ export default function ProposalSettingsForm({ id, proposal, onSubmit, onValidat
         <PasswordAndConfirmationInput
           id="encryptionPassword"
           value={state.encryptionPassword}
+          isDisabled={!state.encryption}
           onChange={onPasswordChange}
           onValidation={onEncryptionValidate}
         />