From 24d136eeed87bbed3d107902e34550a5eabf1af7 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 1 Mar 2021 14:20:26 -0500
Subject: [PATCH] add links to empty state

---
 .../list-empty-state/ListEmptyState.tsx       |  2 +-
 src/realm-roles/RealmRolesSection.css         | 11 ++++++++++
 src/realm-roles/UsersInRoleTab.tsx            | 22 ++++++++++++++++++-
 src/realm-roles/messages.json                 |  5 +++--
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx
index 3a805477d6..cc095f1c05 100644
--- a/src/components/list-empty-state/ListEmptyState.tsx
+++ b/src/components/list-empty-state/ListEmptyState.tsx
@@ -19,7 +19,7 @@ export type Action = {
 
 export type ListEmptyStateProps = {
   message: string;
-  instructions: string;
+  instructions: React.ReactNode;
   primaryActionText?: string;
   onPrimaryAction?: MouseEventHandler<HTMLButtonElement>;
   hasIcon?: boolean;
diff --git a/src/realm-roles/RealmRolesSection.css b/src/realm-roles/RealmRolesSection.css
index 7e0f4a159d..b45ea91f84 100644
--- a/src/realm-roles/RealmRolesSection.css
+++ b/src/realm-roles/RealmRolesSection.css
@@ -43,3 +43,14 @@
   padding-right: var(--pf-global--spacer--xs);
   padding-top: 0px;
 }
+
+.pf-c-button.pf-m-link.kc-groups-link-empty-state {
+  padding-left: var(--pf-global--spacer--xs);
+  padding-right: var(--pf-global--spacer--xs);
+}
+
+.pf-c-button.pf-m-link.kc-users-link-empty-state {
+  padding-left: var(--pf-global--spacer--xs);
+  padding-right: var(--pf-global--spacer--xs);
+}
+
diff --git a/src/realm-roles/UsersInRoleTab.tsx b/src/realm-roles/UsersInRoleTab.tsx
index 30eae56cc0..979a851057 100644
--- a/src/realm-roles/UsersInRoleTab.tsx
+++ b/src/realm-roles/UsersInRoleTab.tsx
@@ -74,7 +74,27 @@ export const UsersInRoleTab = () => {
             <ListEmptyState
               hasIcon={true}
               message={t("noDirectUsers")}
-              instructions={t("noUsersEmptyStateDescription")}
+              instructions={
+                <div>
+                  {t("noUsersEmptyStateDescription")}
+                  <Button
+                    className="kc-groups-link-empty-state"
+                    variant="link"
+                    onClick={() => history.push(`/${realm}/groups`)}
+                  >
+                    {t("groups")}
+                  </Button>
+                  {t("or")}
+                  <Button
+                    className="kc-users-link-empty-state"
+                    variant="link"
+                    onClick={() => history.push(`/${realm}/users`)}
+                  >
+                    {t("users")}
+                  </Button>
+                  {t("noUsersEmptyStateDescriptionContinued")}
+                </div>
+              }
             />
           }
           columns={[
diff --git a/src/realm-roles/messages.json b/src/realm-roles/messages.json
index 7adde7343a..02af1031e6 100644
--- a/src/realm-roles/messages.json
+++ b/src/realm-roles/messages.json
@@ -57,11 +57,12 @@
     "removeUser": "Remove users",
     "removeUserText": "Do you want to remove {{numSelected}} users?. These users will no longer have permissions of the role {{role}} and the associated roles of it.",
     "noDirectUsers": "No direct users",
-    "noUsersEmptyStateDescription": "Only the users with this role directly assigned will appear under this tab. If you need to find users assigned to this role, you can go to Groups or Users to find them. Users that already have this role as an effective role cannot be added here.",
+    "noUsersEmptyStateDescription": "Only the users with this role directly assigned will appear under this tab. If you need to find users assigned to this role, go to",
+    "noUsersEmptyStateDescriptionContinued": "to find them. Users that already have this role as an effective role cannot be added here.",
     "id": "ID",
     "groups": "Groups",
-    "users": "Users",
     "or": "or",
+    "users": "Users",
     "userName": "Username",
     "email": "Email",
     "lastName": "Last name",