Prefer optional chaining over validating references (#992)

.eslintrc.js

@@ -17,6 +17,8 @@ module.exports = {
     },
   },
   rules: {
+    // Always prefer using an optional chain expression, as it's more concise and easier to read.
+    "@typescript-eslint/prefer-optional-chain": "error",
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-empty-function": "error",

src/clients/ClientSettings.tsx

@@ -175,8 +175,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
                     {t("common:choose")}
                   </SelectOption>
                   <>
-                    {loginThemes &&
+                    {loginThemes?.map((theme) => (
-                      loginThemes.map((theme) => (
                       <SelectOption
                         selected={theme.name === value}
                         key={theme.name}

src/clients/credentials/X509.tsx

@@ -20,7 +20,7 @@ export const X509 = () => {
       }
       helperTextInvalid={t("common:required")}
       validated={
-        errors.attributes && errors.attributes["x509-subjectdn"]
+        errors.attributes?.["x509-subjectdn"]
           ? ValidatedOptions.error
           : ValidatedOptions.default
       }
@@ -32,7 +32,7 @@ export const X509 = () => {
         id="kc-subject"
         name="attributes.x509-subjectdn"
         validated={
-          errors.attributes && errors.attributes["x509-subjectdn"]
+          errors.attributes?.["x509-subjectdn"]
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }

src/components/attribute-form/AttributeForm.tsx

@@ -107,9 +107,7 @@ export const AttributesForm = ({
                     aria-label="key-input"
                     defaultValue={attribute.key}
                     validated={
-                      errors.attributes && errors.attributes[rowIndex]
+                      errors.attributes?.[rowIndex] ? "error" : "default"
-                        ? "error"
-                        : "default"
                     }
                   />
                 </Td>

src/components/multi-line-input/MultiLineInput.tsx

@@ -76,10 +76,7 @@ export const MultiLineInput = ({
               onClick={() => append({})}
               tabIndex={-1}
               aria-label={t("common:add")}
-              isDisabled={
+              isDisabled={rest.isDisabled || !currentValues?.[index]?.value}
-                rest.isDisabled ||
-                !(currentValues && currentValues[index]?.value)
-              }
             >
               <PlusCircleIcon /> {t(addButtonLabel || "common:add")}
             </Button>

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -224,12 +224,7 @@ export function KeycloakDataTable<T>({
             }),
           },
         ];
-        if (
+        if (detailColumns?.[0]?.enabled?.(value)) {
-          detailColumns &&
-          detailColumns[0] &&
-          detailColumns[0].enabled &&
-          detailColumns[0].enabled(value)
-        ) {
           row.push({
             parent: index * 2,
             cells: detailColumns!.map((col) => {

src/components/table-toolbar/TableToolbar.tsx

@@ -49,10 +49,10 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
   const onSearch = () => {
     if (searchValue !== "") {
       setSearchValue(searchValue);
-      inputGroupOnEnter && inputGroupOnEnter(searchValue);
+      inputGroupOnEnter?.(searchValue);
     } else {
       setSearchValue("");
-      inputGroupOnEnter && inputGroupOnEnter("");
+      inputGroupOnEnter?.("");
     }
   };
 
@@ -66,7 +66,7 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
     value: string,
     event: FormEvent<HTMLInputElement>
   ) => {
-    inputGroupOnChange && inputGroupOnChange(value, event);
+    inputGroupOnChange?.(value, event);
     setSearchValue(value);
   };
 

src/context/whoami/WhoAmI.tsx

@@ -8,7 +8,7 @@ import { useAdminClient, useFetch } from "../auth/AdminClient";
 
 export class WhoAmI {
   constructor(private me?: WhoAmIRepresentation) {
-    if (this.me !== undefined && this.me.locale) {
+    if (this.me?.locale) {
       i18n.changeLanguage(this.me.locale, (error) => {
         if (error) console.error("Unable to set locale to", this.me?.locale);
       });
@@ -28,7 +28,7 @@ export class WhoAmI {
   }
 
   public canCreateRealm(): boolean {
-    return this.me !== undefined && this.me.createRealm;
+    return !!this.me?.createRealm;
   }
 
   public getRealmAccess(): Readonly<{

src/identity-providers/add/AdvancedSettings.tsx

@@ -72,8 +72,7 @@ const LoginFlow = ({
               )}
             </>
             <>
-              {flows &&
+              {flows?.map((option) => (
-                flows.map((option) => (
                 <SelectOption
                   selected={option.alias === value}
                   key={option.id}

src/identity-providers/add/DiscoverySettings.tsx

@@ -37,7 +37,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
         fieldId="kc-authorization-url"
         isRequired
         validated={
-          errors.config && errors.config.authorizationUrl
+          errors.config?.authorizationUrl
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }
@@ -50,7 +50,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
           name="config.authorizationUrl"
           ref={register({ required: true })}
           validated={
-            errors.config && errors.config.authorizationUrl
+            errors.config?.authorizationUrl
               ? ValidatedOptions.error
               : ValidatedOptions.default
           }
@@ -63,7 +63,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
         fieldId="tokenUrl"
         isRequired
         validated={
-          errors.config && errors.config.tokenUrl
+          errors.config?.tokenUrl
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }
@@ -75,7 +75,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
           name="config.tokenUrl"
           ref={register({ required: true })}
           validated={
-            errors.config && errors.config.tokenUrl
+            errors.config?.tokenUrl
               ? ValidatedOptions.error
               : ValidatedOptions.default
           }

src/identity-providers/add/OpenIdConnectSettings.tsx

@@ -117,8 +117,7 @@ export const OpenIdConnectSettings = () => {
             />
           }
           validated={
-            (discoveryResult && discoveryResult.error) ||
+            discoveryResult?.error || errors.discoveryEndpoint
-            errors.discoveryEndpoint
               ? "error"
               : !discoveryResult
               ? "default"
@@ -141,8 +140,7 @@ export const OpenIdConnectSettings = () => {
             onChange={setDiscoveryUrl}
             onBlur={() => setDiscovering(!discovering)}
             validated={
-              (discoveryResult && discoveryResult.error) ||
+              discoveryResult?.error || errors.discoveryEndpoint
-              errors.discoveryEndpoint
                 ? "error"
                 : !discoveryResult
                 ? "default"
@@ -168,9 +166,7 @@ export const OpenIdConnectSettings = () => {
               forID="kc-import-config"
             />
           }
-          validated={
+          validated={discoveryResult?.error ? "error" : "default"}
-            discoveryResult && discoveryResult.error ? "error" : "default"
-          }
           helperTextInvalid={discoveryResult?.error?.toString()}
         >
           <JsonFileUpload
@@ -178,9 +174,7 @@ export const OpenIdConnectSettings = () => {
             helpText="identity=providers-help:jsonFileUpload"
             hideDefaultPreview
             unWrap
-            validated={
+            validated={discoveryResult?.error ? "error" : "default"}
-              discoveryResult && discoveryResult.error ? "error" : "default"
-            }
             onChange={(value) => fileUpload(value)}
           />
         </FormGroup>

src/identity-providers/component/ClientIdSecret.tsx

@@ -32,7 +32,7 @@ export const ClientIdSecret = ({
         fieldId="kc-client-id"
         isRequired
         validated={
-          errors.config && errors.config.clientId
+          errors.config?.clientId
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }
@@ -59,7 +59,7 @@ export const ClientIdSecret = ({
         fieldId="kc-client-secret"
         isRequired={secretRequired}
         validated={
-          errors.config && errors.config.clientSecret
+          errors.config?.clientSecret
             ? ValidatedOptions.error
             : ValidatedOptions.default
         }

src/realm-roles/RoleAttributes.tsx

@@ -77,9 +77,7 @@ export const RoleAttributes = ({
                     aria-label="key-input"
                     defaultValue={attribute.key}
                     validated={
-                      errors.attributes && errors.attributes[rowIndex]
+                      errors.attributes?.[rowIndex] ? "error" : "default"
-                        ? "error"
-                        : "default"
                     }
                   />
                 </Td>

src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -139,9 +139,7 @@ export const KerberosSettingsRequired = ({
             })}
             data-testid="kerberos-realm"
           />
-          {form.errors.config &&
+          {form.errors.config?.kerberosRealm?.[0] && (
-            form.errors.config.kerberosRealm &&
-            form.errors.config.kerberosRealm[0] && (
             <div className="error">
               {form.errors.config.kerberosRealm[0].message}
             </div>
@@ -173,9 +171,7 @@ export const KerberosSettingsRequired = ({
             })}
             data-testid="kerberos-principal"
           />
-          {form.errors.config &&
+          {form.errors.config?.serverPrincipal?.[0] && (
-            form.errors.config.serverPrincipal &&
-            form.errors.config.serverPrincipal[0] && (
             <div className="error">
               {form.errors.config.serverPrincipal[0].message}
             </div>
@@ -207,12 +203,8 @@ export const KerberosSettingsRequired = ({
             })}
             data-testid="kerberos-keytab"
           />
-          {form.errors.config &&
+          {form.errors.config?.keyTab?.[0] && (
-            form.errors.config.keyTab &&
+            <div className="error">{form.errors.config.keyTab[0].message}</div>
-            form.errors.config.keyTab[0] && (
-              <div className="error">
-                {form.errors.config.keyTab[0].message}
-              </div>
           )}
         </FormGroup>
 

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -116,9 +116,7 @@ export const LdapSettingsConnection = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.connectionUrl?.[0] && (
-            form.errors.config.connectionUrl &&
-            form.errors.config.connectionUrl[0] && (
             <div className="error">
               {form.errors.config.connectionUrl[0].message}
             </div>

src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx

@@ -93,9 +93,7 @@ export const LdapSettingsKerberosIntegration = ({
                 })}
                 data-testid="kerberos-realm"
               />
-              {form.errors.config &&
+              {form.errors.config?.kerberosRealm?.[0] && (
-                form.errors.config.kerberosRealm &&
-                form.errors.config.kerberosRealm[0] && (
                 <div className="error">
                   {form.errors.config.kerberosRealm[0].message}
                 </div>
@@ -127,9 +125,7 @@ export const LdapSettingsKerberosIntegration = ({
                 })}
                 data-testid="kerberos-principal"
               />
-              {form.errors.config &&
+              {form.errors.config?.serverPrincipal?.[0] && (
-                form.errors.config.serverPrincipal &&
-                form.errors.config.serverPrincipal[0] && (
                 <div className="error">
                   {form.errors.config.serverPrincipal[0].message}
                 </div>
@@ -161,9 +157,7 @@ export const LdapSettingsKerberosIntegration = ({
                 })}
                 data-testid="kerberos-keytab"
               />
-              {form.errors.config &&
+              {form.errors.config?.keyTab?.[0] && (
-                form.errors.config.keyTab &&
-                form.errors.config.keyTab[0] && (
                 <div className="error">
                   {form.errors.config.keyTab[0].message}
                 </div>

src/user-federation/ldap/LdapSettingsSearching.tsx

@@ -106,12 +106,8 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.usersDn?.[0] && (
-            form.errors.config.usersDn &&
+            <div className="error">{form.errors.config.usersDn[0].message}</div>
-            form.errors.config.usersDn[0] && (
-              <div className="error">
-                {form.errors.config.usersDn[0].message}
-              </div>
           )}
         </FormGroup>
         <FormGroup
@@ -140,9 +136,7 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.usernameLDAPAttribute?.[0] && (
-            form.errors.config.usernameLDAPAttribute &&
-            form.errors.config.usernameLDAPAttribute[0] && (
             <div className="error">
               {form.errors.config.usernameLDAPAttribute[0].message}
             </div>
@@ -174,9 +168,7 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.rdnLDAPAttribute?.[0] && (
-            form.errors.config.rdnLDAPAttribute &&
-            form.errors.config.rdnLDAPAttribute[0] && (
             <div className="error">
               {form.errors.config.rdnLDAPAttribute[0].message}
             </div>
@@ -208,9 +200,7 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.uuidLDAPAttribute?.[0] && (
-            form.errors.config.uuidLDAPAttribute &&
-            form.errors.config.uuidLDAPAttribute[0] && (
             <div className="error">
               {form.errors.config.uuidLDAPAttribute[0].message}
             </div>
@@ -242,9 +232,7 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.userObjectClasses?.[0] && (
-            form.errors.config.userObjectClasses &&
-            form.errors.config.userObjectClasses[0] && (
             <div className="error">
               {form.errors.config.userObjectClasses[0].message}
             </div>
@@ -272,9 +260,7 @@ export const LdapSettingsSearching = ({
               },
             })}
           />
-          {form.errors.config &&
+          {form.errors.config?.customUserSearchFilter?.[0] && (
-            form.errors.config.customUserSearchFilter &&
-            form.errors.config.customUserSearchFilter[0] && (
             <div className="error">
               {form.errors.config.customUserSearchFilter[0].message}
             </div>

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

@@ -36,7 +36,7 @@ export const LdapMapperHardcodedLdapGroup = ({
           name="config.group[0]"
           ref={form.register({ required: true })}
           validated={
-            form.errors.config && form.errors.config.group
+            form.errors.config?.group
               ? ValidatedOptions.error
               : ValidatedOptions.default
           }

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

@@ -78,7 +78,7 @@ export const LdapMapperHardcodedLdapRole = ({
             name="config.role[0]"
             ref={form.register({ required: true })}
             validated={
-              form.errors.config && form.errors.config.role
+              form.errors.config?.role
                 ? ValidatedOptions.error
                 : ValidatedOptions.default
             }

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

@@ -79,10 +79,10 @@ export const LdapMapperRoleGroup = ({
           ref={form.register({ required: true })}
           validated={
             isRole
-              ? form.errors.config && form.errors.config["roles-dn"]
+              ? form.errors.config?.["roles-dn"]
                 ? ValidatedOptions.error
                 : ValidatedOptions.default
-              : form.errors.config && form.errors.config["groups-dn"]
+              : form.errors.config?.["groups-dn"]
               ? ValidatedOptions.error
               : ValidatedOptions.default
           }
@@ -583,7 +583,7 @@ export const LdapMapperRoleGroup = ({
               name="config.groups-path[0]"
               ref={form.register({ required: true })}
               validated={
-                form.errors.config && form.errors.config["groups-path"]
+                form.errors.config?.["groups-path"]
                   ? ValidatedOptions.error
                   : ValidatedOptions.default
               }

src/user/UserGroups.tsx

@@ -111,8 +111,11 @@ export const UserGroups = () => {
 
     const arr = getAllSubgroupPaths(
       rootLevelGroups,
-      (x: GroupRepresentation, context: GroupRepresentation[][]) => {
+      (
-        if (x !== undefined && x.subGroups) context.push(x.subGroups);
+        x: GroupRepresentation | undefined,
+        context: GroupRepresentation[][]
+      ) => {
+        if (x?.subGroups) context.push(x.subGroups);
       },
       []
     );