Add contextual help panel in Stage users > Settings

The Contextual help links panel should be implemented in Stage users > 'Settings' page to provide documentation links related to the page that is currently being shown. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Jan 21, 2025 · c322153 · c322153
1 parent 0697135
commit c322153
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 46 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -85,6 +85,20 @@
       "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"
     }
   ],
+  "stage-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"
+    }
+  ],
   "preserved-users": [
     {
       "name": "Deleting users",

diff --git a/src/components/UsersSections/UserSettings.tsx b/src/components/UsersSections/UserSettings.tsx
@@ -100,7 +100,11 @@ const UserSettings = (props: PropsToUserSettings) => {
   // Update page to show correct links info in Contextual panel
   React.useEffect(() => {
     if (props.changeFromPage !== undefined) {
-      props.changeFromPage("active-users-settings");
+      if (props.from === "active-users") {
+        props.changeFromPage("active-users-settings");
+      } else if (props.from === "stage-users") {
+        props.changeFromPage("stage-users-settings");
+      }
     }
   }, [props.changeFromPage]);
 

diff --git a/src/pages/StageUsers/StageUsersTabs.tsx b/src/pages/StageUsers/StageUsersTabs.tsx
@@ -14,6 +14,7 @@ import UserSettings from "src/components/UsersSections/UserSettings";
 import BreadCrumb, { BreadCrumbItem } from "src/components/layouts/BreadCrumb";
 import DataSpinner from "src/components/layouts/DataSpinner";
 import TitleLayout from "src/components/layouts/TitleLayout";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Hooks
 import { useStageUserSettings } from "src/hooks/useUserSettingsData";
 // Redux
@@ -55,6 +56,25 @@ const StageUsersTabs = () => {
     }
   }, [uid]);
 
+  // Contextual links panel
+  const [fromPageSelected, setFromPageSelected] = React.useState(
+    "stage-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 = useStageUserSettings(uid as string);
 
@@ -82,53 +102,64 @@ const StageUsersTabs = () => {
 
   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="Staged 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="Staged 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="stage-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="stage-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
@@ -32,6 +32,16 @@ Feature: Contextual help links panel
     When I click on close button in the panel
     Then I should not see contextual help panel
 
+  # - Stage users > Settings page
+  Scenario: Open and close the contextual help links panel on Stage users > Settings page
+    Given I am on "stage-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
+
   # Preserved users page
   Scenario: Open the contextual help links panel on 'preserved-users' main page
     Given I am on "preserved-users" page