Show full error details in admin and account consoles

Closes #30705

Signed-off-by: Jon Koops <jonkoops@gmail.com>
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
Co-authored-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/account-ui/src/account-security/AccountRow.tsx

@@ -1,3 +1,4 @@
+import { IconMapper, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import {
   Button,
   DataListAction,
@@ -12,13 +13,10 @@ import {
 } from "@patternfly/react-core";
 import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
-import {
-  IconMapper,
-  useAlerts,
-  useEnvironment,
-} from "@keycloak/keycloak-ui-shared";
+
 import { linkAccount, unLinkAccount } from "../api/methods";
 import { LinkedAccountRepresentation } from "../api/representations";
+import { useAccountAlerts } from "../utils/useAccountAlerts";
 
 type AccountRowProps = {
   account: LinkedAccountRepresentation;
@@ -33,7 +31,7 @@ export const AccountRow = ({
 }: AccountRowProps) => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const unLink = async (account: LinkedAccountRepresentation) => {
     try {
@@ -41,7 +39,7 @@ export const AccountRow = ({
       addAlert(t("unLinkSuccess"));
       refresh();
     } catch (error) {
-      addError(t("unLinkError", { error }).toString());
+      addError("unLinkError", error);
     }
   };
 
@@ -50,7 +48,7 @@ export const AccountRow = ({
       const { accountLinkUri } = await linkAccount(context, account);
       location.href = accountLinkUri;
     } catch (error) {
-      addError(t("linkError", { error }).toString());
+      addError("linkError", error);
     }
   };
 

js/apps/account-ui/src/account-security/DeviceActivity.tsx

@@ -1,3 +1,7 @@
+import {
+  ContinueCancelModal,
+  useEnvironment,
+} from "@keycloak/keycloak-ui-shared";
 import {
   Button,
   DataList,
@@ -23,11 +27,7 @@ import {
 } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ContinueCancelModal,
-  useAlerts,
-  useEnvironment,
-} from "@keycloak/keycloak-ui-shared";
+
 import { deleteSession, getDevices } from "../api/methods";
 import {
   ClientRepresentation,
@@ -37,12 +37,13 @@ import {
 import { Page } from "../components/page/Page";
 import { TFuncKey } from "../i18n";
 import { formatDate } from "../utils/formatDate";
+import { useAccountAlerts } from "../utils/useAccountAlerts";
 import { usePromise } from "../utils/usePromise";
 
 export const DeviceActivity = () => {
   const { t } = useTranslation();
   const context = useEnvironment();
-  const { addAlert, addError } = useAlerts();
+  const { addAlert, addError } = useAccountAlerts();
 
   const [devices, setDevices] = useState<DeviceRepresentation[]>();
   const [key, setKey] = useState(0);
@@ -82,7 +83,7 @@ export const DeviceActivity = () => {
       );
       refresh();
     } catch (error) {
-      addError(t("errorSignOutMessage", { error }).toString());
+      addError("errorSignOutMessage", error);
     }
   };
 

js/apps/account-ui/src/api/parse-response.ts

@@ -1,7 +1,17 @@
-import { isRecord } from "../utils/isRecord";
+import {
+  getNetworkErrorMessage,
+  getNetworkErrorDescription,
+} from "@keycloak/keycloak-ui-shared";
 import { CONTENT_TYPE_HEADER, CONTENT_TYPE_JSON } from "./constants";
 
-export class ApiError extends Error {}
+export class ApiError extends Error {
+  description?: string;
+
+  constructor(message: string, description?: string) {
+    super(message);
+    this.description = description;
+  }
+}
 
 export async function parseResponse<T>(response: Response): Promise<T> {
   const contentType = response.headers.get(CONTENT_TYPE_HEADER);
@@ -16,7 +26,16 @@ export async function parseResponse<T>(response: Response): Promise<T> {
   const data = await parseJSON(response);
 
   if (!response.ok) {
-    throw new ApiError(getErrorMessage(data));
+    const message = getNetworkErrorMessage(data);
+    const description = getNetworkErrorDescription(data);
+
+    if (!message) {
+      throw new Error(
+        "Unable to retrieve error message from response, no matching key found.",
+      );
+    }
+
+    throw new ApiError(message, description);
   }
 
   return data as T;
@@ -31,23 +50,3 @@ async function parseJSON(response: Response): Promise<unknown> {
     });
   }
 }
-
-function getErrorMessage(data: unknown): string {
-  if (!isRecord(data)) {
-    throw new Error("Unable to retrieve error message from response.");
-  }
-
-  const errorKeys = ["error_description", "errorMessage", "error"];
-
-  for (const key of errorKeys) {
-    const value = data[key];
-
-    if (typeof value === "string") {
-      return value;
-    }
-  }
-
-  throw new Error(
-    "Unable to retrieve error message from response, no matching key found.",
-  );
-}

js/apps/account-ui/src/applications/Applications.tsx

@@ -1,3 +1,7 @@
+import {
+  ContinueCancelModal,
+  useEnvironment,
+} from "@keycloak/keycloak-ui-shared";
 import {
   Button,
   DataList,
@@ -22,16 +26,13 @@ import {
 } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-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 { formatDate } from "../utils/formatDate";
+import { useAccountAlerts } from "../utils/useAccountAlerts";
 import { usePromise } from "../utils/usePromise";
 
 type Application = ClientRepresentation & {
@@ -41,7 +42,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 +68,7 @@ export const Applications = () => {
       refresh();
       addAlert(t("removeConsentSuccess"));
     } catch (error) {
-      addError(t("removeConsentError", { error }).toString());
+      addError("removeConsentError", error);
     }
   };
 

js/apps/account-ui/src/index.ts

@@ -56,9 +56,6 @@ export {
   unLinkAccount,
 } from "./api/methods";
 export type { Environment as AccountEnvironment } from "./environment";
-export {
-  KeycloakProvider,
-  useEnvironment,
-  useAlerts,
-} from "@keycloak/keycloak-ui-shared";
+export { KeycloakProvider, useEnvironment } from "@keycloak/keycloak-ui-shared";
+export { useAccountAlerts } from "./utils/useAccountAlerts";
 export { usePromise } from "./utils/usePromise";

js/apps/account-ui/src/personal-info/PersonalInfo.tsx

@@ -3,12 +3,12 @@ import {
   beerify,
   debeerify,
   setUserProfileServerError,
-  useAlerts,
   useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
 import {
   ActionGroup,
   Alert,
+  AlertVariant,
   Button,
   ExpandableSection,
   Form,
@@ -32,6 +32,7 @@ import {
 import { Page } from "../components/page/Page";
 import type { Environment } from "../environment";
 import { TFuncKey, i18n } from "../i18n";
+import { useAccountAlerts } from "../utils/useAccountAlerts";
 import { usePromise } from "../utils/usePromise";
 
 export const PersonalInfo = () => {
@@ -42,7 +43,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) =>
@@ -79,7 +80,7 @@ export const PersonalInfo = () => {
       context.keycloak.updateToken();
       addAlert(t("accountUpdatedMessage"));
     } catch (error) {
-      addError(t("accountUpdatedError").toString());
+      addAlert(t("accountUpdatedError"), AlertVariant.danger);
 
       setUserProfileServerError(
         { responseData: { errors: error as any } },

js/apps/account-ui/src/resources/EditTheResource.tsx

@@ -1,15 +1,16 @@
+import {
+  SelectControl,
+  TextControl,
+  useEnvironment,
+} from "@keycloak/keycloak-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 {
-  SelectControl,
-  TextControl,
-  useAlerts,
-  useEnvironment,
-} from "@keycloak/keycloak-ui-shared";
+
 import { updatePermissions } from "../api";
 import type { Permission, Resource } from "../api/representations";
+import { useAccountAlerts } from "../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);
     }
   };
 

js/apps/account-ui/src/resources/PermissionRequest.tsx

@@ -1,3 +1,4 @@
+import { useEnvironment } from "@keycloak/keycloak-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 "@keycloak/keycloak-ui-shared";
+
 import { fetchPermission, updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
+import { useAccountAlerts } from "../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);
     }
   };
 

js/apps/account-ui/src/resources/ResourcesTab.tsx

@@ -1,3 +1,7 @@
+import {
+  ContinueCancelModal,
+  useEnvironment,
+} from "@keycloak/keycloak-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 "@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 { useAccountAlerts } from "../utils/useAccountAlerts";
 import { usePromise } from "../utils/usePromise";
 import { EditTheResource } from "./EditTheResource";
 import { PermissionRequest } from "./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);
     }
   };
 

js/apps/account-ui/src/resources/ShareTheResource.tsx

@@ -1,3 +1,8 @@
+import {
+  FormErrorText,
+  SelectControl,
+  useEnvironment,
+} from "@keycloak/keycloak-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 "@keycloak/keycloak-ui-shared";
+
 import { updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
+import { useAccountAlerts } from "../utils/useAccountAlerts";
 import { SharedWith } from "./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({});
   };

js/apps/account-ui/src/utils/isRecord.ts

@@ -1,2 +0,0 @@
-export const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null;

js/apps/account-ui/src/utils/useAccountAlerts.ts

@@ -0,0 +1,28 @@
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
+import { AlertVariant } from "@patternfly/react-core";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ApiError } from "../api/parse-response";
+
+export function useAccountAlerts() {
+  const { t } = useTranslation();
+  const { addAlert, addError } = useAlerts();
+  const addAccountError = useCallback(
+    (messageKey: string, error: unknown) => {
+      if (!(error instanceof ApiError)) {
+        addError(messageKey, error);
+        return;
+      }
+
+      const message = t(messageKey, { error: error.message });
+      addAlert(message, AlertVariant.danger, error.description);
+    },
+    [addAlert, addError, t],
+  );
+
+  return useMemo(
+    () => ({ addAlert, addError: addAccountError }),
+    [addAccountError, addAlert],
+  );
+}

js/apps/account-ui/test/account-security/linked-accounts.spec.ts

@@ -1,6 +1,6 @@
 import ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
-import { expect, test } from "@playwright/test";
+import { Page, expect, test } from "@playwright/test";
 import { randomUUID } from "node:crypto";
 
 import {
@@ -92,17 +92,24 @@ test.describe("Account linking", () => {
       .click();
 
     // Expect an error shown that the account cannot be unlinked
-    await expect(page.getByTestId("alerts")).toBeVisible();
+    await expect(page.getByTestId("last-alert")).toContainText(
+      "You can''t remove last federated identity as you don''t have a password.",
+    );
   });
 });
 
-async function updateProfile(page, firstName, lastName, email) {
+async function updateProfile(
+  page: Page,
+  firstName: string,
+  lastName: string,
+  email: string,
+) {
   await expect(
     page.getByRole("heading", { name: "Update Account Information" }),
   ).toBeVisible();
-  await page.getByLabel("Email", { exact: true }).fill(email);
-  await page.getByLabel("First name", { exact: true }).fill(firstName);
-  await page.getByLabel("Last name", { exact: true }).fill(lastName);
+  await page.getByLabel("Email").fill(email);
+  await page.getByLabel("First name").fill(firstName);
+  await page.getByLabel("Last name").fill(lastName);
   await page.getByRole("button", { name: "Submit" }).click();
 }
 

js/apps/account-ui/test/personal-info/personal-info.spec.ts

@@ -25,7 +25,7 @@ test.describe("Personal info page", () => {
     await page.getByTestId("lastName").fill("de Wit");
     await page.getByTestId("save").click();
 
-    const alerts = page.getByTestId("alerts");
+    const alerts = page.getByTestId("last-alert");
     await expect(alerts).toHaveText("Your account has been updated.");
   });
 });
@@ -95,7 +95,7 @@ test.describe("Personal info with userprofile enabled", () => {
     await page.getByRole("option", { name: "two" }).click();
     await page.getByTestId("email2").fill("non-valid");
     await page.getByTestId("save").click();
-    await expect(page.getByTestId("alerts")).toHaveText(
+    await expect(page.getByTestId("last-alert")).toHaveText(
       "Could not update account due to validation errors",
     );
 

js/apps/admin-ui/cypress/e2e/clients_saml_advanced.spec.ts

@@ -52,7 +52,7 @@ describe("Clients Saml advanced tab", () => {
       advancedTab.termsOfServiceUrl("not a url").saveFineGrain();
 
       masthead.checkNotificationMessage(
-        "Client could not be updated: Terms of service URL is not a valid URL",
+        "Client could not be updated: invalid_input",
       );
     });
   });

js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts

@@ -162,19 +162,16 @@ describe("Clients SAML tests", () => {
         "http://localhost:8180/realms/master/protocol/" +
         clientId +
         "/clients/";
-      const rootUrlError =
-        "Client could not be updated: Root URL is not a valid URL";
-      const homeUrlError =
-        "Client could not be updated: Base URL is not a valid URL";
+      const invalidUrlError = "Client could not be updated: invalid_input";
 
       cy.findByTestId("rootUrl").type("Invalid URL");
       settingsTab.clickSaveBtn();
-      masthead.checkNotificationMessage(rootUrlError);
+      masthead.checkNotificationMessage(invalidUrlError);
       cy.findByTestId("rootUrl").clear();
 
       cy.findByTestId("baseUrl").type("Invalid URL");
       settingsTab.clickSaveBtn();
-      masthead.checkNotificationMessage(homeUrlError);
+      masthead.checkNotificationMessage(invalidUrlError);
       cy.findByTestId("baseUrl").clear();
 
       cy.findByTestId("rootUrl").type(validUrl);

js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts

@@ -2,19 +2,21 @@ import CommonElements from "../CommonElements";
 export default class Masthead extends CommonElements {
   #logoBtn = ".pf-v5-c-page__header-brand-link img";
   #helpBtn = "#help";
-  #closeAlertMessageBtn = ".pf-v5-c-alert__action button";
-  #closeLastAlertMessageBtn = "li:first-child .pf-v5-c-alert__action button";
 
-  #alertMessage = ".pf-v5-c-alert__title";
   #userDrpDwn = "#user-dropdown";
   #userDrpDwnKebab = "#user-dropdown-kebab";
+  #lastAlert = "last-alert";
   #globalAlerts = "global-alerts";
   #documentationLink = "#link";
   #backToAdminConsoleLink = "referrer-link";
   #userDrpdwnItem = ".pf-v5-c-menu__item";
 
-  #getAlertsContainer() {
-    return cy.findByTestId(this.#globalAlerts);
+  #getLastAlert() {
+    return cy.findByTestId(this.#lastAlert);
+  }
+
+  #getAlerts() {
+    return cy.findAllByTestId(this.#globalAlerts);
   }
 
   checkIsAdminUI() {
@@ -95,37 +97,27 @@ export default class Masthead extends CommonElements {
   }
 
   checkNotificationMessage(message: string | RegExp, closeNotification = true) {
+    const alertElement = this.#getLastAlert();
+
     if (typeof message === "string") {
-      this.#getAlertsContainer()
-        .find(this.#alertMessage)
-        .should("contain.text", message);
-
-      if (closeNotification) {
-        this.#getAlertsContainer()
-          .find(`button[title="` + message.replaceAll('"', '\\"') + `"]`)
-          .last()
-          .click({ force: true });
-      }
+      alertElement.should(($el) => expect($el).to.contain.text(message));
     } else {
-      this.#getAlertsContainer()
-        .find(this.#alertMessage)
-        .invoke("text")
-        .should("match", message);
+      alertElement.should(($el) => expect($el).to.match(message));
+    }
 
-      if (closeNotification) {
-        this.#getAlertsContainer().find("button").last().click({ force: true });
-      }
+    if (closeNotification) {
+      this.#getLastAlert().find("button").last().click({ force: true });
     }
     return this;
   }
 
   closeLastAlertMessage() {
-    this.#getAlertsContainer().find(this.#closeLastAlertMessageBtn).click();
+    this.#getLastAlert().find("button").click();
     return this;
   }
 
   closeAllAlertMessages() {
-    this.#getAlertsContainer().find(this.#closeAlertMessageBtn).click({
+    this.#getAlerts().find("button").click({
       force: true,
       multiple: true,
     });

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts

@@ -222,8 +222,7 @@ export default class SettingsTab extends PageObject {
   }
 
   public assertAccessSettings() {
-    const redirectUriError =
-      /Client could not be updated:.*(Master SAML Processing URL is not a valid URL|A redirect URI is not a valid URI).*/i;
+    const redirectUriError = "Client could not be updated: invalid_input";
 
     cy.findByTestId(this.#idpInitiatedSsoUrlName).click().type("a");
     cy.findByTestId(this.#idpInitiatedSsoRelayState).click().type("b");

js/apps/admin-ui/src/App.tsx

@@ -10,7 +10,6 @@ import { Outlet } from "react-router-dom";
 import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 import { AdminClientContext, initAdminClient } from "./admin-client";
-import { AlertProvider } from "./components/alert/Alerts";
 import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
 import { ErrorRenderer } from "./components/error/ErrorRenderer";
 import { KeycloakSpinner } from "./components/keycloak-spinner/KeycloakSpinner";
@@ -34,9 +33,7 @@ const AppContexts = ({ children }: PropsWithChildren) => (
         <WhoAmIContextProvider>
           <RecentRealmsProvider>
             <AccessContextProvider>
-              <AlertProvider>
-                <SubGroups>{children}</SubGroups>
-              </AlertProvider>
+              <SubGroups>{children}</SubGroups>
             </AccessContextProvider>
           </RecentRealmsProvider>
         </WhoAmIContextProvider>

js/apps/admin-ui/src/authentication/AuthenticationSection.tsx

@@ -1,6 +1,7 @@
 import { fetchWithError } from "@keycloak/keycloak-admin-client";
 import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
 import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Button,
@@ -15,8 +16,8 @@ import { sortBy } from "lodash-es";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/authentication/BindFlowDialog.tsx

@@ -9,7 +9,7 @@ import {
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "@keycloak/keycloak-ui-shared";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { REALM_FLOWS } from "./AuthenticationSection";
 import { useAdminClient } from "../admin-client";

js/apps/admin-ui/src/authentication/DuplicateFlowModal.tsx

@@ -12,7 +12,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { NameDescription } from "./form/NameDescription";
 import { toFlow } from "./routes/Flow";

js/apps/admin-ui/src/authentication/EditFlowModal.tsx

@@ -1,4 +1,5 @@
 import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Button,
@@ -10,8 +11,8 @@ import {
 import { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
 import { NameDescription } from "./form/NameDescription";
 
 type EditFlowModalProps = {

js/apps/admin-ui/src/authentication/FlowDetails.tsx

@@ -22,7 +22,7 @@ import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useRealm } from "../context/realm-context/RealmContext";

js/apps/admin-ui/src/authentication/RequiredActions.tsx

@@ -5,7 +5,7 @@ import { CogIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { addTrailingSlash, toKey } from "../util";
 import { useFetch } from "../utils/useFetch";

js/apps/admin-ui/src/authentication/components/ExecutionConfigModal.tsx

@@ -16,7 +16,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/authentication/components/RequiredActionConfigModal.tsx

@@ -15,7 +15,7 @@ import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/authentication/form/CreateFlow.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { FormSubmitButton, SelectControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/authentication/policies/CibaPolicy.tsx

@@ -11,7 +11,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl, TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";

js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx

@@ -20,7 +20,7 @@ import {
   SwitchControl,
 } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx

@@ -26,7 +26,7 @@ import { useEffect, useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx

@@ -21,7 +21,7 @@ import {
   TextControl,
   useHelp,
 } from "@keycloak/keycloak-ui-shared";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";

js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
 import type { Row } from "../clients/scopes/ClientScopes";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   ClientScope,
   allClientScopeTypes,

js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx

@@ -17,7 +17,7 @@ import { Link } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
 import type { Row } from "../clients/scopes/ClientScopes";
 import { getProtocolName } from "../clients/utils";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AllClientScopeType,
   AllClientScopes,

js/apps/admin-ui/src/client-scopes/CreateClientScope.tsx

@@ -2,7 +2,7 @@ import { AlertVariant, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   ClientScopeDefaultOptionalType,
   changeScope,

js/apps/admin-ui/src/client-scopes/EditClientScope.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useHelp } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AllClientScopes,
   ClientScope,

js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx

@@ -17,7 +17,7 @@ import { Link, useMatch, useNavigate } from "react-router-dom";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
 import { toDedicatedScope } from "../../clients/routes/DedicatedScopeDetails";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../components/form/FormAccess";

js/apps/admin-ui/src/clients/AdvancedTab.tsx

@@ -5,7 +5,7 @@ import type { TFunction } from "i18next";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { ScrollForm } from "@keycloak/keycloak-ui-shared";
-import type { AddAlertFunction } from "../components/alert/Alerts";
+import type { AddAlertFunction } from "@keycloak/keycloak-ui-shared";
 import { convertAttributeNameToForm, toUpperCase } from "../util";
 import type { FormFields, SaveOptions } from "./ClientDetails";
 import { AdvancedSettings } from "./advanced/AdvancedSettings";

js/apps/admin-ui/src/clients/ClientDetails.tsx

@@ -17,7 +17,7 @@ import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   ConfirmDialogModal,
   useConfirmDialog,

js/apps/admin-ui/src/clients/ClientsSection.tsx

@@ -23,7 +23,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { FormattedLink } from "../components/external-link/FormattedLink";
 import {

js/apps/admin-ui/src/clients/add/NewClientForm.tsx

@@ -10,7 +10,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx

@@ -9,7 +9,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 
 type FormFields = {
   node: string;

js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx

@@ -27,7 +27,7 @@ import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { ForbiddenSection } from "../../ForbiddenSection";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ClientSelect } from "../../components/client/ClientSelect";
 import { FormAccess } from "../../components/form/FormAccess";
 import {

js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TextAreaControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { prettyPrintJSON } from "../../util";

js/apps/admin-ui/src/clients/authorization/DeleteScopeDialog.tsx

@@ -2,7 +2,7 @@ import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/s
 import { Alert, AlertVariant } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ConfirmDialogModal } from "../../components/confirm-dialog/ConfirmDialog";
 import type { PermissionScopeRepresentation } from "./Scopes";
 

js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx

@@ -23,7 +23,7 @@ import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";

js/apps/admin-ui/src/clients/authorization/Permissions.tsx

@@ -26,7 +26,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/clients/authorization/Policies.tsx

@@ -21,7 +21,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx

@@ -18,7 +18,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { HelpItem, TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
 import { DefaultSwitchControl } from "../../components/SwitchControl";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";

js/apps/admin-ui/src/clients/authorization/Resources.tsx

@@ -20,7 +20,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/authorization/Settings.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
 import { DefaultSwitchControl } from "../../components/SwitchControl";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
 import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";

js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx

@@ -12,7 +12,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../../admin-client";
-import { useAlerts } from "../../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";

js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx

@@ -13,7 +13,7 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { PasswordInput } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { useAccess } from "../../context/access/Access";
 import useFormatDate from "../../utils/useFormatDate";

js/apps/admin-ui/src/clients/credentials/Credentials.tsx

@@ -20,7 +20,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { HelpItem, SelectControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/import/ImportForm.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { FormSubmitButton, TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { FileUploadForm } from "../../components/json-file-upload/FileUploadForm";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { NumberControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/clients/initial-access/InitialAccessTokenList.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import {

js/apps/admin-ui/src/clients/keys/ExportSamlKeyDialog.tsx

@@ -4,7 +4,7 @@ import { saveAs } from "file-saver";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { KeyForm, getFileExtension } from "./GenerateKeyDialog";
 import { KeyTypes } from "./SamlKeys";

js/apps/admin-ui/src/clients/keys/Keys.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from "react-i18next";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
 import { DefaultSwitchControl } from "../../components/SwitchControl";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { convertAttributeNameToForm } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/keys/SamlImportKeyDialog.tsx

@@ -2,7 +2,7 @@ import { AlertVariant } from "@patternfly/react-core";
 import { FormProvider, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ConfirmDialogModal } from "../../components/confirm-dialog/ConfirmDialog";
 import { KeyForm } from "./GenerateKeyDialog";
 import type { KeyTypes } from "./SamlKeys";

js/apps/admin-ui/src/clients/keys/SamlKeys.tsx

@@ -18,7 +18,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormPanel, HelpItem } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { convertAttributeNameToForm } from "../../util";

js/apps/admin-ui/src/clients/keys/SamlKeysDialog.tsx

@@ -24,7 +24,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { Certificate } from "./Certificate";
 import { KeyForm } from "./GenerateKeyDialog";
 import type { KeyTypes } from "./SamlKeys";

js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import {
   Action,

js/apps/admin-ui/src/clients/registration/DetailProvider.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../components/form/FormAccess";

js/apps/admin-ui/src/clients/roles/CreateClientRole.tsx

@@ -4,7 +4,7 @@ import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { AttributeForm } from "../../components/key-value-form/AttributeForm";
 import { RoleForm } from "../../components/role-form/RoleForm";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx

@@ -22,7 +22,7 @@ import {
   nameFilter,
   typeFilter,
 } from "../../client-scopes/details/SearchFilter";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AllClientScopeType,
   AllClientScopes,

js/apps/admin-ui/src/clients/scopes/CopyToClipboardButton.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useSetTimeout } from "@keycloak/keycloak-ui-shared";
 import {
   ClipboardCopyButton,
   ClipboardCopyButtonProps,
 } from "@patternfly/react-core";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
-import useSetTimeout from "../../utils/useSetTimeout";
 import useQueryPermission from "../../utils/useQueryPermission";
 
 enum CopyState {

js/apps/admin-ui/src/clients/scopes/DedicatedScope.tsx

@@ -11,7 +11,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { RoleMapping, Row } from "../../components/role-mapping/RoleMapping";
 import { useAccess } from "../../context/access/Access";

js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
 import { MapperList } from "../../client-scopes/details/MapperList";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import {
   RoutableTabs,

js/apps/admin-ui/src/clients/service-account/ServiceAccount.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { RoleMapping, Row } from "../../components/role-mapping/RoleMapping";
 import { useAccess } from "../../context/access/Access";

js/apps/admin-ui/src/components/alert/Alerts.tsx

@@ -1,111 +0,0 @@
-import { NetworkError } from "@keycloak/keycloak-admin-client";
-import { AlertVariant } from "@patternfly/react-core";
-import { PropsWithChildren, useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { generateId } from "../../util";
-
-import {
-  createNamedContext,
-  useRequiredContext,
-} from "@keycloak/keycloak-ui-shared";
-import useSetTimeout from "../../utils/useSetTimeout";
-import { AlertPanel } from "./AlertPanel";
-
-const ALERT_TIMEOUT = 8000;
-
-export type AddAlertFunction = (
-  message: string,
-  variant?: AlertVariant,
-  description?: string,
-) => void;
-
-export type AddErrorFunction = (message: string, error: unknown) => void;
-
-export type AlertProps = {
-  addAlert: AddAlertFunction;
-  addError: AddErrorFunction;
-};
-
-export const AlertContext = createNamedContext<AlertProps | undefined>(
-  "AlertContext",
-  undefined,
-);
-
-export const useAlerts = () => useRequiredContext(AlertContext);
-
-export type AlertEntry = {
-  id: number;
-  message: string;
-  variant: AlertVariant;
-  description?: string;
-};
-
-export const AlertProvider = ({ children }: PropsWithChildren) => {
-  const { t } = useTranslation();
-  const setTimeout = useSetTimeout();
-  const [alerts, setAlerts] = useState<AlertEntry[]>([]);
-
-  const removeAlert = (id: number) =>
-    setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
-
-  const addAlert = useCallback<AddAlertFunction>(
-    (message, variant = AlertVariant.success, description) => {
-      const alert: AlertEntry = {
-        id: generateId(),
-        message,
-        variant,
-        description,
-      };
-
-      setAlerts((alerts) => [alert, ...alerts]);
-      setTimeout(() => removeAlert(alert.id), ALERT_TIMEOUT);
-    },
-    [],
-  );
-
-  const addError = useCallback<AddErrorFunction>((message, error) => {
-    addAlert(
-      t(message, {
-        error: getErrorMessage(error),
-      }),
-      AlertVariant.danger,
-    );
-  }, []);
-
-  const value = useMemo(() => ({ addAlert, addError }), []);
-
-  return (
-    <AlertContext.Provider value={value}>
-      <AlertPanel alerts={alerts} onCloseAlert={removeAlert} />
-      {children}
-    </AlertContext.Provider>
-  );
-};
-
-function getErrorMessage(error: unknown) {
-  if (typeof error === "string") {
-    return error;
-  }
-
-  if (error instanceof NetworkError) {
-    return getNetworkErrorMessage(error);
-  }
-
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  throw new Error("Unable to determine error message.");
-}
-
-function getNetworkErrorMessage({ responseData }: NetworkError) {
-  const data = responseData as Record<string, unknown>;
-
-  for (const key of ["error_description", "errorMessage", "error"]) {
-    const value = data[key];
-
-    if (typeof value === "string") {
-      return value;
-    }
-  }
-}

js/apps/admin-ui/src/components/dynamic/MapComponent.tsx

@@ -1,25 +1,24 @@
+import { HelpItem, generateId } from "@keycloak/keycloak-ui-shared";
 import {
   ActionList,
   ActionListItem,
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
   Flex,
   FlexItem,
   FormGroup,
   TextInput,
-  EmptyStateFooter,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { generateId } from "../../util";
 
-import { HelpItem } from "@keycloak/keycloak-ui-shared";
 import { KeyValueType } from "../key-value-form/key-value-convert";
-import type { ComponentProps } from "./components";
 import { convertToName } from "./DynamicComponents";
+import type { ComponentProps } from "./components";
 
 type IdKeyValueType = KeyValueType & {
   id: number;

js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx

@@ -14,7 +14,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import { emptyFormatter, upperCaseFormatter } from "../../util";
-import { useAlerts } from "../alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { Action, KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";

js/apps/admin-ui/src/components/roles-list/RolesList.tsx

@@ -9,7 +9,7 @@ import { translationFormatter } from "../../clients/ClientsSection";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toRealmSettings } from "../../realm-settings/routes/RealmSettings";
 import { emptyFormatter, upperCaseFormatter } from "../../util";
-import { useAlerts } from "../alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { Action, KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";

js/apps/admin-ui/src/components/users/UserDataTable.tsx

@@ -33,7 +33,7 @@ import { toAddUser } from "../../user/routes/AddUser";
 import { toUser } from "../../user/routes/User";
 import { emptyFormatter } from "../../util";
 import { useFetch } from "../../utils/useFetch";
-import { useAlerts } from "../alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";

js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx

@@ -23,7 +23,7 @@ import { ReactNode, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-router-dom";
-import { useAlerts } from "../alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { UserAttribute } from "./UserDataTable";
 
 type UserDataTableAttributeSearchFormProps = {

js/apps/admin-ui/src/groups/GroupAttributes.tsx

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AttributeForm,
   AttributesForm,

js/apps/admin-ui/src/groups/GroupRoleMapping.tsx

@@ -2,7 +2,7 @@ import type { RoleMappingPayload } from "@keycloak/keycloak-admin-client/lib/def
 import { AlertVariant } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { RoleMapping, Row } from "../components/role-mapping/RoleMapping";
 
 type GroupRoleMappingProps = {

js/apps/admin-ui/src/groups/GroupsModal.tsx

@@ -11,7 +11,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormSubmitButton, TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 
 type GroupsModalProps = {
   id?: string;

js/apps/admin-ui/src/groups/Members.tsx

@@ -16,7 +16,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { GroupPath } from "../components/group/GroupPath";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";

js/apps/admin-ui/src/groups/MembersModal.tsx

@@ -4,7 +4,7 @@ import { differenceBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { emptyFormatter } from "../util";

js/apps/admin-ui/src/groups/components/DeleteGroup.tsx

@@ -2,7 +2,7 @@ import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/g
 import { ButtonVariant } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ConfirmDialogModal } from "../../components/confirm-dialog/ConfirmDialog";
 
 type DeleteConfirmProps = {

js/apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -22,7 +22,7 @@ import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { PaginatingTableToolbar } from "../../components/table-toolbar/PaginatingTableToolbar";
 import { useAccess } from "../../context/access/Access";

js/apps/admin-ui/src/groups/components/MoveDialog.tsx

@@ -2,7 +2,7 @@ import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { GroupPickerDialog } from "../../components/group/GroupPickerDialog";
 
 type MoveDialogProps = {

js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx

@@ -26,7 +26,7 @@ import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ClickableCard } from "../components/keycloak-card/ClickableCard";
 import {

js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx

@@ -22,7 +22,7 @@ import { sortBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { useFetch } from "../utils/useFetch";
 

js/apps/admin-ui/src/identity-providers/add/AddIdentityProvider.tsx

@@ -10,7 +10,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../components/form/FormAccess";

js/apps/admin-ui/src/identity-providers/add/AddOpenIdConnect.tsx

@@ -9,7 +9,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/identity-providers/add/AddSamlConnect.tsx

@@ -9,7 +9,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx

@@ -23,7 +23,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { ScrollForm } from "@keycloak/keycloak-ui-shared";
-import { useAlerts } from "../../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";

js/apps/admin-ui/src/index.ts

@@ -68,8 +68,6 @@ export * as ClientDetails from "./clients/ClientDetails";
 export { ClientSessions } from "./clients/ClientSessions";
 export { ClientSettings } from "./clients/ClientSettings";
 export * as ClientsSection from "./clients/ClientsSection";
-export { AlertPanel } from "./components/alert/AlertPanel";
-export { useAlerts, AlertProvider } from "./components/alert/Alerts";
 export { GroupBreadCrumbs } from "./components/bread-crumb/GroupBreadCrumbs";
 export { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
 export { ClientSelect } from "./components/client/ClientSelect";

js/apps/admin-ui/src/organizations/DetailOraganzationHeader.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useAdminClient } from "../admin-client";
 import { useNavigate } from "react-router-dom";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { toOrganizations } from "./routes/Organizations";
 import { useRealm } from "../context/realm-context/RealmContext";

js/apps/admin-ui/src/organizations/DetailOrganization.tsx

@@ -9,7 +9,7 @@ import {
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { FormAccess } from "../components/form/FormAccess";
 import { AttributesForm } from "../components/key-value-form/AttributeForm";
 import { arrayToKeyValue } from "../components/key-value-form/key-value-convert";

js/apps/admin-ui/src/organizations/IdentityProviders.tsx

@@ -11,7 +11,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";

js/apps/admin-ui/src/organizations/InviteMemberModal.tsx

@@ -9,7 +9,7 @@ import {
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 
 type InviteMemberModalProps = {
   orgId: string;

js/apps/admin-ui/src/organizations/LinkIdentityProviderModal.tsx

@@ -12,7 +12,7 @@ import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
 import { DefaultSwitchControl } from "../components/SwitchControl";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   convertAttributeNameToForm,
   convertFormValuesToObject,

js/apps/admin-ui/src/organizations/Members.tsx

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "../components/alert/Alerts";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useRealm } from "../context/realm-context/RealmContext";