Add contextual help panel in Services

The Context Help Links Panel needs to be implemented in Services main page to provide help links according to the shown page. Signed-off-by: Carla Martinez <carlmart@redhat.com>
freeipa · Jan 21, 2025 · 389ce2d · 389ce2d
1 parent dba8131
commit 389ce2d
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 58 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -122,5 +122,15 @@
       "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"
     }
+  ],
+  "services": [
+    {
+      "name": "Associating authentication indicators with an IdM service using 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/managing-kerberos-ticket-policies_managing-users-groups-hosts#associating-authentication-indicators-with-an-idm-service-using-idm-web-ui_enforcing-authentication-indicators-for-an-idm-service"
+    },
+    {
+      "name": "The IdM services",
+      "url": "https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/9/html/accessing_identity_management_services/viewing-starting-and-stopping-the-ipa-server_accessing-idm-services#the-idm-services_start-stop-ipa"
+    }
   ]
 }
diff --git a/src/pages/Services/Services.tsx b/src/pages/Services/Services.tsx
@@ -21,6 +21,7 @@ import HelpTextWithIconLayout from "../../components/layouts/HelpTextWithIconLay
 // Components
 import BulkSelectorPrep from "../../components/BulkSelectorPrep";
 import PaginationLayout from "../../components/layouts/PaginationLayout";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Tables
 import ServicesTable from "./ServicesTable";
 // Redux
@@ -438,6 +439,18 @@ const Services = () => {
     clearSelectedServices,
   };
 
+  // Contextual links panel
+  const [isContextualPanelExpanded, setIsContextualPanelExpanded] =
+    React.useState(false);
+
+  const onOpenContextualPanel = () => {
+    setIsContextualPanelExpanded(!isContextualPanelExpanded);
+  };
+
+  const onCloseContextualPanel = () => {
+    setIsContextualPanelExpanded(false);
+  };
+
   // List of toolbar items
   const toolbarItems: ToolbarItem[] = [
     {
@@ -509,7 +522,12 @@ const Services = () => {
     },
     {
       key: 7,
-      element: <HelpTextWithIconLayout textContent="Help" />,
+      element: (
+        <HelpTextWithIconLayout
+          textContent="Help"
+          onClick={onOpenContextualPanel}
+        />
+      ),
     },
     {
       key: 8,
@@ -527,65 +545,71 @@ const Services = () => {
 
   // Render component
   return (
-    <Page>
-      <alerts.ManagedAlerts />
-      <PageSection variant={PageSectionVariants.light}>
-        <TitleLayout id="Services title" headingLevel="h1" text="Services" />
-      </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}
+    <ContextualHelpPanel
+      fromPage="services"
+      isExpanded={isContextualPanelExpanded}
+      onClose={onCloseContextualPanel}
+    >
+      <Page>
+        <alerts.ManagedAlerts />
+        <PageSection variant={PageSectionVariants.light}>
+          <TitleLayout id="Services title" headingLevel="h1" text="Services" />
+        </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()} />
+                ) : (
+                  <ServicesTable
+                    elementsList={servicesList}
+                    shownElementsList={servicesList}
+                    showTableRows={showTableRows}
+                    servicesData={servicesTableData}
+                    buttonsData={servicesTableButtonsData}
+                    paginationData={selectedPerPageData}
+                    searchValue={searchValue}
+                  />
+                )}
+              </InnerScrollContainer>
+            </OuterScrollContainer>
+          </div>
+          <PaginationLayout
+            list={servicesList}
+            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()} />
+        <AddService
+          show={showAddModal}
+          handleModalToggle={onAddModalToggle}
+          onOpenAddModal={onAddClickHandler}
+          onCloseAddModal={onCloseAddModal}
+          onRefresh={refreshServicesData}
+          hostsList={hostsList}
         />
-        <div style={{ height: `calc(100vh - 350px)` }}>
-          <OuterScrollContainer>
-            <InnerScrollContainer>
-              {batchError !== undefined && batchError ? (
-                <GlobalErrors errors={globalErrors.getAll()} />
-              ) : (
-                <ServicesTable
-                  elementsList={servicesList}
-                  shownElementsList={servicesList}
-                  showTableRows={showTableRows}
-                  servicesData={servicesTableData}
-                  buttonsData={servicesTableButtonsData}
-                  paginationData={selectedPerPageData}
-                  searchValue={searchValue}
-                />
-              )}
-            </InnerScrollContainer>
-          </OuterScrollContainer>
-        </div>
-        <PaginationLayout
-          list={servicesList}
-          paginationData={paginationData}
-          variant={PaginationVariant.bottom}
-          widgetId="pagination-options-menu-bottom"
-          className="pf-v5-u-pb-0 pf-v5-u-pr-md"
+        <DeleteServices
+          show={showDeleteModal}
+          handleModalToggle={onDeleteModalToggle}
+          selectedServicesData={selectedElementsData}
+          buttonsData={deleteElementsButtonsData}
+          onRefresh={refreshServicesData}
         />
-      </PageSection>
-      <ModalErrors errors={modalErrors.getAll()} />
-      <AddService
-        show={showAddModal}
-        handleModalToggle={onAddModalToggle}
-        onOpenAddModal={onAddClickHandler}
-        onCloseAddModal={onCloseAddModal}
-        onRefresh={refreshServicesData}
-        hostsList={hostsList}
-      />
-      <DeleteServices
-        show={showDeleteModal}
-        handleModalToggle={onDeleteModalToggle}
-        selectedServicesData={selectedElementsData}
-        buttonsData={deleteElementsButtonsData}
-        onRefresh={refreshServicesData}
-      />
-    </Page>
+      </Page>
+    </ContextualHelpPanel>
   );
 };
 

diff --git a/tests/features/contextual_help_panel.feature b/tests/features/contextual_help_panel.feature
@@ -69,3 +69,17 @@ Feature: Contextual help links panel
     Given I should see contextual help panel
     When I click on close button in the panel
     Then I should not see contextual help panel
+
+  # Services
+  Scenario: Open the contextual help links panel on 'services' main page
+    Given I am on "services" 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
+
+  Scenario: Close the contextual help links panel on 'Services' main page
+    Given I am on "services" page
+    Given I should see contextual help panel
+    When I click on close button in the panel
+    Then I should not see contextual help panel