From 5899ce23d4632e27c434f53a0b775bb2e34c18cd Mon Sep 17 00:00:00 2001
From: Carla Martinez <carlmart@redhat.com>
Date: Fri, 10 Jan 2025 14:53:34 +0100
Subject: [PATCH] Add contextual help panel in Preserved users

The Contextual help links panel should be implemented
in the Preserved users page to provide documentation
links related to the page that is currently being shown.

Signed-off-by: Carla Martinez <carlmart@redhat.com>
---
 .../documentation/documentation-links.json    |  10 ++
 src/pages/PreservedUsers/PreservedUsers.tsx   | 160 ++++++++++--------
 tests/features/contextual_help_panel.feature  |  12 ++
 3 files changed, 114 insertions(+), 68 deletions(-)

diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
index 3661e6bf..ec9169d6 100644
--- a/src/assets/documentation/documentation-links.json
+++ b/src/assets/documentation/documentation-links.json
@@ -70,5 +70,15 @@
       "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"
     }
+  ],
+  "preserved-users": [
+    {
+      "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"
+    },
+    {
+      "name": "Restoring 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#restoring-users-in-the-idm-web-ui_managing-user-accounts-using-the-idm-web-ui"
+    }
   ]
 }
diff --git a/src/pages/PreservedUsers/PreservedUsers.tsx b/src/pages/PreservedUsers/PreservedUsers.tsx
index 3f34221b..8c1dd1e9 100644
--- a/src/pages/PreservedUsers/PreservedUsers.tsx
+++ b/src/pages/PreservedUsers/PreservedUsers.tsx
@@ -27,6 +27,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 StagePreservedUsers from "src/components/modals/UserModals/StagePreservedUsers";
@@ -415,6 +416,18 @@ const PreservedUsers = () => {
     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[] = [
     {
@@ -497,7 +510,12 @@ const PreservedUsers = () => {
     },
     {
       key: 8,
-      element: <HelpTextWithIconLayout textContent="Help" />,
+      element: (
+        <HelpTextWithIconLayout
+          textContent="Help"
+          onClick={onOpenContextualPanel}
+        />
+      ),
     },
     {
       key: 9,
@@ -515,76 +533,82 @@ const PreservedUsers = () => {
 
   // Render 'Preserved users'
   return (
-    <Page>
-      <alerts.ManagedAlerts />
-      <PageSection variant={PageSectionVariants.light}>
-        <TitleLayout
-          id="preserved users title"
-          headingLevel="h1"
-          text="Preserved users"
+    <ContextualHelpPanel
+      fromPage="preserved-users"
+      isExpanded={isContextualPanelExpanded}
+      onClose={onCloseContextualPanel}
+    >
+      <Page>
+        <alerts.ManagedAlerts />
+        <PageSection variant={PageSectionVariants.light}>
+          <TitleLayout
+            id="preserved users title"
+            headingLevel="h1"
+            text="Preserved 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={preservedUsersList}
+                    from="preserved-users"
+                    showTableRows={showTableRows}
+                    usersData={usersTableData}
+                    buttonsData={usersTableButtonsData}
+                    paginationData={selectedPerPageData}
+                    searchValue={searchValue}
+                  />
+                )}
+              </InnerScrollContainer>
+            </OuterScrollContainer>
+          </div>
+          <PaginationLayout
+            list={preservedUsersList}
+            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()} />
+        <DeleteUsers
+          show={showDeleteModal}
+          from="preserved-users"
+          handleModalToggle={onDeleteModalToggle}
+          selectedUsersData={selectedUsersData}
+          buttonsData={deleteUsersButtonsData}
+          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}
+        <RestorePreservedUsers
+          show={showRestoreModal}
+          handleModalToggle={onRestoreModalToggle}
+          selectedUsers={selectedUsers}
+          clearSelectedUsers={clearSelectedUsers}
+          onSuccess={refreshUsersData}
         />
-        <div style={{ height: `calc(100vh - 352.2px)` }}>
-          <OuterScrollContainer>
-            <InnerScrollContainer>
-              {batchError !== undefined && batchError ? (
-                <GlobalErrors errors={globalErrors.getAll()} />
-              ) : (
-                <UsersTable
-                  shownElementsList={preservedUsersList}
-                  from="preserved-users"
-                  showTableRows={showTableRows}
-                  usersData={usersTableData}
-                  buttonsData={usersTableButtonsData}
-                  paginationData={selectedPerPageData}
-                  searchValue={searchValue}
-                />
-              )}
-            </InnerScrollContainer>
-          </OuterScrollContainer>
-        </div>
-        <PaginationLayout
-          list={preservedUsersList}
-          paginationData={paginationData}
-          variant={PaginationVariant.bottom}
-          widgetId="pagination-options-menu-bottom"
-          className="pf-v5-u-pb-0 pf-v5-u-pr-md"
+        <StagePreservedUsers
+          show={showStageModal}
+          handleModalToggle={onStageModalToggle}
+          selectedUsers={selectedUsers}
+          clearSelectedUsers={clearSelectedUsers}
+          onSuccess={refreshUsersData}
         />
-      </PageSection>
-      <ModalErrors errors={modalErrors.getAll()} />
-      <DeleteUsers
-        show={showDeleteModal}
-        from="preserved-users"
-        handleModalToggle={onDeleteModalToggle}
-        selectedUsersData={selectedUsersData}
-        buttonsData={deleteUsersButtonsData}
-        onRefresh={refreshUsersData}
-      />
-      <RestorePreservedUsers
-        show={showRestoreModal}
-        handleModalToggle={onRestoreModalToggle}
-        selectedUsers={selectedUsers}
-        clearSelectedUsers={clearSelectedUsers}
-        onSuccess={refreshUsersData}
-      />
-      <StagePreservedUsers
-        show={showStageModal}
-        handleModalToggle={onStageModalToggle}
-        selectedUsers={selectedUsers}
-        clearSelectedUsers={clearSelectedUsers}
-        onSuccess={refreshUsersData}
-      />
-    </Page>
+      </Page>
+    </ContextualHelpPanel>
   );
 };
 
diff --git a/tests/features/contextual_help_panel.feature b/tests/features/contextual_help_panel.feature
index f76150a6..222ae1a8 100644
--- a/tests/features/contextual_help_panel.feature
+++ b/tests/features/contextual_help_panel.feature
@@ -18,5 +18,17 @@ Feature: Contextual help links panel
     When I click on close button in the panel
     Then I should not see contextual help panel
 
+  # Preserved users page
+  Scenario: Open the contextual help links panel on 'preserved-users' main page
+    Given I am on "preserved-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 'Preserved users' main page
+    Given I am on "preserved-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