Error when deploying forked keycloak-ui admin theme #13906

PManaras · 2022-08-21T17:36:44Z

PManaras
Aug 21, 2022

Hello,
i just started to look into customizing the Admin Ui of keycloak.v2. As mentioned in another thread, since there is no easy way of extending the admin console yet, i forked the theme, but i am encountering some issues:

The first issue appears when deploying to the development Keycloak, bundled in the keycloak-ui project. I added a simple custom navigation item to the PageNav pointing to my module, but when clicking it, the dashboard view is shown. When typing the expected link (/:realm/<my_module>/<my_tab>) in the address bar, the page shows up as expected.
It seems to me that somehow the defaultLocation defined in the RoutableTabs component is ignored or the path to my module is not resolved (i.e. somehow my routing is broken).
If the module would not be found, the nav item would not appear, that's why i am confused.

I have added the routes.ts of my module to the routes-config.ts as well.

my_module/routes.ts:

import type { RouteDef } from "../route-config";
import { MyModuleRoute } from "./routes/MyModule";

const routes: RouteDef[] = [
  MyModuleRoute
];

export default routes;

my_module/routes/MyModule.ts:

import { lazy } from "react";
import type { Path } from "react-router-dom-v5-compat";
import { generatePath } from "react-router-dom-v5-compat";
import type { RouteDef } from "../../route-config";


export type MyModuleTab = "list" | "list2";

export type MyModuleParams = {
  realm: string;
  tab?: MyModuleTab;
};

export const MyModuleRoute: RouteDef = {
  path: "/:realm/mymodule/:tab?",
  component: lazy(() => import("../MyModuleSection")),
  access: "query-clients",
  legacy: true,
};

export const toMyModule = (params: MyModuleParams): Partial<Path> => ({
  pathname: generatePath(MyModuleRoute.path, params),
});

MyModuleSection.tsx:


  const { t } = useTranslation("mymodule");
  const { realm } = useRealm();
  const history = useHistory();

  

  const route = (tab: MyModuleTab) =>
  routableTab({
    to: toMyModule({ realm, tab }),
    history,
  });


  return (
    <>
      <ViewHeader
        titleKey="mymodule:title"
        subKey="mymodule:titleSub"
        // helpUrl={helpUrls.clientsUrl}
        divider={false}
      />
      <PageSection variant="light" className="pf-u-p-0">
        <RoutableTabs
          mountOnEnter
          isBox
          defaultLocation={toMyModule({
            realm,
            tab: "list",
          })}
        >
          <Tab
            data-testid="list"
            title={<TabTitleText>{t("mymodule")}</TabTitleText>}
            {...route("list")}
          >
            <TextContent className="pf-u-mr-sm">
              <Text component="h1">
                {t("realmName", { name: toUpperCase(realm) })}
              </Text>
            </TextContent>
          </Tab>

          <Tab
            data-testid="list2"
            title={<TabTitleText>{t("mymodule")}</TabTitleText>}
            {...route("list2")}
          >
             <TextContent className="pf-u-mr-sm">
              <Text component="h1">
                {t("realmName", { name: toUpperCase(realm) })}2
              </Text>
            </TextContent>
          </Tab>
          
        </RoutableTabs>
      </PageSection>
    </>
  );

}

The jar builds just fine without any issues.

if you could point me in the right direction to solve the issue, i'd be very happy

EDIT:
The page now shows up correctly. I have appended a "?" to the /:realm/mymodule/:tab path. The only Problem left is, that i cannot switch tabs.

EDIT2:
Was using the wrong react router for generatePath, now everything works as expected. (!use: react-router-dom!)

Regards Pascal

jonkoops · 2022-08-22T20:46:13Z

jonkoops
Aug 22, 2022

@PManaras we're currently migrating to a newer version of React Router so you might run into incompatibilities. We expect that we'll be migrating over fully to the new version in the comings weeks. For more information see the React Router docmentation.

0 replies

Navigation Menu

Repository navigation

Error when deploying forked keycloak-ui admin theme #13906

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Error when deploying forked keycloak-ui admin theme #13906

Uh oh!

Uh oh!

PManaras Aug 21, 2022

Replies: 1 comment

Uh oh!

jonkoops Aug 22, 2022

PManaras
Aug 21, 2022

jonkoops
Aug 22, 2022