Remove useless React fragments (#1062)

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
     // react/prop-types cannot handle generic props, so we need to disable it.
     // https://github.com/yannickcr/eslint-plugin-react/issues/2777#issuecomment-814968432
     "react/prop-types": "off",
+    // Prevent fragments from being added that have only a single child.
+    "react/jsx-no-useless-fragment": "error"
   },
   overrides: [
     {

src/PageHeader.tsx

@@ -27,10 +27,8 @@ export const Header = () => {
   const adminClient = useAdminClient();
   const { t } = useTranslation();
 
-  const ManageAccountDropdownItem = () => {
+  const ManageAccountDropdownItem = () =>
-    return (
+    adminClient.keycloak ? (
-      <>
-        {adminClient.keycloak && (
       <DropdownItem
         key="manage account"
         id="manage-account"
@@ -38,15 +36,10 @@ export const Header = () => {
       >
         {t("manageAccount")}
       </DropdownItem>
-        )}
+    ) : null;
-      </>
-    );
-  };
 
-  const SignOutDropdownItem = () => {
+  const SignOutDropdownItem = () =>
-    return (
+    adminClient.keycloak ? (
-      <>
-        {adminClient.keycloak && (
       <DropdownItem
         id="sign-out"
         key="sign out"
@@ -54,10 +47,7 @@ export const Header = () => {
       >
         {t("signOut")}
       </DropdownItem>
-        )}
+    ) : null;
-      </>
-    );
-  };
 
   const ServerInfoDropdownItem = () => {
     const { realm } = useRealm();

src/client-scopes/ClientScopesSection.tsx

@@ -107,7 +107,6 @@ export const ClientScopesSection = () => {
   });
 
   const TypeSelector = (scope: ClientScopeDefaultOptionalType) => (
-    <>
     <CellDropdown
       clientScope={scope}
       type={scope.type}
@@ -122,7 +121,6 @@ export const ClientScopesSection = () => {
         }
       }}
     />
-    </>
   );
 
   const ClientScopeDetailLink = ({
@@ -130,14 +128,12 @@ export const ClientScopesSection = () => {
     type,
     name,
   }: ClientScopeDefaultOptionalType) => (
-    <>
     <Link
       key={id}
       to={toClientScope({ realm, id: id!, type, tab: "settings" })}
     >
       {name}
     </Link>
-    </>
   );
   return (
     <>

src/client-scopes/add/MapperDialog.tsx

@@ -128,10 +128,10 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
                 <DataListItemCells
                   dataListCells={[
                     <DataListCell key={`name-${mapper.id}`}>
-                      <>{mapper.name}</>
+                      {mapper.name}
                     </DataListCell>,
                     <DataListCell key={`helpText-${mapper.id}`}>
-                      <>{mapper.helpText}</>
+                      {mapper.helpText}
                     </DataListCell>,
                   ]}
                 />

src/client-scopes/details/MapperList.tsx

@@ -99,11 +99,9 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
     );
 
   const MapperLink = ({ id, name }: Row) => (
-    <>
     <Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
       {name}
     </Link>
-    </>
   );
 
   return (

src/client-scopes/details/MappingDetails.tsx

@@ -164,7 +164,6 @@ export const MappingDetails = () => {
           onSubmit={handleSubmit(save)}
           role="manage-clients"
         >
-          <>
           {!mapperId.match(isGuid) && (
             <FormGroup
               label={t("common:name")}
@@ -178,9 +177,7 @@ export const MappingDetails = () => {
               fieldId="name"
               isRequired
               validated={
-                  errors.name
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
-                    ? ValidatedOptions.error
-                    : ValidatedOptions.default
               }
               helperTextInvalid={t("common:required")}
             >
@@ -197,7 +194,6 @@ export const MappingDetails = () => {
               />
             </FormGroup>
           )}
-          </>
           <FormGroup
             label={t("realmRolePrefix")}
             labelIcon={

src/clients/ClientSettings.tsx

@@ -38,7 +38,6 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
   );
 
   return (
-    <>
     <ScrollForm
       className="pf-u-px-lg"
       sections={[
@@ -174,6 +173,8 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
                 <SelectOption key="empty" value="">
                   {t("common:choose")}
                 </SelectOption>
+                {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+                {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
                 <>
                   {loginThemes?.map((theme) => (
                     <SelectOption
@@ -236,9 +237,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
             id="kc-consent-screen-text"
             name="attributes.consent-screen-text"
             ref={register}
-              isDisabled={
+            isDisabled={!(consentRequired && displayOnConsentScreen === "true")}
-                !(consentRequired && displayOnConsentScreen === "true")
-              }
           />
         </FormGroup>
         <SaveReset
@@ -249,6 +248,5 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
         />
       </FormAccess>
     </ScrollForm>
-    </>
   );
 };

src/clients/ClientsSection.tsx

@@ -70,7 +70,6 @@ export const ClientsSection = () => {
   });
 
   const ClientDetailLink = (client: ClientRepresentation) => (
-    <>
     <Link
       key={client.id}
       to={toClient({ realm, clientId: client.id!, tab: "settings" })}
@@ -82,15 +81,12 @@ export const ClientsSection = () => {
         </Badge>
       )}
     </Link>
-    </>
   );
 
   const ClientDescription = (client: ClientRepresentation) => (
-    <>
     <TableText wrapModifier="truncate">
       {emptyFormatter()(client.description)}
     </TableText>
-    </>
   );
 
   return (

src/clients/add/CapabilityConfig.tsx

@@ -38,7 +38,6 @@ export const CapabilityConfig = ({
       unWrap={unWrap}
       className="keycloak__capability-config__form"
     >
-      <>
       {protocol === "openid-connect" && (
         <>
           <FormGroup
@@ -231,8 +230,6 @@ export const CapabilityConfig = ({
           </FormGroup>
         </>
       )}
-      </>
-      <>
       {protocol === "saml" && (
         <>
           <FormGroup
@@ -295,7 +292,6 @@ export const CapabilityConfig = ({
           </FormGroup>
         </>
       )}
-      </>
     </FormAccess>
   );
 };

src/clients/credentials/SignedJWT.tsx

@@ -21,7 +21,6 @@ export const SignedJWT = () => {
 
   const [open, isOpen] = useState(false);
   return (
-    <>
     <FormGroup
       label={t("signatureAlgorithm")}
       fieldId="kc-signature-algorithm"
@@ -67,6 +66,5 @@ export const SignedJWT = () => {
         )}
       />
     </FormGroup>
-    </>
   );
 };

src/clients/keys/Keys.tsx

@@ -153,9 +153,8 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                 )}
               />
             </FormGroup>
-            {useJwksUrl !== "true" && (
+            {useJwksUrl !== "true" &&
-              <>
+              (keyInfo ? (
-                {keyInfo ? (
                 <FormGroup
                   label={t("certificate")}
                   fieldId="certificate"
@@ -176,9 +175,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                 </FormGroup>
               ) : (
                 "No client certificate configured"
-                )}
+              ))}
-              </>
-            )}
             {useJwksUrl === "true" && (
               <FormGroup
                 label={t("jwksUrl")}

src/clients/scopes/ClientScopes.tsx

@@ -140,7 +140,6 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
   };
 
   const TypeSelector = (scope: Row) => (
-    <>
     <CellDropdown
       clientScope={scope}
       type={scope.type}
@@ -160,7 +159,6 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
         }
       }}
     />
-    </>
   );
 
   return (

src/clients/service-account/ServiceAccount.tsx

@@ -97,9 +97,7 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
       addError("clients:roleMappingUpdatedError", error);
     }
   };
-  return (
+  return serviceAccount ? (
-    <>
-      {serviceAccount && (
     <RoleMapping
       name={client.clientId!}
       id={serviceAccount.id!}
@@ -108,7 +106,5 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
       save={assignRoles}
       onHideRolesToggle={() => setHide(!hide)}
     />
-      )}
+  ) : null;
-    </>
-  );
 };

src/components/attribute-form/AttributeForm.tsx

@@ -75,7 +75,6 @@ export const AttributesForm = ({
   }, [fields]);
 
   return (
-    <>
     <FormAccess role="manage-realm" onSubmit={handleSubmit(save)}>
       <TableComposable
         className="kc-attributes__table"
@@ -178,15 +177,10 @@ export const AttributesForm = ({
         <Button variant="primary" type="submit" isDisabled={!watchLast}>
           {t("common:save")}
         </Button>
-          <Button
+        <Button onClick={reset} variant="link" isDisabled={!formState.isDirty}>
-            onClick={reset}
-            variant="link"
-            isDisabled={!formState.isDirty}
-          >
           {t("common:revert")}
         </Button>
       </ActionGroup>
     </FormAccess>
-    </>
   );
 };

src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -22,9 +22,7 @@ export const GroupBreadCrumbs = () => {
     });
   }, [history]);
 
-  return (
+  return subGroups.length !== 0 ? (
-    <>
-      {subGroups.length !== 0 && (
     <Breadcrumb>
       <BreadcrumbItem key="home">
         <Link to={`/${realm}/groups`}>{t("groups")}</Link>
@@ -45,14 +43,10 @@ export const GroupBreadCrumbs = () => {
               </Link>
             )}
             {isLastGroup &&
-                  (group.id === "search"
+              (group.id === "search" ? group.name : t("groups:groupDetails"))}
-                    ? group.name
-                    : t("groups:groupDetails"))}
           </BreadcrumbItem>
         );
       })}
     </Breadcrumb>
-      )}
+  ) : null;
-    </>
-  );
 };

src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -37,7 +37,7 @@ export const PageBreadCrumbs = () => {
           {crumbs.map(({ match, breadcrumb: crumb }, i) => (
             <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
               {crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
-              {crumbs.length - 1 === i && <>{crumb}</>}
+              {crumbs.length - 1 === i && crumb}
             </BreadcrumbItem>
           ))}
         </Breadcrumb>

src/components/error/ErrorRenderer.tsx

@@ -24,11 +24,9 @@ export const ErrorRenderer = ({ error, resetErrorBoundary }: FallbackProps) => {
           />
         }
         actionLinks={
-          <React.Fragment>
           <AlertActionLink onClick={resetErrorBoundary}>
             {t("retry")}
           </AlertActionLink>
-          </React.Fragment>
         }
       ></Alert>
     </PageSection>

src/components/group/GroupPickerDialog.tsx

@@ -192,7 +192,7 @@ export const GroupPickerDialog = ({
                   {group.name}
                 </Button>
               )}
-              {navigation.length - 1 === i && <>{group.name}</>}
+              {navigation.length - 1 === i && group.name}
             </BreadcrumbItem>
           ))}
         </Breadcrumb>
