Add contextual help panel in Preserved users > Settings

The Contextual help links panel should be implemented in Preserved users > 'Settings' page to provide documentation links related to the page that is currently being shown. Signed-off-by: Carla Martinez <carlmart@redhat.com>
carma12 · Jan 21, 2025 · 68584ac · 68584ac
1 parent aac4be6
commit 68584ac
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 45 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -109,6 +109,36 @@
       "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"
     }
   ],
+  "preserved-users-settings": [
+    {
+      "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"
+    },
+    {
+      "name": "Adding a certificate mapping rule",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/conf-certmap-idm_managing-certificates-in-idm#proc-add-maprule-webui_conf-certmap-for-users-in-idm"
+    },
+    {
+      "name": "Adding certificate mapping data to a user entry",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/conf-certmap-idm_managing-certificates-in-idm#proc-add-certmapdata-to-user-webui_conf-certmap-for-users-in-idm"
+    },
+    {
+      "name": "Adding a certificate issued by an external CA to an IdM user, host, or service",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/managing-externally-signed-certificates-for-idm-users-hosts-and-services_managing-certificates-in-idm#adding-a-certificate-issued-by-an-external-ca-to-an-idm-user-host-or-service-by-using-the-idm-web-ui_managing-externally-signed-certificates-for-idm-users-hosts-and-services"
+    },
+    {
+      "name": "Removing a certificate issued by an external CA from an IdM user, host, or service account",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/managing-externally-signed-certificates-for-idm-users-hosts-and-services_managing-certificates-in-idm#removing-a-certificate-issued-by-an-external-ca-from-an-idm-user-host-or-service-account-by-using-the-idm-web-ui_managing-externally-signed-certificates-for-idm-users-hosts-and-services"
+    },
+    {
+      "name": "Converting an external certificate for loading into an IdM user account",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/convert-cert-formats-idm_managing-certificates-in-idm#proc_converting-an-external-certificate-in-the-idm-web-ui-for-loading-into-an-idm-user-account_assembly_converting-an-external-certificate-to-load-into-an-idm-user-account"
+    },
+    {
+      "name": "Viewing the expiry date of a certificate",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/managing-the-validity-of-certificates-in-idm_managing-certificates-in-idm#viewing-the-expiry-date-of-a-certificate-in-IdM-WebUI_managing-the-validity-of-certificates-in-idm"
+    }
+  ],
   "hosts": [
     {
       "name": "Adding host entries from IdM Web UI",

diff --git a/src/components/UsersSections/UserSettings.tsx b/src/components/UsersSections/UserSettings.tsx
@@ -104,6 +104,8 @@ const UserSettings = (props: PropsToUserSettings) => {
         props.changeFromPage("active-users-settings");
       } else if (props.from === "stage-users") {
         props.changeFromPage("stage-users-settings");
+      } else if (props.from === "preserved-users") {
+        props.changeFromPage("preserved-users-settings");
       }
     }
   }, [props.changeFromPage]);

diff --git a/src/pages/PreservedUsers/PreservedUsersTabs.tsx b/src/pages/PreservedUsers/PreservedUsersTabs.tsx
@@ -14,6 +14,7 @@ import UserSettings from "src/components/UsersSections/UserSettings";
 import DataSpinner from "src/components/layouts/DataSpinner";
 import BreadCrumb, { BreadCrumbItem } from "src/components/layouts/BreadCrumb";
 import TitleLayout from "src/components/layouts/TitleLayout";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Hooks
 import { useUserSettings } from "src/hooks/useUserSettingsData";
 // Redux
@@ -56,6 +57,25 @@ const PreservedUsersTabs = () => {
     }
   }, [uid]);
 
+  // Contextual links panel
+  const [fromPageSelected, setFromPageSelected] = React.useState(
+    "preserved-users-settings"
+  );
+  const [isContextualPanelExpanded, setIsContextualPanelExpanded] =
+    React.useState(false);
+
+  const changeFromPage = (fromPage: string) => {
+    setFromPageSelected(fromPage);
+  };
+
+  const onOpenContextualPanel = () => {
+    setIsContextualPanelExpanded(!isContextualPanelExpanded);
+  };
+
+  const onCloseContextualPanel = () => {
+    setIsContextualPanelExpanded(false);
+  };
+
   // Data loaded from DB
   const userSettingsData = useUserSettings(uid as string);
 
