From 74aee6090dc4be1772a35fc0f5c2d0a668495c84 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 31 Mar 2021 15:16:58 +0200
Subject: [PATCH] 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  |   4 +-
 src/client-scopes/ClientScopesSection.tsx     |   2 +-
 src/clients/ClientDetails.tsx                 |  10 +-
 src/clients/ClientsSection.tsx                |  10 +-
 src/components/keycloak-tabs/KeycloakTabs.tsx |   6 +
 src/events/EventsSection.tsx                  |   8 +-
 src/groups/GroupAttributes.tsx                |  28 +-
 src/groups/GroupsSection.tsx                  |  12 +-
 src/realm-settings/RealmSettingsSection.tsx   | 309 +++++++++---------
 src/sessions/SessionsSection.tsx              |   2 +-
 src/user/UsersSection.tsx                     |   6 +-
 11 files changed, 206 insertions(+), 191 deletions(-)

diff --git a/src/authentication/AuthenticationSection.tsx b/src/authentication/AuthenticationSection.tsx
index 97e6935434..06b84cca0f 100644
--- a/src/authentication/AuthenticationSection.tsx
+++ b/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"
diff --git a/src/client-scopes/ClientScopesSection.tsx b/src/client-scopes/ClientScopesSection.tsx
index 112df36967..2ec9ad408d 100644
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/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"
diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx
index a9952d2298..2081102152 100644
--- a/src/clients/ClientDetails.tsx
+++ b/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"
diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx
index ed049b57bf..76f5b17054 100644
--- a/src/clients/ClientsSection.tsx
+++ b/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"
diff --git a/src/components/keycloak-tabs/KeycloakTabs.tsx b/src/components/keycloak-tabs/KeycloakTabs.tsx
index c0a6fafcd9..aa3c47fe85 100644
--- a/src/components/keycloak-tabs/KeycloakTabs.tsx
+++ b/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 }))
diff --git a/src/events/EventsSection.tsx b/src/events/EventsSection.tsx
index 21ef87142a..30bd8ee1a7 100644
--- a/src/events/EventsSection.tsx
+++ b/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"
diff --git a/src/groups/GroupAttributes.tsx b/src/groups/GroupAttributes.tsx
index 96533bc85e..f540a5e55f 100644
--- a/src/groups/GroupAttributes.tsx
+++ b/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
-      form={form}
-      save={save}
-      array={{ fields, append, remove }}
-      reset={() =>
-        form.reset({
-          attributes: convertAttributes(),
-        })
-      }
-    />
+    <PageSection variant={PageSectionVariants.light}>
+      <AttributesForm
+        form={form}
+        save={save}
+        array={{ fields, append, remove }}
+        reset={() =>
+          form.reset({
+            attributes: convertAttributes(),
+          })
+        }
+      />
+    </PageSection>
   );
 };
diff --git a/src/groups/GroupsSection.tsx b/src/groups/GroupsSection.tsx
index adb80b9117..b1e897056a 100644
--- a/src/groups/GroupsSection.tsx
+++ b/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
           >
diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index 2258332832..d0f5176515 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/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">
-        <Tabs
-          activeKey={activeTab}
-          onSelect={(_, key) => setActiveTab(key as number)}
-          isBox
-        >
-          <Tab eventKey={0} title={<TabTitleText>{t("general")}</TabTitleText>}>
-            <FormAccess
-              isHorizontal
-              role="manage-realm"
-              className="pf-u-mt-lg"
-              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"
+      <PageSection variant="light" className="pf-u-p-0">
+        <KeycloakTabs isBox>
+          <Tab
+            eventKey="general"
+            title={<TabTitleText>{t("general")}</TabTitleText>}
+          >
+            <PageSection variant="light">
+              <FormAccess
+                isHorizontal
+                role="manage-realm"
+                className="pf-u-mt-lg"
+                onSubmit={handleSubmit(save)}
               >
-                <TextInput
-                  type="text"
-                  id="kc-html-display-name"
-                  name="displayNameHtml"
-                  ref={register}
-                />
-              </FormGroup>
-              <FormGroup
-                label={t("frontendUrl")}
-                fieldId="kc-frontend-url"
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:frontendUrl"
-                    forLabel={t("frontendUrl")}
-                    forID="kc-frontend-url"
+                <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}
                   />
-                }
-              >
-                <TextInput
-                  type="text"
-                  id="kc-frontend-url"
-                  name="attributes.frontendUrl"
-                  ref={register}
-                />
-              </FormGroup>
-              <FormGroup
-                label={t("requireSsl")}
-                fieldId="kc-require-ssl"
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:requireSsl"
-                    forLabel={t("requireSsl")}
-                    forID="kc-require-ssl"
+                </FormGroup>
+                <FormGroup
+                  label={t("htmlDisplayName")}
+                  fieldId="kc-html-display-name"
+                >
+                  <TextInput
+                    type="text"
+                    id="kc-html-display-name"
+                    name="displayNameHtml"
+                    ref={register}
                   />
-                }
-              >
-                <Controller
-                  name="sslRequired"
-                  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"
-                  />
-                }
-                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>
+                <FormGroup
+                  label={t("frontendUrl")}
+                  fieldId="kc-frontend-url"
+                  labelIcon={
+                    <HelpItem
+                      helpText="realm-settings-help:frontendUrl"
+                      forLabel={t("frontendUrl")}
+                      forID="kc-frontend-url"
                     />
-                  )}
-                />
-              </FormGroup>
-              <FormGroup
-                label={t("endpoints")}
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:endpoints"
-                    forLabel={t("endpoints")}
-                    forID="kc-endpoints"
+                  }
+                >
+                  <TextInput
+                    type="text"
+                    id="kc-frontend-url"
+                    name="attributes.frontendUrl"
+                    ref={register}
                   />
-                }
-                fieldId="kc-endpoints"
-              >
-                <Stack>
-                  <StackItem>
-                    <FormattedLink
-                      href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
-                      title={t("openEndpointConfiguration")}
+                </FormGroup>
+                <FormGroup
+                  label={t("requireSsl")}
+                  fieldId="kc-require-ssl"
+                  labelIcon={
+                    <HelpItem
+                      helpText="realm-settings-help:requireSsl"
+                      forLabel={t("requireSsl")}
+                      forID="kc-require-ssl"
                     />
-                  </StackItem>
-                  <StackItem>
-                    <FormattedLink
-                      href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
-                      title={t("samlIdentityProviderMetadata")}
+                  }
+                >
+                  <Controller
+                    name="sslRequired"
+                    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>
-              </FormGroup>
+                  }
+                  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>
+                <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>
-                <Button variant="primary" type="submit">
-                  {t("common:save")}
-                </Button>
-                <Button variant="link" onClick={() => setupForm(realm!)}>
-                  {t("common:revert")}
-                </Button>
-              </ActionGroup>
-            </FormAccess>
+                <ActionGroup>
+                  <Button variant="primary" type="submit">
+                    {t("common:save")}
+                  </Button>
+                  <Button variant="link" onClick={() => setupForm(realm!)}>
+                    {t("common:revert")}
+                  </Button>
+                </ActionGroup>
+              </FormAccess>
+            </PageSection>
           </Tab>
-        </Tabs>
+        </KeycloakTabs>
       </PageSection>
     </>
   );
diff --git a/src/sessions/SessionsSection.tsx b/src/sessions/SessionsSection.tsx
index 879e22c2ee..b66ba25e88 100644
--- a/src/sessions/SessionsSection.tsx
+++ b/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"
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 8f35086e92..7abc1dacc1 100644
--- a/src/user/UsersSection.tsx
+++ b/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) => {