Add Context Help Panel in Settings page

The Context Help Links Panel needs to be implemented in the Active users > Settings page, as it was done in Active users. The code has been modified to also: - Optimize the way `contextualHelpPanel` component process the incoming links - Provide the links that belongs to the Active users > Settings page context - Show the panel with the `Settings` page links from its parent component (`ActiveUsersTab`). This way, the panel will be shown at its full height Signed-off-by: Carla Martinez <[email protected]>
freeipa · Jan 13, 2025 · 9ef3983 · 9ef3983
1 parent 455687b
commit 9ef3983
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 92 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -24,5 +24,51 @@
       "name": "Rebuilding automatic membership",
       "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html-single/managing_idm_users_groups_hosts_and_access_control_rules/index#applying-automember-rules-to-existing-entries-using-idm-web-ui_automating-group-membership-using-idm-web-ui"
     }
+  ],
+  "active-users-settings": [
+    {
+      "name": "Resetting another user’s password",
+      "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-passwords-in-idm_managing-users-groups-hosts#resetting-another-users-password-in-the-idm-web-ui_managing-user-passwords-in-idm"
+    },
+    {
+      "name": "Requesting new certificates for a user, host, or service",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_certificates_in_idm/managing-certificates-for-users-hosts-and-services-using-the-integrated-idm-ca_managing-certificates-in-idm#requesting-new-certificates-for-a-user-host-or-service-using-idm-web-ui_managing-certificates-for-users-hosts-and-services-using-the-integrated-idm-ca"
+    },
+    {
+      "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"
+    },
+    {
+      "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-maprule-webui_conf-certmap-for-users-in-idm"
+    },
+    {
+      "name": "Adding a certificate to an AD user’s ID override",
+      "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": "Logging in to the Identity Management Web UI using one time passwords",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/accessing_identity_management_services/logging-in-to-the-ipa-web-ui-using-one-time-passwords_accessing-idm-services"
+    },
+    {
+      "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"
+    }
   ]
 }
