added missing confirm dialog (#395)

cypress/integration/clients_test.spec.ts

@@ -3,6 +3,7 @@ import Masthead from "../support/pages/admin_console/Masthead";
 import ListingPage from "../support/pages/admin_console/ListingPage";
 import SidebarPage from "../support/pages/admin_console/SidebarPage";
 import CreateClientPage from "../support/pages/admin_console/manage/clients/CreateClientPage";
+import ModalUtils from "../support/util/ModalUtils";
 
 let itemId = "client_crud";
 const loginPage = new LoginPage();
@@ -10,9 +11,9 @@ const masthead = new Masthead();
 const sidebarPage = new SidebarPage();
 const listingPage = new ListingPage();
 const createClientPage = new CreateClientPage();
+const modalUtils = new ModalUtils();
 
 describe("Clients test", function () {
-
   describe("Client creation", function () {
     beforeEach(function () {
       cy.visit("");
@@ -68,7 +69,8 @@ describe("Clients test", function () {
       listingPage.searchItem(itemId).itemExist(itemId);
 
       // Delete
-      listingPage.deleteItem(itemId); // There should be a confirmation pop-up
+      listingPage.deleteItem(itemId);
+      modalUtils.checkModalTitle(`Delete ${itemId} ?`).confirmModal();
 
       masthead.checkNotificationMessage("The client has been deleted");
 

src/clients/ClientsSection.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
   Badge,
   Button,
+  ButtonVariant,
   PageSection,
 } from "@patternfly/react-core";
 
@@ -15,6 +16,7 @@ import { emptyFormatter, exportClient, getBaseUrl } from "../util";
 import { useAlerts } from "../components/alert/Alerts";
 import ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation";
 import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 
 export const ClientsSection = () => {
   const { t } = useTranslation("clients");
@@ -25,6 +27,10 @@ export const ClientsSection = () => {
   const adminClient = useAdminClient();
   const baseUrl = getBaseUrl(adminClient);
 
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+  const [selectedClient, setSelectedClient] = useState<ClientRepresentation>();
+
   const loader = async (first?: number, max?: number, search?: string) => {
     const params: { [name: string]: string | number } = {
       first: first!,
@@ -37,6 +43,26 @@ export const ClientsSection = () => {
     return await adminClient.clients.find({ ...params });
   };
 
+  useEffect(refresh, [selectedClient]);
+
+  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
+    titleKey: t("clientDelete", { clientId: selectedClient?.clientId }),
+    messageKey: "clients:clientDeleteConfirm",
+    continueButtonLabel: "common:delete",
+    continueButtonVariant: ButtonVariant.danger,
+    onConfirm: async () => {
+      try {
+        await adminClient.clients.del({
+          id: selectedClient!.id!,
+        });
+        addAlert(t("clientDeletedSuccess"), AlertVariant.success);
+        setSelectedClient(undefined);
+      } catch (error) {
+        addAlert(t("clientDeleteError", { error }), AlertVariant.danger);
+      }
+    },
+  });
+
   const ClientDetailLink = (client: ClientRepresentation) => (
     <>
       <Link key={client.id} to={`${url}/${client.id}`}>
@@ -56,7 +82,9 @@ export const ClientsSection = () => {
         subKey="clients:clientsExplain"
       />
       <PageSection variant="light" className="pf-u-p-0">
+        <DeleteConfirm />
         <KeycloakDataTable
+          key={key}
           loader={loader}
           isPaginated
           ariaLabelKey="clients:clientList"
@@ -83,19 +111,9 @@ export const ClientsSection = () => {
             },
             {
               title: t("common:delete"),
-              onRowClick: async (client) => {
-                try {
-                  await adminClient.clients.del({
-                    id: client.id!,
-                  });
-                  addAlert(t("clientDeletedSuccess"), AlertVariant.success);
-                  return true;
-                } catch (error) {
-                  addAlert(
-                    t("clientDeleteError", { error }),
-                    AlertVariant.danger
-                  );
-                }
+              onRowClick: (client) => {
+                setSelectedClient(client);
+                toggleDeleteDialog();
               },
             },
           ]}

src/clients/messages.json

@@ -63,6 +63,7 @@
     "clientSaveSuccess": "Client successfully updated",
     "clientSaveError": "Client could not be updated:",
     "clientImportSuccess": "Client imported successfully",
+    "clientDelete": "Delete {{clientId}} ?",
     "clientDeletedSuccess": "The client has been deleted",
     "clientDeleteError": "Could not delete client: {{error}}",
     "clientDeleteConfirmTitle": "Delete client?",