remove attributes form when use profile enabled (#20923)

When user profile is activated the attributes tab is useless

towards fixing: #20837

js/apps/admin-ui/src/user/EditUser.tsx

@@ -1,3 +1,4 @@
+import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import {
   AlertVariant,
@@ -24,6 +25,7 @@ import { useAccess } from "../context/access/Access";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { UserProfileProvider } from "../realm-settings/user-profile/UserProfileContext";
 import { useFetch } from "../utils/useFetch";
+import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
 import { useParams } from "../utils/useParams";
 import { useUpdateEffect } from "../utils/useUpdateEffect";
 import { UserAttributes } from "./UserAttributes";
@@ -102,6 +104,25 @@ const EditUserForm = ({ user, bruteForced, refresh }: EditUserFormProps) => {
     defaultValues: user,
   });
 
+  const [realmRepresentation, setRealmRepresentattion] =
+    useState<RealmRepresentation>();
+
+  useFetch(
+    () => adminClient.realms.findOne({ realm }),
+    (realm) => {
+      if (!realm) {
+        throw new Error(t("common:notFound"));
+      }
+      setRealmRepresentattion(realm);
+    },
+    []
+  );
+
+  const isFeatureEnabled = useIsFeatureEnabled();
+  const isUserProfileEnabled =
+    isFeatureEnabled(Feature.DeclarativeUserProfile) &&
+    realmRepresentation?.attributes?.userProfileEnabled === "true";
+
   const toTab = (tab: UserTab) =>
     toUser({
       realm,
@@ -223,16 +244,23 @@ const EditUserForm = ({ user, bruteForced, refresh }: EditUserFormProps) => {
                 {...settingsTab}
               >
                 <PageSection variant="light">
-                  <UserForm save={save} user={user} bruteForce={bruteForced} />
+                  <UserForm
+                    save={save}
+                    user={user}
+                    bruteForce={bruteForced}
+                    realm={realmRepresentation}
+                  />
                 </PageSection>
               </Tab>
-              <Tab
-                data-testid="attributes"
-                title={<TabTitleText>{t("common:attributes")}</TabTitleText>}
-                {...attributesTab}
-              >
-                <UserAttributes user={user} />
-              </Tab>
+              {!isUserProfileEnabled && (
+                <Tab
+                  data-testid="attributes"
+                  title={<TabTitleText>{t("common:attributes")}</TabTitleText>}
+                  {...attributesTab}
+                >
+                  <UserAttributes user={user} />
+                </Tab>
+              )}
               <Tab
                 data-testid="credentials"
                 isHidden={!user.access?.view}

js/apps/admin-ui/src/user/UserAttributes.tsx

@@ -15,7 +15,6 @@ import {
   AttributesForm,
 } from "../components/key-value-form/AttributeForm";
 import {
-  KeyValueType,
   arrayToKeyValue,
   keyValueToArray,
 } from "../components/key-value-form/key-value-convert";
@@ -33,10 +32,7 @@ export const UserAttributes = ({ user: defaultUser }: UserAttributesProps) => {
   const { config } = useUserProfile();
 
   const convertAttributes = () => {
-    return arrayToKeyValue<UserRepresentation>(user.attributes!).filter(
-      (a: KeyValueType) =>
-        !config?.attributes?.some((attribute) => attribute.name === a.key)
-    );
+    return arrayToKeyValue<UserRepresentation>(user.attributes!);
   };
 
   useEffect(() => {

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

@@ -25,7 +25,6 @@ import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTex
 import { useAccess } from "../context/access/Access";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { emailRegexPattern } from "../util";
-import { useFetch } from "../utils/useFetch";
 import useFormatDate from "../utils/useFormatDate";
 import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
 import { FederatedUserLink } from "./FederatedUserLink";
@@ -40,6 +39,7 @@ export type BruteForced = {
 export type UserFormProps = {
   user?: UserRepresentation;
   bruteForce?: BruteForced;
+  realm?: RealmRepresentation;
   save: (user: UserRepresentation) => void;
   onGroupsUpdate?: (groups: GroupRepresentation[]) => void;
 };
@@ -80,6 +80,7 @@ const EmailVerified = () => {
 
 export const UserForm = ({
   user,
+  realm,
   bruteForce: { isBruteForceProtected, isLocked } = {
     isBruteForceProtected: false,
     isLocked: false,
@@ -111,18 +112,6 @@ export const UserForm = ({
   );
   const [open, setOpen] = useState(false);
   const [locked, setLocked] = useState(isLocked);
-  const [realm, setRealm] = useState<RealmRepresentation>();
-
-  useFetch(
-    () => adminClient.realms.findOne({ realm: realmName }),
-    (realm) => {
-      if (!realm) {
-        throw new Error(t("common:notFound"));
-      }
-      setRealm(realm);
-    },
-    []
-  );
 
   const unLockUser = async () => {
     try {