Add contextual help panel in Hosts > Settings

The Context Help Links Panel needs to be implemented in Hosts > 'Settings' page to provide help links according to the shown page. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Jan 21, 2025 · dda7628 · dda7628
1 parent dba8131
commit dda7628
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 58 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -122,5 +122,31 @@
       "name": "Rebuilding automatic membership for a single user or host only",
       "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#rebuilding-automatic-membership-for-a-single-user-or-host-only_applying-automember-rules-to-existing-entries-using-idm-web-ui"
     }
+  ],
+  "hosts-settings": [
+    {
+      "name": "Hosts in IdM",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#hosts_managing-hosts-ui"
+    },
+    {
+      "name": "Host enrollment",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#assembly_host-enrollment_managing-hosts-ui"
+    },
+    {
+      "name": "User privileges required for host enrollment",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#host-enrollment-privileges_managing-hosts-ui"
+    },
+    {
+      "name": "Enrollment and authentication of IdM hosts and users: comparison",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#comparing-hosts-and-users_managing-hosts-ui"
+    },
+    {
+      "name": "Host entry in IdM LDAP",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#con_host-entry-LDAP_managing-hosts-ui"
+    },
+    {
+      "name": "Adding Host Entries from the Web UI",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/managing_idm_users_groups_hosts_and_access_control_rules/adding-hosts-ui_managing-users-groups-hosts#adding-host-entry-ui_managing-hosts-ui"
+    }
   ]
 }
diff --git a/src/pages/Hosts/HostsSettings.tsx b/src/pages/Hosts/HostsSettings.tsx
@@ -57,6 +57,8 @@ interface PropsToHostsSettings {
   isDataLoading?: boolean;
   modifiedValues: () => Partial<Host>;
   onResetValues: () => void;
+  changeFromPage: (from: string) => void;
+  onOpenContextualPanel: () => void;
 }
 
 const HostsSettings = (props: PropsToHostsSettings) => {
@@ -72,6 +74,11 @@ const HostsSettings = (props: PropsToHostsSettings) => {
 
   const [executeUnprovisionHost] = useUnprovisionHostMutation();
 
+  // Update page to show correct links info in Contextual panel
+  React.useEffect(() => {
+    props.changeFromPage("active-users-settings");
+  }, [props.changeFromPage]);
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isSaving, setSaving] = useState(false);
@@ -362,7 +369,10 @@ const HostsSettings = (props: PropsToHostsSettings) => {
       <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/Hosts/HostsTabs.tsx b/src/pages/Hosts/HostsTabs.tsx
@@ -13,6 +13,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import HostsSettings from "./HostsSettings";
 import HostsMemberOf from "./HostsMemberOf";
 import HostsManagedBy from "./HostsManagedBy";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Layouts
 import TitleLayout from "src/components/layouts/TitleLayout";
 import DataSpinner from "src/components/layouts/DataSpinner";
@@ -41,6 +42,29 @@ const HostsTabs = ({ section }) => {
 
   const [hostId, setHostId] = useState("");
 
+  // Contextual links panel
+  const [fromPageSelected, setFromPageSelected] =
+    React.useState("hosts-settings");
+  const [isContextualPanelExpanded, setIsContextualPanelExpanded] =
+    React.useState(false);
+
+  const changeFromPage = (fromPage: string) => {
+    setFromPageSelected(fromPage);
+  };
+
+  const onOpenContextualPanel = () => {
+    setIsContextualPanelExpanded(!isContextualPanelExpanded);
+  };
+
+  const onCloseContextualPanel = () => {
+    setIsContextualPanelExpanded(false);
+  };
+
+  // - Close links panel when tab section is changed
+  React.useEffect(() => {
+    setIsContextualPanelExpanded(false);
+  }, [section]);
+
   // Data loaded from DB
   const hostSettingsData = useHostSettings(fqdn as string);
 
@@ -114,65 +138,76 @@ const HostsTabs = ({ section }) => {
 
   return (
     <>
-      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pr-0">
-        <BreadCrumb
-          className="pf-v5-u-mb-md"
-          breadcrumbItems={breadcrumbItems}
-        />
-        <TitleLayout
-          id={hostId}
-          preText="Host:"
-          text={hostId}
-          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={"settings"}
-            name="settings-details"
-            title={<TabTitleText>Settings</TabTitleText>}
-          >
-            <HostsSettings
-              host={host}
-              originalHost={hostSettingsData.originalHost}
-              metadata={hostSettingsData.metadata}
-              certData={hostSettingsData.certData}
-              onHostChange={hostSettingsData.setHost}
-              isDataLoading={hostSettingsData.isFetching}
-              onRefresh={hostSettingsData.refetch}
-              isModified={hostSettingsData.modified}
-              onResetValues={hostSettingsData.resetValues}
-              modifiedValues={hostSettingsData.modifiedValues}
-            />
-          </Tab>
-          <Tab
-            eventKey={"memberof"}
-            name="memberof-details"
-            title={<TabTitleText>Is a member of</TabTitleText>}
-          >
-            <HostsMemberOf
-              host={partialHostToHost(host)}
-              tabSection={section}
-            />
-          </Tab>
-          <Tab
-            eventKey={"managedby"}
-            name="managedby-details"
-            title={<TabTitleText>Is managed by</TabTitleText>}
+          <BreadCrumb
+            className="pf-v5-u-mb-md"
+            breadcrumbItems={breadcrumbItems}
+          />
+          <TitleLayout
+            id={hostId}
+            preText="Host:"
+            text={hostId}
+            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
           >
-            <HostsManagedBy host={host as Host} />
-          </Tab>
-        </Tabs>
-      </PageSection>
+            <Tab
+              eventKey={"settings"}
+              name="settings-details"
+              title={<TabTitleText>Settings</TabTitleText>}
+            >
+              <HostsSettings
+                host={host}
+                originalHost={hostSettingsData.originalHost}
+                metadata={hostSettingsData.metadata}
+                certData={hostSettingsData.certData}
+                onHostChange={hostSettingsData.setHost}
+                isDataLoading={hostSettingsData.isFetching}
+                onRefresh={hostSettingsData.refetch}
+                isModified={hostSettingsData.modified}
+                onResetValues={hostSettingsData.resetValues}
+                modifiedValues={hostSettingsData.modifiedValues}
+                changeFromPage={changeFromPage}
+                onOpenContextualPanel={onOpenContextualPanel}
+              />
+            </Tab>
+            <Tab
+              eventKey={"memberof"}
+              name="memberof-details"
+              title={<TabTitleText>Is a member of</TabTitleText>}
+            >
+              <HostsMemberOf
+                host={partialHostToHost(host)}
+                tabSection={section}
+              />
+            </Tab>
+            <Tab
+              eventKey={"managedby"}
+              name="managedby-details"
+              title={<TabTitleText>Is managed by</TabTitleText>}
+            >
+              <HostsManagedBy host={host as Host} />
+            </Tab>
+          </Tabs>
+        </PageSection>
+      </ContextualHelpPanel>
     </>
   );
 };