remove styles and use css modules (#20018)

js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts

@@ -50,7 +50,7 @@ describe("Clients SAML tests", () => {
       cy.findByTestId("forceNameIdFormat").click({
         force: true,
       });
-      cy.findByTestId("settingsSave").click();
+      cy.findByTestId("settings-save").click();
       masthead.checkNotificationMessage("Client successfully updated");
     });
   });

js/apps/admin-ui/cypress/e2e/identity_providers_test.spec.ts

@@ -306,7 +306,7 @@ describe("Identity provider test", () => {
       listingPage.goToItemDetails("github");
 
       githubSettings.fillData("github");
-      cy.findByTestId("save").click();
+      cy.findByTestId("idp-details-save").click();
     });
 
     it("should check input switches and inputs", () => {
@@ -341,7 +341,7 @@ describe("Identity provider test", () => {
       advancedSettings.assertAccountLinkingOnlySwitchTurnedOn(true);
       advancedSettings.assertHideOnLoginPageSwitchTurnedOn(true);
 
-      cy.findByTestId("save").click();
+      cy.findByTestId("idp-details-save").click();
     });
 
     it("should revert and save options", () => {
@@ -359,7 +359,7 @@ describe("Identity provider test", () => {
       advancedSettings.assertAcceptsPromptNoneForwardFromClientSwitchTurnedOn(
         false
       );
-      cy.findByTestId("revert").click();
+      cy.findByTestId("idp-details-revert").click();
       advancedSettings.assertStoreTokensSwitchTurnedOn(true);
       advancedSettings.assertAcceptsPromptNoneForwardFromClientSwitchTurnedOn(
         true

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts

@@ -30,7 +30,7 @@ export default class SettingsTab extends PageObject {
   private displayClientSwitch = "#kc-display-on-client-switch";
   private consentScreenText = "#kc-consent-screen-text";
 
-  private saveBtn = "settingsSave";
+  private saveBtn = "settings-save";
   private revertBtn = "settingsRevert";
 
   private redirectUris = "redirectUris";

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/CreateProviderPage.ts

@@ -7,7 +7,7 @@ export default class CreateProviderPage {
   private discoveryEndpoint = "discoveryEndpoint";
   private authorizationUrl = "authorizationUrl";
   private addButton = "createProvider";
-  private saveButton = "save";
+  private saveButton = "idp-details-save";
   private ssoServiceUrl = "sso-service-url";
   private authnContextClassRefs = "classref-field";
   private authnContextDeclRefs = "declref-field";

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts

@@ -70,8 +70,8 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
   private postLoginFlowSelect = "#postBrokerLoginFlowAlias";
   private syncModeSelect = "#syncMode";
   private addBtn = "createProvider";
-  private saveBtn = "save";
-  private revertBtn = "revert";
+  private saveBtn = "idp-details-save";
+  private revertBtn = "idp-details-revert";
 
   private validateSignature = "#validateSignature";
   private JwksSwitch = "#useJwksUrl";

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/social/ProviderSAMLSettings.ts

@@ -46,8 +46,8 @@ export default class ProviderSAMLSettings extends PageObject {
   private attributeConsumingServiceName = "attributeConsumingServiceName";
 
   private comparison = "#comparison";
-  private saveBtn = "save";
-  private revertBtn = "revert";
+  private saveBtn = "idp-details-save";
+  private revertBtn = "idp-details-revert";
 
   public clickSaveBtn() {
     cy.findByTestId(this.saveBtn).click();

js/apps/admin-ui/src/authentication/AuthenticationSection.tsx

@@ -42,8 +42,6 @@ import { AuthenticationTab, toAuthentication } from "./routes/Authentication";
 import { toCreateFlow } from "./routes/CreateFlow";
 import { toFlow } from "./routes/Flow";
 
-import "./authentication-section.css";
-
 type UsedBy = "SPECIFIC_CLIENTS" | "SPECIFIC_PROVIDERS" | "DEFAULT";
 
 export type AuthenticationType = AuthenticationFlowRepresentation & {

js/apps/admin-ui/src/authentication/BuildInLabel.tsx

@@ -0,0 +1,15 @@
+import { Label } from "@patternfly/react-core";
+import { CheckCircleIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+
+import style from "./build-in-label.module.css";
+
+export const BuildInLabel = () => {
+  const { t } = useTranslation("authentication");
+
+  return (
+    <Label icon={<CheckCircleIcon className={style.icon} />}>
+      {t("buildIn")}
+    </Label>
+  );
+};

js/apps/admin-ui/src/authentication/FlowDetails.tsx

@@ -1,5 +1,5 @@
-import type AuthenticationExecutionInfoRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationExecutionInfoRepresentation";
-import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
+import AuthenticationExecutionInfoRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationExecutionInfoRepresentation";
+import AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
 import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
 import {
   AlertVariant,
@@ -15,11 +15,7 @@ import {
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  CheckCircleIcon,
-  DomainIcon,
-  TableIcon,
-} from "@patternfly/react-icons";
+import { DomainIcon, TableIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
@@ -28,10 +24,11 @@ import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { useFetch } from "../utils/useFetch";
 import { useRealm } from "../context/realm-context/RealmContext";
+import { useFetch } from "../utils/useFetch";
 import useToggle from "../utils/useToggle";
 import { BindFlowDialog } from "./BindFlowDialog";
+import { BuildInLabel } from "./BuildInLabel";
 import { DuplicateFlowModal } from "./DuplicateFlowModal";
 import { EditFlowModal } from "./EditFlowModal";
 import { EmptyExecutionState } from "./EmptyExecutionState";
@@ -305,14 +302,7 @@ export default function FlowDetails() {
           { text: <Label>{t(`used.${usedBy}`)}</Label> },
           builtIn
             ? {
-                text: (
-                  <Label
-                    className="keycloak_authentication-section__usedby_label"
-                    icon={<CheckCircleIcon />}
-                  >
-                    {t("buildIn")}
-                  </Label>
-                ),
+                text: <BuildInLabel />,
                 id: "builtIn",
               }
             : {},

js/apps/admin-ui/src/authentication/authentication-section.css

@@ -1,7 +0,0 @@
-.keycloak_authentication-section__usedby {
-  color: var(--pf-global--success-color--100);
-}
-
-.keycloak_authentication-section__usedby_label .pf-c-label__icon {
-  color: var(--pf-global--success-color--100);
-}

js/apps/admin-ui/src/authentication/build-in-label.module.css

@@ -0,0 +1,4 @@
+
+.icon {
+  color: var(--pf-global--success-color--100);
+}

js/apps/admin-ui/src/authentication/components/UsedBy.tsx

@@ -16,7 +16,7 @@ import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTa
 import useToggle from "../../utils/useToggle";
 import { AuthenticationType, REALM_FLOWS } from "../AuthenticationSection";
 
-import "./used-by.css";
+import style from "./used-by.module.css";
 
 type UsedByProps = {
   authType: AuthenticationType;
@@ -25,8 +25,7 @@ type UsedByProps = {
 
 const Label = ({ label }: { label: string }) => (
   <>
-    <CheckCircleIcon className="keycloak_authentication-section__usedby" />{" "}
-    {label}
+    <CheckCircleIcon className={style.label} /> {label}
   </>
 );
 
@@ -135,19 +134,12 @@ export const UsedBy = ({ authType: { id, usedBy }, realm }: UsedByProps) => {
               </div>
             }
           >
-            <Button
-              variant="link"
-              className="keycloak__used-by__popover-button"
-            >
+            <Button variant="link" className={style.label}>
               <Label label={t(`used.${usedBy.type}`)} />
             </Button>
           </Popover>
         ) : (
-          <Button
-            variant="link"
-            className="keycloak__used-by__popover-button"
-            onClick={toggle}
-          >
+          <Button variant="link" className={style.label} onClick={toggle}>
             <Label label={t(`used.${usedBy.type}`)} />
           </Button>
         ))}

js/apps/admin-ui/src/authentication/components/used-by.module.css

@@ -1,4 +1,5 @@
-.keycloak__used-by__popover-button {
+.label {
   padding: 0;
   font-size: var(--pf-c-table--cell--FontSize);
+  color: var(--pf-global--success-color--100);
 }

js/apps/admin-ui/src/authentication/form/CreateFlow.tsx

@@ -11,7 +11,7 @@ import { Link, useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toAuthentication } from "../routes/Authentication";

js/apps/admin-ui/src/authentication/policies/CibaPolicy.tsx

@@ -19,7 +19,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";

js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx

@@ -23,7 +23,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import useLocaleSort from "../../utils/useLocaleSort";

js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx

@@ -25,7 +25,7 @@ import { useTranslation } from "react-i18next";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { PolicyRow } from "./PolicyRow";

js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx

@@ -27,7 +27,7 @@ import { HelpItem, useHelp } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";

js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx

@@ -49,8 +49,6 @@ import {
 import { toClientScope } from "./routes/ClientScope";
 import { toNewClientScope } from "./routes/NewClientScope";
 
-import "./client-scope.css";
-
 type TypeSelectorProps = ClientScopeDefaultOptionalType & {
   refresh: () => void;
 };

js/apps/admin-ui/src/client-scopes/client-scope.css

@@ -1,3 +0,0 @@
-.keycloak__client-scope__none > button .pf-c-select__toggle-text {
-  color: var(--pf-global--Color--300);
-}

js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx

@@ -21,7 +21,7 @@ import { toClient } from "../../clients/routes/Client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -32,8 +32,6 @@ import { useParams } from "../../utils/useParams";
 import { toClientScope } from "../routes/ClientScope";
 import { MapperParams, MapperRoute } from "../routes/Mapper";
 
-import "./mapping-details.css";
-
 export default function MappingDetails() {
   const { t } = useTranslation("client-scopes");
   const { addAlert, addError } = useAlerts();
@@ -206,7 +204,6 @@ export default function MappingDetails() {
           isHorizontal
           onSubmit={handleSubmit(save)}
           role="manage-clients"
-          className="keycloak__client-scope-mapping-details__form"
         >
           <FormGroup label={t("common:mapperType")} fieldId="mapperType">
             <KeycloakTextInput

js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx

@@ -13,23 +13,23 @@ import { useEffect, useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { HelpItem, TextControl } from "ui-shared";
 
 import { getProtocolName } from "../../clients/utils";
+import { DefaultSwitchControl } from "../../components/SwitchControl";
 import {
-  allClientScopeTypes,
   ClientScopeDefaultOptionalType,
+  allClientScopeTypes,
   clientScopeTypesSelectOptions,
 } from "../../components/client-scope/ClientScopeTypes";
-import { FormAccess } from "../../components/form-access/FormAccess";
-import { HelpItem, TextControl } from "ui-shared";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
 import { convertAttributeNameToForm, convertToFormValues } from "../../util";
-import { toClientScopes } from "../routes/ClientScopes";
 import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled";
-import { DefaultSwitchControl } from "../../components/SwitchControl";
+import { toClientScopes } from "../routes/ClientScopes";
 
 type ScopeFormProps = {
   clientScope?: ClientScopeRepresentation;

js/apps/admin-ui/src/client-scopes/details/mapping-details.css

@@ -1,5 +0,0 @@
-@media (min-width: 768px) {
-  .keycloak__client-scope-mapping-details__form .pf-c-form__group {
-    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
-  }
-}

js/apps/admin-ui/src/clients/ClientDescription.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { TextControl, TextAreaControl } from "ui-shared";
 
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { DefaultSwitchControl } from "../components/SwitchControl";
 
 type ClientDescriptionProps = {

js/apps/admin-ui/src/clients/add/AccessSettings.tsx

@@ -2,11 +2,11 @@ import { FormGroup } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "ui-shared";
+import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAccess } from "../../context/access/Access";
-import { SaveReset } from "../advanced/SaveReset";
 import { FormFields } from "../ClientDetails";
 import type { ClientSettingsProps } from "../ClientSettings";
 import { LoginSettings } from "./LoginSettings";
@@ -50,8 +50,7 @@ export const AccessSettings = ({
         </FormGroup>
       )}
       {client.bearerOnly && (
-        <SaveReset
-          className="keycloak__form_actions"
+        <FixedButtonsGroup
           name="settings"
           save={save}
           reset={reset}

js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx

@@ -10,13 +10,11 @@ import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 
-import "./capability-config.css";
-
 type CapabilityConfigProps = {
   unWrap?: boolean;
   protocol?: string;
@@ -121,7 +119,7 @@ export const CapabilityConfig = ({
             label={t("authenticationFlow")}
             fieldId="kc-flow"
           >
-            <Grid id="authenticationFlowGrid">
+            <Grid id="authenticationFlowGrid" hasGutter>
               <GridItem lg={4} sm={6}>
                 <Controller
                   name="standardFlowEnabled"

js/apps/admin-ui/src/clients/add/GeneralSettings.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
 import { ClientDescription } from "../ClientDescription";

js/apps/admin-ui/src/clients/add/LoginSettingsPanel.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/clients/add/LogoutPanel.tsx

@@ -1,15 +1,15 @@
 import { FormGroup, Switch, ValidatedOptions } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "ui-shared";
+
+import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAccess } from "../../context/access/Access";
 import { beerify, convertAttributeNameToForm } from "../../util";
-import { SaveReset } from "../advanced/SaveReset";
-import type { ClientSettingsProps } from "../ClientSettings";
 import { FormFields } from "../ClientDetails";
+import type { ClientSettingsProps } from "../ClientSettings";
 
 const validateUrl = (uri: string | undefined, error: string) =>
   ((uri?.startsWith("https://") || uri?.startsWith("http://")) &&
@@ -211,8 +211,7 @@ export const LogoutPanel = ({
           </FormGroup>
         </>
       )}
-      <SaveReset
-        className="keycloak__form_actions"
+      <FixedButtonsGroup
         name="settings"
         save={save}
         reset={reset}

js/apps/admin-ui/src/clients/add/NewClientForm.tsx

@@ -13,7 +13,7 @@ import { useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertFormValuesToObject } from "../../util";

js/apps/admin-ui/src/clients/add/SamlConfig.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { Controller, Path, PathValue, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";

js/apps/admin-ui/src/clients/add/SamlSignature.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";

js/apps/admin-ui/src/clients/add/capability-config.css

@@ -1,9 +0,0 @@
-@media (min-width: 768px) {
-  .keycloak__capability-config__form .pf-c-form__group {
-    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
-  }
-}
-
-div#authenticationFlowGrid > .pf-l-grid__item {
-  padding-bottom: var(--pf-global--spacer--lg);
-}

js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx

@@ -11,10 +11,11 @@ import {
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import { FormAccess } from "../../components/form-access/FormAccess";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";

js/apps/admin-ui/src/clients/advanced/AuthenticationOverrides.tsx

@@ -10,10 +10,11 @@ import { sortBy } from "lodash-es";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import { FormAccess } from "../../components/form-access/FormAccess";
 import { useFetch } from "../../utils/useFetch";
 
 type AuthenticationOverridesProps = {

js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx

@@ -16,7 +16,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import {
   Action,

js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/clients/advanced/FineGrainSamlEndpointConfig.tsx

@@ -2,7 +2,7 @@ import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ApplicationUrls } from "./ApplicationUrls";

js/apps/admin-ui/src/clients/advanced/OpenIdConnectCompatibilityModes.tsx

@@ -2,7 +2,7 @@ import { ActionGroup, Button, FormGroup, Switch } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";

js/apps/admin-ui/src/clients/advanced/RevocationPanel.tsx

@@ -14,7 +14,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import useFormatDate, { FORMAT_DATE_AND_TIME } from "../../utils/useFormatDate";

js/apps/admin-ui/src/clients/advanced/SaveReset.tsx

@@ -1,39 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { ActionGroup, ActionGroupProps, Button } from "@patternfly/react-core";
-
-type SaveResetProps = ActionGroupProps & {
-  name: string;
-  save?: () => void;
-  reset: () => void;
-  isActive?: boolean;
-};
-
-export const SaveReset = ({
-  name,
-  save,
-  reset,
-  isActive = true,
-  ...rest
-}: SaveResetProps) => {
-  const { t } = useTranslation("common");
-  return (
-    <ActionGroup {...rest}>
-      <Button
-        isDisabled={!isActive}
-        data-testid={name + "Save"}
-        onClick={save}
-        type={save ? "button" : "submit"}
-      >
-        {t("save")}
-      </Button>
-      <Button
-        isDisabled={!isActive}
-        data-testid={name + "Revert"}
-        variant="link"
-        onClick={reset}
-      >
-        {t("revert")}
-      </Button>
-    </ActionGroup>
-  );
-};

js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx

@@ -11,10 +11,14 @@ import {
   ExpandableSection,
   FormGroup,
   PageSection,
+  Panel,
+  PanelHeader,
+  PanelMainBody,
   Select,
   SelectOption,
   SelectVariant,
   Switch,
+  Title,
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
@@ -25,13 +29,12 @@ import { ForbiddenSection } from "../../ForbiddenSection";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { ClientSelect } from "../../components/client/ClientSelect";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import {
   KeyValueType,
   keyValueToArray,
 } from "../../components/key-value-form/key-value-convert";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
-import { FormPanel } from "../../components/scroll-form/FormPanel";
 import { UserSelect } from "../../components/users/UserSelect";
 import { useAccess } from "../../context/access/Access";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -41,8 +44,6 @@ import { defaultContextAttributes } from "../utils";
 import { KeyBasedAttributeInput } from "./KeyBasedAttributeInput";
 import { Results } from "./evaluate/Results";
 
-import "./auth-evaluate.css";
-
 interface EvaluateFormInputs
   extends Omit<ResourceEvaluation, "context" | "resources"> {
   alias: string;
@@ -193,244 +194,253 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
   return (
     <PageSection>
       <FormProvider {...form}>
-        <FormPanel
-          className="kc-identity-information"
-          title={t("clients:identityInformation")}
-        >
-          <FormAccess isHorizontal role="view-clients">
-            <ClientSelect
-              name="client"
-              label="client"
-              namespace="clients"
-              helpText={"clients-help:client"}
-              defaultValue={client.clientId}
-            />
-            <UserSelect
-              name="user"
-              label="users"
-              helpText={t("clients-help:selectUser")}
-              defaultValue={[]}
-              variant={SelectVariant.typeahead}
-              isRequired={roles?.length === 0}
-            />
-            <FormGroup
-              label={t("roles")}
-              labelIcon={
-                <HelpItem
-                  helpText={t("clients-help:roles")}
-                  fieldLabelId="clients:roles"
-                />
-              }
-              fieldId="realmRole"
-              validated={errors.roleIds ? "error" : "default"}
-              helperTextInvalid={t("common:required")}
-              isRequired={user.length === 0}
-            >
-              <Controller
-                name="roleIds"
-                control={control}
+        <Panel>
+          <PanelHeader>
+            <Title headingLevel="h2">{t("clients:identityInformation")}</Title>
+          </PanelHeader>
+          <PanelMainBody>
+            <FormAccess isHorizontal role="view-clients">
+              <ClientSelect
+                name="client"
+                label="client"
+                namespace="clients"
+                helpText={"clients-help:client"}
+                defaultValue={client.clientId}
+              />
+              <UserSelect
+                name="user"
+                label="users"
+                helpText={t("clients-help:selectUser")}
                 defaultValue={[]}
-                rules={{
-                  validate: (value) =>
-                    (value || "").length > 0 || user.length > 0,
-                }}
-                render={({ field }) => (
-                  <Select
-                    placeholderText={t("selectARole")}
-                    variant={SelectVariant.typeaheadMulti}
-                    toggleId="role"
-                    onToggle={setRoleDropdownOpen}
-                    selections={field.value}
-                    onSelect={(_, v) => {
-                      const option = v.toString();
-                      if (field.value?.includes(option)) {
-                        field.onChange(
-                          field.value.filter((item: string) => item !== option)
-                        );
-                      } else {
-                        field.onChange([...(field.value || []), option]);
-                      }
-                      setRoleDropdownOpen(false);
-                    }}
-                    onClear={(event) => {
-                      event.stopPropagation();
-                      field.onChange([]);
-                    }}
-                    aria-label={t("realmRole")}
-                    isOpen={roleDropdownOpen}
-                  >
-                    {clientRoles.map((role) => (
-                      <SelectOption
-                        selected={role.name === field.value}
-                        key={role.name}
-                        value={role.name}
-                      />
-                    ))}
-                  </Select>
-                )}
+                variant={SelectVariant.typeahead}
+                isRequired={roles?.length === 0}
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel className="kc-permissions" title={t("common:permissions")}>
-          <FormAccess isHorizontal role="view-clients">
-            <FormGroup
-              label={t("applyToResourceType")}
-              fieldId="applyToResourceType"
-              labelIcon={
-                <HelpItem
-                  helpText={t("clients-help:applyToResourceType")}
-                  fieldLabelId="clients:applyToResourceType"
-                />
-              }
-            >
-              <Switch
-                id="applyToResource-switch"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={applyToResourceType}
-                onChange={setApplyToResourceType}
-                aria-label={t("applyToResourceType")}
-              />
-            </FormGroup>
-
-            {!applyToResourceType ? (
               <FormGroup
-                label={t("resourcesAndScopes")}
-                id="resourcesAndScopes"
+                label={t("roles")}
                 labelIcon={
                   <HelpItem
-                    helpText={t("clients-help:contextualAttributes")}
-                    fieldLabelId={`resourcesAndScopes`}
-                  />
-                }
-                fieldId="resourcesAndScopes"
-              >
-                <KeyBasedAttributeInput
-                  selectableValues={resources.map<AttributeType>((item) => ({
-                    name: item.name!,
-                    key: item._id!,
-                  }))}
-                  resources={resources}
-                  name="resources"
-                />
-              </FormGroup>
-            ) : (
-              <>
-                <FormGroup
-                  label={t("resourceType")}
-                  isRequired
-                  labelIcon={
-                    <HelpItem
-                      helpText={t("clients-help:resourceType")}
-                      fieldLabelId="clients:resourceType"
-                    />
-                  }
-                  fieldId="client"
-                  validated={errors.alias ? "error" : "default"}
-                  helperTextInvalid={t("common:required")}
-                >
-                  <KeycloakTextInput
-                    id="alias"
-                    aria-label="resource-type"
-                    data-testid="alias"
-                    {...register("alias", { required: true })}
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("authScopes")}
-                  labelIcon={
-                    <HelpItem
-                      helpText={t("clients-help:scopesSelect")}
-                      fieldLabelId="clients:client"
-                    />
-                  }
-                  fieldId="authScopes"
-                >
-                  <Controller
-                    name="authScopes"
-                    defaultValue={[]}
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        toggleId="authScopes"
-                        onToggle={setScopesDropdownOpen}
-                        onSelect={(_, v) => {
-                          const option = v.toString();
-                          if (field.value.includes(option)) {
-                            field.onChange(
-                              field.value.filter(
-                                (item: string) => item !== option
-                              )
-                            );
-                          } else {
-                            field.onChange([...field.value, option]);
-                          }
-                          setScopesDropdownOpen(false);
-                        }}
-                        selections={field.value}
-                        variant={SelectVariant.typeaheadMulti}
-                        typeAheadAriaLabel={t("authScopes")}
-                        isOpen={scopesDropdownOpen}
-                      >
-                        {scopes.map((scope) => (
-                          <SelectOption
-                            selected={field.value.includes(scope.name!)}
-                            key={scope.id}
-                            value={scope.name}
-                          />
-                        ))}
-                      </Select>
-                    )}
-                  />
-                </FormGroup>
-              </>
-            )}
-            <ExpandableSection
-              toggleText={t("contextualInfo")}
-              onToggle={() => setIsExpanded(!isExpanded)}
-              isExpanded={isExpanded}
-            >
-              <FormGroup
-                label={t("contextualAttributes")}
-                id="contextualAttributes"
-                labelIcon={
-                  <HelpItem
-                    helpText={t("clients-help:contextualAttributes")}
-                    fieldLabelId={`contextualAttributes`}
+                    helpText={t("clients-help:roles")}
+                    fieldLabelId="clients:roles"
                   />
                 }
+                fieldId="realmRole"
+                validated={errors.roleIds ? "error" : "default"}
                 helperTextInvalid={t("common:required")}
-                fieldId="contextualAttributes"
+                isRequired={user.length === 0}
               >
-                <KeyBasedAttributeInput
-                  selectableValues={defaultContextAttributes}
-                  name="context.attributes"
+                <Controller
+                  name="roleIds"
+                  control={control}
+                  defaultValue={[]}
+                  rules={{
+                    validate: (value) =>
+                      (value || "").length > 0 || user.length > 0,
+                  }}
+                  render={({ field }) => (
+                    <Select
+                      placeholderText={t("selectARole")}
+                      variant={SelectVariant.typeaheadMulti}
+                      toggleId="role"
+                      onToggle={setRoleDropdownOpen}
+                      selections={field.value}
+                      onSelect={(_, v) => {
+                        const option = v.toString();
+                        if (field.value?.includes(option)) {
+                          field.onChange(
+                            field.value.filter(
+                              (item: string) => item !== option
+                            )
+                          );
+                        } else {
+                          field.onChange([...(field.value || []), option]);
+                        }
+                        setRoleDropdownOpen(false);
+                      }}
+                      onClear={(event) => {
+                        event.stopPropagation();
+                        field.onChange([]);
+                      }}
+                      aria-label={t("realmRole")}
+                      isOpen={roleDropdownOpen}
+                    >
+                      {clientRoles.map((role) => (
+                        <SelectOption
+                          selected={role.name === field.value}
+                          key={role.name}
+                          value={role.name}
+                        />
+                      ))}
+                    </Select>
+                  )}
                 />
               </FormGroup>
-            </ExpandableSection>
-          </FormAccess>
-          <ActionGroup>
-            <Button
-              data-testid="authorization-eval"
-              id="authorization-eval"
-              className="pf-u-mr-md"
-              isDisabled={!isValid}
-              onClick={() => evaluate()}
-            >
-              {t("evaluate")}
-            </Button>
-            <Button
-              data-testid="authorization-revert"
-              id="authorization-revert"
-              className="pf-u-mr-md"
-              variant="link"
-              onClick={() => reset()}
-            >
-              {t("common:revert")}
-            </Button>
-          </ActionGroup>
-        </FormPanel>
+            </FormAccess>
+          </PanelMainBody>
+        </Panel>
+        <Panel>
+          <PanelHeader>
+            <Title headingLevel="h2">{t("clients:identityInformation")}</Title>
+          </PanelHeader>
+          <PanelMainBody>
+            <FormAccess isHorizontal role="view-clients">
+              <FormGroup
+                label={t("applyToResourceType")}
+                fieldId="applyToResourceType"
+                labelIcon={
+                  <HelpItem
+                    helpText={t("clients-help:applyToResourceType")}
+                    fieldLabelId="clients:applyToResourceType"
+                  />
+                }
+              >
+                <Switch
+                  id="applyToResource-switch"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={applyToResourceType}
+                  onChange={setApplyToResourceType}
+                  aria-label={t("applyToResourceType")}
+                />
+              </FormGroup>
+
+              {!applyToResourceType ? (
+                <FormGroup
+                  label={t("resourcesAndScopes")}
+                  id="resourcesAndScopes"
+                  labelIcon={
+                    <HelpItem
+                      helpText={t("clients-help:contextualAttributes")}
+                      fieldLabelId={`resourcesAndScopes`}
+                    />
+                  }
+                  fieldId="resourcesAndScopes"
+                >
+                  <KeyBasedAttributeInput
+                    selectableValues={resources.map<AttributeType>((item) => ({
+                      name: item.name!,
+                      key: item._id!,
+                    }))}
+                    resources={resources}
+                    name="resources"
+                  />
+                </FormGroup>
+              ) : (
+                <>
+                  <FormGroup
+                    label={t("resourceType")}
+                    isRequired
+                    labelIcon={
+                      <HelpItem
+                        helpText={t("clients-help:resourceType")}
+                        fieldLabelId="clients:resourceType"
+                      />
+                    }
+                    fieldId="client"
+                    validated={errors.alias ? "error" : "default"}
+                    helperTextInvalid={t("common:required")}
+                  >
+                    <KeycloakTextInput
+                      id="alias"
+                      aria-label="resource-type"
+                      data-testid="alias"
+                      {...register("alias", { required: true })}
+                    />
+                  </FormGroup>
+                  <FormGroup
+                    label={t("authScopes")}
+                    labelIcon={
+                      <HelpItem
+                        helpText={t("clients-help:scopesSelect")}
+                        fieldLabelId="clients:client"
+                      />
+                    }
+                    fieldId="authScopes"
+                  >
+                    <Controller
+                      name="authScopes"
+                      defaultValue={[]}
+                      control={control}
+                      render={({ field }) => (
+                        <Select
+                          toggleId="authScopes"
+                          onToggle={setScopesDropdownOpen}
+                          onSelect={(_, v) => {
+                            const option = v.toString();
+                            if (field.value.includes(option)) {
+                              field.onChange(
+                                field.value.filter(
+                                  (item: string) => item !== option
+                                )
+                              );
+                            } else {
+                              field.onChange([...field.value, option]);
+                            }
+                            setScopesDropdownOpen(false);
+                          }}
+                          selections={field.value}
+                          variant={SelectVariant.typeaheadMulti}
+                          typeAheadAriaLabel={t("authScopes")}
+                          isOpen={scopesDropdownOpen}
+                        >
+                          {scopes.map((scope) => (
+                            <SelectOption
+                              selected={field.value.includes(scope.name!)}
+                              key={scope.id}
+                              value={scope.name}
+                            />
+                          ))}
+                        </Select>
+                      )}
+                    />
+                  </FormGroup>
+                </>
+              )}
+              <ExpandableSection
+                toggleText={t("contextualInfo")}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                isExpanded={isExpanded}
+              >
+                <FormGroup
+                  label={t("contextualAttributes")}
+                  id="contextualAttributes"
+                  labelIcon={
+                    <HelpItem
+                      helpText={t("clients-help:contextualAttributes")}
+                      fieldLabelId={`contextualAttributes`}
+                    />
+                  }
+                  helperTextInvalid={t("common:required")}
+                  fieldId="contextualAttributes"
+                >
+                  <KeyBasedAttributeInput
+                    selectableValues={defaultContextAttributes}
+                    name="context.attributes"
+                  />
+                </FormGroup>
+              </ExpandableSection>
+            </FormAccess>
+          </PanelMainBody>
+        </Panel>
+        <ActionGroup>
+          <Button
+            data-testid="authorization-eval"
+            id="authorization-eval"
+            className="pf-u-mr-md"
+            isDisabled={!isValid}
+            onClick={() => evaluate()}
+          >
+            {t("evaluate")}
+          </Button>
+          <Button
+            data-testid="authorization-revert"
+            id="authorization-revert"
+            className="pf-u-mr-md"
+            variant="link"
+            onClick={() => reset()}
+          >
+            {t("common:revert")}
+          </Button>
+        </ActionGroup>
       </FormProvider>
     </PageSection>
   );

js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx

@@ -13,7 +13,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 import { useFetch } from "../../utils/useFetch";
@@ -21,8 +21,6 @@ import { prettyPrintJSON } from "../../util";
 import { useParams } from "../../utils/useParams";
 import type { ClientParams } from "../routes/Client";
 
-import "./authorization-details.css";
-
 export const AuthorizationExport = () => {
   const { t } = useTranslation("clients");
   const { clientId } = useParams<ClientParams>();
@@ -82,6 +80,7 @@ export const AuthorizationExport = () => {
             resizeOrientation="vertical"
             value={code}
             aria-label={t("authDetails")}
+            rows={10}
           />
         </FormGroup>
         <ActionGroup>

js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx

@@ -21,7 +21,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";

js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx

@@ -22,9 +22,9 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
-import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
+import { FormAccess } from "../../components/form/FormAccess";
 import type { KeyValueType } from "../../components/key-value-form/key-value-convert";
+import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";

js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx

@@ -17,7 +17,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/authorization/Settings.tsx

@@ -1,4 +1,3 @@
-import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
 import {
   AlertVariant,
   Button,
@@ -14,14 +13,15 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
+import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
-import { useFetch } from "../../utils/useFetch";
 import useToggle from "../../utils/useToggle";
-import { SaveReset } from "../advanced/SaveReset";
 import { DecisionStrategySelect } from "./DecisionStrategySelect";
 import { ImportDialog } from "./ImportDialog";
+import { useFetch } from "../../utils/useFetch";
 
 const POLICY_ENFORCEMENT_MODES = [
   "ENFORCING",
@@ -172,10 +172,11 @@ export const AuthorizationSettings = ({ clientId }: { clientId: string }) => {
             )}
           />
         </FormGroup>
-        <SaveReset
+        <FixedButtonsGroup
           name="authenticationSettings"
           reset={() => reset(resource)}
           isActive
+          isSubmit
         />
       </FormAccess>
     </PageSection>

js/apps/admin-ui/src/clients/authorization/auth-evaluate.css

@@ -1,34 +0,0 @@
-td#permit {
-  color: var(--pf-global--success-color--100);
-  font-weight: bold;;
-}
-
-td#deny {
-  color: var(--pf-global--danger-color--100);
-  font-weight: bold;
-}
-
-.kc-evaluated-options {
-    padding-top: 300px
-}
-
-button#back-btn {
-  margin-right: var(--pf-global--spacer--md);
-}
-
-button#reevaluate-btn {
-  margin-right: var(--pf-global--spacer--md);
-}
-
-.kc-identity-information, .kc-permissions {
-  border: none !important;
-}
-
-.kc-identity-information > div.pf-c-card__header.kc-form-panel__header {
-  padding-top: 0;
-}
-
-#resourcesAndScopes > .pf-c-form__group-control > .kc-attributes__table > thead #key,
-#resourcesAndScopes > .pf-c-form__group-control > .kc-attributes__table > thead #value {
-  display:none
-}

js/apps/admin-ui/src/clients/authorization/authorization-details.css

@@ -1,3 +0,0 @@
-textarea#authorizationDetails {
-  height: 280px;
-}

js/apps/admin-ui/src/clients/authorization/evaluate/Results.tsx

@@ -1,29 +1,30 @@
-import { KeyboardEvent, useMemo, useState } from "react";
 import {
-  Select,
-  SelectVariant,
-  SelectOption,
-  PageSection,
-  ActionGroup,
   Button,
-  TextInput,
   ButtonVariant,
+  Divider,
+  Form,
   InputGroup,
+  PageSection,
+  Select,
+  SelectOption,
+  SelectVariant,
+  TextInput,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
-  Divider,
 } from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
 import { SearchIcon } from "@patternfly/react-icons";
 import { TableComposable, Th, Thead, Tr } from "@patternfly/react-table";
+import { KeyboardEvent, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import type EvaluationResultRepresentation from "@keycloak/keycloak-admin-client/lib/defs/evaluationResultRepresentation";
 import type PolicyEvaluationResponse from "@keycloak/keycloak-admin-client/lib/defs/policyEvaluationResponse";
-import { AuthorizationEvaluateResource } from "../AuthorizationEvaluateResource";
+import { FixedButtonsGroup } from "../../../components/form/FixedButtonGroup";
 import { ListEmptyState } from "../../../components/list-empty-state/ListEmptyState";
-import { AuthorizationDataModal } from "../AuthorizationDataModal";
 import useToggle from "../../../utils/useToggle";
+import { AuthorizationDataModal } from "../AuthorizationDataModal";
+import { AuthorizationEvaluateResource } from "../AuthorizationEvaluateResource";
 
 type ResultProps = {
   evaluateResult: PolicyEvaluationResponse;
@@ -174,20 +175,22 @@ export const Results = ({ evaluateResult, refresh, back }: ResultProps) => {
           />
         </>
       )}
-      <ActionGroup className="kc-evaluated-options">
-        <Button data-testid="authorization-eval" id="back-btn" onClick={back}>
-          {t("common:back")}
-        </Button>
-        <Button
-          data-testid="authorization-reevaluate"
-          id="reevaluate-btn"
-          variant="secondary"
-          onClick={refresh}
-        >
-          {t("clients:reevaluate")}
-        </Button>
-        <AuthorizationDataModal data={evaluateResult.rpt!} />
-      </ActionGroup>
+      <Form>
+        <FixedButtonsGroup name="authorization">
+          <Button data-testid="authorization-eval" id="back-btn" onClick={back}>
+            {t("common:back")}
+          </Button>{" "}
+          <Button
+            data-testid="authorization-reevaluate"
+            id="reevaluate-btn"
+            variant="secondary"
+            onClick={refresh}
+          >
+            {t("clients:reevaluate")}
+          </Button>{" "}
+          <AuthorizationDataModal data={evaluateResult.rpt!} />
+        </FixedButtonsGroup>
+      </Form>
     </PageSection>
   );
 };

js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx

@@ -15,7 +15,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { adminClient } from "../../../admin-client";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../../components/form-access/FormAccess";
+import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useFetch } from "../../../utils/useFetch";

js/apps/admin-ui/src/clients/credentials/Credentials.tsx

@@ -25,15 +25,13 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { useFetch } from "../../utils/useFetch";
 import { FormFields } from "../ClientDetails";
 import { ClientSecret } from "./ClientSecret";
 import { SignedJWT } from "./SignedJWT";
 import { X509 } from "./X509";
 
-import "./credentials.css";
-
 type AccessToken = {
   registrationAccessToken: string;
 };
@@ -189,12 +187,9 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
             {(clientAuthenticatorType === "client-jwt" ||
               clientAuthenticatorType === "client-secret-jwt") && <SignedJWT />}
             {clientAuthenticatorType === "client-jwt" && (
-              <Alert
-                variant="info"
-                isInline
-                className="kc-signedJWTAlert"
-                title={t("signedJWTConfirm")}
-              />
+              <FormGroup>
+                <Alert variant="info" isInline title={t("signedJWTConfirm")} />
+              </FormGroup>
             )}
             {clientAuthenticatorType === "client-x509" && <X509 />}
             <ActionGroup>

js/apps/admin-ui/src/clients/credentials/credentials.css

@@ -1,9 +0,0 @@
-.kc-signedJWTAlert {
-  margin: 0.1rem 0 0 10.4rem;
-}
-
-@media (max-width: 768px) {
-  .kc-signedJWTAlert {
-    margin: 0.5rem 0 0 0;
-  }
-}

js/apps/admin-ui/src/clients/import/ImportForm.tsx

@@ -14,7 +14,7 @@ import { Link, useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { FileUploadForm } from "../../components/json-file-upload/FileUploadForm";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -10,14 +10,14 @@ import {
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
-import { HelpItem } from "ui-shared";
 
+import { FormAccess } from "../../components/form/FormAccess";
+import { ViewHeader } from "../../components/view-header/ViewHeader";
+import { HelpItem } from "ui-shared";
+import { TimeSelector } from "../../components/time-selector/TimeSelector";
+import { Link, useNavigate } from "react-router-dom";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
-import { TimeSelector } from "../../components/time-selector/TimeSelector";
-import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toClients } from "../routes/Clients";
 import { AccessTokenDialog } from "./AccessTokenDialog";

js/apps/admin-ui/src/clients/keys/Keys.tsx

@@ -22,7 +22,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { convertAttributeNameToForm } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/keys/SamlKeys.tsx

@@ -21,7 +21,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { FormPanel } from "../../components/scroll-form/FormPanel";
 import { convertAttributeNameToForm } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/clients/registration/DetailProvider.tsx

@@ -19,7 +19,7 @@ import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx

@@ -1,34 +1,33 @@
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
 import {
   Button,
   ButtonVariant,
   Dropdown,
+  DropdownDirection,
+  DropdownItem,
   DropdownToggle,
   Modal,
   ModalVariant,
-  DropdownDirection,
-  DropdownItem,
   Select,
   SelectOption,
   SelectVariant,
-  SelectDirection,
 } from "@patternfly/react-core";
 import {
   CaretDownIcon,
   CaretUpIcon,
   FilterIcon,
 } from "@patternfly/react-icons";
-import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import {
   ClientScopeType,
   clientScopeTypesDropdown,
 } from "../../components/client-scope/ClientScopeTypes";
-import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
-import { getProtocolName } from "../utils";
+import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
 import useToggle from "../../utils/useToggle";
+import { getProtocolName } from "../utils";
 
 import "./client-scopes.css";
 
@@ -268,14 +267,13 @@ export const AddScopeDialog = ({
               <Select
                 variant={SelectVariant.single}
                 className="kc-protocolType-select"
-                aria-label="Select Input"
+                aria-label={t("common:selectOne")}
                 onToggle={toggleIsProtocolTypeDropdownOpen}
                 onSelect={(_, value) =>
                   onProtocolTypeDropdownSelect(value.toString())
                 }
                 selections={protocolType}
                 isOpen={isProtocolTypeDropdownOpen}
-                direction={SelectDirection.down}
               >
                 {protocolTypeOptions}
               </Select>

js/apps/admin-ui/src/clients/scopes/DecicatedScope.tsx

@@ -9,11 +9,12 @@ import {
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
 import { RoleMapping, Row } from "../../components/role-mapping/RoleMapping";
 import { useAccess } from "../../context/access/Access";
 

js/apps/admin-ui/src/components/form/FixedButtonGroup.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "react-i18next";
+import { ActionGroup, ActionGroupProps, Button } from "@patternfly/react-core";
+import { PropsWithChildren } from "react";
+
+import style from "./fixed-buttons.module.css";
+
+type FixedButtonGroupProps = ActionGroupProps & {
+  name: string;
+  save?: () => void;
+  reset?: () => void;
+  isSubmit?: boolean;
+  isActive?: boolean;
+};
+
+export const FixedButtonsGroup = ({
+  name,
+  save,
+  reset,
+  isSubmit = false,
+  isActive = true,
+  children,
+  ...rest
+}: PropsWithChildren<FixedButtonGroupProps>) => {
+  const { t } = useTranslation("common");
+  return (
+    <ActionGroup className={style.buttonGroup} {...rest}>
+      {(save || isSubmit) && (
+        <Button
+          isDisabled={!isActive}
+          data-testid={`${name}-save`}
+          onClick={() => save?.()}
+          type={isSubmit ? "submit" : "button"}
+        >
+          {t("save")}
+        </Button>
+      )}
+      {reset && (
+        <Button
+          isDisabled={!isActive}
+          data-testid={`${name}-revert`}
+          variant="link"
+          onClick={() => reset()}
+        >
+          {t("revert")}
+        </Button>
+      )}
+      {children}
+    </ActionGroup>
+  );
+};

js/apps/admin-ui/src/components/form/fixed-buttons.module.css

@@ -0,0 +1,11 @@
+.buttonGroup {
+  position: fixed;
+  bottom: 0px;
+  background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
+  padding-top: var(--pf-global--spacer--md);
+  padding-bottom: var(--pf-global--spacer--sm);
+  padding-left: var(--pf-global--spacer--md);
+  width: 100%;
+  border-top: 1px solid var(--pf-global--BorderColor--100);
+  margin-left: calc(-1 * var(--pf-global--spacer--lg));
+}

js/apps/admin-ui/src/components/key-value-form/AttributeForm.tsx

@@ -3,7 +3,7 @@ import { ActionGroup, Button } from "@patternfly/react-core";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../form-access/FormAccess";
+import { FormAccess } from "../form/FormAccess";
 import type { KeyValueType } from "./key-value-convert";
 import { KeyValueInput } from "./KeyValueInput";
 

js/apps/admin-ui/src/components/role-form/RoleForm.tsx

@@ -9,7 +9,7 @@ import { SubmitHandler, UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, To } from "react-router-dom";
 
-import { FormAccess } from "../form-access/FormAccess";
+import { FormAccess } from "../form/FormAccess";
 import { AttributeForm } from "../key-value-form/AttributeForm";
 import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
 import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";

js/apps/admin-ui/src/identity-providers/add/AddIdentityProvider.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toUpperCase } from "../../util";

js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx

@@ -20,7 +20,7 @@ import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import type { AttributeForm } from "../../components/key-value-form/AttributeForm";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";

js/apps/admin-ui/src/identity-providers/add/AddOpenIdConnect.tsx

@@ -11,7 +11,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toIdentityProvider } from "../routes/IdentityProvider";

js/apps/admin-ui/src/identity-providers/add/AddSamlConnect.tsx

@@ -11,7 +11,7 @@ import { Link, useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toIdentityProvider } from "../routes/IdentityProvider";

js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx

@@ -1,7 +1,6 @@
 import type IdentityProviderMapperRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperRepresentation";
 import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
 import {
-  ActionGroup,
   AlertVariant,
   Button,
   ButtonVariant,
@@ -21,7 +20,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { PermissionsTab } from "../../components/permission-tab/PermissionTab";
@@ -371,20 +371,7 @@ export default function DetailSettings() {
         >
           <AdvancedSettings isOIDC={isOIDC!} isSAML={isSAML!} />
 
-          <ActionGroup className="keycloak__form_actions">
-            <Button data-testid={"save"} type="submit">
-              {t("common:save")}
-            </Button>
-            <Button
-              data-testid={"revert"}
-              variant="link"
-              onClick={() => {
-                reset();
-              }}
-            >
-              {t("common:revert")}
-            </Button>
-          </ActionGroup>
+          <FixedButtonsGroup name="idp-details" isSubmit reset={reset} />
         </FormAccess>
       ),
     },

js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx

@@ -31,7 +31,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";

js/apps/admin-ui/src/realm-settings/EmailTab.tsx

@@ -18,7 +18,7 @@ import { Link } from "react-router-dom";
 import { HelpItem } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { PasswordInput } from "../components/password-input/PasswordInput";
 import { FormPanel } from "../components/scroll-form/FormPanel";

js/apps/admin-ui/src/realm-settings/ExecutorForm.tsx

@@ -20,7 +20,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { DynamicComponents } from "../components/dynamic/DynamicComponents";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { useFetch } from "../utils/useFetch";

js/apps/admin-ui/src/realm-settings/GeneralTab.tsx

@@ -19,7 +19,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../admin-client";
 import { FormattedLink } from "../components/external-link/FormattedLink";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { KeyValueInput } from "../components/key-value-form/KeyValueInput";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../context/realm-context/RealmContext";

js/apps/admin-ui/src/realm-settings/LocalizationTab.tsx

@@ -38,7 +38,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import type { KeyValueType } from "../components/key-value-form/key-value-convert";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { FormPanel } from "../components/scroll-form/FormPanel";

js/apps/admin-ui/src/realm-settings/LoginTab.tsx

@@ -5,7 +5,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import { useRealm } from "../context/realm-context/RealmContext";
 

js/apps/admin-ui/src/realm-settings/NewAttributeSettings.tsx

@@ -1,7 +1,6 @@
 import type UserProfileConfig from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
 import type { UserProfileAttribute } from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
 import {
-  ActionGroup,
   AlertVariant,
   Button,
   Form,
@@ -15,6 +14,7 @@ import { Link, useNavigate } from "react-router-dom";
 
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
+import { FixedButtonsGroup } from "../components/form/FixedButtonGroup";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { convertToFormValues } from "../util";
@@ -98,7 +98,7 @@ const CreateAttributeFormContent = ({
         ]}
       />
       <Form onSubmit={form.handleSubmit(save)}>
-        <ActionGroup className="keycloak__form_actions">
+        <FixedButtonsGroup name="attribute-settings">
           <Button
             variant="primary"
             type="submit"
@@ -113,7 +113,7 @@ const CreateAttributeFormContent = ({
           >
             {t("common:cancel")}
           </Link>
-        </ActionGroup>
+        </FixedButtonsGroup>
       </Form>
     </UserProfileProvider>
   );

js/apps/admin-ui/src/realm-settings/NewClientPolicyCondition.tsx

@@ -22,7 +22,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { DynamicComponents } from "../components/dynamic/DynamicComponents";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx

@@ -30,7 +30,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";

js/apps/admin-ui/src/realm-settings/SessionsTab.tsx

@@ -10,7 +10,7 @@ import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import { TimeSelector } from "../components/time-selector/TimeSelector";

js/apps/admin-ui/src/realm-settings/ThemesTab.tsx

@@ -12,7 +12,7 @@ import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { convertToFormValues } from "../util";

js/apps/admin-ui/src/realm-settings/TokensTab.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../components/form-access/FormAccess";
+import { FormAccess } from "../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { FormPanel } from "../components/scroll-form/FormPanel";

js/apps/admin-ui/src/realm-settings/event-config/EventsTab.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertToFormValues } from "../../util";
 import { useFetch } from "../../utils/useFetch";

js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProviderForm.tsx

@@ -16,7 +16,7 @@ import { HelpItem } from "ui-shared";
 import { adminClient } from "../../../admin-client";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { DynamicComponents } from "../../../components/dynamic/DynamicComponents";
-import { FormAccess } from "../../../components/form-access/FormAccess";
+import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/realm-settings/security-defences/BruteForceDetection.tsx

@@ -10,7 +10,7 @@ import { useEffect } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { convertToFormValues } from "../../util";
 import { Time } from "./Time";

js/apps/admin-ui/src/realm-settings/security-defences/HeadersForm.tsx

@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { ActionGroup, Button } from "@patternfly/react-core";
 
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpLinkTextInput } from "./HelpLinkTextInput";
 import { convertToFormValues } from "../../util";
 

js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupForm.tsx

@@ -12,7 +12,7 @@ import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import type { KeyValueType } from "../../components/key-value-form/key-value-convert";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";

js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeAnnotations.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { FormGroup, Grid, GridItem } from "@patternfly/react-core";
 
-import { FormAccess } from "../../../components/form-access/FormAccess";
+import { FormAccess } from "../../../components/form/FormAccess";
 import { KeyValueInput } from "../../../components/key-value-form/KeyValueInput";
 
 import "../../realm-settings-section.css";

js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../../admin-client";
-import { FormAccess } from "../../../components/form-access/FormAccess";
+import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { useFetch } from "../../../utils/useFetch";

js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributePermission.tsx

@@ -2,7 +2,7 @@ import { Checkbox, FormGroup, Grid, GridItem } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../../components/form-access/FormAccess";
+import { FormAccess } from "../../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 
 import "../../realm-settings-section.css";

js/apps/admin-ui/src/realm/add/NewRealmForm.tsx

@@ -13,7 +13,7 @@ import { useNavigate } from "react-router-dom";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";

js/apps/admin-ui/src/user-federation/UserFederationLdapForm.tsx

@@ -1,5 +1,5 @@
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
-import { ActionGroup, Button, Form } from "@patternfly/react-core";
+import { Button, Form } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -15,6 +15,7 @@ import { LdapSettingsSearching } from "./ldap/LdapSettingsSearching";
 import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization";
 import { toUserFederation } from "./routes/UserFederation";
 import { SettingsCache } from "./shared/SettingsCache";
+import { FixedButtonsGroup } from "../components/form/FixedButtonGroup";
 
 export type LdapComponentRepresentation = ComponentRepresentation & {
   config?: {
@@ -71,15 +72,11 @@ export const UserFederationLdapForm = ({
         ]}
       />
       <Form onSubmit={form.handleSubmit(onSubmit)}>
-        <ActionGroup className="keycloak__form_actions">
-          <Button
-            isDisabled={!form.formState.isDirty}
-            variant="primary"
-            type="submit"
-            data-testid="ldap-save"
-          >
-            {t("common:save")}
-          </Button>
+        <FixedButtonsGroup
+          name="ldap"
+          isActive={form.formState.isDirty}
+          isSubmit
+        >
           <Button
             variant="link"
             onClick={() => navigate(toUserFederation({ realm }))}
@@ -87,7 +84,7 @@ export const UserFederationLdapForm = ({
           >
             {t("common:cancel")}
           </Button>
-        </ActionGroup>
+        </FixedButtonsGroup>
       </Form>
     </>
   );

js/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx

@@ -14,7 +14,7 @@ import { HelpItem } from "ui-shared";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";

js/apps/admin-ui/src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsAdvanced.tsx

@@ -5,7 +5,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertFormToSettings } from "./LdapSettingsConnection";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -17,7 +17,7 @@ import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { PasswordInput } from "../../components/password-input/PasswordInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx

@@ -2,7 +2,7 @@ import { FormGroup, Switch } from "@patternfly/react-core";
 import { Controller, UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { Controller, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSynchronization.tsx

@@ -2,7 +2,7 @@ import { FormGroup, Switch } from "@patternfly/react-core";
 import { Controller, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { FormAccess } from "../../components/form-access/FormAccess";
+import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";