changed render of link so search can find the text (#967)

* changed render of link so search can find the text

fixing: #965

* Update src/realm-roles/RolesList.tsx

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* Update src/realm-roles/RolesList.tsx

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* add missing imports and disable problematic eslint rules

Co-authored-by: Jon Koops <jonkoops@gmail.com>

.eslintrc.js

@@ -20,6 +20,9 @@ module.exports = {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-empty-function": "error",
+    // react/prop-types cannot handle generic props, so we need to disable it.
+    // https://github.com/yannickcr/eslint-plugin-react/issues/2777#issuecomment-814968432
+    "react/prop-types": "off",
   },
   overrides: [
     {

src/realm-roles/RolesList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { FunctionComponent, useState } from "react";
 import { Link, useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
@@ -34,11 +34,15 @@ type RolesListProps = {
   ) => Promise<RoleRepresentation[]>;
 };
 
-const RoleLink = ({ role }: { role: RoleRepresentation }) => {
+type RoleLinkProps = {
+  role: RoleRepresentation;
+};
+
+const RoleLink: FunctionComponent<RoleLinkProps> = ({ children, role }) => {
   const { url } = useRouteMatch();
   return (
     <Link key={role.id} to={`${url}/${role.id}/details`}>
-      {role.name}
+      {children}
     </Link>
   );
 };
@@ -69,7 +73,7 @@ export const RolesList = ({
 
   const RoleDetailLink = (role: RoleRepresentation) => (
     <>
-      <RoleLink role={role} />
+      <RoleLink role={role}>{role.name}</RoleLink>
       {role.name?.includes("default-role") ? (
         <HelpItem
           helpText={t("defaultRole")}