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="" />
-      <PageSection variant="light">
+      <ViewHeader titleKey="authentication:title" subKey="" divider={false} />
+      <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
-            isBox
-            inset={{
-              default: "insetNone",
-              md: "insetSm",
-              xl: "inset2xl",
-              "2xl": "insetLg",
-            }}
-          >
+          <KeycloakTabs isBox>
             <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
-          isBox
-          inset={{
-            default: "insetNone",
-            md: "insetSm",
-            xl: "inset2xl",
-            "2xl": "insetLg",
-          }}
-        >
+        <KeycloakTabs isBox>
           <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" />
-      <PageSection variant="light">
+      <ViewHeader
+        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,6 +62,7 @@ export const GroupAttributes = () => {
   };
 
   return (
+    <PageSection variant={PageSectionVariants.light}>
       <AttributesForm
         form={form}
         save={save}
@@ -68,5 +73,6 @@ export const GroupAttributes = () => {
           })
         }
       />
+    </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,20 +171,24 @@ export const RealmSettingsSection = () => {
         )}
       />
 
-      <PageSection variant="light">
-        <Tabs
-          activeKey={activeTab}
-          onSelect={(_, key) => setActiveTab(key as number)}
-          isBox
+      <PageSection variant="light" className="pf-u-p-0">
+        <KeycloakTabs isBox>
+          <Tab
+            eventKey="general"
+            title={<TabTitleText>{t("general")}</TabTitleText>}
           >
-          <Tab eventKey={0} title={<TabTitleText>{t("general")}</TabTitleText>}>
+            <PageSection variant="light">
               <FormAccess
                 isHorizontal
                 role="manage-realm"
                 className="pf-u-mt-lg"
                 onSubmit={handleSubmit(save)}
               >
-              <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
+                <FormGroup
+                  label={t("realmId")}
+                  fieldId="kc-realm-id"
+                  isRequired
+                >
                   <ClipboardCopy isReadOnly>{realmName}</ClipboardCopy>
                 </FormGroup>
                 <FormGroup label={t("displayName")} fieldId="kc-display-name">
@@ -328,8 +332,9 @@ export const RealmSettingsSection = () => {
                   </Button>
                 </ActionGroup>
               </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) => {