@keycloakify/keycloak-account-ui 25.0.4-rc.7 → 26.0.0-rc.0

package/src/applications/Applications.tsx

@@ -1,3 +1,8 @@
+import {
+  ContinueCancelModal,
+  label,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
 import {
   Button,
   DataList,
@@ -22,16 +27,13 @@ import {
 } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ContinueCancelModal,
-  useAlerts,
-  useEnvironment,
-} from "@keycloakify/keycloak-account-ui/ui-shared";
+
 import { deleteConsent, getApplications } from "@keycloakify/keycloak-account-ui/api/methods";
 import { ClientRepresentation } from "@keycloakify/keycloak-account-ui/api/representations";
 import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
 import { TFuncKey } from "@keycloakify/keycloak-account-ui/i18n";
 import { formatDate } from "@keycloakify/keycloak-account-ui/utils/formatDate";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
 
 type Application = ClientRepresentation & {
@@ -41,7 +43,7 @@ type Application = ClientRepresentation & {
 export const Applications = () => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const [applications, setApplications] = useState<Application[]>();
   const [key, setKey] = useState(1);
@@ -67,7 +69,7 @@ export const Applications = () => {
       refresh();
       addAlert(t("removeConsentSuccess"));
     } catch (error) {
-      addError(t("removeConsentError", { error }).toString());
+      addError("removeConsentError", error);
     }
   };
 
@@ -141,14 +143,20 @@ export const Applications = () => {
                         variant="link"
                         onClick={() => window.open(application.effectiveUrl)}
                       >
-                        {application.clientName || application.clientId}{" "}
+                        {label(
+                          t,
+                          application.clientName || application.clientId,
+                        )}{" "}
                         <ExternalLinkAltIcon />
                       </Button>
                     )}
                     {!application.effectiveUrl && (
-                      <span>
-                        {application.clientName || application.clientId}
-                      </span>
+                      <>
+                        {label(
+                          t,
+                          application.clientName || application.clientId,
+                        )}
+                      </>
                     )}
                   </DataListCell>,
                   <DataListCell

package/src/environment.ts

@@ -25,6 +25,7 @@ export type Feature = {
   updateEmailFeatureEnabled: boolean;
   updateEmailActionEnabled: boolean;
   isViewGroupsEnabled: boolean;
+  isViewOrganizationsEnabled: boolean;
   isOid4VciEnabled: boolean;
 };
 

package/src/organizations/Organizations.tsx

@@ -0,0 +1,48 @@
+import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
+import {
+  ErrorBoundaryProvider,
+  KeycloakSpinner,
+  ListEmptyState,
+  OrganizationTable,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getUserOrganizations } from "@keycloakify/keycloak-account-ui/api/methods";
+import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
+import { Environment } from "@keycloakify/keycloak-account-ui/environment";
+import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
+
+export const Organizations = () => {
+  const { t } = useTranslation();
+  const context = useEnvironment<Environment>();
+
+  const [userOrgs, setUserOrgs] = useState<OrganizationRepresentation[]>([]);
+
+  usePromise(
+    (signal) => getUserOrganizations({ signal, context }),
+    setUserOrgs,
+  );
+
+  if (!userOrgs) {
+    return <KeycloakSpinner />;
+  }
+
+  return (
+    <Page title={t("organizations")} description={t("organizationDescription")}>
+      <ErrorBoundaryProvider>
+        <OrganizationTable
+          link={({ children }) => <span>{children}</span>}
+          loader={userOrgs}
+        >
+          <ListEmptyState
+            message={t("emptyUserOrganizations")}
+            instructions={t("emptyUserOrganizationsInstructions")}
+          />
+        </OrganizationTable>
+      </ErrorBoundaryProvider>
+    </Page>
+  );
+};
+
+export default Organizations;

package/src/personal-info/PersonalInfo.tsx

@@ -4,12 +4,12 @@ import {
   beerify,
   debeerify,
   setUserProfileServerError,
-  useAlerts,
   useEnvironment,
 } from "@keycloakify/keycloak-account-ui/ui-shared";
 import {
   ActionGroup,
   Alert,
+  AlertVariant,
   Button,
   ExpandableSection,
   Form,
@@ -33,6 +33,7 @@ import {
 import { Page } from "@keycloakify/keycloak-account-ui/components/page/Page";
 import type { Environment } from "@keycloakify/keycloak-account-ui/environment";
 import { TFuncKey } from "@keycloakify/keycloak-account-ui/i18n";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
 
 export const PersonalInfo = () => {
@@ -43,7 +44,7 @@ export const PersonalInfo = () => {
   const [supportedLocales, setSupportedLocales] = useState<string[]>([]);
   const form = useForm<UserRepresentation>({ mode: "onChange" });
   const { handleSubmit, reset, setValue, setError } = form;
-  const { addAlert, addError } = useAlerts();
+  const { addAlert } = useAccountAlerts();
 
   usePromise(
     (signal) =>
@@ -71,15 +72,16 @@ export const PersonalInfo = () => {
       );
       await savePersonalInfo(context, { ...user, attributes });
       const locale = attributes["locale"]?.toString();
-      getI18n().changeLanguage(locale, (error) => {
-        if (error) {
-          console.warn("Error(s) loading locale", locale, error);
-        }
-      });
+      if (locale)
+        getI18n().changeLanguage(locale, (error) => {
+          if (error) {
+            console.warn("Error(s) loading locale", locale, error);
+          }
+        });
       context.keycloak.updateToken();
       addAlert(t("accountUpdatedMessage"));
     } catch (error) {
-      addError(t("accountUpdatedError").toString());
+      addAlert(t("accountUpdatedError"), AlertVariant.danger);
 
       setUserProfileServerError(
         { responseData: { errors: error as any } },

package/src/public/content.ts

@@ -30,6 +30,11 @@ const content = [
     "path": "groups",
     "isVisible": "isViewGroupsEnabled"
   },
+  {
+    "label": "organizations",
+    "path": "organizations",
+    "isVisible": "isViewOrganizationsEnabled"
+  },
   {
     "label": "resources",
     "path": "resources",

package/src/resources/EditTheResource.tsx

@@ -1,15 +1,16 @@
-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 "@keycloakify/keycloak-account-ui/ui-shared";
+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 { updatePermissions } from "@keycloakify/keycloak-account-ui/api";
 import type { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 
 type EditTheResourceProps = {
   resource: Resource;
@@ -28,7 +29,7 @@ export const EditTheResource = ({
 }: EditTheResourceProps) => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const form = useForm<FormValues>();
   const { control, reset, handleSubmit } = form;
@@ -50,7 +51,7 @@ export const EditTheResource = ({
       addAlert(t("updateSuccess"));
       onClose();
     } catch (error) {
-      addError(t("updateError", { error }).toString());
+      addError("updateError", error);
     }
   };
 

package/src/resources/PermissionRequest.tsx

@@ -1,3 +1,4 @@
+import { useEnvironment } from "@keycloakify/keycloak-account-ui/ui-shared";
 import {
   Badge,
   Button,
@@ -11,9 +12,10 @@ 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, useEnvironment } from "@keycloakify/keycloak-account-ui/ui-shared";
+
 import { fetchPermission, updateRequest } from "@keycloakify/keycloak-account-ui/api";
 import { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 
 type PermissionRequestProps = {
   resource: Resource;
@@ -26,7 +28,7 @@ export const PermissionRequest = ({
 }: PermissionRequestProps) => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const [open, setOpen] = useState(false);
 
@@ -54,7 +56,7 @@ export const PermissionRequest = ({
       toggle();
       refresh();
     } catch (error) {
-      addError(t("shareError", { error }).toString());
+      addError("shareError", error);
     }
   };
 

package/src/resources/ResourcesTab.tsx

@@ -1,3 +1,7 @@
+import {
+  ContinueCancelModal,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
 import {
   Button,
   Chip,
@@ -32,15 +36,12 @@ import {
 } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ContinueCancelModal,
-  useAlerts,
-  useEnvironment,
-} from "@keycloakify/keycloak-account-ui/ui-shared";
+
 import { fetchPermission, fetchResources, updatePermissions } from "@keycloakify/keycloak-account-ui/api";
 import { getPermissionRequests } from "@keycloakify/keycloak-account-ui/api/methods";
 import { Links } from "@keycloakify/keycloak-account-ui/api/parse-links";
 import { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 import { usePromise } from "@keycloakify/keycloak-account-ui/utils/usePromise";
 import { EditTheResource } from "@keycloakify/keycloak-account-ui/resources/EditTheResource";
 import { PermissionRequest } from "@keycloakify/keycloak-account-ui/resources/PermissionRequest";
@@ -63,7 +64,7 @@ type ResourcesTabProps = {
 export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const [params, setParams] = useState<Record<string, string>>({
     first: "0",
@@ -128,7 +129,7 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
       setDetails({});
       addAlert(t("unShareSuccess"));
     } catch (error) {
-      addError(t("unShareError", { error }).toString());
+      addError("unShareError", error);
     }
   };
 

package/src/resources/ShareTheResource.tsx

@@ -1,3 +1,8 @@
+import {
+  FormErrorText,
+  SelectControl,
+  useEnvironment,
+} from "@keycloakify/keycloak-account-ui/ui-shared";
 import {
   Button,
   Chip,
@@ -18,14 +23,10 @@ import {
   useWatch,
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import {
-  FormErrorText,
-  SelectControl,
-  useAlerts,
-  useEnvironment,
-} from "@keycloakify/keycloak-account-ui/ui-shared";
+
 import { updateRequest } from "@keycloakify/keycloak-account-ui/api";
 import { Permission, Resource } from "@keycloakify/keycloak-account-ui/api/representations";
+import { useAccountAlerts } from "@keycloakify/keycloak-account-ui/utils/useAccountAlerts";
 import { SharedWith } from "@keycloakify/keycloak-account-ui/resources/SharedWith";
 
 type ShareTheResourceProps = {
@@ -48,7 +49,7 @@ export const ShareTheResource = ({
 }: ShareTheResourceProps) => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
   const form = useForm<FormValues>();
   const {
     control,
@@ -92,7 +93,7 @@ export const ShareTheResource = ({
       addAlert(t("shareSuccess"));
       onClose();
     } catch (error) {
-      addError(t("shareError", { error }).toString());
+      addError("shareError", error);
     }
     reset({});
   };

package/src/root/Header.tsx

@@ -49,7 +49,6 @@ export const Header = () => {
       data-testid="page-header"
       keycloak={keycloak}
       features={{ hasManageAccount: false }}
-      showNavToggle
       brand={{
         href: indexHref,
         src: joinPath(environment.resourceUrl, brandImage),

package/src/root/PageNav.tsx

@@ -137,7 +137,7 @@ export const NavLink = ({
   isActive,
   children,
 }: PropsWithChildren<NavLinkProps>) => {
-  const menuItemPath = getFullUrl(path);
+  const menuItemPath = getFullUrl(path) + `?${location.search}`;
   const href = useHref(menuItemPath);
   const handleClick = useLinkClickHandler(menuItemPath);
 

package/src/routes.tsx

@@ -2,6 +2,7 @@ import { lazy } from "react";
 import type { IndexRouteObject, RouteObject } from "react-router-dom";
 
 import { environment } from "@keycloakify/keycloak-account-ui/environment";
+import { Organizations } from "@keycloakify/keycloak-account-ui/organizations/Organizations";
 import { ErrorPage } from "@keycloakify/keycloak-account-ui/root/ErrorPage";
 import { Root } from "@keycloakify/keycloak-account-ui/root/Root";
 
@@ -59,6 +60,11 @@ export const PersonalInfoRoute: IndexRouteObject = {
   element: <PersonalInfo />,
 };
 
+export const OrganizationsRoute: RouteObject = {
+  path: "organizations",
+  element: <Organizations />,
+};
+
 export const Oid4VciRoute: RouteObject = {
   path: "oid4vci",
   element: <Oid4Vci />,
@@ -75,6 +81,7 @@ export const RootRoute: RouteObject = {
     SigningInRoute,
     ApplicationsRoute,
     GroupsRoute,
+    OrganizationsRoute,
     PersonalInfoRoute,
     ResourcesRoute,
     ContentRoute,

package/src/ui-shared/alerts/AlertPanel.tsx

@@ -0,0 +1,43 @@
+import {
+  AlertGroup,
+  Alert,
+  AlertActionCloseButton,
+  AlertVariant,
+} from "@patternfly/react-core";
+
+import type { AlertEntry } from "@keycloakify/keycloak-account-ui/ui-shared/alerts/Alerts";
+
+export type AlertPanelProps = {
+  alerts: AlertEntry[];
+  onCloseAlert: (id: number) => void;
+};
+
+export function AlertPanel({ alerts, onCloseAlert }: AlertPanelProps) {
+  return (
+    <AlertGroup
+      data-testid="global-alerts"
+      isToast
+      style={{ whiteSpace: "pre-wrap" }}
+    >
+      {alerts.map(({ id, variant, message, description }, index) => (
+        <Alert
+          key={id}
+          data-testid={index === 0 ? "last-alert" : undefined}
+          isLiveRegion
+          variant={AlertVariant[variant]}
+          component="p"
+          variantLabel=""
+          title={message}
+          actionClose={
+            <AlertActionCloseButton
+              title={message}
+              onClose={() => onCloseAlert(id)}
+            />
+          }
+        >
+          {description && <p>{description}</p>}
+        </Alert>
+      ))}
+    </AlertGroup>
+  );
+}

package/src/ui-shared/alerts/Alerts.tsx

@@ -1,10 +1,15 @@
-import {
-  Alert,
-  AlertActionCloseButton,
-  AlertGroup,
-  AlertVariant,
-} from "@patternfly/react-core";
-import { createContext, PropsWithChildren, useContext, useState } from "react";
+import { AlertVariant } from "@patternfly/react-core";
+import { PropsWithChildren, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { createNamedContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/createNamedContext";
+import { getErrorDescription, getErrorMessage } from "@keycloakify/keycloak-account-ui/ui-shared/utils/errors";
+import { generateId } from "@keycloakify/keycloak-account-ui/ui-shared/utils/generateId";
+import { useRequiredContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useRequiredContext";
+import { useSetTimeout } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useSetTimeout";
+import { AlertPanel } from "@keycloakify/keycloak-account-ui/ui-shared/alerts/AlertPanel";
+
+const ALERT_TIMEOUT = 8000;
 
 export type AddAlertFunction = (
   message: string,
@@ -12,18 +17,21 @@ export type AddAlertFunction = (
   description?: string,
 ) => void;
 
-export type AddErrorFunction = (message: string) => void;
+export type AddErrorFunction = (messageKey: string, error: unknown) => void;
 
 export type AlertProps = {
   addAlert: AddAlertFunction;
   addError: AddErrorFunction;
 };
 
-export const AlertContext = createContext<AlertProps | undefined>(undefined);
+const AlertContext = createNamedContext<AlertProps | undefined>(
+  "AlertContext",
+  undefined,
+);
 
-export const useAlerts = () => useContext(AlertContext)!;
+export const useAlerts = () => useRequiredContext(AlertContext);
 
-export type AlertType = {
+export type AlertEntry = {
   id: number;
   message: string;
   variant: AlertVariant;
@@ -31,55 +39,43 @@ export type AlertType = {
 };
 
 export const AlertProvider = ({ children }: PropsWithChildren) => {
-  const [alerts, setAlerts] = useState<AlertType[]>([]);
+  const { t } = useTranslation();
+  const setTimeout = useSetTimeout();
+  const [alerts, setAlerts] = useState<AlertEntry[]>([]);
 
-  const hideAlert = (id: number) => {
+  const removeAlert = (id: number) =>
     setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
-  };
-
-  const addAlert = (
-    message: string,
-    variant: AlertVariant = AlertVariant.success,
-    description?: string,
-  ) => {
-    setAlerts([
-      {
-        id: Math.random() * 100,
+
+  const addAlert = useCallback<AddAlertFunction>(
+    (message, variant = AlertVariant.success, description) => {
+      const alert: AlertEntry = {
+        id: generateId(),
         message,
         variant,
         description,
-      },
-      ...alerts,
-    ]);
-  };
+      };
+
+      setAlerts((alerts) => [alert, ...alerts]);
+      setTimeout(() => removeAlert(alert.id), ALERT_TIMEOUT);
+    },
+    [setTimeout],
+  );
+
+  const addError = useCallback<AddErrorFunction>(
+    (messageKey, error) => {
+      const message = t(messageKey, { error: getErrorMessage(error) });
+      const description = getErrorDescription(error);
+
+      addAlert(message, AlertVariant.danger, description);
+    },
+    [addAlert, t],
+  );
 
-  const addError = (message: string) => {
-    addAlert(message, AlertVariant.danger);
-  };
+  const value = useMemo(() => ({ addAlert, addError }), [addAlert, addError]);
 
   return (
-    <AlertContext.Provider value={{ addAlert, addError }}>
-      <AlertGroup isToast data-testid="alerts">
-        {alerts.map(({ id, variant, message, description }) => (
-          <Alert
-            key={id}
-            isLiveRegion
-            variant={AlertVariant[variant]}
-            variantLabel=""
-            title={message}
-            actionClose={
-              <AlertActionCloseButton
-                title={message}
-                onClose={() => hideAlert(id)}
-              />
-            }
-            timeout
-            onTimeout={() => hideAlert(id)}
-          >
-            {description && <p>{description}</p>}
-          </Alert>
-        ))}
-      </AlertGroup>
+    <AlertContext.Provider value={value}>
+      <AlertPanel alerts={alerts} onCloseAlert={removeAlert} />
       {children}
     </AlertContext.Provider>
   );

package/src/ui-shared/context/environment.ts

@@ -44,7 +44,7 @@ export function getInjectedEnvironment<T>(): T {
 
   try {
     return JSON.parse(contents);
-  } catch (error) {
+  } catch {
     throw new Error("Unable to parse environment variables as JSON.");
   }
 }

package/src/ui-shared/controls/KeycloakSpinner.tsx

@@ -0,0 +1,12 @@
+import { Bullseye, Spinner } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+export const KeycloakSpinner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Bullseye>
+      <Spinner aria-label={t("spinnerLoading")} />
+    </Bullseye>
+  );
+};