Use React Router v6 for the routable tabs of dashboard page (#4119)
This commit is contained in:
parent
48a3fc9229
commit
63cac73a12
1 changed files with 14 additions and 14 deletions
|
@ -1,5 +1,4 @@
|
|||
import { useMemo } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { union, filter } from "lodash-es";
|
||||
import {
|
||||
|
@ -35,8 +34,8 @@ import environment from "../environment";
|
|||
import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
|
||||
import useLocaleSort from "../utils/useLocaleSort";
|
||||
import {
|
||||
routableTab,
|
||||
RoutableTabs,
|
||||
useRoutableTab,
|
||||
} from "../components/routable-tabs/RoutableTabs";
|
||||
import { DashboardTab, toDashboard } from "./routes/Dashboard";
|
||||
import { ProviderInfo } from "./ProviderInfo";
|
||||
|
@ -70,7 +69,6 @@ const Dashboard = () => {
|
|||
const { t } = useTranslation("dashboard");
|
||||
const { realm } = useRealm();
|
||||
const serverInfo = useServerInfo();
|
||||
const history = useHistory();
|
||||
const localeSort = useLocaleSort();
|
||||
|
||||
const isDeprecatedFeature = (feature: string) =>
|
||||
|
@ -111,19 +109,21 @@ const Dashboard = () => {
|
|||
[serverInfo.profileInfo]
|
||||
);
|
||||
|
||||
const useTab = (tab: DashboardTab) =>
|
||||
useRoutableTab(
|
||||
toDashboard({
|
||||
realm,
|
||||
tab,
|
||||
})
|
||||
);
|
||||
|
||||
const infoTab = useTab("info");
|
||||
const providersTab = useTab("providers");
|
||||
|
||||
if (Object.keys(serverInfo).length === 0) {
|
||||
return <KeycloakSpinner />;
|
||||
}
|
||||
|
||||
const route = (tab: DashboardTab) =>
|
||||
routableTab({
|
||||
to: toDashboard({
|
||||
realm,
|
||||
tab,
|
||||
}),
|
||||
history,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageSection variant="light">
|
||||
|
@ -151,7 +151,7 @@ const Dashboard = () => {
|
|||
id="info"
|
||||
data-testid="infoTab"
|
||||
title={<TabTitleText>{t("serverInfo")}</TabTitleText>}
|
||||
{...route("info")}
|
||||
{...infoTab}
|
||||
>
|
||||
<PageSection variant="light">
|
||||
<Grid hasGutter>
|
||||
|
@ -276,7 +276,7 @@ const Dashboard = () => {
|
|||
id="providers"
|
||||
data-testid="providersTab"
|
||||
title={<TabTitleText>{t("providerInfo")}</TabTitleText>}
|
||||
{...route("providers")}
|
||||
{...providersTab}
|
||||
>
|
||||
<ProviderInfo />
|
||||
</Tab>
|
||||
|
|
Loading…
Reference in a new issue