edewit · May 8, 2024 · Apr 13, 2024 · May 6, 2024 · May 6, 2024
@@ -12,11 +12,9 @@ import {
 } from "@patternfly/react-core";
 import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
-import { IconMapper, useAlerts } from "@keycloak/keycloak-ui-shared";
-
+import { IconMapper, useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { linkAccount, unLinkAccount } from "../api/methods";
 import { LinkedAccountRepresentation } from "../api/representations";
-import { useEnvironment } from "../root/KeycloakContext";
 
 type AccountRowProps = {
   account: LinkedAccountRepresentation;

@@ -23,7 +23,7 @@ import {
 } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ContinueCancelModal, useAlerts } from "@keycloak/keycloak-ui-shared";
+import { ContinueCancelModal, useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { deleteSession, getDevices } from "../api/methods";
 import {
   ClientRepresentation,
@@ -32,7 +32,6 @@ import {
 } from "../api/representations";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
-import { useEnvironment } from "../root/KeycloakContext";
 import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 

@@ -7,7 +7,7 @@ import { EmptyRow } from "../components/datalist/EmptyRow";
 import { Page } from "../components/page/Page";
 import { usePromise } from "../utils/usePromise";
 import { AccountRow } from "./AccountRow";
-import { useEnvironment } from "../root/KeycloakContext";
+import { useEnvironment } from "@keycloak/keycloak-ui-shared";
 
 export const LinkedAccounts = () => {
   const { t } = useTranslation();

@@ -18,6 +18,7 @@ import {
 import { EllipsisVIcon } from "@patternfly/react-icons";
 import { CSSProperties, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { getCredentials } from "../api/methods";
 import {
   CredentialContainer,
@@ -26,7 +27,6 @@ import {
 import { EmptyRow } from "../components/datalist/EmptyRow";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
-import { useEnvironment } from "../root/KeycloakContext";
 import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 

@@ -1,9 +1,10 @@
+import { KeycloakContext } from "@keycloak/keycloak-ui-shared";
+import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
 import { CallOptions } from "./api/methods";
 import { Links, parseLinks } from "./api/parse-links";
 import { parseResponse } from "./api/parse-response";
 import { Permission, Resource, Scope } from "./api/representations";
 import { request } from "./api/request";
-import { KeycloakContext } from "./root/KeycloakContext";
 
 export const fetchResources = async (
   { signal, context }: CallOptions,
@@ -43,7 +44,7 @@ export const fetchPermission = async (
 };
 
 export const updateRequest = (
-  context: KeycloakContext,
+  context: KeycloakContext<BaseEnvironment>,
   resourceId: string,
   username: string,
   scopes: Scope[] | string[],
@@ -54,7 +55,7 @@ export const updateRequest = (
   });
 
 export const updatePermissions = (
-  context: KeycloakContext,
+  context: KeycloakContext<BaseEnvironment>,
   resourceId: string,
   permissions: Permission[],
 ) =>

@@ -1,4 +1,8 @@
-import { KeycloakContext } from "../root/KeycloakContext";
+import {
+  AccountEnvironment,
+  KeycloakContext,
+} from "@keycloak/keycloak-ui-shared";
+import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
 import { joinPath } from "../utils/joinPath";
 import { parseResponse } from "./parse-response";
 import {
@@ -13,7 +17,7 @@ import {
 import { request } from "./request";
 
 export type CallOptions = {
-  context: KeycloakContext;
+  context: KeycloakContext<BaseEnvironment>;
   signal?: AbortSignal;
 };
 
@@ -41,7 +45,7 @@ export async function getSupportedLocales({
 }
 
 export async function savePersonalInfo(
-  context: KeycloakContext,
+  context: KeycloakContext<AccountEnvironment>,
   info: UserRepresentation,
 ): Promise<void> {
   const response = await request("/", context, { body: info, method: "POST" });
@@ -81,11 +85,17 @@ export async function getApplications({
   return parseResponse<ClientRepresentation[]>(response);
 }
 
-export async function deleteConsent(context: KeycloakContext, id: string) {
+export async function deleteConsent(
+  context: KeycloakContext<BaseEnvironment>,
+  id: string,
+) {
   return request(`/applications/${id}/consent`, context, { method: "DELETE" });
 }
 
-export async function deleteSession(context: KeycloakContext, id?: string) {
+export async function deleteSession(
+  context: KeycloakContext<BaseEnvironment>,
+  id?: string,
+) {
   return request(`/sessions${id ? `/${id}` : ""}`, context, {
     method: "DELETE",
   });
@@ -104,7 +114,7 @@ export async function getLinkedAccounts({ signal, context }: CallOptions) {
 }
 
 export async function unLinkAccount(
-  context: KeycloakContext,
+  context: KeycloakContext<BaseEnvironment>,
   account: LinkedAccountRepresentation,
 ) {
   const response = await request(
@@ -119,7 +129,7 @@ export async function unLinkAccount(
 }
 
 export async function linkAccount(
-  context: KeycloakContext,
+  context: KeycloakContext<BaseEnvironment>,
   account: LinkedAccountRepresentation,
 ) {
   const redirectUri = encodeURIComponent(

@@ -1,8 +1,8 @@
-import { Environment } from "../environment";
+import { KeycloakContext } from "@keycloak/keycloak-ui-shared";
+import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
 import Keycloak from "keycloak-js";
-import { CONTENT_TYPE_HEADER, CONTENT_TYPE_JSON } from "./constants";
 import { joinPath } from "../utils/joinPath";
-import { KeycloakContext } from "../root/KeycloakContext";
+import { CONTENT_TYPE_HEADER, CONTENT_TYPE_JSON } from "./constants";
 
 export type RequestOptions = {
   signal?: AbortSignal;
@@ -35,7 +35,7 @@ async function _request(
 
 export async function request(
   path: string,
-  { environment, keycloak }: KeycloakContext,
+  { environment, keycloak }: KeycloakContext<BaseEnvironment>,
   opts: RequestOptions = {},
 ) {
   return _request(url(environment, path), {
@@ -44,7 +44,7 @@ export async function request(
   });
 }
 
-export const url = (environment: Environment, path: string) =>
+export const url = (environment: BaseEnvironment, path: string) =>
   new URL(
     joinPath(environment.authUrl, "realms", environment.realm, "account", path),
   );

@@ -22,12 +22,11 @@ import {
 } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ContinueCancelModal, useAlerts } from "@keycloak/keycloak-ui-shared";
+import { ContinueCancelModal, useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { deleteConsent, getApplications } from "../api/methods";
 import { ClientRepresentation } from "../api/representations";
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
-import { useEnvironment } from "../root/KeycloakContext";
 import { formatDate } from "../utils/formatDate";
 import { usePromise } from "../utils/usePromise";
 

@@ -1,7 +1,7 @@
 import { Spinner } from "@patternfly/react-core";
 import { Suspense, lazy, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
-import { useEnvironment } from "../root/KeycloakContext";
+import { useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { MenuItem } from "../root/PageNav";
 import { ContentComponentParams } from "../routes";
 import { joinPath } from "../utils/joinPath";

@@ -8,10 +8,10 @@ import {
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { getGroups } from "../api/methods";
 import { Group } from "../api/representations";
 import { Page } from "../components/page/Page";
-import { useEnvironment } from "../root/KeycloakContext";
 import { usePromise } from "../utils/usePromise";
 
 export const Groups = () => {

@@ -1,8 +1,7 @@
 import { LanguageDetectorModule, createInstance } from "i18next";
 import HttpBackend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
-
-import { environment } from "./environment";
+import { environment } from "@keycloak/keycloak-ui-shared";
 import { joinPath } from "./utils/joinPath";
 
 const DEFAULT_LOCALE = "en";

@@ -1,7 +1,6 @@
 export { PersonalInfo } from "./personal-info/PersonalInfo";
 export { Header } from "./root/Header";
-export { KeycloakProvider, useEnvironment } from "./root/KeycloakContext";
 export { PageNav } from "./root/PageNav";
 export { DeviceActivity } from "./account-security/DeviceActivity";
 export { LinkedAccounts } from "./account-security/LinkedAccounts";

@@ -1,9 +1,11 @@
 import {
+  AccountEnvironment,
   UserProfileFields,
   beerify,
   debeerify,
   setUserProfileServerError,
   useAlerts,
+  useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
 import {
   ActionGroup,
@@ -18,7 +20,6 @@ import { TFunction } from "i18next";
 import { useState } from "react";
 import { ErrorOption, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
 import {
   getPersonalInfo,
   getSupportedLocales,
@@ -29,14 +30,12 @@ import {
   UserRepresentation,
 } from "../api/representations";
 import { Page } from "../components/page/Page";
-import { environment } from "../environment";
 import { TFuncKey, i18n } from "../i18n";
-import { useEnvironment } from "../root/KeycloakContext";
 import { usePromise } from "../utils/usePromise";
 
 export const PersonalInfo = () => {
   const { t } = useTranslation();
-  const context = useEnvironment();
+  const context = useEnvironment<AccountEnvironment>();
   const [userProfileMetadata, setUserProfileMetadata] =
     useState<UserProfileMetadata>();
   const [supportedLocales, setSupportedLocales] = useState<string[]>([]);
@@ -106,7 +105,7 @@ export const PersonalInfo = () => {
           form={form}
           userProfileMetadata={userProfileMetadata}
           supportedLocales={supportedLocales}
-          currentLocale={environment.locale}
+          currentLocale={context.environment.locale}
           t={
             ((key: unknown, params) =>
               t(key as TFuncKey, params as any)) as TFunction

@@ -2,15 +2,14 @@ import { Button, Form, Modal } from "@patternfly/react-core";
 import { Fragment, useEffect } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
 import {
   SelectControl,
   TextControl,
   useAlerts,
+  useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
 import { updatePermissions } from "../api";
 import type { Permission, Resource } from "../api/representations";
-import { useEnvironment } from "../root/KeycloakContext";
 
 type EditTheResourceProps = {
   resource: Resource;

@@ -11,11 +11,9 @@ import { UserCheckIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
-
+import { useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { fetchPermission, updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
-import { useEnvironment } from "../root/KeycloakContext";
 
 type PermissionRequestProps = {
   resource: Resource;

@@ -32,13 +32,11 @@ import {
 } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-
-import { ContinueCancelModal, useAlerts } from "@keycloak/keycloak-ui-shared";
+import { ContinueCancelModal, useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import { fetchPermission, fetchResources, updatePermissions } from "../api";
 import { getPermissionRequests } from "../api/methods";
 import { Links } from "../api/parse-links";
 import { Permission, Resource } from "../api/representations";
-import { useEnvironment } from "../root/KeycloakContext";
 import { usePromise } from "../utils/usePromise";
 import { EditTheResource } from "./EditTheResource";
 import { PermissionRequest } from "./PermissionRequest";

@@ -22,10 +22,10 @@ import {
   FormErrorText,
   SelectControl,
   useAlerts,
+  useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
 import { updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
-import { useEnvironment } from "../root/KeycloakContext";
 import { SharedWith } from "./SharedWith";
 
 type ShareTheResourceProps = {

@@ -2,11 +2,13 @@ import { Button } from "@patternfly/react-core";
 import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
 import { useHref } from "react-router-dom";
-import { KeycloakMasthead, label } from "@keycloak/keycloak-ui-shared";
-
-import { environment } from "../environment";
+import {
+  KeycloakMasthead,
+  environment,
+  label,
+  useEnvironment,
+} from "@keycloak/keycloak-ui-shared";
 import { joinPath } from "../utils/joinPath";
-import { useEnvironment } from "./KeycloakContext";
 
 import style from "./header.module.css";