[Cloud Posture] show agent name in rules page description (#133758) (#…

…133856)

(cherry picked from commit 6b02c03)

Co-authored-by: Or Ouziel <or.ouziel@elastic.co>

x-pack/plugins/cloud_security_posture/public/pages/rules/index.tsx

@@ -17,7 +17,7 @@ import { allNavigationItems } from '../../common/navigation/constants';
 import { useCspBreadcrumbs } from '../../common/navigation/use_csp_breadcrumbs';
 import { CspNavigationItem } from '../../common/navigation/types';
 import { extractErrorMessage } from '../../../common/utils/helpers';
-import { useCspIntegration } from './use_csp_integration';
+import { useCspIntegrationInfo } from './use_csp_integration';
 import { CspPageTemplate } from '../../components/csp_page_template';
 import { useKibana } from '../../common/hooks/use_kibana';
 
@@ -28,11 +28,14 @@ const getRulesBreadcrumbs = (name?: string): CspNavigationItem[] =>
 
 export const Rules = ({ match: { params } }: RouteComponentProps<PageUrlParams>) => {
   const { http } = useKibana().services;
-  const integrationInfo = useCspIntegration(params);
+  const integrationInfo = useCspIntegrationInfo(params);
+
+  const [packageInfo, agentInfo] = integrationInfo.data || [];
+
   const breadcrumbs = useMemo(
     // TODO: make benchmark breadcrumb navigable
-    () => getRulesBreadcrumbs(integrationInfo.data?.name),
-    [integrationInfo.data?.name]
+    () => getRulesBreadcrumbs(packageInfo?.name),
+    [packageInfo?.name]
   );
 
   useCspBreadcrumbs(breadcrumbs);
@@ -67,38 +70,36 @@ export const Rules = ({ match: { params } }: RouteComponentProps<PageUrlParams>)
               id="xpack.csp.rules.rulePageHeader.pageHeaderTitle"
               defaultMessage="Rules - {integrationName}"
               values={{
-                integrationName: integrationInfo.data?.name,
+                integrationName: packageInfo?.name,
               }}
             />
           </EuiFlexGroup>
         ),
-        description: integrationInfo.data && integrationInfo.data.package && (
+        description: packageInfo?.package && agentInfo?.name && (
           <EuiTextColor color="subdued">
             <FormattedMessage
               id="xpack.csp.rules.rulePageHeader.pageDescriptionTitle"
               defaultMessage="{integrationType}, {agentPolicyName}"
               values={{
-                integrationType: integrationInfo.data.package.title,
-                agentPolicyName: integrationInfo.data.name,
+                integrationType: packageInfo.package.title,
+                agentPolicyName: agentInfo.name,
               }}
             />
           </EuiTextColor>
         ),
       },
     }),
-    [http.basePath, integrationInfo.data, params]
+    [agentInfo?.name, http.basePath, packageInfo?.name, packageInfo?.package, params]
   );
 
   return (
-    <>
-      <CspPageTemplate
-        {...pageProps}
-        query={integrationInfo}
-        errorRender={(error) => <RulesErrorPrompt error={extractErrorBodyMessage(error)} />}
-      >
-        {integrationInfo.status === 'success' && <RulesContainer />}
-      </CspPageTemplate>
-    </>
+    <CspPageTemplate
+      {...pageProps}
+      query={integrationInfo}
+      errorRender={(error) => <RulesErrorPrompt error={extractErrorBodyMessage(error)} />}
+    >
+      <RulesContainer />
+    </CspPageTemplate>
   );
 };
 

x-pack/plugins/cloud_security_posture/public/pages/rules/rules.test.tsx

@@ -11,14 +11,15 @@ import { Rules } from '.';
 import { render, screen } from '@testing-library/react';
 import { QueryClient } from 'react-query';
 import { TestProvider } from '../../test/test_provider';
-import { useCspIntegration } from './use_csp_integration';
+import { useCspIntegrationInfo } from './use_csp_integration';
 import { type RouteComponentProps } from 'react-router-dom';
 import type { PageUrlParams } from './rules_container';
 import * as TEST_SUBJECTS from './test_subjects';
 import { useCisKubernetesIntegration } from '../../common/api/use_cis_kubernetes_integration';
+import { createReactQueryResponse } from '../../test/fixtures/react_query';
 
 jest.mock('./use_csp_integration', () => ({
-  useCspIntegration: jest.fn(),
+  useCspIntegrationInfo: jest.fn(),
 }));
 jest.mock('../../common/api/use_cis_kubernetes_integration');
 
