Limit search users when users federated or large size (#345)

* when external users then users need to search

* added email not verified icon + delete confirm

* handle search errors

* removed text

* fixed label counter

src/components/table-toolbar/PaginatingTableToolbar.tsx

@@ -44,7 +44,7 @@ export const PaginatingTableToolbar = ({
       isCompact
       toggleTemplate={({ firstIndex, lastIndex }: ToggleTemplateProps) => (
         <b>
-          {firstIndex} - {lastIndex}
+          {firstIndex} - {lastIndex! - (count < max ? 1 : 0)}
         </b>
       )}
       itemCount={count + page * max + (count <= max ? 1 : 0)}

src/user/SearchUser.tsx

@@ -26,7 +26,6 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
         {t("startBySearchingAUser")}
       </Title>
       <EmptyStateBody>
-        {t("startIntro")}
         <Form onSubmit={handleSubmit((form) => onSearch(form.search))}>
           <InputGroup>
             <TextInput

src/user/UsersSection.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -7,15 +7,26 @@ import {
   Label,
   PageSection,
   ToolbarItem,
+  Tooltip,
 } from "@patternfly/react-core";
-import { InfoCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
+import {
+  ExclamationCircleIcon,
+  InfoCircleIcon,
+  WarningTriangleIcon,
+} from "@patternfly/react-icons";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 
-import { useAdminClient } from "../context/auth/AdminClient";
+import { asyncStateFetch, useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAlerts } from "../components/alert/Alerts";
 import { RealmContext } from "../context/realm-context/RealmContext";
+import { SearchUser } from "./SearchUser";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
+import { emptyFormatter } from "../util";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+
+import "./user-section.css";
 
 type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;
@@ -26,19 +37,48 @@ export const UsersSection = () => {
   const adminClient = useAdminClient();
   const { addAlert } = useAlerts();
   const { realm: realmName } = useContext(RealmContext);
+  const [listUsers, setListUsers] = useState(false);
+  const [initialSearch, setInitialSearch] = useState("");
+  const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
 
   const [key, setKey] = useState("");
   const refresh = () => setKey(`${new Date().getTime()}`);
 
+  useEffect(() => {
+    return asyncStateFetch(
+      () => {
+        const testParams = {
+          type: "org.keycloak.storage.UserStorageProvider",
+        };
+
+        return Promise.all([
+          adminClient.components.find(testParams),
+          adminClient.users.count(),
+        ]);
+      },
+      (response) => {
+        //should *only* list users when no user federation is configured and uses count > 100
+        setListUsers(
+          !((response[0] && response[0].length > 0) || response[1] > 100)
+        );
+      }
+    );
+  }, []);
+
   const loader = async (first?: number, max?: number, search?: string) => {
     const params: { [name: string]: string | number } = {
       first: first!,
       max: max!,
     };
-    if (search) {
+    const searchParam = search || initialSearch || "";
-      params.search = search;
+    if (searchParam) {
+      params.search = searchParam;
     }
 
+    if (!listUsers && !searchParam) {
+      return [];
+    }
+    try {
       const users = await adminClient.users.find({ ...params });
       const realm = await adminClient.realms.findOne({ realm: realmName });
       if (realm?.bruteForceProtected) {
@@ -54,19 +94,31 @@ export const UsersSection = () => {
           user.brute = brutes[index];
         }
       }
-
       return users;
+    } catch (error) {
+      addAlert(t("noUsersFoundError", { error }), AlertVariant.danger);
+      return [];
+    }
   };
 
-  const deleteUser = async (user: UserRepresentation) => {
+  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
+    titleKey: "users:deleteConfirm",
+    messageKey: t("deleteConfirmDialog", { count: selectedRows.length }),
+    continueButtonLabel: "delete",
+    continueButtonVariant: ButtonVariant.danger,
+    onConfirm: async () => {
       try {
+        for (const user of selectedRows) {
           await adminClient.users.del({ id: user.id! });
+        }
+        setSelectedRows([]);
         refresh();
         addAlert(t("userDeletedSuccess"), AlertVariant.success);
       } catch (error) {
         addAlert(t("userDeletedError", { error }), AlertVariant.danger);
       }
-  };
+    },
+  });
 
   const StatusRow = (user: BruteUser) => {
     return (
@@ -81,27 +133,68 @@ export const UsersSection = () => {
             {t("temporaryDisabled")}
           </Label>
         )}
+        {user.enabled && !user.brute?.disabled && "—"}
+      </>
+    );
+  };
+
+  const ValidatedEmail = (user: UserRepresentation) => {
+    return (
+      <>
+        {!user.emailVerified && (
+          <Tooltip
+            key={`email-verified-${user.id}`}
+            content={<>{t("notVerified")}</>}
+          >
+            <ExclamationCircleIcon className="keycloak__user-section__email-verified" />
+          </Tooltip>
+        )}{" "}
+        {emptyFormatter()(user.email)}
       </>
     );
   };
 
   return (
     <>
-      <ViewHeader titleKey="users:title" subKey="users:userExplain" />
+      <DeleteConfirm />
+      <ViewHeader titleKey="users:title" subKey="" />
       <PageSection variant="light">
+        {!listUsers && !initialSearch && (
+          <SearchUser
+            onSearch={(search) => {
+              setInitialSearch(search);
+            }}
+          />
+        )}
+        {(listUsers || initialSearch) && (
           <KeycloakDataTable
             key={key}
             loader={loader}
             isPaginated
             ariaLabelKey="users:title"
             searchPlaceholderKey="users:searchForUser"
+            canSelectAll
+            onSelect={(rows) => setSelectedRows([...rows])}
+            emptyState={
+              <ListEmptyState
+                message={t("noUsersFound")}
+                instructions={t("emptyInstructions")}
+                primaryActionText={t("createNewUser")}
+                onPrimaryAction={() => {}}
+              />
+            }
             toolbarItem={
               <>
                 <ToolbarItem>
                   <Button>{t("addUser")}</Button>
                 </ToolbarItem>
                 <ToolbarItem>
-                <Button variant={ButtonVariant.plain}>{t("deleteUser")}</Button>
+                  <Button
+                    variant={ButtonVariant.plain}
+                    onClick={toggleDeleteDialog}
+                  >
+                    {t("deleteUser")}
+                  </Button>
                 </ToolbarItem>
               </>
             }
@@ -109,7 +202,8 @@ export const UsersSection = () => {
               {
                 title: t("common:delete"),
                 onRowClick: (user) => {
-                deleteUser(user);
+                  setSelectedRows([user]);
+                  toggleDeleteDialog();
                 },
               },
             ]}
@@ -121,14 +215,17 @@ export const UsersSection = () => {
               {
                 name: "email",
                 displayKey: "users:email",
+                cellRenderer: ValidatedEmail,
               },
               {
                 name: "lastName",
                 displayKey: "users:lastName",
+                cellFormatters: [emptyFormatter()],
               },
               {
                 name: "firstName",
                 displayKey: "users:firstName",
+                cellFormatters: [emptyFormatter()],
               },
               {
                 name: "status",
@@ -137,6 +234,7 @@ export const UsersSection = () => {
               },
             ]}
           />
+        )}
       </PageSection>
     </>
   );

src/user/messages.json

@@ -1,8 +1,12 @@
 {
   "users": {
     "title": "Users",
-    "userExplain": "This is the description",
     "searchForUser": "Search user",
+    "startBySearchingAUser": "Start by searching a user",
+    "createNewUser": "Create new user",
+    "noUsersFound": "No users found",
+    "noUsersFoundError": "No users found due to {{error}}",
+    "emptyInstructions": "Change your search criteria or add a user",
     "username": "Username",
     "email": "Email",
     "lastName": "Last name",
@@ -10,9 +14,13 @@
     "status": "Status",
     "disabled": "Disabled",
     "temporaryDisabled": "Temporarily disabled",
+    "notVerified": "Not verified",
     "addUser": "Add user",
     "deleteUser": "Delete user",
+    "deleteConfirm": "Delete user?",
+    "deleteConfirmDialog": "Are you sure you want to permanently delete {{count}} selected user",
+    "deleteConfirmDialog_plural": "Are you sure you want to permanently delete {{count}} selected users",
     "userDeletedSuccess": "The user has been deleted",
-    "userDeletedError": "The user could not be deleted {error}"
+    "userDeletedError": "The user could not be deleted {{error}}"
   }
 }

src/user/user-section.css

@@ -0,0 +1,4 @@
+
+.keycloak__user-section__email-verified {
+  color: var(--pf-global--danger-color--100);
+}