Use React Router v6 for the routable tabs of the user profile page (#4137)

apps/admin-ui/src/realm-settings/user-profile/UserProfileTab.tsx

@@ -1,13 +1,15 @@
 import { Tab, TabTitleText } from "@patternfly/react-core";
 
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import {
-  routableTab,
   RoutableTabs,
+  useRoutableTab,
 } from "../../components/routable-tabs/RoutableTabs";
 import { useRealm } from "../../context/realm-context/RealmContext";
-import { toUserProfile } from "../routes/UserProfile";
+import {
+  toUserProfile,
+  UserProfileTab as IUserProfileTab,
+} from "../routes/UserProfile";
 import { AttributesGroupTab } from "./AttributesGroupTab";
 import { AttributesTab } from "./AttributesTab";
 import { JsonEditorTab } from "./JsonEditorTab";
@@ -16,7 +18,13 @@ import { UserProfileProvider } from "./UserProfileContext";
 export const UserProfileTab = () => {
   const { realm } = useRealm();
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+
+  const useTab = (tab: IUserProfileTab) =>
+    useRoutableTab(toUserProfile({ realm, tab }));
+
+  const attributesTab = useTab("attributes");
+  const attributesGroupTab = useTab("attributes-group");
+  const jsonEditorTab = useTab("json-editor");
 
   return (
     <UserProfileProvider>
@@ -27,30 +35,21 @@ export const UserProfileTab = () => {
         <Tab
           title={<TabTitleText>{t("attributes")}</TabTitleText>}
           data-testid="attributesTab"
-          {...routableTab({
+          {...attributesTab}
-            to: toUserProfile({ realm, tab: "attributes" }),
-            history,
-          })}
         >
           <AttributesTab />
         </Tab>
         <Tab
           title={<TabTitleText>{t("attributesGroup")}</TabTitleText>}
           data-testid="attributesGroupTab"
-          {...routableTab({
+          {...attributesGroupTab}
-            to: toUserProfile({ realm, tab: "attributes-group" }),
-            history,
-          })}
         >
           <AttributesGroupTab />
         </Tab>
         <Tab
           title={<TabTitleText>{t("jsonEditor")}</TabTitleText>}
           data-testid="jsonEditorTab"
-          {...routableTab({
+          {...jsonEditorTab}
-            to: toUserProfile({ realm, tab: "json-editor" }),
-            history,
-          })}
         >
           <JsonEditorTab />
         </Tab>