[Cloud Posture] Rules page changes and clickable breadcrumbs (#133202)

x-pack/plugins/cloud_security_posture/public/common/navigation/use_csp_breadcrumbs.ts

@@ -8,10 +8,22 @@
 import type { ChromeBreadcrumb, CoreStart } from '@kbn/core/public';
 import { useEffect } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { PLUGIN_ID } from '../../../common';
+import { type RouteProps, useRouteMatch, useHistory } from 'react-router-dom';
 import type { CspNavigationItem } from './types';
 import { CLOUD_POSTURE } from './translations';
 
+const getClickableBreadcrumb = (
+  routeMatch: RouteProps['path'],
+  breadcrumbPath: CspNavigationItem['path']
+) => {
+  const hasParams = breadcrumbPath.includes(':');
+  if (hasParams) return;
+
+  if (routeMatch !== breadcrumbPath) {
+    return breadcrumbPath.startsWith('/') ? `${breadcrumbPath}` : `/${breadcrumbPath}`;
+  }
+};
+
 export const useCspBreadcrumbs = (breadcrumbs: CspNavigationItem[]) => {
   const {
     services: {
@@ -19,22 +31,33 @@ export const useCspBreadcrumbs = (breadcrumbs: CspNavigationItem[]) => {
       application: { getUrlForApp },
     },
   } = useKibana<CoreStart>();
+  const match = useRouteMatch();
+  const history = useHistory();
 
   useEffect(() => {
-    const cspPath = getUrlForApp(PLUGIN_ID);
-    const additionalBreadCrumbs: ChromeBreadcrumb[] = breadcrumbs.map((breadcrumb) => ({
-      text: breadcrumb.name,
-      path: breadcrumb.path.startsWith('/')
-        ? `${cspPath}${breadcrumb.path}`
-        : `${cspPath}/${breadcrumb.path}`,
-    }));
+    const additionalBreadCrumbs: ChromeBreadcrumb[] = breadcrumbs.map((breadcrumb) => {
+      const clickableLink = getClickableBreadcrumb(match.path, breadcrumb.path);
+
+      return {
+        text: breadcrumb.name,
+        ...(clickableLink && {
+          onClick: (e) => {
+            e.preventDefault();
+            history.push(clickableLink);
+          },
+        }),
+      };
+    });
 
     setBreadcrumbs([
       {
         text: CLOUD_POSTURE,
-        href: cspPath,
+        onClick: (e) => {
+          e.preventDefault();
+          history.push(`/`);
+        },
       },
       ...additionalBreadCrumbs,
     ]);
-  }, [getUrlForApp, setBreadcrumbs, breadcrumbs]);
+  }, [match.path, getUrlForApp, setBreadcrumbs, breadcrumbs, history]);
 };

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

@@ -6,10 +6,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { EuiTextColor, EuiEmptyPrompt } from '@elastic/eui';
+import { generatePath, Link, RouteComponentProps } from 'react-router-dom';
+import { EuiTextColor, EuiEmptyPrompt, EuiButtonEmpty, EuiFlexGroup } from '@elastic/eui';
 import * as t from 'io-ts';
 import type { KibanaPageTemplateProps } from '@kbn/kibana-react-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { RulesContainer, type PageUrlParams } from './rules_container';
 import { allNavigationItems } from '../../common/navigation/constants';
 import { useCspBreadcrumbs } from '../../common/navigation/use_csp_breadcrumbs';
@@ -36,12 +37,36 @@ export const Rules = ({ match: { params } }: RouteComponentProps<PageUrlParams>)
   const pageProps: KibanaPageTemplateProps = useMemo(
     () => ({
       pageHeader: {
-        bottomBorder: false, // TODO: border still shows.
-        pageTitle: 'Rules',
+        pageTitle: (
+          <EuiFlexGroup direction="column" gutterSize="none">
+            <Link to={generatePath(allNavigationItems.benchmarks.path)}>
+              <EuiButtonEmpty iconType="arrowLeft" contentProps={{ style: { padding: 0 } }}>
+                <FormattedMessage
+                  id="xpack.csp.rules.rulesPageHeader.benchmarkIntegrationsButtonLabel"
+                  defaultMessage="Benchmark Integrations"
+                />
+              </EuiButtonEmpty>
+            </Link>
+            <FormattedMessage
+              id="xpack.csp.rules.rulePageHeader.pageHeaderTitle"
+              defaultMessage="Rules - {integrationName}"
+              values={{
+                integrationName: integrationInfo.data?.name,
+              }}
+            />
+          </EuiFlexGroup>
+        ),
         description: integrationInfo.data && integrationInfo.data.package && (
-          <PageDescription
-            text={`${integrationInfo.data.package.title}, ${integrationInfo.data.name}`}
-          />
+          <EuiTextColor color="subdued">
+            <FormattedMessage
+              id="xpack.csp.rules.rulePageHeader.pageDescriptionTitle"
+              defaultMessage="{integrationType}, {agentPolicyName}"
+              values={{
+                integrationType: integrationInfo.data.package.title,
+                agentPolicyName: integrationInfo.data.name,
+              }}
+            />
+          </EuiTextColor>
         ),
       },
     }),
@@ -49,13 +74,15 @@ export const Rules = ({ match: { params } }: RouteComponentProps<PageUrlParams>)
   );
 
   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)} />}
+      >
+        {integrationInfo.status === 'success' && <RulesContainer />}
+      </CspPageTemplate>
+    </>
   );
 };
 
@@ -71,10 +98,6 @@ const extractErrorBodyMessage = (err: unknown) => {
   return extractErrorMessage(err);
 };
 
-const PageDescription = ({ text }: { text: string }) => (
-  <EuiTextColor color="subdued">{text}</EuiTextColor>
-);
-
 const RulesErrorPrompt = ({ error }: { error: string }) => (
   <EuiEmptyPrompt
     {...{

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

@@ -112,7 +112,7 @@ export const RulesContainer = () => {
     filter: `${cspRuleAssetSavedObjectType}.attributes.policy_id: "${params.policyId}" and ${cspRuleAssetSavedObjectType}.attributes.package_policy_id: "${params.packagePolicyId}"`,
     search: '',
     page: 0,
-    perPage: 5,
+    perPage: 25,
   });
 
   const { data, status, error, refetch } = useFindCspRules({

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

@@ -58,7 +58,7 @@ export const RulesTable = ({
     pageIndex: page,
     pageSize,
     totalItemCount: total,
-    pageSizeOptions: [1, 5, 10, 25],
+    pageSizeOptions: [10, 25, 100],
   };
 
   const selection: EuiBasicTableProps<RuleSavedObject>['selection'] = {