[7.x] [Fleet] Integration Policies List view (#83634)

x-pack/plugins/fleet/public/applications/fleet/components/index.ts

@@ -11,3 +11,4 @@ export { PackageIcon } from './package_icon';
 export { ContextMenuActions } from './context_menu_actions';
 export { SearchBar } from './search_bar';
 export * from './settings_flyout';
+export * from './link_and_revision';

x-pack/plugins/fleet/public/applications/fleet/components/link_and_revision.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { CSSProperties, memo } from 'react';
+import { EuiLinkProps } from '@elastic/eui/src/components/link/link';
+
+const MIN_WIDTH: CSSProperties = { minWidth: 0 };
+const NO_WRAP_WHITE_SPACE: CSSProperties = { whiteSpace: 'nowrap' };
+
+export type LinkAndRevisionProps = EuiLinkProps & {
+  revision?: string | number;
+};
+
+/**
+ * Components shows a link for a given value along with a revision number to its right. The display
+ * value is truncated if it is longer than the width of where it is displayed, while the revision
+ * always remain visible
+ */
+export const LinkAndRevision = memo<LinkAndRevisionProps>(
+  ({ revision, className, ...euiLinkProps }) => {
+    return (
+      <EuiFlexGroup gutterSize="s" alignItems="baseline" style={MIN_WIDTH} responsive={false}>
+        <EuiFlexItem grow={false} className="eui-textTruncate">
+          <EuiLink className={`eui-textTruncate ${className ?? ''}`} {...euiLinkProps} />
+        </EuiFlexItem>
+        {revision && (
+          <EuiFlexItem grow={true}>
+            <EuiText color="subdued" size="xs" style={NO_WRAP_WHITE_SPACE}>
+              <FormattedMessage
+                id="xpack.fleet.policyNameLink.revisionNumber"
+                defaultMessage="rev. {revNumber}"
+                values={{ revNumber: revision }}
+              />
+            </EuiText>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    );
+  }
+);

x-pack/plugins/fleet/public/applications/fleet/hooks/index.ts

@@ -13,7 +13,8 @@ export { useBreadcrumbs } from './use_breadcrumbs';
 export { useLink } from './use_link';
 export { useKibanaLink } from './use_kibana_link';
 export { usePackageIconType, UsePackageIconType } from './use_package_icon_type';
-export { usePagination, Pagination } from './use_pagination';
+export { usePagination, Pagination, PAGE_SIZE_OPTIONS } from './use_pagination';
+export { useUrlPagination } from './use_url_pagination';
 export { useSorting } from './use_sorting';
 export { useDebounce } from './use_debounce';
 export * from './use_request';

x-pack/plugins/fleet/public/applications/fleet/hooks/use_pagination.tsx

@@ -4,22 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+
+export const PAGE_SIZE_OPTIONS: readonly number[] = [5, 20, 50];
 
 export interface Pagination {
   currentPage: number;
   pageSize: number;
 }
 
-export function usePagination() {
-  const [pagination, setPagination] = useState<Pagination>({
+export function usePagination(
+  pageInfo: Pagination = {
     currentPage: 1,
     pageSize: 20,
-  });
+  }
+) {
+  const [pagination, setPagination] = useState<Pagination>(pageInfo);
+  const pageSizeOptions = useMemo(() => [...PAGE_SIZE_OPTIONS], []);
 
   return {
     pagination,
     setPagination,
-    pageSizeOptions: [5, 20, 50],
+    pageSizeOptions,
   };
 }

x-pack/plugins/fleet/public/applications/fleet/hooks/use_url_pagination.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useUrlParams } from './use_url_params';
+import { PAGE_SIZE_OPTIONS, Pagination, usePagination } from './use_pagination';
+
+type SetUrlPagination = (pagination: Pagination) => void;
+interface UrlPagination {
+  pagination: Pagination;
+  setPagination: SetUrlPagination;
+  pageSizeOptions: number[];
+}
+
+type UrlPaginationParams = Partial<Pagination>;
+
+/**
+ * Uses URL params for pagination and also persists those to the URL as they are updated
+ */
+export const useUrlPagination = (): UrlPagination => {
+  const location = useLocation();
+  const history = useHistory();
+  const { urlParams, toUrlParams } = useUrlParams();
+  const urlPaginationParams = useMemo(() => {
+    return paginationFromUrlParams(urlParams);
+  }, [urlParams]);
+  const { pagination, pageSizeOptions, setPagination } = usePagination(urlPaginationParams);
+
+  const setUrlPagination = useCallback<SetUrlPagination>(
+    ({ pageSize, currentPage }) => {
+      history.push({
+        ...location,
+        search: toUrlParams({
+          ...urlParams,
+          currentPage,
+          pageSize,
+        }),
+      });
+    },
+    [history, location, toUrlParams, urlParams]
+  );
+
+  useEffect(() => {
+    setPagination((prevState) => {
+      return {
+        ...prevState,
+        ...paginationFromUrlParams(urlParams),
+      };
+    });
+  }, [setPagination, urlParams]);
+
+  return {
+    pagination,
+    setPagination: setUrlPagination,
+    pageSizeOptions,
+  };
+};
+
+const paginationFromUrlParams = (urlParams: UrlPaginationParams): Pagination => {
+  const pagination: Pagination = {
+    pageSize: 20,
+    currentPage: 1,
+  };
+
+  // Search params can appear multiple times in the URL, in which case the value for them,
+  // once parsed, would be an array. In these case, we take the last value defined
+  pagination.currentPage = Number(
+    (Array.isArray(urlParams.currentPage)
+      ? urlParams.currentPage[urlParams.currentPage.length - 1]
+      : urlParams.currentPage) ?? pagination.currentPage
+  );
+  pagination.pageSize =
+    Number(
+      (Array.isArray(urlParams.pageSize)
+        ? urlParams.pageSize[urlParams.pageSize.length - 1]
+        : urlParams.pageSize) ?? pagination.pageSize
+    ) ?? pagination.pageSize;
+
+  // If Current Page is not a valid positive integer, set it to 1
+  if (!Number.isFinite(pagination.currentPage) || pagination.currentPage < 1) {
+    pagination.currentPage = 1;
+  }
+
+  // if pageSize is not one of the expected page sizes, reset it to 20 (default)
+  if (!PAGE_SIZE_OPTIONS.includes(pagination.pageSize)) {
+    pagination.pageSize = 20;
+  }
+
+  return pagination;
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_select_agent_policy.tsx

@@ -247,7 +247,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
                   id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText"
                   defaultMessage="{count, plural, one {# agent} other {# agents}} are enrolled with the selected agent policy."
                   values={{
-                    count: agentPoliciesById[selectedPolicyId]?.agents || 0,
+                    count: agentPoliciesById[selectedPolicyId]?.agents ?? 0,
                   }}
                 />
               ) : null
@@ -283,7 +283,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
                             id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsCountText"
                             defaultMessage="{count, plural, one {# agent} other {# agents}} enrolled"
                             values={{
-                              count: agentPoliciesById[option.value!].agents || 0,
+                              count: agentPoliciesById[option.value!]?.agents ?? 0,
                             }}
                           />
                         </EuiTextColor>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx

@@ -34,7 +34,7 @@ import {
   useUrlParams,
   useBreadcrumbs,
 } from '../../../hooks';
-import { SearchBar } from '../../../components';
+import { LinkAndRevision, SearchBar } from '../../../components';
 import { LinkedAgentCount, AgentPolicyActionMenu } from '../components';
 import { CreateAgentPolicyFlyout } from './components';
 
@@ -129,26 +129,13 @@ export const AgentPolicyListPage: React.FunctionComponent<{}> = () => {
         }),
         width: '20%',
         render: (name: string, agentPolicy: AgentPolicy) => (
-          <EuiFlexGroup gutterSize="s" alignItems="baseline" style={{ minWidth: 0 }}>
-            <EuiFlexItem grow={false} className="eui-textTruncate">
-              <EuiLink
-                className="eui-textTruncate"
-                href={getHref('policy_details', { policyId: agentPolicy.id })}
-                title={name || agentPolicy.id}
-              >
-                {name || agentPolicy.id}
-              </EuiLink>
-            </EuiFlexItem>
-            <EuiFlexItem grow={true}>
-              <EuiText color="subdued" size="xs" style={{ whiteSpace: 'nowrap' }}>
-                <FormattedMessage
-                  id="xpack.fleet.agentPolicyList.revisionNumber"
-                  defaultMessage="rev. {revNumber}"
-                  values={{ revNumber: agentPolicy.revision }}
-                />
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <LinkAndRevision
+            href={getHref('policy_details', { policyId: agentPolicy.id })}
+            title={name || agentPolicy.id}
+            revision={agentPolicy.revision}
+          >
+            {name || agentPolicy.id}
+          </LinkAndRevision>
         ),
       },
       {

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/content.tsx

@@ -17,7 +17,7 @@ import { SettingsPanel } from './settings_panel';
 
 type ContentProps = PackageInfo & Pick<DetailParams, 'panel'>;
 
-const SideNavColumn = styled(LeftColumn)`
+const LeftSideColumn = styled(LeftColumn)`
   /* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
   &&& {
     margin-top: 77px;
@@ -30,15 +30,18 @@ const ContentFlexGroup = styled(EuiFlexGroup)`
 `;
 
 export function Content(props: ContentProps) {
+  const showRightColumn = props.panel !== 'policies';
   return (
     <ContentFlexGroup>
-      <SideNavColumn />
-      <CenterColumn>
+      <LeftSideColumn {...(!showRightColumn ? { columnGrow: 1 } : undefined)} />
+      <CenterColumn {...(!showRightColumn ? { columnGrow: 6 } : undefined)}>
         <ContentPanel {...props} />
       </CenterColumn>
-      <RightColumn>
-        <RightColumnContent {...props} />
-      </RightColumn>
+      {showRightColumn && (
+        <RightColumn>
+          <RightColumnContent {...props} />
+        </RightColumn>
+      )}
     </ContentFlexGroup>
   );
 }

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx

@@ -237,8 +237,7 @@ export function Detail() {
     return (entries(PanelDisplayNames)
       .filter(([panelId]) => {
         return (
-          panelId !== 'policies' ||
-          (packageInfoData?.response.status === InstallStatus.installed && false) // Remove `false` when ready to implement policies tab
+          panelId !== 'policies' || packageInfoData?.response.status === InstallStatus.installed
         );
       })
       .map(([panelId, display]) => {

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/layout.tsx

@@ -6,31 +6,45 @@
 
 import { EuiFlexItem } from '@elastic/eui';
 import React, { FunctionComponent, ReactNode } from 'react';
+import { FlexItemGrowSize } from '@elastic/eui/src/components/flex/flex_item';
 
 interface ColumnProps {
   children?: ReactNode;
   className?: string;
+  columnGrow?: FlexItemGrowSize;
 }
 
-export const LeftColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const LeftColumn: FunctionComponent<ColumnProps> = ({
+  columnGrow = 2,
+  children,
+  ...rest
+}) => {
   return (
-    <EuiFlexItem grow={2} {...rest}>
+    <EuiFlexItem grow={columnGrow} {...rest}>
       {children}
     </EuiFlexItem>
   );
 };
 
-export const CenterColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const CenterColumn: FunctionComponent<ColumnProps> = ({
+  columnGrow = 9,
+  children,
+  ...rest
+}) => {
   return (
-    <EuiFlexItem grow={9} {...rest}>
+    <EuiFlexItem grow={columnGrow} {...rest}>
       {children}
     </EuiFlexItem>
   );
 };
 
-export const RightColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const RightColumn: FunctionComponent<ColumnProps> = ({
+  columnGrow = 3,
+  children,
+  ...rest
+}) => {
   return (
-    <EuiFlexItem grow={3} {...rest}>
+    <EuiFlexItem grow={columnGrow} {...rest}>
       {children}
     </EuiFlexItem>
   );