update users empty state (#1037)

src/user/UsersSection.tsx

@@ -4,6 +4,8 @@ import {
   ButtonVariant,
   Label,
   PageSection,
+  Text,
+  TextContent,
   ToolbarItem,
   Tooltip,
 } from "@patternfly/react-core";
@@ -25,7 +27,6 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { emptyFormatter } from "../util";
 import { toUser } from "./routes/User";
-import { SearchUser } from "./SearchUser";
 import "./user-section.css";
 
 type BruteUser = UserRepresentation & {
@@ -40,9 +41,7 @@ export const UsersSection = () => {
   const history = useHistory();
   const { url } = useRouteMatch();
   const [listUsers, setListUsers] = useState(false);
-  const [initialSearch, setInitialSearch] = useState("");
   const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
-  const [search, setSearch] = useState("");
 
   const [key, setKey] = useState("");
   const refresh = () => setKey(`${new Date().getTime()}`);
@@ -53,16 +52,12 @@ export const UsersSection = () => {
         type: "org.keycloak.storage.UserStorageProvider",
       };
 
-      return Promise.all([
-        adminClient.components.find(testParams),
-        adminClient.users.count(),
-      ]);
+      return adminClient.components.find(testParams);
     },
     (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)
-      );
+      //should *only* list users when no user federation is configured
+      setListUsers(!(response.length > 0));
+      refresh();
     },
     []
   );
@@ -83,15 +78,16 @@ export const UsersSection = () => {
       first: first!,
       max: max!,
     };
-    const searchParam = search || initialSearch || "";
+
+    const searchParam = search || "";
     if (searchParam) {
       params.search = searchParam;
-      setSearch(searchParam);
     }
 
     if (!listUsers && !searchParam) {
       return [];
     }
+
     try {
       const users = await adminClient.users.find({ ...params });
       const realm = await adminClient.realms.findOne({ realm: realmName });
@@ -179,14 +175,6 @@ export const UsersSection = () => {
         variant="light"
         className="pf-u-p-0"
       >
-        {!listUsers && !initialSearch && (
-          <SearchUser
-            onSearch={(search) => {
-              setInitialSearch(search);
-            }}
-          />
-        )}
-        {(listUsers || initialSearch) && (
         <KeycloakDataTable
           key={key}
           loader={loader}
@@ -196,15 +184,17 @@ export const UsersSection = () => {
           canSelectAll
           onSelect={(rows) => setSelectedRows([...rows])}
           emptyState={
-              !search ? (
+            !listUsers ? (
+              <TextContent className="kc-search-users-text">
+                <Text>{t("searchForUserDescription")}</Text>
+              </TextContent>
+            ) : (
               <ListEmptyState
                 message={t("noUsersFound")}
                 instructions={t("emptyInstructions")}
                 primaryActionText={t("createNewUser")}
                 onPrimaryAction={goToCreate}
               />
-              ) : (
-                ""
             )
           }
           toolbarItem={
@@ -261,7 +251,6 @@ export const UsersSection = () => {
             },
           ]}
         />
-        )}
       </PageSection>
     </>
   );

src/user/messages.ts

@@ -3,6 +3,8 @@ export default {
     title: "Users",
     searchForUser: "Search user",
     startBySearchingAUser: "Start by searching for users",
+    searchForUserDescription:
+      "This realm has a federated provider. Viewing all users may cause the system to slow down. Please search for a user above.",
     createUser: "Create user",
     createNewUser: "Create new user",
     noUsersFound: "No users found",

src/user/user-section.css

@@ -83,3 +83,8 @@ div.pf-c-chip-group.kc-consents-chip-group
   content: "";
   margin-left: var(--pf-global--spacer--sm);
 }
+
+.kc-search-users-text {
+  margin-left: var(--pf-global--spacer--md);
+  color: var(--pf-global--Color--400);
+}