From 5bcfa037470d0f2fbe6ae784b55c93561379f2ac Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 22 Apr 2021 16:37:10 -0400
Subject: [PATCH] add help text for direct membership

---
 src/user/UserGroups.tsx | 23 ++++++++++++++++++++++-
 src/user/messages.json  |  4 +++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/user/UserGroups.tsx b/src/user/UserGroups.tsx
index ce353e47d5..3abf6f28b1 100644
--- a/src/user/UserGroups.tsx
+++ b/src/user/UserGroups.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -7,6 +7,7 @@ import {
   ButtonVariant,
   Checkbox,
   PageSection,
+  Popover,
 } from "@patternfly/react-core";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@@ -20,6 +21,8 @@ import { useErrorHandler } from "react-error-boundary";
 import _ from "lodash";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
 import { JoinGroupDialog } from "./JoinGroupDialog";
+import { HelpContext } from "../components/help-enabler/HelpHeader";
+import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 type GroupTableData = GroupRepresentation & {
   membersLength?: number;
@@ -55,6 +58,8 @@ export const UserGroups = () => {
   >([]);
   const [open, setOpen] = useState(false);
 
+  const { enabled } = useContext(HelpContext);
+
   const adminClient = useAdminClient();
   const { id } = useParams<{ id: string }>();
   const alphabetize = (groupsList: GroupRepresentation[]) => {
@@ -325,6 +330,22 @@ export const UserGroups = () => {
                 onChange={() => setDirectMembership(!isDirectMembership)}
                 isChecked={isDirectMembership}
               />
+              {enabled && (
+                <Popover
+                  aria-label="Basic popover"
+                  position="bottom"
+                  bodyContent={<div>{t("users:whoWillAppearPopoverText")}</div>}
+                >
+                  <Button
+                    variant="link"
+                    className="kc-who-will-appear-button"
+                    key="who-will-appear-button"
+                    icon={<QuestionCircleIcon />}
+                  >
+                    {t("users:whoWillAppearLinkText")}
+                  </Button>
+                </Popover>
+              )}
             </>
           }
           columns={[
diff --git a/src/user/messages.json b/src/user/messages.json
index 417de6fa22..17d55ec009 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -58,6 +58,8 @@
     "updateUserLocale": "Update User Locale",
     "consents": "Consents",
     "noConsents": "No consents",
-    "noConsentsText": "The consents will only be recorded when users try to access a client that is configured to require consent. In that case, users will get a consent page which asks them to grant access to the client."
+    "noConsentsText": "The consents will only be recorded when users try to access a client that is configured to require consent. In that case, users will get a consent page which asks them to grant access to the client.",
+    "whoWillAppearLinkText": "Who will appear in this group list?",
+    "whoWillAppearPopoverText": "Groups are hierarchical. When you select Direct Membership, you see only the child group that the user joined. Ancestor groups are not included."
   }
 }