now checks if data could be loaded and throw error (#1265)

package.json

@@ -24,7 +24,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@keycloak/keycloak-admin-client": "^16.0.0-dev.25",
+    "@keycloak/keycloak-admin-client": "^16.0.0-dev.26",
     "@patternfly/patternfly": "^4.135.2",
     "@patternfly/react-code-editor": "^4.3.61",
     "@patternfly/react-core": "4.157.3",

src/App.tsx

@@ -77,7 +77,10 @@ export const App = ({ adminClient }: AdminClientProps) => {
       >
         <ErrorBoundary
           FallbackComponent={ErrorRenderer}
-          onReset={() => window.location.reload()}
+          onReset={() =>
+            (window.location.href =
+              window.location.origin + window.location.pathname)
+          }
         >
           <Switch>
             {routes.map((route, i) => (

src/authentication/AuthenticationSection.tsx

@@ -60,6 +60,10 @@ export const AuthenticationSection = () => {
     const clients = await adminClient.clients.find();
     const idps = await adminClient.identityProviders.find();
     const realmRep = await adminClient.realms.findOne({ realm });
+    if (!realmRep) {
+      throw new Error(t("common:notFound"));
+    }
+
     const defaultFlows = Object.entries(realmRep)
       .filter((entry) => realmFlows.includes(entry[0]))
       .map((entry) => entry[1]);

src/authentication/FlowDetails.tsx

@@ -67,9 +67,13 @@ export const FlowDetails = () => {
     async () => {
       const flows = await adminClient.authenticationManagement.getFlows();
       const flow = flows.find((f) => f.id === id);
+      if (!flow) {
+        throw new Error(t("common:notFound"));
+      }
+
       const executions =
         await adminClient.authenticationManagement.getExecutions({
-          flow: flow?.alias!,
+          flow: flow.alias!,
         });
       return { flow, executions };
     },

src/client-scopes/details/MappingDetails.tsx

@@ -56,6 +56,10 @@ export const MappingDetails = () => {
           id,
           mapperId,
         });
+        if (!data) {
+          throw new Error(t("common:notFound"));
+        }
+
         const mapperTypes = serverInfo.protocolMapperTypes![data!.protocol!];
         const mapping = mapperTypes.find(
           (type) => type.id === data!.protocolMapper
@@ -71,11 +75,17 @@ export const MappingDetails = () => {
         };
       } else {
         const scope = await adminClient.clientScopes.findOne({ id });
+        if (!scope) {
+          throw new Error(t("common:notFound"));
+        }
         const protocolMappers =
           serverInfo.protocolMapperTypes![scope.protocol!];
         const mapping = protocolMappers.find(
           (mapper) => mapper.id === mapperId
-        )!;
+        );
+        if (!mapping) {
+          throw new Error(t("common:notFound"));
+        }
         return {
           mapping,
           config: {

src/client-scopes/form/ClientScopeForm.tsx

@@ -51,10 +51,14 @@ export const ClientScopeForm = () => {
   useFetch(
     async () => {
       if (id) {
+        const clientScope = await adminClient.clientScopes.findOne({ id });
+        if (!clientScope) {
+          throw new Error(t("common:notFound"));
+        }
         return {
-          ...(await adminClient.clientScopes.findOne({ id })),
+          ...clientScope,
           type,
-        } as ClientScopeDefaultOptionalType;
+        };
       }
     },
     (clientScope) => {
@@ -113,6 +117,10 @@ export const ClientScopeForm = () => {
         const scope = await adminClient.clientScopes.findOneByName({
           name: clientScopes.name!,
         });
+        if (!scope) {
+          throw new Error(t("common:notFound"));
+        }
+
         changeScope(
           adminClient,
           { ...clientScopes, id: scope.id },

src/clients/ClientDetails.tsx

@@ -222,6 +222,9 @@ export const ClientDetails = () => {
   useFetch(
     () => adminClient.clients.findOne({ id: clientId }),
     (fetchedClient) => {
+      if (!fetchedClient) {
+        throw new Error(t("common:notFound"));
+      }
       setClient(fetchedClient);
       setupForm(fetchedClient);
     },

src/common-messages.ts

@@ -56,7 +56,7 @@ export default {
     category: "Category",
     priority: "Priority",
     unexpectedError: "An unexpected error occurred: '{{error}}'",
-    retry: "Retry",
+    retry: "Press here to refresh and continue",
     plus: "Plus",
     minus: "Minus",
 
@@ -145,5 +145,7 @@ export default {
     onDragMove: "Dragging item {{item}}",
     onDragCancel: "Dragging cancelled. List is unchanged.",
     onDragFinish: "Dragging finished {{list}}",
+
+    notFound: "Could not find the resource that you are looking for",
   },
 };

src/components/group/GroupPickerDialog.tsx

@@ -71,6 +71,9 @@ export const GroupPickerDialog = ({
         });
       } else {
         group = await adminClient.groups.findOne({ id: groupId });
+        if (!group) {
+          throw new Error(t("common:notFound"));
+        }
         groups = group.subGroups!;
       }
 

src/groups/GroupTable.tsx

@@ -45,11 +45,19 @@ export const GroupTable = () => {
   const id = getLastId(location.pathname);
 
   const loader = async () => {
-    const groupsData = id
+    let groupsData = undefined;
-      ? (await adminClient.groups.findOne({ id })).subGroups
+    if (id) {
-      : await adminClient.groups.find({
+      const group = await adminClient.groups.findOne({ id });
-          briefRepresentation: false,
+      if (!group) {
-        } as unknown as any);
+        throw new Error(t("common:notFound"));
+      }
+
+      groupsData = group.subGroups;
+    } else {
+      groupsData = await adminClient.groups.find({
+        briefRepresentation: false,
+      });
+    }
 
     if (!groupsData) {
       history.push(`/${realm}/groups`);

src/groups/GroupsSection.tsx

@@ -62,7 +62,11 @@ export const GroupsSection = () => {
         const groups: GroupRepresentation[] = [];
         for (const i of ids!) {
           const group = await adminClient.groups.findOne({ id: i });
-          if (group) groups.push(group);
+          if (group) {
+            groups.push(group);
+          } else {
+            throw new Error(t("common:notFound"));
+          }
         }
         return groups;
       }
@@ -97,7 +101,7 @@ export const GroupsSection = () => {
         />
       )}
       <ViewHeader
-        titleKey={!id ? "groups:groups" : currentGroup()?.name!}
+        titleKey={!id ? "groups:groups" : currentGroup().name!}
         subKey={!id ? "groups:groupsDescription" : ""}
         divider={!id}
         dropdownItems={

src/identity-providers/IdentityProvidersSection.tsx

@@ -60,8 +60,13 @@ export const IdentityProvidersSection = () => {
   const { addAlert, addError } = useAlerts();
 
   useFetch(
-    async () =>
+    async () => {
-      (await adminClient.realms.findOne({ realm })).identityProviders!,
+      const provider = await adminClient.realms.findOne({ realm });
+      if (!provider) {
+        throw new Error(t("common:notFound"));
+      }
+      return provider.identityProviders!;
+    },
     (providers) => {
       setProviders(providers);
     },

src/identity-providers/add/DetailSettings.tsx

@@ -127,6 +127,10 @@ export const DetailSettings = () => {
   useFetch(
     () => adminClient.identityProviders.findOne({ alias }),
     (fetchedProvider) => {
+      if (!fetchedProvider) {
+        throw new Error(t("common:notFound"));
+      }
+
       reset(fetchedProvider);
       setProvider(fetchedProvider);
     },

src/realm-roles/AliasRendererComponent.tsx

@@ -1,48 +0,0 @@
-import React, { useEffect, useState } from "react";
-import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
-import { Label } from "@patternfly/react-core";
-
-export type AliasRendererComponentProps = {
-  name?: string;
-  containerId?: string;
-  filterType?: string;
-  adminClient: KeycloakAdminClient;
-  id: string;
-};
-
-export const AliasRendererComponent = ({
-  name,
-  containerId,
-  filterType,
-  adminClient,
-  id,
-}: AliasRendererComponentProps) => {
-  const [containerName, setContainerName] = useState<string>("");
-
-  useEffect(() => {
-    if (filterType === "clients") {
-      adminClient.clients
-        .findOne({ id: containerId! })
-        .then((client) => setContainerName(client.clientId! as string));
-    }
-  }, [containerId]);
-
-  if (filterType === "roles" || !containerName) {
-    return name;
-  }
-
-  if (filterType === "clients" || containerName) {
-    return (
-      <>
-        {containerId && (
-          <Label color="blue" key={`label-${id}`}>
-            {containerName}
-          </Label>
-        )}{" "}
-        {name}
-      </>
-    );
-  }
-
-  return null;
-};

src/realm-roles/RealmRoleTabs.tsx

@@ -82,6 +82,10 @@ export const RealmRoleTabs = () => {
   useFetch(
     () => adminClient.realms.findOne({ realm: realmName }),
     (realm) => {
+      if (!realm) {
+        throw new Error(t("common:notFound"));
+      }
+
       setRealm(realm);
     },
 
@@ -92,6 +96,10 @@ export const RealmRoleTabs = () => {
     const update = async () => {
       if (id) {
         const fetchedRole = await adminClient.roles.findOneById({ id });
+        if (!fetchedRole) {
+          throw new Error(t("common:notFound"));
+        }
+
         const allAdditionalRoles = await adminClient.roles.getCompositeRoles({
           id,
         });
@@ -172,6 +180,10 @@ export const RealmRoleTabs = () => {
             roleName: role.name!,
           });
         }
+        if (!createdRole) {
+          throw new Error(t("common:notFound"));
+        }
+
         setRole(convert(createdRole));
         history.push(
           url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"

src/realm-roles/UsersInRoleTab.tsx

@@ -22,6 +22,9 @@ export const UsersInRoleTab = () => {
 
   const loader = async (first?: number, max?: number) => {
     const role = await adminClient.roles.findOneById({ id: id });
+    if (!role) {
+      throw new Error(t("common:notFound"));
+    }
 
     if (role.clientRole) {
       return adminClient.clients.findUsersWithRole({

src/realm-settings/EmailTab.tsx

@@ -87,7 +87,7 @@ export const RealmSettingsEmailTab = ({
       testConnection();
     } else {
       const user = await adminClient.users.findOne({ id: whoAmI.getUserId() });
-      if (!user.email) {
+      if (user && !user.email) {
         handleModalToggle();
       } else {
         await save(getValues());

src/user-federation/UserFederationKerberosSettings.tsx

@@ -96,6 +96,8 @@ export const UserFederationKerberosSettings = () => {
         const fetchedComponent = await adminClient.components.findOne({ id });
         if (fetchedComponent) {
           setupForm(fetchedComponent);
+        } else {
+          throw new Error(t("common:notFound"));
         }
       }
     })();

src/user-federation/UserFederationLdapSettings.tsx

@@ -192,6 +192,8 @@ export const UserFederationLdapSettings = () => {
     (fetchedComponent) => {
       if (fetchedComponent) {
         setupForm(fetchedComponent);
+      } else if (id) {
+        throw new Error(t("common:notFound"));
       }
     },
     []
@@ -228,17 +230,17 @@ export const UserFederationLdapSettings = () => {
   };
 
   const save = async (component: ldapComponentRepresentation) => {
-    if (component?.config?.periodicChangedUsersSync !== null) {
+    if (component.config?.periodicChangedUsersSync !== null) {
-      if (component?.config?.periodicChangedUsersSync === false) {
+      if (component.config?.periodicChangedUsersSync === false) {
         component.config.changedSyncPeriod = ["-1"];
       }
-      delete component?.config?.periodicChangedUsersSync;
+      delete component.config?.periodicChangedUsersSync;
     }
-    if (component?.config?.periodicFullSync !== null) {
+    if (component.config?.periodicFullSync !== null) {
-      if (component?.config?.periodicFullSync === false) {
+      if (component.config?.periodicFullSync === false) {
         component.config.fullSyncPeriod = ["-1"];
       }
-      delete component?.config?.periodicFullSync;
+      delete component.config?.periodicFullSync;
     }
     try {
       if (!id) {

src/user-federation/UserFederationSection.tsx

@@ -43,7 +43,7 @@ export const UserFederationSection = () => {
     async () => {
       const realmModel = await adminClient.realms.findOne({ realm });
       const testParams: { [name: string]: string | number } = {
-        parentId: realmModel.id!,
+        parentId: realmModel!.id!,
         type: "org.keycloak.storage.UserStorageProvider",
       };
       return adminClient.components.find(testParams);

src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -44,7 +44,7 @@ export const KerberosSettingsRequired = ({
 
   useFetch(
     () => adminClient.realms.findOne({ realm }),
-    (result) => form.setValue("parentId", result.id),
+    (result) => form.setValue("parentId", result!.id),
     []
   );
 

src/user-federation/ldap/LdapSettingsGeneral.tsx

@@ -34,7 +34,7 @@ export const LdapSettingsGeneral = ({
 
   useFetch(
     () => adminClient.realms.findOne({ realm }),
-    (result) => form.setValue("parentId", result.id),
+    (result) => form.setValue("parentId", result!.id),
     []
   );
   const [isVendorDropdownOpen, setIsVendorDropdownOpen] = useState(false);

src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import {
   ActionGroup,
   AlertVariant,
@@ -14,7 +14,7 @@ import {
 } from "@patternfly/react-core";
 import { convertFormValuesToObject, convertToFormValues } from "../../../util";
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
-import { useAdminClient } from "../../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useHistory, useParams } from "react-router-dom";
 import { Controller, useForm, useWatch } from "react-hook-form";
@@ -49,21 +49,26 @@ export const LdapMapperDetails = () => {
 
   const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
 
-  useEffect(() => {
+  useFetch(
-    (async () => {
+    async () => {
-      if (mapperId !== "new") {
+      if (mapperId && mapperId !== "new") {
-        if (mapperId) {
+        const fetchedMapper = await adminClient.components.findOne({
-          const fetchedMapper = await adminClient.components.findOne({
+          id: mapperId,
-            id: mapperId,
+        });
-          });
+        if (!fetchedMapper) {
-          if (fetchedMapper) {
+          throw new Error(t("common:notFound"));
-            setMapping(fetchedMapper);
-            setupForm(fetchedMapper);
-          }
         }
+        return fetchedMapper;
       }
-    })();
+    },
-  }, []);
+    (fetchedMapper) => {
+      setMapping(fetchedMapper);
+      if (fetchedMapper) {
+        setupForm(fetchedMapper);
+      }
+    },
+    []
+  );
 
   const setupForm = (mapper: ComponentRepresentation) => {
     Object.entries(mapper).map((entry) => {
@@ -270,7 +275,7 @@ export const LdapMapperDetails = () => {
                 mapping.providerId! === "user-attribute-ldap-mapper") && (
                 <LdapMapperUserAttribute
                   form={form}
-                  mapperType={mapping?.providerId}
+                  mapperType={mapping.providerId}
                 />
               )
             : ""}

src/user/UserIdentityProviderLinks.tsx

@@ -64,7 +64,7 @@ export const UserIdentityProviderLinks = () => {
   };
 
   const getAvailableIdPs = async () => {
-    return (await adminClient.realms.findOne({ realm })).identityProviders;
+    return (await adminClient.realms.findOne({ realm }))!.identityProviders;
   };
 
   const linkedIdPsLoader = async () => {

src/user/UsersTabs.tsx

@@ -44,13 +44,18 @@ export const UsersTabs = () => {
     async () => {
       if (id) {
         const user = await adminClient.users.findOne({ id });
-        const isBruteForceProtected = (
+        if (!user) {
-          await adminClient.realms.findOne({ realm })
+          throw new Error(t("common:notFound"));
-        ).bruteForceProtected;
+        }
+
+        const isBruteForceProtected = (await adminClient.realms.findOne({
+          realm,
+        }))!.bruteForceProtected;
+        const bruteForce = await adminClient.attackDetection.findOne({
+          id: user.id!,
+        });
         const isLocked: boolean =
-          isBruteForceProtected &&
+          isBruteForceProtected && bruteForce && bruteForce.disabled;
-          (await adminClient.attackDetection.findOne({ id: user.id! }))
-            ?.disabled;
         return { user, bruteForced: { isBruteForceProtected, isLocked } };
       }
       return { user: undefined };