fixed issue

fixing: #706

public/index.css

@@ -10,6 +10,12 @@
   margin-bottom: 52px;
 }
 
+input[type='checkbox'] {
+  height: 20px;
+  width: 20px;
+  vertical-align: baseline;
+}
+
 label.pf-c-form__label {
   display: inline-flex;
 }
@@ -46,8 +52,8 @@ label.pf-c-form__label {
   cursor: pointer;
 }
 
-td.pf-c-table__check > input {
+td.pf-c-table__check > input[type='checkbox'] {
-  vertical-align: baseline;
+  vertical-align: text-bottom;
 }
 
 .pf-c-table.tbody.pf-c-table__check > input {

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -15,6 +15,7 @@ import {
   Table,
   TableBody,
   TableHeader,
+  TableProps,
   TableVariant,
 } from "@patternfly/react-table";
 import { Spinner } from "@patternfly/react-core";
@@ -119,7 +120,7 @@ export type Action<T> = IAction & {
   onRowClick?: (row: T) => Promise<boolean> | void;
 };
 
-export type DataListProps<T> = {
+export type DataListProps<T> = Omit<TableProps, "rows" | "cells"> & {
   loader: (first?: number, max?: number, search?: string) => Promise<T[]>;
   onSelect?: (value: T[]) => void;
   canSelectAll?: boolean;

src/realm-roles/RealmRoleTabs.tsx

@@ -324,6 +324,7 @@ export const RealmRoleTabs = () => {
         subKey={id ? "" : "roles:roleCreateExplain"}
         actionsDropdownId="roles-actions-dropdown"
         dropdownItems={dropdownItems}
+        divider={!id}
       />
       <PageSection variant="light" className="pf-u-p-0">
         {id && (

src/user/UserGroups.tsx

@@ -276,104 +276,103 @@ export const UserGroups = () => {
 
   return (
     <>
-      <PageSection variant="light">
+      <DeleteConfirm />
-        <DeleteConfirm />
+      {open && (
-        {open && (
+        <GroupPickerDialog
-          <GroupPickerDialog
+          id={id}
-            id={id}
+          type="selectMany"
-            type="selectMany"
+          text={{
-            text={{
+            title: t("joinGroupsFor", { username }),
-              title: t("joinGroupsFor", { username }),
+            ok: "users:join",
-              ok: "users:join",
+          }}
-            }}
+          onClose={() => setOpen(false)}
-            onClose={() => setOpen(false)}
+          onConfirm={(groups) => {
-            onConfirm={(groups) => {
+            addGroups(groups);
-              addGroups(groups);
+            setOpen(false);
-              setOpen(false);
+          }}
-            }}
-          />
-        )}
-        <KeycloakDataTable
-          key={key}
-          loader={loader}
-          isPaginated
-          ariaLabelKey="roles:roleList"
-          searchPlaceholderKey="groups:searchGroup"
-          canSelectAll
-          onSelect={() => {}}
-          toolbarItem={
-            <>
-              <Button
-                className="kc-join-group-button"
-                key="join-group-button"
-                onClick={toggleModal}
-                data-testid="add-group-button"
-              >
-                {t("joinGroup")}
-              </Button>
-              <Checkbox
-                label={t("directMembership")}
-                key="direct-membership-check"
-                id="kc-direct-membership-checkbox"
-                onChange={() => setDirectMembership(!isDirectMembership)}
-                isChecked={isDirectMembership}
-                className="direct-membership-check"
-              />
-              {enabled && (
-                <Popover
-                  aria-label="Basic popover"
-                  position="bottom"
-                  bodyContent={<div>{t("whoWillAppearPopoverText")}</div>}
-                >
-                  <Button
-                    variant="link"
-                    className="kc-who-will-appear-button"
-                    key="who-will-appear-button"
-                    icon={<QuestionCircleIcon />}
-                  >
-                    {t("whoWillAppearLinkText")}
-                  </Button>
-                </Popover>
-              )}
-            </>
-          }
-          columns={[
-            {
-              name: "groupMembership",
-              displayKey: "users:groupMembership",
-              cellRenderer: AliasRenderer,
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(40)],
-            },
-            {
-              name: "path",
-              displayKey: "users:path",
-              cellRenderer: Path,
-              transforms: [cellWidth(45)],
-            },
-
-            {
-              name: "",
-              cellRenderer: LeaveButtonRenderer,
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(20)],
-            },
-          ]}
-          emptyState={
-            !search ? (
-              <ListEmptyState
-                hasIcon={true}
-                message={t("noGroups")}
-                instructions={t("noGroupsText")}
-                primaryActionText={t("joinGroup")}
-                onPrimaryAction={toggleModal}
-              />
-            ) : (
-              ""
-            )
-          }
         />
-      </PageSection>
+      )}
+      <KeycloakDataTable
+        key={key}
+        loader={loader}
+        className="keycloak_user-section_groups-table"
+        isPaginated
+        ariaLabelKey="roles:roleList"
+        searchPlaceholderKey="groups:searchGroup"
+        canSelectAll
+        onSelect={() => {}}
+        toolbarItem={
+          <>
+            <Button
+              className="kc-join-group-button"
+              key="join-group-button"
+              onClick={toggleModal}
+              data-testid="add-group-button"
+            >
+              {t("joinGroup")}
+            </Button>
+            <Checkbox
+              label={t("directMembership")}
+              key="direct-membership-check"
+              id="kc-direct-membership-checkbox"
+              onChange={() => setDirectMembership(!isDirectMembership)}
+              isChecked={isDirectMembership}
+              className="direct-membership-check"
+            />
+            {enabled && (
+              <Popover
+                aria-label="Basic popover"
+                position="bottom"
+                bodyContent={<div>{t("whoWillAppearPopoverText")}</div>}
+              >
+                <Button
+                  variant="link"
+                  className="kc-who-will-appear-button"
+                  key="who-will-appear-button"
+                  icon={<QuestionCircleIcon />}
+                >
+                  {t("whoWillAppearLinkText")}
+                </Button>
+              </Popover>
+            )}
+          </>
+        }
+        columns={[
+          {
+            name: "groupMembership",
+            displayKey: "users:groupMembership",
+            cellRenderer: AliasRenderer,
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(40)],
+          },
+          {
+            name: "path",
+            displayKey: "users:path",
+            cellRenderer: Path,
+            transforms: [cellWidth(45)],
+          },
+
+          {
+            name: "",
+            cellRenderer: LeaveButtonRenderer,
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(20)],
+          },
+        ]}
+        emptyState={
+          !search ? (
+            <ListEmptyState
+              hasIcon={true}
+              message={t("noGroups")}
+              instructions={t("noGroupsText")}
+              primaryActionText={t("joinGroup")}
+              onPrimaryAction={toggleModal}
+            />
+          ) : (
+            ""
+          )
+        }
+      />
     </>
   );
 };

src/user/UsersSection.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Link, useHistory, useRouteMatch } from "react-router-dom";
 import {
   AlertVariant,
   Button,
@@ -27,7 +28,6 @@ import { emptyFormatter } from "../util";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 
 import "./user-section.css";
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
 
 type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;

src/user/UsersTabs.tsx

@@ -99,9 +99,7 @@ export const UsersTabs = () => {
               data-testid="user-groups-tab"
               title={<TabTitleText>{t("groups")}</TabTitleText>}
             >
-              <PageSection variant="light">
+              <UserGroups />
-                <UserGroups />
-              </PageSection>
             </Tab>
             <Tab
               eventKey="consents"

src/user/user-section.css

@@ -7,8 +7,8 @@ button.pf-c-button.pf-m-primary.kc-join-group-button {
   margin-right: var(--pf-global--spacer--xl);
 }
 
-.pf-c-chip-group,
+.kc-consents-chip-group .pf-c-chip-group,
-.pf-c-chip-group__list {
+kc-consents-chip-group .pf-c-chip-group__list {
   width: 100%;
 }
 
@@ -16,35 +16,15 @@ button#kc-join-groups-button {
   height: min-content;
 }
 
-.pf-c-chip-group.pf-m-category {
-  margin-right: var(--pf-global--spacer--md);
-  padding: var(--pf-global--spacer--xs);
-}
-
 .join-group-dialog-row-m-disabled {
   pointer-events: none;
   color: var(--pf-global--disabled-color--200);
 }
 
-input#kc-direct-membership-checkbox {
+.kc-who-will-appear-button {
-  width: 20px;
+  margin-left: var(--pf-global--spacer--md);
 }
 
-.join-group-modal-check > div > input {
-  height: 20px;
-  width: 20px;
-}
-
-.data-list-check > input {
-  height: 20px;
-  width: 20px;
-}
-
-td.pf-c-table__check > input {
-  height: 20px;
-  width: 20px;
-  vertical-align: text-top;
-}
 
 .pf-c-toolbar__content-section {
   margin-bottom: calc(var(--pf-global--spacer--lg) * -1);
@@ -59,7 +39,7 @@ td.pf-c-table__check > input {
   padding: 0px;
 }
 
-.pf-c-chip-group__list-item {
+.kc-consents-chip-group .pf-c-chip-group__list-item {
   margin-right: 0px;
 }