From c5af1e143c73f76cac203a59370915b482907492 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 17 Oct 2022 12:21:03 +0200
Subject: [PATCH] Added empty state for assign roles (#3563)

---
 apps/admin-ui/public/resources/en/common.json |  3 +-
 .../role-mapping/AddRoleMappingModal.tsx      | 28 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/admin-ui/public/resources/en/common.json b/apps/admin-ui/public/resources/en/common.json
index 3fe742cd60..c6aa794c2e 100644
--- a/apps/admin-ui/public/resources/en/common.json
+++ b/apps/admin-ui/public/resources/en/common.json
@@ -207,5 +207,6 @@
   "temporaryPassword": "Temporary",
   "temporaryPasswordHelpText": "If enabled, the user must change the password on next login",
   "forbidden_one": "Forbidden, permission needed:",
-  "forbidden_other": "Forbidden, permissions needed:"
+  "forbidden_other": "Forbidden, permissions needed:",
+  "noRealmRolesToAssign": "There are no realm roles to assign"
 }
diff --git a/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx b/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
index 5418ca2fa4..e75366c080 100644
--- a/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
+++ b/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
@@ -17,6 +17,7 @@ import useLocaleSort from "../../utils/useLocaleSort";
 import { ResourcesKey, Row, ServiceRole } from "./RoleMapping";
 import { getAvailableRoles } from "./queries";
 import { getAvailableClientRoles } from "./resource";
+import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 
 type AddRoleMappingModalProps = {
   id: string;
@@ -39,7 +40,7 @@ export const AddRoleMappingModal = ({
   onAssign,
   onClose,
 }: AddRoleMappingModalProps) => {
-  const { t } = useTranslation("common");
+  const { t } = useTranslation(type);
   const { adminClient } = useAdminClient();
 
   const [searchToggle, setSearchToggle] = useState(false);
@@ -104,9 +105,11 @@ export const AddRoleMappingModal = ({
     <Modal
       variant={ModalVariant.large}
       title={
-        isLDAPmapper ? t("assignRole") : t("assignRolesTo", { client: name })
+        isLDAPmapper
+          ? t("common:assignRole")
+          : t("common:assignRolesTo", { client: name })
       }
-      isOpen={true}
+      isOpen
       onClose={onClose}
       actions={[
         <Button
@@ -119,7 +122,7 @@ export const AddRoleMappingModal = ({
             onClose();
           }}
         >
-          {t("assign")}
+          {t("common:assign")}
         </Button>,
         <Button
           data-testid="cancel"
@@ -177,9 +180,24 @@ export const AddRoleMappingModal = ({
           },
           {
             name: "role.description",
-            displayKey: t("description"),
+            displayKey: "common:description",
           },
         ]}
+        emptyState={
+          <ListEmptyState
+            message={t("noRoles")}
+            instructions={t("common:noRealmRolesToAssign")}
+            secondaryActions={[
+              {
+                text: t("common:filterByClients"),
+                onClick: () => {
+                  setFilterType("clients");
+                  refresh();
+                },
+              },
+            ]}
+          />
+        }
       />
     </Modal>
   );