diff --git a/src/components/ContextualHelpPanel/ContextualHelpPanel.tsx b/src/components/ContextualHelpPanel/ContextualHelpPanel.tsx
@@ -37,20 +37,17 @@ const ContextualHelpPanel = (props: ContextualHelpPanelProps) => {
 
   React.useEffect(() => {
     const urlList: DocLink[] = [];
-    switch (props.fromPage) {
-      case "active-users":
-        DocumentationLinks["active-users"].map((entry) => {
-          urlList.push({
-            name: entry.name,
-            url: entry.url,
-          });
+
+    if (DocumentationLinks[props.fromPage].length === 0) {
+      setUrlList([]);
+    } else {
+      DocumentationLinks[props.fromPage].map((entry) => {
+        urlList.push({
+          name: entry.name,
+          url: entry.url,
         });
-        setUrlList(urlList);
-        break;
-      // TODO: Add rest of the cases for the links data (based on key)
-      default:
-        setUrlList([]);
-        break;
+      });
+      setUrlList(urlList);
     }
   }, []);
 

diff --git a/src/components/UsersSections/UserSettings.tsx b/src/components/UsersSections/UserSettings.tsx
@@ -77,6 +77,8 @@ export interface PropsToUserSettings {
   idpData?: IDPServer[];
   activeUsersList?: Partial<User>[];
   from: "active-users" | "stage-users" | "preserved-users";
+  changeFromPage?: (from: string) => void;
+  onOpenContextualPanel?: () => void;
 }
 
 const UserSettings = (props: PropsToUserSettings) => {
@@ -95,6 +97,13 @@ const UserSettings = (props: PropsToUserSettings) => {
     [saveUser] = useSaveStageUserMutation();
   }
 
+  // Update page to show correct links info in Contextual panel
+  React.useEffect(() => {
+    if (props.changeFromPage !== undefined) {
+      props.changeFromPage("active-users-settings");
+    }
+  }, [props.changeFromPage]);
+
   // To handle the logic of the selectedUsersData (from
   //   the 'Disable / Enable' modal), lets use the 'selectedUsers' state
   const clearSelectedUsers = () => {
@@ -437,7 +446,10 @@ const UserSettings = (props: PropsToUserSettings) => {
       <alerts.ManagedAlerts />
       <Sidebar isPanelRight>
         <SidebarPanel variant="sticky">
-          <HelpTextWithIconLayout textContent="Help" />
+          <HelpTextWithIconLayout
+            textContent="Help"
+            onClick={props.onOpenContextualPanel}
+          />
           <JumpLinks
             isVertical
             label="Jump to section"

diff --git a/src/pages/ActiveUsers/ActiveUsersTabs.tsx b/src/pages/ActiveUsers/ActiveUsersTabs.tsx
@@ -16,6 +16,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import UserSettings from "src/components/UsersSections/UserSettings";
 import UserMemberOf from "./UserMemberOf";
 import BreadCrumb, { BreadCrumbItem } from "src/components/layouts/BreadCrumb";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Layouts
 import DataSpinner from "src/components/layouts/DataSpinner";
 // Hooks
@@ -69,6 +70,25 @@ const ActiveUsersTabs = ({ memberof }) => {
     }
   }, [memberof]);
 
+  // Contextual links panel
+  const [fromPageSelected, setFromPageSelected] = React.useState(
+    "active-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);
 
@@ -98,86 +118,97 @@ const ActiveUsersTabs = ({ memberof }) => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pr-0">
-        <BreadCrumb
-          className="pf-v5-u-mb-md"
-          breadcrumbItems={breadcrumbItems}
-        />
-        <TextContent>
-          <Title headingLevel="h1">
-            <div
-              className="pf-v5-u-display-flex"
-              title={disabled ? "User is disabled" : ""}
-            >
-              {titleText}
-              {disabled ? (
-                <Icon
-                  className="pf-v5-u-ml-sm pf-v5-u-mt-sm"
-                  status="info"
-                  size="md"
-                >
-                  <LockIcon />
-                </Icon>
-              ) : (
-                ""
-              )}
-            </div>
-          </Title>
-        </TextContent>
-      </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isFilled>
-        <Tabs
-          activeKey={activeTab}
-          onSelect={(_event, tabIndex) => {
-            if (tabIndex === "settings") {
-              navigate("/active-users/" + uid);
-            } else if (tabIndex === "memberof") {
-              navigate("memberof_group");
-            }
-          }}
-          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={"settings"}
-            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}
-              activeUsersList={userSettingsData.activeUsersList}
-              from="active-users"
-            />
-          </Tab>
-          <Tab
-            eventKey={"memberof"}
-            name="memberof-details"
-            title={<TabTitleText>Is a member of</TabTitleText>}
+          <BreadCrumb
+            className="pf-v5-u-mb-md"
+            breadcrumbItems={breadcrumbItems}
+          />
+          <TextContent>
+            <Title headingLevel="h1">
+              <div
+                className="pf-v5-u-display-flex"
+                title={disabled ? "User is disabled" : ""}
+              >
+                {titleText}
+                {disabled ? (
+                  <Icon
+                    className="pf-v5-u-ml-sm pf-v5-u-mt-sm"
+                    status="info"
+                    size="md"
+                  >
+                    <LockIcon />
+                  </Icon>
+                ) : (
+                  ""
+                )}
+              </div>
+            </Title>
+          </TextContent>
+        </PageSection>
+        <PageSection type="tabs" variant={PageSectionVariants.light} isFilled>
+          <Tabs
+            activeKey={activeTab}
+            onSelect={(_event, tabIndex) => {
+              if (tabIndex === "settings") {
+                navigate("/active-users/" + uid);
+              } else if (tabIndex === "memberof") {
+                navigate("memberof_group");
+              }
+            }}
+            variant="light300"
+            isBox
+            className="pf-v5-u-ml-lg"
+            mountOnEnter
+            unmountOnExit
           >
-            <UserMemberOf
-              user={partialUserToUser(user)}
-              tab={memberof || "group"}
-              from="active-users"
-            />
-          </Tab>
-        </Tabs>
-      </PageSection>
+            <Tab
+              eventKey={"settings"}
+              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}
+                activeUsersList={userSettingsData.activeUsersList}
+                from="active-users"
+                changeFromPage={changeFromPage}
+                onOpenContextualPanel={onOpenContextualPanel}
+              />
+            </Tab>
+            <Tab
+              eventKey={"memberof"}
+              name="memberof-details"
+              title={<TabTitleText>Is a member of</TabTitleText>}
+            >
+              <UserMemberOf
+                user={partialUserToUser(user)}
+                tab={memberof || "group"}
+                from="active-users"
+              />
+            </Tab>
+          </Tabs>
+        </PageSection>
+      </ContextualHelpPanel>
     </>
   );
 };