Members Table (#151)

* tweak dark mode

* fix #148 dark/light mode trigger

* dark mode tweaks

* change button to link

* refactor

* cleanup input types

* adjust tailwind classes to make sure that table always shows

* make sure that breadcrumb shows the slash break

package.json

@@ -43,6 +43,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "react-tooltip": "^5.27.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

public/locales/en/translation.json

@@ -305,5 +305,6 @@
   "viewOrganizationInformationChangeDisplayName": "View organization information change display name",
   "welcomeMessage": "Welcome to keycloak account management",
   "youAreTheSameUserAsThisUser": "This is your account! This is you!",
-  "youLackTheManageRolesRole": "You lack the manage roles role"
+  "youLackTheManageRolesRole": "You lack the manage roles role",
+  "tooltipMembersTableAdmin": "Admin users cannot be edited."
 }

src/components/elements/table/members-table.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { TableRows } from "./table";
 import { Lock } from "lucide-react";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   rows: TableRows;
@@ -71,7 +72,7 @@ const MembersTable: React.FC<Props> = ({ rows, isLoading }) => {
               );
             })}
           </div>
-          <table className="hidden w-full table-auto md:table">
+          <table className="w-full table-auto sm:hidden md:table">
             <tbody className="divide-y dark:divide-zinc-600">
               {rows.map((item) => {
                 const isOrgAdmin =
@@ -81,8 +82,15 @@ const MembersTable: React.FC<Props> = ({ rows, isLoading }) => {
                   return (
                     <tr key={item["email"]}>
                       <td className="px-5 py-4 align-middle">
-                        <div className="text-sm text-gray-500 dark:text-zinc-400">
-                          {t("admin")}
+                        <div className="align-center flex text-gray-500 dark:text-zinc-400">
+                          <div className="text-sm ">{t("admin")}</div>
+                          <div
+                            className="ml-2"
+                            data-tooltip-id="tooltip"
+                            data-tooltip-content={t("tooltipMembersTableAdmin")}
+                          >
+                            <InformationCircleIcon className="w-5" />
+                          </div>
                         </div>
                       </td>
                       <td

src/components/navs/breadcrumbs.tsx

@@ -21,7 +21,7 @@ const Breadcrumbs: FC<Props> = ({ items }) => {
           >
             <div>{item.title}</div>
           </Link>
-          <div className="hidden text-xl opacity-10 dark:text-zinc-700 dark:opacity-100 md:block">
+          <div className="text-xl opacity-10 dark:text-zinc-700 dark:opacity-100 md:block">
             /
           </div>
         </div>

src/index.tsx

@@ -35,6 +35,7 @@ import Member from "pages/member";
 import ProfileDelete from "pages/profile-delete";
 import InjectStyles from "components/utils/injectStyles";
 import NotAuthorized from "pages/not-authorized";
+import { Tooltip } from "react-tooltip";
 const { features: featureFlags } = config.env;
 
 export type P2Params = {
@@ -195,5 +196,10 @@ root.render(
         duration: 6000,
       }}
     />
+    <Tooltip
+      id="tooltip"
+      positionStrategy="fixed"
+      style={{ maxWidth: "300px", zIndex: 1999 }}
+    />
   </ReactKeycloakProvider>
 );