@@ -53,41 +54,38 @@ describe('<Rules />', () => {
   it('calls API with URL params', async () => {
     const params = { packagePolicyId: '1', policyId: '2' };
     const Component = getTestComponent(params);
-    const result = {
+    const result = createReactQueryResponse({
       status: 'loading',
-    };
+    });
 
-    (useCspIntegration as jest.Mock).mockReturnValue(result);
+    (useCspIntegrationInfo as jest.Mock).mockReturnValue(result);
 
     render(<Component />);
 
-    expect(useCspIntegration).toHaveBeenCalledWith(params);
+    expect(useCspIntegrationInfo).toHaveBeenCalledWith(params);
   });
 
   it('displays error state when request had an error', async () => {
     const Component = getTestComponent({ packagePolicyId: '1', policyId: '2' });
-    const request = {
+    const request = createReactQueryResponse({
       status: 'error',
-      isError: true,
-      data: null,
       error: new Error('some error message'),
-    };
+    });
 
-    (useCspIntegration as jest.Mock).mockReturnValue(request);
+    (useCspIntegrationInfo as jest.Mock).mockReturnValue(request);
 
     render(<Component />);
 
-    expect(await screen.findByText(request.error.message)).toBeInTheDocument();
+    expect(await screen.findByText(request.error?.message!)).toBeInTheDocument();
   });
 
   it('displays loading state when request is pending', () => {
     const Component = getTestComponent({ packagePolicyId: '21', policyId: '22' });
-    const request = {
+    const request = createReactQueryResponse({
       status: 'loading',
-      isLoading: true,
-    };
+    });
 
-    (useCspIntegration as jest.Mock).mockReturnValue(request);
+    (useCspIntegrationInfo as jest.Mock).mockReturnValue(request);
 
     render(<Component />);
 
@@ -96,22 +94,25 @@ describe('<Rules />', () => {
 
   it('displays success state when result request is resolved', async () => {
     const Component = getTestComponent({ packagePolicyId: '21', policyId: '22' });
-    const request = {
+    const request = createReactQueryResponse({
       status: 'success',
-      data: {
-        name: 'CIS Kubernetes Benchmark',
-        package: {
-          title: 'my package',
+      data: [
+        {
+          name: 'CIS Kubernetes Benchmark',
+          package: {
+            title: 'my package',
+          },
         },
-      },
-    };
+        { name: 'my agent' },
+      ],
+    });
 
-    (useCspIntegration as jest.Mock).mockReturnValue(request);
+    (useCspIntegrationInfo as jest.Mock).mockReturnValue(request);
 
     render(<Component />);
 
     expect(
-      await screen.findByText(`${request.data.package.title}, ${request.data.name}`)
+      await screen.findByText(`${request.data?.[0]?.package?.title}, ${request.data?.[1].name}`)
     ).toBeInTheDocument();
     expect(await screen.findByTestId(TEST_SUBJECTS.CSP_RULES_CONTAINER)).toBeInTheDocument();
   });

x-pack/plugins/cloud_security_posture/public/pages/rules/use_csp_integration.tsx

@@ -5,15 +5,26 @@
  * 2.0.
  */
 import { useQuery } from 'react-query';
-import { type PackagePolicy, packagePolicyRouteService } from '@kbn/fleet-plugin/common';
+import {
+  type CopyAgentPolicyResponse,
+  type GetOnePackagePolicyResponse,
+  packagePolicyRouteService,
+  agentPolicyRouteService,
+} from '@kbn/fleet-plugin/common';
 import { type PageUrlParams } from './rules_container';
 import { useKibana } from '../../common/hooks/use_kibana';
 
-export const useCspIntegration = ({ packagePolicyId }: PageUrlParams) => {
+export const useCspIntegrationInfo = ({ packagePolicyId, policyId }: PageUrlParams) => {
   const { http } = useKibana().services;
-  return useQuery(
-    ['packagePolicy', { packagePolicyId }],
-    () => http.get<{ item: PackagePolicy }>(packagePolicyRouteService.getInfoPath(packagePolicyId)),
-    { select: (response) => response.item, enabled: !!packagePolicyId }
+
+  return useQuery(['cspRulesInfo', { packagePolicyId, policyId }], () =>
+    Promise.all([
+      http
+        .get<GetOnePackagePolicyResponse>(packagePolicyRouteService.getInfoPath(packagePolicyId))
+        .then((response) => response.item),
+      http
+        .get<CopyAgentPolicyResponse>(agentPolicyRouteService.getInfoPath(policyId))
+        .then((response) => response.item),
+    ])
   );
 };