@@ -255,7 +255,7 @@ export const GroupPickerDialog = ({
                   dataListCells={[
                     <DataListCell key={`name-${group.id}`}>
                       {filter === "" ? (
-                        <>{group.name}</>
+                        group.name
                       ) : (
                         <GroupPath group={findSubGroup(group, filter)} />
                       )}

src/components/help-enabler/HelpItem.tsx

@@ -23,13 +23,9 @@ export const HelpItem = ({
 }: HelpItemProps) => {
   const { t } = useTranslation();
   const { enabled } = useHelp();
-  return (
+  return enabled ? (
-    <>
-      {enabled && (
     <Popover
-          bodyContent={
+      bodyContent={isValidElement(helpText) ? helpText : t(helpText as string)}
-            isValidElement(helpText) ? helpText : t(helpText as string)
-          }
     >
       <>
         {!unWrap && (
@@ -46,7 +42,5 @@ export const HelpItem = ({
         {unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
       </>
     </Popover>
-      )}
+  ) : null;
-    </>
-  );
 };

src/components/list-empty-state/ListEmptyState.tsx

@@ -40,7 +40,6 @@ export const ListEmptyState = ({
   icon,
 }: ListEmptyStateProps) => {
   return (
-    <>
     <EmptyState data-testid="empty-state" variant="large">
       {hasIcon && isSearchVariant ? (
         <EmptyStateIcon icon={SearchIcon} />
@@ -76,6 +75,5 @@ export const ListEmptyState = ({
         </EmptyStateSecondaryActions>
       )}
     </EmptyState>
-    </>
   );
 };

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -427,12 +427,7 @@ export function KeycloakDataTable<T>({
           {loading && <Loading />}
         </PaginatingTableToolbar>
       )}
-      <>
+      {!loading && (!data || data?.length === 0) && search === "" && emptyState}
-        {!loading &&
-          (!data || data?.length === 0) &&
-          search === "" &&
-          emptyState}
-      </>
     </>
   );
 }

src/components/table-toolbar/PaginatingTableToolbar.tsx

@@ -73,7 +73,7 @@ export const PaginatingTableToolbar: FunctionComponent<TableToolbarProps> = ({
       }
       subToolbar={subToolbar}
       toolbarItemFooter={
-        count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : <></>
+        count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : null
       }
       inputGroupName={inputGroupName}
       inputGroupPlaceholder={inputGroupPlaceholder}

src/components/table-toolbar/TableToolbar.tsx

@@ -1,6 +1,5 @@
 import React, {
   FormEvent,
-  Fragment,
   FunctionComponent,
   ReactNode,
   useState,
@@ -74,7 +73,6 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
     <>
       <Toolbar>
         <ToolbarContent>
-          <Fragment>
           {inputGroupName && (
             <ToolbarItem>
               <InputGroup>
@@ -102,7 +100,6 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
               </InputGroup>
             </ToolbarItem>
           )}
-          </Fragment>
           {toolbarItem}
         </ToolbarContent>
       </Toolbar>

src/components/view-header/ViewHeader.tsx

@@ -101,7 +101,7 @@ export const ViewHeader = ({
                           </Badge>{" "}
                         </Fragment>
                       )}
-                      {isValidElement(badge.text) && <>{badge.text}</>}{" "}
+                      {isValidElement(badge.text) && badge.text}{" "}
                     </Fragment>
                   ))}
                 </LevelItem>

src/dashboard/Dashboard.tsx

@@ -125,14 +125,10 @@ const Dashboard = () => {
                             {feature}{" "}
                             {isExperimentalFeature(feature) ? (
                               <Label color="orange">{t("experimental")}</Label>
-                            ) : (
+                            ) : null}
-                              <></>
-                            )}
                             {isPreviewFeature(feature) ? (
                               <Label color="blue">{t("preview")}</Label>
-                            ) : (
+                            ) : null}
-                              <></>
-                            )}
                           </ListItem>
                         ))}
                       </List>

src/events/AdminEvents.tsx

@@ -137,7 +137,6 @@ export const AdminEvents = () => {
   };
 
   const LinkResource = (row: AdminEventRepresentation) => (
-    <>
     <Truncate text={row.resourcePath}>
       {(text) => (
         <>
@@ -154,12 +153,10 @@ export const AdminEvents = () => {
         </>
       )}
     </Truncate>
-    </>
   );
 
   const adminEventSearchFormDisplay = () => {
     return (
-      <>
       <Flex
         direction={{ default: "column" }}
         spaceItems={{ default: "spaceItemsNone" }}
@@ -295,7 +292,6 @@ export const AdminEvents = () => {
           </Button>
         </FlexItem>
       </Flex>
-      </>
     );
   };
 

src/groups/GroupTable.tsx

@@ -77,7 +77,6 @@ export const GroupTable = () => {
   };
 
   const GroupNameCell = (group: GroupRepresentation) => (
-    <>
     <Link
       key={group.id}
       to={`${location.pathname}/${group.id}`}
@@ -87,7 +86,6 @@ export const GroupTable = () => {
     >
       {group.name}
     </Link>
-    </>
   );
 
   const handleModalToggle = () => {

src/groups/Members.tsx

@@ -99,11 +99,9 @@ export const Members = () => {
   };
 
   const UserDetailLink = (user: MembersOf) => (
-    <>
     <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
       {user.username}
     </Link>
-    </>
   );
   return (
     <>

src/groups/SearchGroups.tsx

@@ -62,7 +62,6 @@ export const SearchGroups = () => {
   };
 
   const GroupNameCell = (group: SearchGroup) => (
-    <>
     <Link
       key={group.id}
       to={`/${realm}/groups/search/${group.link}`}
@@ -72,7 +71,6 @@ export const SearchGroups = () => {
     >
       {group.name}
     </Link>
-    </>
   );
 
   const flatten = (

src/identity-providers/IdentityProvidersSection.tsx

@@ -70,7 +70,6 @@ export const IdentityProvidersSection = () => {
   const loader = () => Promise.resolve(_.sortBy(providers, "alias"));
 
   const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
-    <>
     <Link
       key={identityProvider.providerId}
       to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`}
@@ -86,7 +85,6 @@ export const IdentityProvidersSection = () => {
         </Badge>
       )}
     </Link>
-    </>
   );
 
   const navigateToCreate = (providerId: string) =>

src/identity-providers/add/AdvancedSettings.tsx

@@ -64,6 +64,8 @@ const LoginFlow = ({
             aria-label={t(label)}
             isOpen={open}
           >
+            {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <>
               {defaultValue === "" && (
                 <SelectOption key="empty" value={defaultValue}>
@@ -71,6 +73,8 @@ const LoginFlow = ({
                 </SelectOption>
               )}
             </>
+            {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <>
               {flows?.map((option) => (
                 <SelectOption

src/identity-providers/add/ExtendedNonDiscoverySettings.tsx

@@ -32,7 +32,6 @@ export const ExtendedNonDiscoverySettings = () => {
   const [promptOpen, setPromptOpen] = useState(false);
 
   return (
-    <>
     <ExpandableSection
       toggleText={t("advanced")}
       onToggle={() => setIsExpanded(!isExpanded)}
@@ -115,12 +114,8 @@ export const ExtendedNonDiscoverySettings = () => {
             )}
           />
         </FormGroup>
-          <TextField
+        <TextField field="config.forwardParameters" label="forwardParameters" />
-            field="config.forwardParameters"
-            label="forwardParameters"
-          />
       </Form>
     </ExpandableSection>
-    </>
   );
 };

src/identity-providers/icons/FontAwesomeIcon.tsx

@@ -41,6 +41,6 @@ export const FontAwesomeIcon = ({ icon }: FontAwesomeIconProps) => {
         />
       );
     default:
-      return <></>;
+      return null;
   }
 };

src/realm-roles/AliasRendererComponent.tsx

@@ -28,7 +28,7 @@ export const AliasRendererComponent = ({
   }, [containerId]);
 
   if (filterType === "roles" || !containerName) {
-    return <>{name}</>;
+    return name;
   }
 
   if (filterType === "clients" || containerName) {

src/realm-roles/AssociatedRolesTab.tsx

@@ -134,9 +134,8 @@ export const AssociatedRolesTab = ({
     refresh();
   }, [additionalRoles, isInheritedHidden]);
 
-  const InheritedRoleName = (role: RoleRepresentation) => {
+  const InheritedRoleName = (role: RoleRepresentation) =>
-    return <>{inheritanceMap.current[role.id!]}</>;
+    inheritanceMap.current[role.id!];
-  };
 
   const AliasRenderer = ({ id, name, clientId }: Role) => {
     return (
@@ -201,7 +200,6 @@ export const AssociatedRolesTab = ({
 
   const goToCreate = () => history.push(`${url}/add-role`);
   return (
-    <>
     <PageSection variant="light" padding={{ default: "noPadding" }}>
       <DeleteConfirm />
       <DeleteAssociatedRolesConfirm />
@@ -293,6 +291,5 @@ export const AssociatedRolesTab = ({
         }
       />
     </PageSection>
-    </>
   );
 };

src/realm-roles/RoleAttributes.tsx

@@ -45,7 +45,6 @@ export const RoleAttributes = ({
   const watchFirstKey = watch("attributes[0].key", "");
 
   return (
-    <>
     <FormAccess role="manage-realm">
       <TableComposable
         className="kc-role-attributes__table"
@@ -153,6 +152,5 @@ export const RoleAttributes = ({
         </Button>
       </ActionGroup>
     </FormAccess>
-    </>
   );
 };

src/realm-roles/RolesList.tsx

@@ -126,11 +126,7 @@ export const RolesList = ({
         ariaLabelKey="roles:roleList"
         searchPlaceholderKey="roles:searchFor"
         isPaginated={paginated}
-        toolbarItem={
+        toolbarItem={<Button onClick={goToCreate}>{t("createRole")}</Button>}
-          <>
-            <Button onClick={goToCreate}>{t("createRole")}</Button>
-          </>
-        }
         actions={[
           {
             title: t("common:delete"),

src/realm-roles/UsersInRoleTab.tsx

@@ -42,7 +42,6 @@ export const UsersInRoleTab = () => {
   const { enabled } = useHelp();
 
   return (
-    <>
     <PageSection data-testid="users-page" variant="light">
       <KeycloakDataTable
         isPaginated
@@ -138,6 +137,5 @@ export const UsersInRoleTab = () => {
         ]}
       />
     </PageSection>
-    </>
   );
 };

src/realm-settings/GeneralTab.tsx

@@ -49,7 +49,6 @@ export const RealmSettingsGeneralTab = ({
   const requireSslTypes = ["all", "external", "none"];
 
   return (
-    <>
     <PageSection variant="light">
       <FormAccess
         isHorizontal
@@ -75,10 +74,7 @@ export const RealmSettingsGeneralTab = ({
             ref={register}
           />
         </FormGroup>
-          <FormGroup
+        <FormGroup label={t("htmlDisplayName")} fieldId="kc-html-display-name">
-            label={t("htmlDisplayName")}
-            fieldId="kc-html-display-name"
-          >
           <TextInput
             type="text"
             id="kc-html-display-name"
@@ -215,6 +211,5 @@ export const RealmSettingsGeneralTab = ({
         </ActionGroup>
       </FormAccess>
     </PageSection>
-    </>
   );
 };

src/realm-settings/KeysListTab.tsx

@@ -130,14 +130,11 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
 
   const goToCreate = () => history.push(`${url}/add-role`);
 
-  const ProviderRenderer = ({ provider }: KeyData) => {
+  const ProviderRenderer = ({ provider }: KeyData) => provider;
-    return <>{provider}</>;
-  };
 
   const ButtonRenderer = ({ type, publicKey, certificate }: KeyData) => {
     if (type === "EC") {
       return (
-        <>
         <Button
           onClick={() => {
             togglePublicKeyDialog();
@@ -148,11 +145,9 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
         >
           {t("realm-settings:publicKeys").slice(0, -1)}
         </Button>
-        </>
       );
     } else if (type === "RSA") {
       return (
-        <>
         <div className="button-wrapper">
           <Button
             onClick={() => {
@@ -175,7 +170,6 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
             {t("realm-settings:certificate")}
           </Button>
         </div>
-        </>
       );
     }
   };
@@ -200,7 +194,6 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
   ];
 
   return (
-    <>
     <PageSection variant="light" padding={{ default: "noPadding" }}>
       <PublicKeyDialog />
       <CertificateDialog />
@@ -287,6 +280,5 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
         }
       />
     </PageSection>
-    </>
   );
 };

src/realm-settings/KeysProvidersTab.tsx

@@ -256,7 +256,6 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
       <DeleteConfirm />
       <PageSection variant="light" padding={{ default: "noPadding" }}>
         <Toolbar>
-          <>
           <ToolbarGroup className="providers-toolbar">
             <ToolbarItem>
               <InputGroup>
@@ -309,7 +308,6 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
               />
             </ToolbarItem>
           </ToolbarGroup>
-          </>
         </Toolbar>
         <DataList
           aria-label={t("groups")}
@@ -375,7 +373,6 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
                       data-testid="provider-name"
                       key={`name-${idx}`}
                     >
-                      <>
                       <Link
                         key={component.name}
                         data-testid="provider-name-link"
@@ -383,13 +380,12 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
                       >
                         {component.name}
                       </Link>
-                      </>
                     </DataListCell>,
                     <DataListCell key={`providerId-${idx}`}>
-                      <>{component.providerId}</>
+                      {component.providerId}
                     </DataListCell>,
                     <DataListCell key={`providerDescription-${idx}`}>
-                      <>{component.providerDescription}</>
+                      {component.providerDescription}
                     </DataListCell>,
                     <DataListAction
                       aria-labelledby="data-list-action"

src/realm-settings/LoginTab.tsx

@@ -18,12 +18,8 @@ export const RealmSettingsLoginTab = ({
   const { t } = useTranslation("realm-settings");
 
   return (
-    <>
     <PageSection variant="light">
-        <FormPanel
+      <FormPanel className="kc-login-screen" title="Login screen customization">
-          className="kc-login-screen"
-          title="Login screen customization"
-        >
         <FormAccess isHorizontal role="manage-realm">
           <FormGroup
             label={t("userRegistration")}
@@ -210,6 +206,5 @@ export const RealmSettingsLoginTab = ({
         </FormAccess>
       </FormPanel>
     </PageSection>
-    </>
   );
 };

src/realm-settings/RealmSettingsSection.tsx

@@ -53,7 +53,6 @@ export const EditProviderCrumb = () => {
   const { realm } = useRealm();
 
   return (
-    <>
     <Breadcrumb>
       <BreadcrumbItem
         render={(props) => (
@@ -65,7 +64,6 @@ export const EditProviderCrumb = () => {
       <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
       <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
     </Breadcrumb>
-    </>
   );
 };
 

src/realm-settings/SessionsTab.tsx

@@ -70,7 +70,6 @@ export const RealmSettingsSessionsTab = ({
   };
 
   return (
-    <>
     <PageSection variant="light">
       <FormPanel
         title={t("SSOSessionSettings")}
@@ -453,6 +452,5 @@ export const RealmSettingsSessionsTab = ({
         </FormAccess>
       </FormPanel>
     </PageSection>
-    </>
   );
 };

src/realm-settings/ThemesTab.tsx

@@ -55,7 +55,6 @@ export const RealmSettingsThemesTab = ({
   });
 
   return (
-    <>
     <PageSection variant="light">
       <FormAccess
         isHorizontal
@@ -350,11 +349,7 @@ export const RealmSettingsThemesTab = ({
           </>
         )}
         <ActionGroup>
-            <Button
+          <Button variant="primary" type="submit" data-testid="themes-tab-save">
-              variant="primary"
-              type="submit"
-              data-testid="themes-tab-save"
-            >
             {t("common:save")}
           </Button>
           <Button variant="link" onClick={reset}>
@@ -363,6 +358,5 @@ export const RealmSettingsThemesTab = ({
         </ActionGroup>
       </FormAccess>
     </PageSection>
-    </>
   );
 };

src/realm-settings/TokensTab.tsx

@@ -101,7 +101,6 @@ export const RealmSettingsTokensTab = ({
     }
   };
   return (
-    <>
     <PageSection variant="light">
       <FormPanel
         title={t("realm-settings:general")}
@@ -539,6 +538,5 @@ export const RealmSettingsTokensTab = ({
         </FormAccess>
       </FormPanel>
     </PageSection>
-    </>
   );
 };

src/realm-settings/event-config/EventsTypeTable.tsx

@@ -39,15 +39,13 @@ export function EventsTypeTable({
       onSelect={onSelect ? onSelect : undefined}
       canSelectAll={!!onSelect}
       toolbarItem={
-        <>
+        addTypes && (
-          {addTypes && (
           <ToolbarItem>
             <Button id="addTypes" onClick={addTypes} data-testid="addTypes">
               {t("addSavedTypes")}
             </Button>
           </ToolbarItem>
-          )}
+        )
-        </>
       }
       actions={
         !onDelete

src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx

@@ -195,7 +195,6 @@ export const AESGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -208,7 +207,6 @@ export const AESGeneratedForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx

@@ -194,7 +194,6 @@ export const ECDSAGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -207,7 +206,6 @@ export const ECDSAGeneratedForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx

@@ -202,7 +202,6 @@ export const HMACGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -215,7 +214,6 @@ export const HMACGeneratedForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx

@@ -209,7 +209,6 @@ export const JavaKeystoreForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -222,7 +221,6 @@ export const JavaKeystoreForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx

@@ -203,7 +203,6 @@ export const RSAGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -216,7 +215,6 @@ export const RSAGeneratedForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/realm-settings/key-providers/rsa/RSAForm.tsx

@@ -212,7 +212,6 @@ export const RSAForm = ({
           />
         )}
         {editMode && (
-          <>
           <TextInput
             ref={form.register()}
             type="text"
@@ -225,7 +224,6 @@ export const RSAForm = ({
                 : ValidatedOptions.default
             }
           />
-          </>
         )}
       </FormGroup>
       <FormGroup

src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -316,9 +316,7 @@ export const KerberosSettingsRequired = ({
               )}
             ></Controller>
           </FormGroup>
-        ) : (
+        ) : null}
-          <></>
-        )}
 
         <FormGroup
           label={t("updateFirstLogin")}

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

@@ -15,7 +15,6 @@ export const LdapMapperHardcodedLdapGroup = ({
   const helpText = useTranslation("user-federation-help").t;
 
   return (
-    <>
     <FormGroup
       label={t("group")}
       labelIcon={
@@ -42,6 +41,5 @@ export const LdapMapperHardcodedLdapGroup = ({
         }
       />
     </FormGroup>
-    </>
   );
 };

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

@@ -76,9 +76,7 @@ export const LdapMapperList = () => {
   };
 
   const MapperLink = (mapper: ComponentRepresentation) => (
-    <>
     <Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
-    </>
   );
 
   return (

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

@@ -15,7 +15,6 @@ export const LdapMapperMsadUserAccount = ({
   const helpText = useTranslation("user-federation-help").t;
 
   return (
-    <>
     <FormGroup
       label={t("passwordPolicyHintsEnabled")}
       labelIcon={
@@ -44,6 +43,5 @@ export const LdapMapperMsadUserAccount = ({
         )}
       ></Controller>
     </FormGroup>
-    </>
   );
 };

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

@@ -173,7 +173,6 @@ export const LdapMapperUserAttribute = ({
         ></Controller>
       </FormGroup>
       {mapperType === "certificate-ldap-mapper" ? (
-        <>
         <FormGroup
           label={t("derFormatted")}
           labelIcon={
@@ -202,10 +201,7 @@ export const LdapMapperUserAttribute = ({
             )}
           ></Controller>
         </FormGroup>
-        </>
+      ) : null}
-      ) : (
-        <></>
-      )}
     </>
   );
 };

src/user-federation/shared/SettingsCache.tsx

@@ -190,9 +190,7 @@ export const SettingsCache = ({
               )}
             ></Controller>
           </FormGroup>
-        ) : (
+        ) : null}
-          <></>
-        )}
         {_.isEqual(cachePolicyType, ["EVICT_DAILY"]) ||
         _.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
           <>
@@ -269,9 +267,7 @@ export const SettingsCache = ({
               ></Controller>
             </FormGroup>
           </>
-        ) : (
+        ) : null}
-          <></>
-        )}
         {_.isEqual(cachePolicyType, ["MAX_LIFESPAN"]) ? (
           <FormGroup
             label={t("maxLifespan")}
@@ -292,9 +288,7 @@ export const SettingsCache = ({
               data-testid="kerberos-cache-lifespan"
             />
           </FormGroup>
-        ) : (
+        ) : null}
-          <></>
-        )}
       </FormAccess>
     </>
   );

src/user/UserForm.tsx

@@ -353,7 +353,6 @@ export const UserForm = ({
             typeAheadAriaLabel="Select an action"
             control={control}
             render={() => (
-              <>
               <InputGroup>
                 <ChipGroup categoryName={" "}>
                   {selectedGroups.map((currentChip) => (
@@ -374,7 +373,6 @@ export const UserForm = ({
                   {t("users:joinGroups")}
                 </Button>
               </InputGroup>
-              </>
             )}
           />
         </FormGroup>

src/user/UserGroups.tsx

@@ -189,9 +189,7 @@ export const UserGroups = () => {
     refresh();
   }, [isDirectMembership]);
 
-  const AliasRenderer = (group: GroupRepresentation) => {
+  const AliasRenderer = (group: GroupRepresentation) => group.name;
-    return <>{group.name}</>;
-  };
 
   const toggleModal = () => {
     setOpen(!open);
@@ -232,8 +230,7 @@ export const UserGroups = () => {
       directMembershipList.length === 0 ||
       isDirectMembership;
     return (
-      <>
+      canLeaveGroup && (
-        {canLeaveGroup && (
         <Button
           data-testid={`leave-${group.name}`}
           onClick={() => leave(group)}
@@ -241,8 +238,7 @@ export const UserGroups = () => {
         >
           {t("leave")}
         </Button>
-        )}
+      )
-      </>
     );
   };
 

src/user/UsersSection.tsx

@@ -63,14 +63,12 @@ export const UsersSection = () => {
   );
 
   const UserDetailLink = (user: UserRepresentation) => (
-    <>
     <Link
       key={user.username}
       to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
     >
       {user.username}
     </Link>
-    </>
   );
 
   const loader = async (first?: number, max?: number, search?: string) => {