genericly we want all sections to look like this (#473)

* genericly we want all sections to look like this

* remove the divider when there are tabs on the page
* fix insert on keycloakTab component

* lint

src/authentication/AuthenticationSection.tsx

@@ -185,8 +185,8 @@ export const AuthenticationSection = () => {
           }}
         />
       )}
-      <ViewHeader titleKey="authentication:title" subKey="" />
+      <ViewHeader titleKey="authentication:title" subKey="" divider={false} />
-      <PageSection variant="light">
+      <PageSection variant="light" className="pf-u-p-0">
         <KeycloakTabs isBox>
           <Tab
             eventKey="flows"

src/client-scopes/ClientScopesSection.tsx

@@ -32,7 +32,7 @@ export const ClientScopesSection = () => {
         titleKey="clientScopes"
         subKey="client-scopes:clientScopeExplain"
       />
-      <PageSection variant="light">
+      <PageSection variant="light" className="pf-u-p-0">
         <KeycloakDataTable
           loader={loader}
           ariaLabelKey="client-scopes:clientScopeList"

src/clients/ClientDetails.tsx

@@ -274,15 +274,7 @@ export const ClientDetails = () => {
       />
       <PageSection variant="light" className="pf-u-p-0">
         <FormProvider {...form}>
-          <KeycloakTabs
+          <KeycloakTabs isBox>
-            isBox
-            inset={{
-              default: "insetNone",
-              md: "insetSm",
-              xl: "inset2xl",
-              "2xl": "insetLg",
-            }}
-          >
             <Tab
               id="settings"
               eventKey="settings"

src/clients/ClientsSection.tsx

@@ -90,15 +90,7 @@ export const ClientsSection = () => {
         divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs
+        <KeycloakTabs isBox>
-          isBox
-          inset={{
-            default: "insetNone",
-            md: "insetSm",
-            xl: "inset2xl",
-            "2xl": "insetLg",
-          }}
-        >
           <Tab
             data-testid="list"
             eventKey="list"

src/components/keycloak-tabs/KeycloakTabs.tsx

@@ -39,6 +39,12 @@ export const KeycloakTabs = ({
   const path = match.path.substr(0, pathIndex);
   return (
     <Tabs
+      inset={{
+        default: "insetNone",
+        md: "insetSm",
+        xl: "inset2xl",
+        "2xl": "insetLg",
+      }}
       activeKey={tab}
       onSelect={(_, key) =>
         history.push(createUrl(path, { ...params, [paramName]: key as string }))

src/events/EventsSection.tsx

@@ -52,8 +52,12 @@ export const EventsSection = () => {
 
   return (
     <>
-      <ViewHeader titleKey="events:title" subKey="events:eventExplain" />
+      <ViewHeader
-      <PageSection variant="light">
+        titleKey="events:title"
+        subKey="events:eventExplain"
+        divider={false}
+      />
+      <PageSection variant="light" className="pf-u-p-0">
         <KeycloakTabs isBox>
           <Tab
             eventKey="userEvents"

src/groups/GroupAttributes.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useFieldArray, useForm } from "react-hook-form";
-import { AlertVariant } from "@patternfly/react-core";
+import {
+  AlertVariant,
+  PageSection,
+  PageSectionVariants,
+} from "@patternfly/react-core";
 
 import { useAlerts } from "../components/alert/Alerts";
 import {
@@ -58,15 +62,17 @@ export const GroupAttributes = () => {
   };
 
   return (
-    <AttributesForm
+    <PageSection variant={PageSectionVariants.light}>
-      form={form}
+      <AttributesForm
-      save={save}
+        form={form}
-      array={{ fields, append, remove }}
+        save={save}
-      reset={() =>
+        array={{ fields, append, remove }}
-        form.reset({
+        reset={() =>
-          attributes: convertAttributes(),
+          form.reset({
-        })
+            attributes: convertAttributes(),
-      }
+          })
-    />
+        }
+      />
+    </PageSection>
   );
 };

src/groups/GroupsSection.tsx

@@ -112,7 +112,8 @@ export const GroupsSection = () => {
       )}
       <ViewHeader
         titleKey="groups:groups"
-        subKey="groups:groupsDescription"
+        subKey={!id ? "groups:groupsDescription" : ""}
+        divider={!id}
         dropdownItems={
           id
             ? [
@@ -143,11 +144,16 @@ export const GroupsSection = () => {
             : [SearchDropdown]
         }
       />
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
         {subGroups.length > 0 && (
           <Tabs
+            inset={{
+              default: "insetNone",
+              md: "insetSm",
+              xl: "inset2xl",
+              "2xl": "insetLg",
+            }}
             activeKey={activeTab}
-            isSecondary
             onSelect={(_, key) => setActiveTab(key as number)}
             isBox
           >

src/realm-settings/RealmSettingsSection.tsx

@@ -20,7 +20,6 @@ import {
   StackItem,
   Switch,
   Tab,
-  Tabs,
   TabTitleText,
   TextInput,
 } from "@patternfly/react-core";
@@ -35,6 +34,7 @@ import { useAlerts } from "../components/alert/Alerts";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormattedLink } from "../components/external-link/FormattedLink";
+import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -89,6 +89,7 @@ const RealmSettingsHeader = ({
       <ViewHeader
         titleKey={toUpperCase(realmName)}
         subKey=""
+        divider={false}
         dropdownItems={[
           <DropdownItem key="import" onClick={() => {}}>
             {t("partialImport")}
@@ -125,7 +126,6 @@ export const RealmSettingsSection = () => {
   const { addAlert } = useAlerts();
   const { register, control, getValues, setValue, handleSubmit } = useForm();
   const [realm, setRealm] = useState<RealmRepresentation>();
-  const [activeTab, setActiveTab] = useState(0);
   const [open, setOpen] = useState(false);
 
   const baseUrl = getBaseUrl(adminClient);
@@ -171,165 +171,170 @@ export const RealmSettingsSection = () => {
         )}
       />
 
-      <PageSection variant="light">
+      <PageSection variant="light" className="pf-u-p-0">
-        <Tabs
+        <KeycloakTabs isBox>
-          activeKey={activeTab}
+          <Tab
-          onSelect={(_, key) => setActiveTab(key as number)}
+            eventKey="general"
-          isBox
+            title={<TabTitleText>{t("general")}</TabTitleText>}
-        >
+          >
-          <Tab eventKey={0} title={<TabTitleText>{t("general")}</TabTitleText>}>
+            <PageSection variant="light">
-            <FormAccess
+              <FormAccess
-              isHorizontal
+                isHorizontal
-              role="manage-realm"
+                role="manage-realm"
-              className="pf-u-mt-lg"
+                className="pf-u-mt-lg"
-              onSubmit={handleSubmit(save)}
+                onSubmit={handleSubmit(save)}
-            >
-              <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
-                <ClipboardCopy isReadOnly>{realmName}</ClipboardCopy>
-              </FormGroup>
-              <FormGroup label={t("displayName")} fieldId="kc-display-name">
-                <TextInput
-                  type="text"
-                  id="kc-display-name"
-                  name="displayName"
-                  ref={register}
-                />
-              </FormGroup>
-              <FormGroup
-                label={t("htmlDisplayName")}
-                fieldId="kc-html-display-name"
               >
-                <TextInput
+                <FormGroup
-                  type="text"
+                  label={t("realmId")}
-                  id="kc-html-display-name"
+                  fieldId="kc-realm-id"
-                  name="displayNameHtml"
+                  isRequired
-                  ref={register}
+                >
-                />
+                  <ClipboardCopy isReadOnly>{realmName}</ClipboardCopy>
-              </FormGroup>
+                </FormGroup>
-              <FormGroup
+                <FormGroup label={t("displayName")} fieldId="kc-display-name">
-                label={t("frontendUrl")}
+                  <TextInput
-                fieldId="kc-frontend-url"
+                    type="text"
-                labelIcon={
+                    id="kc-display-name"
-                  <HelpItem
+                    name="displayName"
-                    helpText="realm-settings-help:frontendUrl"
+                    ref={register}
-                    forLabel={t("frontendUrl")}
-                    forID="kc-frontend-url"
                   />
-                }
+                </FormGroup>
-              >
+                <FormGroup
-                <TextInput
+                  label={t("htmlDisplayName")}
-                  type="text"
+                  fieldId="kc-html-display-name"
-                  id="kc-frontend-url"
+                >
-                  name="attributes.frontendUrl"
+                  <TextInput
-                  ref={register}
+                    type="text"
-                />
+                    id="kc-html-display-name"
-              </FormGroup>
+                    name="displayNameHtml"
-              <FormGroup
+                    ref={register}
-                label={t("requireSsl")}
-                fieldId="kc-require-ssl"
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:requireSsl"
-                    forLabel={t("requireSsl")}
-                    forID="kc-require-ssl"
                   />
-                }
+                </FormGroup>
-              >
+                <FormGroup
-                <Controller
+                  label={t("frontendUrl")}
-                  name="sslRequired"
+                  fieldId="kc-frontend-url"
-                  defaultValue="none"
+                  labelIcon={
-                  control={control}
+                    <HelpItem
-                  render={({ onChange, value }) => (
+                      helpText="realm-settings-help:frontendUrl"
-                    <Select
+                      forLabel={t("frontendUrl")}
-                      toggleId="kc-require-ssl"
+                      forID="kc-frontend-url"
-                      onToggle={() => setOpen(!open)}
-                      onSelect={(_, value) => {
-                        onChange(value as string);
-                        setOpen(false);
-                      }}
-                      selections={value}
-                      variant={SelectVariant.single}
-                      aria-label={t("requireSsl")}
-                      isOpen={open}
-                    >
-                      {requireSslTypes.map((sslType) => (
-                        <SelectOption
-                          selected={sslType === value}
-                          key={sslType}
-                          value={sslType}
-                        >
-                          {t(`sslType.${sslType}`)}
-                        </SelectOption>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </FormGroup>
-              <FormGroup
-                hasNoPaddingTop
-                label={t("userManagedAccess")}
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:userManagedAccess"
-                    forLabel={t("userManagedAccess")}
-                    forID="kc-user-manged-access"
-                  />
-                }
-                fieldId="kc-user-manged-access"
-              >
-                <Controller
-                  name="userManagedAccessAllowed"
-                  control={control}
-                  defaultValue={false}
-                  render={({ onChange, value }) => (
-                    <Switch
-                      id="kc-user-manged-access"
-                      label={t("common:on")}
-                      labelOff={t("common:off")}
-                      isChecked={value}
-                      onChange={onChange}
                     />
-                  )}
+                  }
-                />
+                >
-              </FormGroup>
+                  <TextInput
-              <FormGroup
+                    type="text"
-                label={t("endpoints")}
+                    id="kc-frontend-url"
-                labelIcon={
+                    name="attributes.frontendUrl"
-                  <HelpItem
+                    ref={register}
-                    helpText="realm-settings-help:endpoints"
-                    forLabel={t("endpoints")}
-                    forID="kc-endpoints"
                   />
-                }
+                </FormGroup>
-                fieldId="kc-endpoints"
+                <FormGroup
-              >
+                  label={t("requireSsl")}
-                <Stack>
+                  fieldId="kc-require-ssl"
-                  <StackItem>
+                  labelIcon={
-                    <FormattedLink
+                    <HelpItem
-                      href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
+                      helpText="realm-settings-help:requireSsl"
-                      title={t("openEndpointConfiguration")}
+                      forLabel={t("requireSsl")}
+                      forID="kc-require-ssl"
                     />
-                  </StackItem>
+                  }
-                  <StackItem>
+                >
-                    <FormattedLink
+                  <Controller
-                      href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
+                    name="sslRequired"
-                      title={t("samlIdentityProviderMetadata")}
+                    defaultValue="none"
+                    control={control}
+                    render={({ onChange, value }) => (
+                      <Select
+                        toggleId="kc-require-ssl"
+                        onToggle={() => setOpen(!open)}
+                        onSelect={(_, value) => {
+                          onChange(value as string);
+                          setOpen(false);
+                        }}
+                        selections={value}
+                        variant={SelectVariant.single}
+                        aria-label={t("requireSsl")}
+                        isOpen={open}
+                      >
+                        {requireSslTypes.map((sslType) => (
+                          <SelectOption
+                            selected={sslType === value}
+                            key={sslType}
+                            value={sslType}
+                          >
+                            {t(`sslType.${sslType}`)}
+                          </SelectOption>
+                        ))}
+                      </Select>
+                    )}
+                  />
+                </FormGroup>
+                <FormGroup
+                  hasNoPaddingTop
+                  label={t("userManagedAccess")}
+                  labelIcon={
+                    <HelpItem
+                      helpText="realm-settings-help:userManagedAccess"
+                      forLabel={t("userManagedAccess")}
+                      forID="kc-user-manged-access"
                     />
-                  </StackItem>
+                  }
-                </Stack>
+                  fieldId="kc-user-manged-access"
-              </FormGroup>
+                >
+                  <Controller
+                    name="userManagedAccessAllowed"
+                    control={control}
+                    defaultValue={false}
+                    render={({ onChange, value }) => (
+                      <Switch
+                        id="kc-user-manged-access"
+                        label={t("common:on")}
+                        labelOff={t("common:off")}
+                        isChecked={value}
+                        onChange={onChange}
+                      />
+                    )}
+                  />
+                </FormGroup>
+                <FormGroup
+                  label={t("endpoints")}
+                  labelIcon={
+                    <HelpItem
+                      helpText="realm-settings-help:endpoints"
+                      forLabel={t("endpoints")}
+                      forID="kc-endpoints"
+                    />
+                  }
+                  fieldId="kc-endpoints"
+                >
+                  <Stack>
+                    <StackItem>
+                      <FormattedLink
+                        href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
+                        title={t("openEndpointConfiguration")}
+                      />
+                    </StackItem>
+                    <StackItem>
+                      <FormattedLink
+                        href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
+                        title={t("samlIdentityProviderMetadata")}
+                      />
+                    </StackItem>
+                  </Stack>
+                </FormGroup>
 
-              <ActionGroup>
+                <ActionGroup>
-                <Button variant="primary" type="submit">
+                  <Button variant="primary" type="submit">
-                  {t("common:save")}
+                    {t("common:save")}
-                </Button>
+                  </Button>
-                <Button variant="link" onClick={() => setupForm(realm!)}>
+                  <Button variant="link" onClick={() => setupForm(realm!)}>
-                  {t("common:revert")}
+                    {t("common:revert")}
-                </Button>
+                  </Button>
-              </ActionGroup>
+                </ActionGroup>
-            </FormAccess>
+              </FormAccess>
+            </PageSection>
           </Tab>
-        </Tabs>
+        </KeycloakTabs>
       </PageSection>
     </>
   );

src/sessions/SessionsSection.tsx

@@ -47,7 +47,7 @@ export const SessionsSection = () => {
   return (
     <>
       <ViewHeader titleKey="sessions:title" subKey="sessions:sessionExplain" />
-      <PageSection variant="light">
+      <PageSection variant="light" className="pf-u-p-0">
         <KeycloakDataTable
           loader={loader}
           ariaLabelKey="session:title"

src/user/UsersSection.tsx

@@ -176,7 +176,11 @@ export const UsersSection = () => {
     <>
       <DeleteConfirm />
       <ViewHeader titleKey="users:title" subKey="" />
-      <PageSection data-testid="users-page" variant="light">
+      <PageSection
+        data-testid="users-page"
+        variant="light"
+        className="pf-u-p-0"
+      >
         {!listUsers && !initialSearch && (
           <SearchUser
             onSearch={(search) => {