delete confirmation

src/user-federation/ldap/mappers/LdapMapperList.tsx

@@ -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();
             },
           },
         ]}