message: delete confirmation
diff: @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
  import {
  AlertVariant,
  Button,
  + ButtonVariant,
  ToolbarItem,
  } from "@patternfly/react-core";
  import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
  @@ -15,6 +16,7 @@ import {
  asyncStateFetch,
  } from "../../../context/auth/AdminClient";
  import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
  +import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
  export const LdapMapperList = () => {
  const [mappers, setMappers] = useState<ComponentRepresentation[]>();
  @@ -25,9 +27,44 @@ export const LdapMapperList = () => {
  const { url } = useRouteMatch();
  const handleError = useErrorHandler();
  const [key, setKey] = useState(0);
  +
  const refresh = () => setKey(new Date().getTime());
  const { id } = useParams<{ id: string }>();
  + const [selectedMapper, setSelectedMapper] = useState<
  + ComponentRepresentation
  + >();
  +
  + const loader = async () =>
  + Promise.resolve(
  + (mappers || []).map((mapper) => {
  + return {
  + ...mapper,
  + name: mapper.name,
  + type: mapper.providerId,
  + } as ComponentRepresentation;
  + })
  + );
  +
  + const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
  + titleKey: t("common:deleteMappingTitle", { mapperId: selectedMapper?.id }),
  + messageKey: "common:deleteMappingConfirm",
  + continueButtonLabel: "common:delete",
  + continueButtonVariant: ButtonVariant.danger,
  + onConfirm: async () => {
  + try {
  + await adminClient.components.del({
  + id: selectedMapper!.id!,
  + });
  + refresh();
  + addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
  + setSelectedMapper(undefined);
  + } catch (error) {
  + addAlert(t("common:mappingDeletedError", { error }), AlertVariant.danger);
  + }
  + },
  + });
  +
  useEffect(() => {
  return asyncStateFetch(
  () => {
  @@ -61,17 +98,6 @@ export const LdapMapperList = () => {
  );
  }
  - const loader = async () =>
  - Promise.resolve(
  - (mappers || []).map((mapper) => {
  - return {
  - ...mapper,
  - name: mapper.name,
  - type: mapper.providerId,
  - } as ComponentRepresentation;
  - })
  - );
  -
  const getUrl = (url: string) => {
  if (url.indexOf("/mappers") === -1) {
  return `${url}/mappers`;
  @@ -85,21 +111,9 @@ export const LdapMapperList = () => {
  </>
  );
  - const deleteMapper = async (mapper: ComponentRepresentation) => {
  - try {
  - await adminClient.components.del({
  - id: mapper.id!,
  - });
  - // refresh();
  - addAlert(t("mappingDelete"), AlertVariant.success);
  - } catch (error) {
  - addAlert(t("mappingDeleteError", { error }), AlertVariant.danger);
  - }
  - return true;
  - };
  -
  return (
  <>
  + <DeleteConfirm />
  <KeycloakDataTable
  key={key}
  loader={loader}
  @@ -119,10 +133,9 @@ export const LdapMapperList = () => {
  actions={[
  {
  title: t("common:delete"),
  - onRowClick: async (mapper: ComponentRepresentation) => {
  - await deleteMapper(mapper);
  - refresh();
  - return true;
  + onRowClick: (mapper) => {
  + setSelectedMapper(mapper);
  + toggleDeleteDialog();
  },
  },
  ]}
  