From 1eb33007c417054cfc489de52c770611f80b59c2 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 11 May 2022 11:43:07 +0200
Subject: [PATCH] Issue 2580 (#2614)

---
 public/resources/en/groups.json             |  4 +++-
 src/components/role-mapping/RoleMapping.tsx | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/resources/en/groups.json b/public/resources/en/groups.json
index e4257b93e0..83c2697bd9 100644
--- a/public/resources/en/groups.json
+++ b/public/resources/en/groups.json
@@ -58,5 +58,7 @@
   "attributes": "Attributes",
   "groupUpdated": "Group updated",
   "groupUpdateError": "Error updating group {error}",
-  "roleMapping": "Role mapping"
+  "roleMapping": "Role mapping",
+  "noRoles": "No roles for this group",
+  "noRolesInstructions": "You haven't created any roles for this group. Create a role to get started."
 }
diff --git a/src/components/role-mapping/RoleMapping.tsx b/src/components/role-mapping/RoleMapping.tsx
index dd69c4addc..10e9207c3e 100644
--- a/src/components/role-mapping/RoleMapping.tsx
+++ b/src/components/role-mapping/RoleMapping.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -24,6 +24,8 @@ import { useAlerts } from "../alert/Alerts";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
+import useSetTimeout from "../../utils/useSetTimeout";
+import useToggle from "../../utils/useToggle";
 
 import "./role-mapping.css";
 
@@ -172,12 +174,16 @@ export const RoleMapping = ({
   const [hide, setHide] = useState(false);
   const [showAssign, setShowAssign] = useState(false);
   const [selected, setSelected] = useState<Row[]>([]);
+  const [wait, toggleWait] = useToggle();
+  const setTimeout = useSetTimeout();
 
   const assignRoles = async (rows: Row[]) => {
     await save(rows);
     refresh();
   };
 
+  useEffect(() => setTimeout(refresh, 200), [wait]);
+
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: "clients:removeMappingTitle",
     messageKey: t("clients:removeMappingConfirm", { count: selected.length }),
@@ -202,8 +208,8 @@ export const RoleMapping = ({
             );
           })
         );
-        addAlert(t("clientScopeRemoveSuccess"), AlertVariant.success);
-        refresh();
+        addAlert(t("clients:clientScopeRemoveSuccess"), AlertVariant.success);
+        toggleWait();
       } catch (error) {
         addError("clients:clientScopeRemoveError", error);
       }