From 7bf6e53042ab7ca74ecbad661191a3dad685ed7d Mon Sep 17 00:00:00 2001
From: Carla Martinez <carlmart@redhat.com>
Date: Fri, 10 Jan 2025 10:15:59 +0100
Subject: [PATCH] Add Context Help Panel in Stage users page

The Context Help Links Panel needs to be
implemented in the Stage users to provide
help links according to the shown page.

Signed-off-by: Carla Martinez <carlmart@redhat.com>
---
 .../documentation/documentation-links.json    |  14 ++
 src/pages/StageUsers/StageUsers.tsx           | 162 ++++++++++--------
 tests/features/contextual_help_panel.feature  |  14 ++
 3 files changed, 121 insertions(+), 69 deletions(-)

diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
index 3661e6bf..9ac758c8 100644
--- a/src/assets/documentation/documentation-links.json
+++ b/src/assets/documentation/documentation-links.json
@@ -70,5 +70,19 @@
       "name": "Managing user accounts",
       "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/managing-user-accounts-using-the-idm-web-ui_managing-users-groups-hosts"
     }
+  ],
+  "stage-users": [
+    {
+      "name": "Adding new users",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/managing-user-accounts-using-the-idm-web-ui_managing-users-groups-hosts#adding-users-in-the-web-ui_managing-user-accounts-using-the-idm-web-ui"
+    },
+    {
+      "name": "Activating stage users",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/managing-user-accounts-using-the-idm-web-ui_managing-users-groups-hosts#activating-stage-users-in-the-idm-web-ui_managing-user-accounts-using-the-idm-web-ui"
+    },
+    {
+      "name": "Deleting users",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/managing-user-accounts-using-the-idm-web-ui_managing-users-groups-hosts#deleting-users-in-the-idm-web-ui_managing-user-accounts-using-the-idm-web-ui"
+    }
   ]
 }
diff --git a/src/pages/StageUsers/StageUsers.tsx b/src/pages/StageUsers/StageUsers.tsx
index ddc34c7d..54d01966 100644
--- a/src/pages/StageUsers/StageUsers.tsx
+++ b/src/pages/StageUsers/StageUsers.tsx
@@ -32,6 +32,7 @@ import UsersTable from "../../components/tables/UsersTable";
 // Components
 import PaginationLayout from "src/components/layouts/PaginationLayout";
 import BulkSelectorPrep from "src/components/BulkSelectorPrep";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Modals
 import DeleteUsers from "src/components/modals/UserModals/DeleteUsers";
 import AddUser from "src/components/modals/UserModals/AddUser";
@@ -419,6 +420,18 @@ const StageUsers = () => {
     submitSearchValue,
   };
 
