Merge pull request #721 from edewit/issue-706

fixed issue

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 {
-  vertical-align: baseline;
+td.pf-c-table__check > input[type='checkbox'] {
+  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,10 @@ export type Action<T> = IAction & {
   onRowClick?: (row: T) => Promise<boolean> | void;
 };
 
-export type DataListProps<T> = {
+export type DataListProps<T> = Omit<
+  TableProps,
+  "rows" | "cells" | "onSelect"
+> & {
   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

@@ -6,7 +6,6 @@ import {
   Button,
   ButtonVariant,
   Checkbox,
-  PageSection,
   Popover,
 } from "@patternfly/react-core";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@@ -276,7 +275,6 @@ export const UserGroups = () => {
 
   return (
     <>
-      <PageSection variant="light">
       <DeleteConfirm />
       {open && (
         <GroupPickerDialog
@@ -296,6 +294,7 @@ export const UserGroups = () => {
       <KeycloakDataTable
         key={key}
         loader={loader}
+        className="keycloak_user-section_groups-table"
         isPaginated
         ariaLabelKey="roles:roleList"
         searchPlaceholderKey="groups:searchGroup"
@@ -373,7 +372,6 @@ export const UserGroups = () => {
           )
         }
       />
-      </PageSection>
     </>
   );
 };

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 />
-              </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,
-.pf-c-chip-group__list {
+.kc-consents-chip-group .pf-c-chip-group,
+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 {
-  width: 20px;
+.kc-who-will-appear-button {
+  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;
 }