Move enable / disable to header (#3397)

apps/admin-ui/cypress/support/pages/admin_console/manage/users/user_details/UserDetailsPage.ts

@@ -10,8 +10,6 @@ export default class UserDetailsPage extends PageObject {
   firstNameValue: string;
   lastNameInput: string;
   lastNameValue: string;
-  enabledSwitch: string;
-  enabledValue: boolean;
   requiredUserActions: RequiredActionAlias[];
   identityProviderLinksTab: string;
 
@@ -29,8 +27,6 @@ export default class UserDetailsPage extends PageObject {
     this.firstNameValue = "firstname";
     this.lastNameInput = "lastName-input";
     this.lastNameValue = "lastname";
-    this.enabledSwitch = "user-enabled-switch";
-    this.enabledValue = true;
     this.requiredUserActions = [RequiredActionAlias.UPDATE_PASSWORD];
     this.identityProviderLinksTab = "identity-provider-links-tab";
   }
@@ -47,7 +43,6 @@ export default class UserDetailsPage extends PageObject {
     cy.findByTestId(this.emailInput).type(this.emailValue());
     cy.findByTestId(this.firstNameInput).type(this.firstNameValue);
     cy.findByTestId(this.lastNameInput).type(this.lastNameValue);
-    cy.findByTestId(this.enabledSwitch).check({ force: true });
 
     return this;
   }

apps/admin-ui/src/user/UserForm.tsx

@@ -313,30 +313,6 @@ export const UserForm = ({
           />
         </FormGroup>
       )}
-      <FormGroup
-        label={t("common:enabled")}
-        fieldId="kc-enabled"
-        labelIcon={
-          <HelpItem helpText="users-help:disabled" fieldLabelId="enabled" />
-        }
-      >
-        <Controller
-          name="enabled"
-          defaultValue={true}
-          control={control}
-          render={({ onChange, value }) => (
-            <Switch
-              data-testid="user-enabled-switch"
-              id={"kc-user-enabled"}
-              onChange={(value) => onChange(value)}
-              isChecked={value}
-              label={t("common:on")}
-              labelOff={t("common:off")}
-              aria-label={t("common:enabled")}
-            />
-          )}
-        />
-      </FormGroup>
       <FormGroup
         label={t("requiredUserActions")}
         fieldId="kc-required-user-actions"

apps/admin-ui/src/user/UsersTabs.tsx

@@ -8,7 +8,7 @@ import {
   TabTitleText,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { FormProvider, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
@@ -150,25 +150,37 @@ const UsersTabs = () => {
     <>
       <ImpersonateConfirm />
       <DeleteConfirm />
-      <ViewHeader
+      <Controller
-        titleKey={user?.id ? user.username! : t("createUser")}
+        name="enabled"
-        divider={!id}
+        control={userForm.control}
-        dropdownItems={[
+        defaultValue={true}
-          <DropdownItem
+        render={({ onChange, value }) => (
-            key="impersonate"
+          <ViewHeader
-            isDisabled={!user?.access?.impersonate}
+            titleKey={user?.id ? user.username! : t("createUser")}
-            onClick={() => toggleImpersonateDialog()}
+            divider={!id}
-          >
+            dropdownItems={[
-            {t("impersonate")}
+              <DropdownItem
-          </DropdownItem>,
+                key="impersonate"
-          <DropdownItem
+                isDisabled={!user?.access?.impersonate}
-            key="delete"
+                onClick={() => toggleImpersonateDialog()}
-            isDisabled={!user?.access?.manage}
+              >
-            onClick={() => toggleDeleteDialog()}
+                {t("impersonate")}
-          >
+              </DropdownItem>,
-            {t("common:delete")}
+              <DropdownItem
-          </DropdownItem>,
+                key="delete"
-        ]}
+                isDisabled={!user?.access?.manage}
+                onClick={() => toggleDeleteDialog()}
+              >
+                {t("common:delete")}
+              </DropdownItem>,
+            ]}
+            isEnabled={value}
+            onToggle={(value) => {
+              onChange(value);
+              save(userForm.getValues());
+            }}
+          />
+        )}
       />
       <PageSection variant="light" className="pf-u-p-0">
         <FormProvider {...userForm}>