@@ -83,53 +103,64 @@ const PreservedUsersTabs = () => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pr-0">
-        <BreadCrumb
-          className="pf-v5-u-mb-md"
-          breadcrumbItems={breadcrumbItems}
-        />
-        <TitleLayout
-          id={uid ? uid : ""}
-          preText="Preserved user:"
-          text={uid ? uid : ""}
-          headingLevel="h1"
-        />
-      </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isFilled>
-        <Tabs
-          activeKey={activeTabKey}
-          onSelect={handleTabClick}
-          variant="light300"
-          isBox
-          className="pf-v5-u-ml-lg"
-          mountOnEnter
-          unmountOnExit
+      <ContextualHelpPanel
+        fromPage={fromPageSelected}
+        isExpanded={isContextualPanelExpanded}
+        onClose={onCloseContextualPanel}
+      >
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="pf-v5-u-pr-0"
         >
-          <Tab
-            eventKey={0}
-            name="details"
-            title={<TabTitleText>Settings</TabTitleText>}
+          <BreadCrumb
+            className="pf-v5-u-mb-md"
+            breadcrumbItems={breadcrumbItems}
+          />
+          <TitleLayout
+            id={uid ? uid : ""}
+            preText="Preserved user:"
+            text={uid ? uid : ""}
+            headingLevel="h1"
+          />
+        </PageSection>
+        <PageSection type="tabs" variant={PageSectionVariants.light} isFilled>
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={handleTabClick}
+            variant="light300"
+            isBox
+            className="pf-v5-u-ml-lg"
+            mountOnEnter
+            unmountOnExit
           >
-            <UserSettings
-              originalUser={userSettingsData.originalUser}
-              user={userSettingsData.user}
-              metadata={userSettingsData.metadata}
-              pwPolicyData={userSettingsData.pwPolicyData}
-              krbPolicyData={userSettingsData.krbtPolicyData}
-              certData={userSettingsData.certData}
-              onUserChange={userSettingsData.setUser}
-              isDataLoading={userSettingsData.isFetching}
-              onRefresh={userSettingsData.refetch}
-              isModified={userSettingsData.modified}
-              onResetValues={userSettingsData.resetValues}
-              modifiedValues={userSettingsData.modifiedValues}
-              radiusProxyData={userSettingsData.radiusServers}
-              idpData={userSettingsData.idpServers}
-              from="preserved-users"
-            />
-          </Tab>
-        </Tabs>
-      </PageSection>
+            <Tab
+              eventKey={0}
+              name="details"
+              title={<TabTitleText>Settings</TabTitleText>}
+            >
+              <UserSettings
+                originalUser={userSettingsData.originalUser}
+                user={userSettingsData.user}
+                metadata={userSettingsData.metadata}
+                pwPolicyData={userSettingsData.pwPolicyData}
+                krbPolicyData={userSettingsData.krbtPolicyData}
+                certData={userSettingsData.certData}
+                onUserChange={userSettingsData.setUser}
+                isDataLoading={userSettingsData.isFetching}
+                onRefresh={userSettingsData.refetch}
+                isModified={userSettingsData.modified}
+                onResetValues={userSettingsData.resetValues}
+                modifiedValues={userSettingsData.modifiedValues}
+                radiusProxyData={userSettingsData.radiusServers}
+                idpData={userSettingsData.idpServers}
+                from="preserved-users"
+                changeFromPage={changeFromPage}
+                onOpenContextualPanel={onOpenContextualPanel}
+              />
+            </Tab>
+          </Tabs>
+        </PageSection>
+      </ContextualHelpPanel>
     </>
   );
 };

diff --git a/tests/features/contextual_help_panel.feature b/tests/features/contextual_help_panel.feature
@@ -56,6 +56,16 @@ Feature: Contextual help links panel
     When I click on close button in the panel
     Then I should not see contextual help panel
 
+  # - Preserved users > Settings page
+  Scenario: Open and close the contextual help links panel on 'preserved-users-settings' main page
+    Given I am on "preserved-users-settings" 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
+    When I click on close button in the panel
+    Then I should not see contextual help panel
+
   # Hosts page
   Scenario: Open the contextual help links panel on 'hosts' main page
     Given I am on "hosts" page