Disabled indicator, Fix bug on Admin rows (#128)

* Adds user disabled indicator to members list * puts disabled lock inline with email (always present) and fixes a bug of not catching an admin row * remove logs --------- Co-authored-by: juliusstoerrle <[email protected]>
p2-inc · Jan 12, 2024 · 97abb26 · 97abb26
1 parent bf96e01
commit 97abb26
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -56,6 +56,7 @@
   "device-activity": "Device activity",
   "deviceActivity": "Device activity",
   "directMembership": "Direct membership",
+  "disabled": "Disabled",
   "displayName": "Display name",
   "doCancel": "Cancel",
   "doDeny": "Deny",

diff --git a/src/components/elements/table/members-table.tsx b/src/components/elements/table/members-table.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { TableRows } from "./table";
+import { Lock } from "lucide-react";
 
 type Props = {
   rows: TableRows;
@@ -15,29 +16,67 @@ const loading = (
 
 const MembersTable: React.FC<Props> = ({ rows, isLoading }) => {
   const { t } = useTranslation();
+
+  const disabledInfo = (
+    <span
+      className="inline-flex text-sm text-primary-500"
+      title={t("disabled")}
+    >
+      <Lock className="ml-2 h-5 w-5" />
+    </span>
+  );
+
+  function getNameOrUsername(item: {
+    name?: string;
+    username?: string;
+  }): string {
+    return item.name || item.username || "";
+  }
+
+  function isOrgAdmin(item: { email?: string; username?: string }) {
+    return (
+      item.email?.startsWith("org-admin") ||
+      item.username?.startsWith("org-admin")
+    );
+  }
+
   return (
     <div className="rounded border border-gray-200 dark:border-zinc-600">
       {isLoading && loading}
       {!isLoading && (
         <>
           <div className="divide-y md:hidden">
-            {rows.map((item) => (
-              <div className="p-4" key={item["email"]}>
-                <div className="text-sm font-semibold dark:text-zinc-200">
-                  {item["name"]}
-                </div>
-                <div className="text-sm text-gray-500 dark:text-zinc-500">
-                  {item["email"]}
+            {rows.map((item) => {
+              if (isOrgAdmin(item)) {
+                return (
+                  <div className="p-4" key={item["email"]}>
+                    <div className="text-sm font-semibold dark:text-zinc-200">
+                      {t("admin")}
+                    </div>
+                  </div>
+                );
+              }
+              return (
+                <div className="p-4" key={item["email"]}>
+                  <div className="text-sm font-semibold dark:text-zinc-200">
+                    {getNameOrUsername(item)}
+                  </div>
+                  <div className="flex align-middle text-sm text-gray-500 dark:text-zinc-500">
+                    {item["email"]}
+                    {item["enabled"] === false && disabledInfo}
+                  </div>
+                  <div className="space-y-1 py-2">{item["roles"]}</div>
+                  <div>{item["action"]}</div>
                 </div>
-                <div className="space-y-1 py-2">{item["roles"]}</div>
-                <div>{item["action"]}</div>
-              </div>
-            ))}
+              );
+            })}
           </div>
           <table className="hidden w-full table-auto md:table">
             <tbody className="divide-y dark:divide-zinc-600">
               {rows.map((item) => {
-                const isOrgAdmin = item.email?.startsWith("org-admin");
+                const isOrgAdmin =
+                  item.email?.startsWith("org-admin") ||
+                  item.username?.startsWith("org-admin");
                 if (isOrgAdmin) {
                   return (
                     <tr key={item["email"]}>
@@ -46,8 +85,10 @@ const MembersTable: React.FC<Props> = ({ rows, isLoading }) => {
                           {t("admin")}
                         </div>
                       </td>
-                      <td className="space-x-2 px-5 py-4 text-right align-middle"></td>
-                      <td className="px-1 py-4 text-right align-middle"></td>
+                      <td
+                        colSpan={2}
+                        className="space-x-2 px-5 py-4 text-right align-middle"
+                      ></td>
                       <td className="px-1 py-4 text-right align-middle">
                         <div className="h-[40px]"></div>
                       </td>
@@ -58,17 +99,18 @@ const MembersTable: React.FC<Props> = ({ rows, isLoading }) => {
                 return (
                   <tr key={item["email"]}>
                     <td className="px-5 py-4 align-middle">
-                      <div className="text-sm font-semibold dark:text-zinc-200">
-                        {item["name"]}
+                      <div className=" text-sm font-semibold dark:text-zinc-200">
+                        {getNameOrUsername(item)}
                       </div>
-                      <div className="text-sm text-gray-500 dark:text-zinc-500">
+                      <div className="flex align-middle text-sm text-gray-500 dark:text-zinc-500">
                         {item["email"]}
+                        {item["enabled"] === false && disabledInfo}
                       </div>
                     </td>
                     <td className="space-x-2 px-5 py-4 text-right align-middle">
                       {item["roles"]}
                     </td>
-                    <td className="px-1 py-4 text-right align-middle">
+                    <td className="px-1 py-4  text-right align-middle">
                       {item["action"]}
                     </td>
                   </tr>

diff --git a/src/pages/organizations/detail.tsx b/src/pages/organizations/detail.tsx
@@ -94,7 +94,7 @@ export default function OrganizationDetail() {
   const totalMembers = members.length;
 
   const rows: TableRows = members.map((member) => ({
-    email: member.email,
+    ...member,
     name: `${member.firstName || ""} ${member.lastName || ""}`.trim(),
     roles: <MemberRoles member={member} orgId={orgId!} realm={realm} />,
     action: <MembersActionMenu member={member} orgId={orgId!} realm={realm} />,