Add contextual help panel in Services > Settings

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

Hide file tree

Showing 4 changed files with 125 additions and 56 deletions.
diff --git a/src/assets/documentation/documentation-links.json b/src/assets/documentation/documentation-links.json
@@ -132,5 +132,19 @@
       "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"
     }
+  ],
+  "services-settings": [
+    {
+      "name": "Kerberos authentication indicators",
+      "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#kerberos-authentication-indicators_managing-kerberos-ticket-policies"
+    },
+    {
+      "name": "Enforcing authentication indicators for an IdM service",
+      "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#enforcing-authentication-indicators-for-an-idm-service_managing-kerberos-ticket-policies"
+    },
+    {
+      "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"
+    }
   ]
 }
diff --git a/src/pages/Services/ServicesSettings.tsx b/src/pages/Services/ServicesSettings.tsx
@@ -55,6 +55,8 @@ interface PropsToServicesSettings {
   modifiedValues: () => Partial<Service>;
   onResetValues: () => void;
   certData: Record<string, unknown>;
+  changeFromPage: (from: string) => void;
+  onOpenContextualPanel: () => void;
 }
 
 const ServicesSettings = (props: PropsToServicesSettings) => {
@@ -65,6 +67,11 @@ const ServicesSettings = (props: PropsToServicesSettings) => {
   const [saveService] = useSaveServiceMutation();
   const [executeUnprovision] = useUnprovisionServiceMutation();
 
+  // Update page to show correct links info in Contextual panel
+  React.useEffect(() => {
+    props.changeFromPage("service-settings");
+  }, [props.changeFromPage]);
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isSaving, setSaving] = useState(false);
@@ -263,7 +270,10 @@ const ServicesSettings = (props: PropsToServicesSettings) => {
       <alerts.ManagedAlerts />
       <Sidebar isPanelRight className="pf-v5-u-mt-lg">
         <SidebarPanel variant="sticky">
-          <HelpTextWithIconLayout textContent="Help" />
+          <HelpTextWithIconLayout
+            textContent="Help"
+            onClick={props.onOpenContextualPanel}
+          />
           <JumpLinks
             isVertical
             label="Jump to section"

diff --git a/src/pages/Services/ServicesTabs.tsx b/src/pages/Services/ServicesTabs.tsx
@@ -16,6 +16,7 @@ import ServicesManagedBy from "./ServicesManagedBy";
 import BreadCrumb, { BreadCrumbItem } from "src/components/layouts/BreadCrumb";
 import TitleLayout from "src/components/layouts/TitleLayout";
 import { partialServiceToService } from "src/utils/serviceUtils";
+import ContextualHelpPanel from "src/components/ContextualHelpPanel/ContextualHelpPanel";
 // Hooks
 import { useAlerts } from "../../hooks/useAlerts";
 // Hooks
@@ -43,6 +44,29 @@ const ServicesTabs = ({ section }) => {
     BreadCrumbItem[]
   >([]);
 
+  // Contextual links panel
+  const [fromPageSelected, setFromPageSelected] =
+    React.useState("services-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 serviceSettingsData = useServiceSettings(decodedId as string);
 
@@ -114,63 +138,74 @@ const ServicesTabs = ({ section }) => {
 
   return (
     <>
-      <alerts.ManagedAlerts />
-      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pr-0">
-        <BreadCrumb
-          className="pf-v5-u-mb-md"
-          breadcrumbItems={breadcrumbItems}
-        />
-        <TitleLayout
-          id={service.krbcanonicalname}
-          preText="Service:"
-          text={service.krbcanonicalname}
-          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}
+      >
+        <alerts.ManagedAlerts />
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="pf-v5-u-pr-0"
         >
-          <Tab
-            eventKey={"settings"}
-            name="details"
-            title={<TabTitleText>Settings</TabTitleText>}
-          >
-            <ServicesSettings
-              service={service}
-              originalService={serviceSettingsData.originalService}
-              metadata={serviceSettingsData.metadata}
-              onServiceChange={serviceSettingsData.setService}
-              isDataLoading={serviceSettingsData.isLoading}
-              onRefresh={serviceSettingsData.refetch}
-              isModified={serviceSettingsData.modified}
-              onResetValues={serviceSettingsData.resetValues}
-              modifiedValues={serviceSettingsData.modifiedValues}
-              certData={certificates}
-            />
-          </Tab>
-          <Tab
-            eventKey={"memberof"}
-            name="details"
-            title={<TabTitleText>Is a member of</TabTitleText>}
-          >
-            <ServicesMemberOf service={service} tabSection={section} />
-          </Tab>
-          <Tab
-            eventKey={"managedby"}
-            name="details"
-            title={<TabTitleText>Is managed by</TabTitleText>}
+          <BreadCrumb
+            className="pf-v5-u-mb-md"
+            breadcrumbItems={breadcrumbItems}
+          />
+          <TitleLayout
+            id={service.krbcanonicalname}
+            preText="Service:"
+            text={service.krbcanonicalname}
+            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
           >
-            <ServicesManagedBy service={service} />
-          </Tab>
-        </Tabs>
-      </PageSection>
+            <Tab
+              eventKey={"settings"}
+              name="details"
+              title={<TabTitleText>Settings</TabTitleText>}
+            >
+              <ServicesSettings
+                service={service}
+                originalService={serviceSettingsData.originalService}
+                metadata={serviceSettingsData.metadata}
+                onServiceChange={serviceSettingsData.setService}
+                isDataLoading={serviceSettingsData.isLoading}
+                onRefresh={serviceSettingsData.refetch}
+                isModified={serviceSettingsData.modified}
+                onResetValues={serviceSettingsData.resetValues}
+                modifiedValues={serviceSettingsData.modifiedValues}
+                certData={certificates}
+                changeFromPage={changeFromPage}
+                onOpenContextualPanel={onOpenContextualPanel}
+              />
+            </Tab>
+            <Tab
+              eventKey={"memberof"}
+              name="details"
+              title={<TabTitleText>Is a member of</TabTitleText>}
+            >
+              <ServicesMemberOf service={service} tabSection={section} />
+            </Tab>
+            <Tab
+              eventKey={"managedby"}
+              name="details"
+              title={<TabTitleText>Is managed by</TabTitleText>}
+            >
+              <ServicesManagedBy service={service} />
+            </Tab>
+          </Tabs>
+        </PageSection>
+      </ContextualHelpPanel>
     </>
   );
 };

diff --git a/tests/features/contextual_help_panel.feature b/tests/features/contextual_help_panel.feature
@@ -83,3 +83,13 @@ 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 > Settings page
+  Scenario: Open and close the contextual help links panel on 'services-settings' main page
+    Given I am on "services-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