+  // Contextual links panel
+  const [isContextualPanelExpanded, setIsContextualPanelExpanded] =
+    React.useState(false);
+
+  const onOpenContextualPanel = () => {
+    setIsContextualPanelExpanded(!isContextualPanelExpanded);
+  };
+
+  const onCloseContextualPanel = () => {
+    setIsContextualPanelExpanded(false);
+  };
+
   // List of Toolbar items
   const toolbarItems: ToolbarItem[] = [
     {
@@ -501,7 +514,12 @@ const StageUsers = () => {
     },
     {
       key: 8,
-      element: <HelpTextWithIconLayout textContent="Help" />,
+      element: (
+        <HelpTextWithIconLayout
+          textContent="Help"
+          onClick={onOpenContextualPanel}
+        />
+      ),
     },
     {
       key: 9,
@@ -519,77 +537,83 @@ const StageUsers = () => {
 
   // Render 'Stage users'
   return (
-    <Page>
-      <alerts.ManagedAlerts />
-      <PageSection variant={PageSectionVariants.light}>
-        <TitleLayout
-          id="stage users title"
-          headingLevel="h1"
-          text="Stage users"
+    <ContextualHelpPanel
+      fromPage="stage-users"
+      isExpanded={isContextualPanelExpanded}
+      onClose={onCloseContextualPanel}
+    >
+      <Page>
+        <alerts.ManagedAlerts />
+        <PageSection variant={PageSectionVariants.light}>
+          <TitleLayout
+            id="stage users title"
+            headingLevel="h1"
+            text="Stage users"
+          />
+        </PageSection>
+        <PageSection
+          variant={PageSectionVariants.light}
+          isFilled={false}
+          className="pf-v5-u-m-lg pf-v5-u-pb-md pf-v5-u-pl-0 pf-v5-u-pr-0"
+        >
+          <ToolbarLayout
+            className="pf-v5-u-pt-0 pf-v5-u-pl-lg pf-v5-u-pr-md"
+            contentClassName="pf-v5-u-p-0"
+            toolbarItems={toolbarItems}
+          />
+          <div style={{ height: `calc(100vh - 352.2px)` }}>
+            <OuterScrollContainer>
+              <InnerScrollContainer>
+                {batchError !== undefined && batchError ? (
+                  <GlobalErrors errors={globalErrors.getAll()} />
+                ) : (
+                  <UsersTable
+                    shownElementsList={stageUsersList}
+                    from="stage-users"
+                    showTableRows={showTableRows}
+                    usersData={usersTableData}
+                    buttonsData={usersTableButtonsData}
+                    paginationData={selectedPerPageData}
+                    searchValue={searchValue}
+                  />
+                )}
+              </InnerScrollContainer>
+            </OuterScrollContainer>
+          </div>
+          <PaginationLayout
+            list={stageUsersList}
+            paginationData={paginationData}
+            variant={PaginationVariant.bottom}
+            widgetId="pagination-options-menu-bottom"
+            className="pf-v5-u-pb-0 pf-v5-u-pr-md"
+          />
+        </PageSection>
+        <ModalErrors errors={modalErrors.getAll()} />
+        <AddUser
+          show={showAddModal}
+          from="stage-users"
+          setShowTableRows={setShowTableRows}
+          handleModalToggle={onAddModalToggle}
+          onOpenAddModal={onAddClickHandler}
+          onCloseAddModal={onCloseAddModal}
+          onRefresh={refreshUsersData}
         />
-      </PageSection>
-      <PageSection
-        variant={PageSectionVariants.light}
-        isFilled={false}
-        className="pf-v5-u-m-lg pf-v5-u-pb-md pf-v5-u-pl-0 pf-v5-u-pr-0"
-      >
-        <ToolbarLayout
-          className="pf-v5-u-pt-0 pf-v5-u-pl-lg pf-v5-u-pr-md"
-          contentClassName="pf-v5-u-p-0"
-          toolbarItems={toolbarItems}
+        <DeleteUsers
+          show={showDeleteModal}
+          from="stage-users"
+          handleModalToggle={onDeleteModalToggle}
+          selectedUsersData={selectedUsersData}
+          buttonsData={deleteUsersButtonsData}
+          onRefresh={refreshUsersData}
         />
-        <div style={{ height: `calc(100vh - 352.2px)` }}>
-          <OuterScrollContainer>
-            <InnerScrollContainer>
-              {batchError !== undefined && batchError ? (
-                <GlobalErrors errors={globalErrors.getAll()} />
-              ) : (
-                <UsersTable
-                  shownElementsList={stageUsersList}
-                  from="stage-users"
-                  showTableRows={showTableRows}
-                  usersData={usersTableData}
-                  buttonsData={usersTableButtonsData}
-                  paginationData={selectedPerPageData}
-                  searchValue={searchValue}
-                />
-              )}
-            </InnerScrollContainer>
-          </OuterScrollContainer>
-        </div>
-        <PaginationLayout
-          list={stageUsersList}
-          paginationData={paginationData}
-          variant={PaginationVariant.bottom}
-          widgetId="pagination-options-menu-bottom"
-          className="pf-v5-u-pb-0 pf-v5-u-pr-md"
+        <ActivateStageUsers
+          show={showActivateModal}
+          handleModalToggle={onActivateModalToggle}
+          selectedUsers={selectedUsers}
+          onSuccess={refreshUsersData}
         />
-      </PageSection>
-      <ModalErrors errors={modalErrors.getAll()} />
-      <AddUser
-        show={showAddModal}
-        from="stage-users"
-        setShowTableRows={setShowTableRows}
-        handleModalToggle={onAddModalToggle}
-        onOpenAddModal={onAddClickHandler}
-        onCloseAddModal={onCloseAddModal}
-        onRefresh={refreshUsersData}
-      />
-      <DeleteUsers
-        show={showDeleteModal}
-        from="stage-users"
-        handleModalToggle={onDeleteModalToggle}
-        selectedUsersData={selectedUsersData}
-        buttonsData={deleteUsersButtonsData}
-        onRefresh={refreshUsersData}
-      />
-      <ActivateStageUsers
-        show={showActivateModal}
-        handleModalToggle={onActivateModalToggle}
-        selectedUsers={selectedUsers}
-        onSuccess={refreshUsersData}
-      />
-    </Page>
+      </Page>
+    </ContextualHelpPanel>
   );
 };
 
diff --git a/tests/features/contextual_help_panel.feature b/tests/features/contextual_help_panel.feature
index f76150a6..fdb77dd6 100644
--- a/tests/features/contextual_help_panel.feature
+++ b/tests/features/contextual_help_panel.feature
@@ -18,5 +18,19 @@ Feature: Contextual help links panel
     When I click on close button in the panel
     Then I should not see contextual help panel
 
+  # Stage users page
+  Scenario: Open the contextual help links panel on 'stage-users' main page
+    Given I am on "stage-users" page
+    When I click on "Help" button
+    Then I should see contextual help panel
+    And I should see a title "Links" in the panel
+    * I should see a list of links
+
+  Scenario: Close the contextual help links panel on 'Stage users' main page
+    Given I am on "stage-users" page
+    Given I should see contextual help panel
+    When I click on close button in the panel
+    Then I should not see contextual help panel
+