Delete mapper (#1307)

cypress/integration/identity_providers.spec.ts

@@ -312,6 +312,18 @@ describe("Identity provider test", () => {
       addMapperPage.editSocialMapper();
     });
 
+    it("should delete facebook mapper", () => {
+      sidebarPage.goToIdentityProviders();
+
+      listingPage.goToItemDetails("facebook");
+
+      addMapperPage.goToMappersTab();
+
+      listingPage.deleteItem("facebook attribute importer");
+
+      cy.findByTestId("modalConfirm").click();
+    });
+
     it("should edit SAML mapper", () => {
       sidebarPage.goToIdentityProviders();
 

src/identity-providers/add/DetailSettings.tsx

@@ -42,7 +42,10 @@ import { toIdentityProviderAddMapper } from "../routes/AddMapper";
 import { toIdentityProviderEditMapper } from "../routes/EditMapper";
 
 import { toUpperCase } from "../../util";
-import type { IdentityProviderParams } from "../routes/IdentityProvider";
+import {
+  IdentityProviderParams,
+  toIdentityProvider,
+} from "../routes/IdentityProvider";
 
 type HeaderProps = {
   onChange: (value: boolean) => void;
@@ -105,11 +108,15 @@ export const DetailSettings = () => {
   const form = useForm<IdentityProviderRepresentation>();
   const { handleSubmit, getValues, reset } = form;
   const [provider, setProvider] = useState<IdentityProviderRepresentation>();
+  const [selectedMapper, setSelectedMapper] =
+    useState<IdPWithMapperAttributes>();
 
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
   const { realm } = useRealm();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(key + 1);
 
   const MapperLink = ({ name, mapperId }: IdPWithMapperAttributes) => (
     <Link
@@ -166,6 +173,30 @@ export const DetailSettings = () => {
     },
   });
 
+  const [toggleDeleteMapperDialog, DeleteMapperConfirm] = useConfirmDialog({
+    titleKey: "identity-providers:deleteProviderMapper",
+    messageKey: t("identity-providers:deleteMapperConfirm", {
+      mapper: selectedMapper?.name,
+    }),
+    continueButtonLabel: "common:delete",
+    continueButtonVariant: ButtonVariant.danger,
+    onConfirm: async () => {
+      try {
+        await adminClient.identityProviders.delMapper({
+          alias: alias,
+          id: selectedMapper?.mapperId!,
+        });
+        addAlert(t("deleteMapperSuccess"), AlertVariant.success);
+        refresh();
+        history.push(
+          toIdentityProvider({ providerId, alias, tab: "mappers", realm })
+        );
+      } catch (error) {
+        addError("identity-providers:deleteErrorError", error);
+      }
+    },
+  });
+
   if (!provider) {
     return <Spinner />;
   }
@@ -212,6 +243,7 @@ export const DetailSettings = () => {
   return (
     <>
       <DeleteConfirm />
+      <DeleteMapperConfirm />
       <Controller
         name="enabled"
         control={form.control}
@@ -315,6 +347,7 @@ export const DetailSettings = () => {
                   />
                 }
                 loader={loader}
+                key={key}
                 isPaginated
                 ariaLabelKey="identity-providers:mappersList"
                 searchPlaceholderKey="identity-providers:searchForMapper"
@@ -348,6 +381,15 @@ export const DetailSettings = () => {
                     displayKey: "common:type",
                   },
                 ]}
+                actions={[
+                  {
+                    title: t("common:delete"),
+                    onRowClick: (mapper) => {
+                      setSelectedMapper(mapper);
+                      toggleDeleteMapperDialog();
+                    },
+                  },
+                ]}
               />
             </Tab>
           </KeycloakTabs>

src/identity-providers/messages.ts

@@ -20,10 +20,11 @@ export default {
     deleteProvider: "Delete provider?",
     deleteProviderMapper: "Delete mapper?",
     deleteConfirm:
-      "Are you sure you want to permanently delete the provider '{{provider}}'",
+      "Are you sure you want to permanently delete the provider '{{provider}}'?",
     deleteMapperConfirm:
-      "Are you sure you want to permanently delete the mapper '{{mapper}}'",
+      "Are you sure you want to permanently delete the mapper {{mapper}}?",
-    deletedSuccess: "Provider successfully deleted",
+    deleteMapperSuccess: "Mapper successfully deleted.",
+    deletedSuccess: "Provider successfully deleted.",
     deleteError: "Could not delete the provider {{error}}",
     disableProvider: "Disable provider?",
     disableConfirm: