Add contextual help panel in Hosts

The Context Help Links Panel needs to be implemented in Hosts main page to provide help links according to the shown page. Signed-off-by: Carla Martinez <[email protected]>
freeipa · Jan 13, 2025 · 5551240 · 5551240
1 parent 0697135
commit 5551240
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 71 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -94,5 +94,19 @@
       "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"
     }
+  ],
+  "hosts": [
+    {
+      "name": "Adding host entries from IdM 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#doc-wrapper"
+    },
+    {
+      "name": "Rebuilding automatic membership for all users or hosts",
+      "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-all-users-or-hosts_applying-automember-rules-to-existing-entries-using-idm-web-ui"
+    },
+    {
+      "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"
+    }
   ]
 }
diff --git a/src/pages/Hosts/Hosts.tsx b/src/pages/Hosts/Hosts.tsx
@@ -26,6 +26,7 @@ import ModalWithFormLayout from "src/components/layouts/ModalWithFormLayout";
 // Components
 import BulkSelectorPrep from "src/components/BulkSelectorPrep";
 import PaginationLayout from "src/components/layouts/PaginationLayout";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Tables
 import HostsTable from "./HostsTable";
 // Modal
@@ -564,6 +565,18 @@ const Hosts = () => {
     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[] = [
     {
@@ -647,7 +660,12 @@ const Hosts = () => {
     },
     {
       key: 8,
-      element: <HelpTextWithIconLayout textContent="Help" />,
+      element: (
+        <HelpTextWithIconLayout
+          textContent="Help"
+          onClick={onOpenContextualPanel}
+        />
+      ),
     },
     {
       key: 9,
@@ -664,78 +682,84 @@ const Hosts = () => {
   ];
 
   return (
-    <Page>
-      <alerts.ManagedAlerts />
-      <PageSection variant={PageSectionVariants.light}>
-        <TitleLayout id="Hosts title" headingLevel="h1" text="Hosts" />
-      </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 - 350px)` }}>
-          <OuterScrollContainer>
-            <InnerScrollContainer>
-              {batchError !== undefined && batchError ? (
-                <GlobalErrors errors={globalErrors.getAll()} />
-              ) : (
-                <HostsTable
-                  elementsList={hostsList}
-                  shownElementsList={hostsList}
-                  showTableRows={showTableRows}
-                  hostsData={hostsTableData}
-                  buttonsData={hostsTableButtonsData}
-                  paginationData={selectedPerPageData}
-                  searchValue={searchValue}
-                />
-              )}
-            </InnerScrollContainer>
-          </OuterScrollContainer>
-        </div>
-        <PaginationLayout
-          list={hostsList}
-          paginationData={paginationData}
-          variant={PaginationVariant.bottom}
-          widgetId="pagination-options-menu-bottom"
-          className="pf-v5-u-pb-0 pf-v5-u-pr-md"
+    <ContextualHelpPanel
+      fromPage="hosts"
+      isExpanded={isContextualPanelExpanded}
+      onClose={onCloseContextualPanel}
+    >
+      <Page>
+        <alerts.ManagedAlerts />
+        <PageSection variant={PageSectionVariants.light}>
+          <TitleLayout id="Hosts title" headingLevel="h1" text="Hosts" />
+        </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 - 350px)` }}>
+            <OuterScrollContainer>
+              <InnerScrollContainer>
+                {batchError !== undefined && batchError ? (
+                  <GlobalErrors errors={globalErrors.getAll()} />
+                ) : (
+                  <HostsTable
+                    elementsList={hostsList}
+                    shownElementsList={hostsList}
+                    showTableRows={showTableRows}
+                    hostsData={hostsTableData}
+                    buttonsData={hostsTableButtonsData}
+                    paginationData={selectedPerPageData}
+                    searchValue={searchValue}
+                  />
+                )}
+              </InnerScrollContainer>
+            </OuterScrollContainer>
+          </div>
+          <PaginationLayout
+            list={hostsList}
+            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()} />
+        {isMembershipModalOpen && (
+          <ModalWithFormLayout
+            variantType="medium"
+            modalPosition="top"
+            offPosition="76px"
+            title="Confirmation"
+            formId="rebuild-auto-membership-modal"
+            fields={confirmationQuestion}
+            show={isMembershipModalOpen}
+            onClose={() => setIsMembershipModalOpen(!isMembershipModalOpen)}
+            actions={membershipModalActions}
+          />
+        )}
+        <AddHost
+          show={showAddModal}
+          handleModalToggle={onAddModalToggle}
+          onOpenAddModal={onAddClickHandler}
+          onCloseAddModal={onCloseAddModal}
+          dnsZones={dnsZones}
+          onRefresh={refreshHostsData}
         />
-      </PageSection>
-      <ModalErrors errors={modalErrors.getAll()} />
-      {isMembershipModalOpen && (
-        <ModalWithFormLayout
-          variantType="medium"
-          modalPosition="top"
-          offPosition="76px"
-          title="Confirmation"
-          formId="rebuild-auto-membership-modal"
-          fields={confirmationQuestion}
-          show={isMembershipModalOpen}
-          onClose={() => setIsMembershipModalOpen(!isMembershipModalOpen)}
-          actions={membershipModalActions}
+        <DeleteHosts
+          show={showDeleteModal}
+          handleModalToggle={onDeleteModalToggle}
+          selectedHostsData={selectedHostsData}
+          buttonsData={deleteHostsButtonsData}
+          onRefresh={refreshHostsData}
         />
-      )}
-      <AddHost
-        show={showAddModal}
-        handleModalToggle={onAddModalToggle}
-        onOpenAddModal={onAddClickHandler}
-        onCloseAddModal={onCloseAddModal}
-        dnsZones={dnsZones}
-        onRefresh={refreshHostsData}
-      />
-      <DeleteHosts
-        show={showDeleteModal}
-        handleModalToggle={onDeleteModalToggle}
-        selectedHostsData={selectedHostsData}
-        buttonsData={deleteHostsButtonsData}
-        onRefresh={refreshHostsData}
-      />
-    </Page>
+      </Page>
+    </ContextualHelpPanel>
   );
 };