add links to empty state

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;

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);
+}
+

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={[

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",