wip consents UI fixes

src/user/UserConsents.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { PageSection } from "@patternfly/react-core";
+import { Button, Label, PageSection } from "@patternfly/react-core";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { emptyFormatter } from "../util";
@@ -27,10 +27,31 @@ export const UserConsents = () => {
     return alphabetize(consents);
   };
 
+  const [labelClicked, setLabelClicked] = useState(false);
+
+   useEffect(() => {
+    console.log(labelClicked)
+  }, [labelClicked])
+
   const clientScopesRenderer = ({
     grantedClientScopes,
   }: UserConsentRepresentation) => {
+    if (grantedClientScopes!.length <= 5 && labelClicked) {
       return <>{grantedClientScopes!.join(", ")}</>;
+    } else
+      return (
+        <>
+          {grantedClientScopes!.slice(1, 6).join(", ")}{" "}
+          <Label
+            color="blue"
+            style={{ cursor: "pointer" }}
+            variant="outline"
+            onClick={() => setLabelClicked(true)}
+          >
+            {grantedClientScopes!.length - 5 + " more"}
+          </Label>
+        </>
+      );
   };
 
   const createdRenderer = ({ createDate }: UserConsentRepresentation) => {
@@ -45,10 +66,10 @@ export const UserConsents = () => {
 
   return (
     <>
-      <PageSection variant="light">
       <KeycloakDataTable
         loader={loader}
         ariaLabelKey="roles:roleList"
+        searchPlaceholderKey=" "
         columns={[
           {
             name: "clientId",
@@ -88,7 +109,6 @@ export const UserConsents = () => {
           />
         }
       />
-      </PageSection>
     </>
   );
 };

src/user/UsersTabs.tsx

@@ -108,9 +108,7 @@ export const UsersTabs = () => {
               data-testid="user-consents-tab"
               title={<TabTitleText>{t("users:consents")}</TabTitleText>}
             >
-              <PageSection variant="light">
               <UserConsents />
-              </PageSection>
             </Tab>
           </KeycloakTabs>
         )}

src/user/user-section.css

@@ -45,3 +45,7 @@ td.pf-c-table__check > input {
   width: 20px;
   vertical-align: text-top;
 }
+
+.pf-c-toolbar__content-section {
+  margin-bottom: calc(var(--pf-global--spacer--lg) * -1);
+}