[nit][pre-req] Split EPM Home into components

src/plugins/custom_integrations/common/index.ts

@@ -14,8 +14,44 @@ export interface IntegrationCategoryCount {
   id: IntegrationCategory;
 }
 
-export const INTEGRATION_CATEGORY_DISPLAY = {
-  // Known EPR
+export const category = [
+  'aws',
+  'azure',
+  'cloud',
+  'config_management',
+  'containers',
+  'crm',
+  'custom',
+  'datastore',
+  'elastic_stack',
+  'google_cloud',
+  'kubernetes',
+  'languages',
+  'message_queue',
+  'monitoring',
+  'network',
+  'notification',
+  'os_system',
+  'productivity',
+  'security',
+  'sample_data',
+  'support',
+  'ticketing',
+  'version_control',
+  'web',
+
+  // Kibana added
+  'language_client',
+  'upload_file',
+
+  // Internal
+  'updates_available',
+] as const;
+
+export type IntegrationCategory = typeof category[number];
+
+// TODO: consider i18n
+export const INTEGRATION_CATEGORY_DISPLAY: { [K in IntegrationCategory]: string } = {
   aws: 'AWS',
   azure: 'Azure',
   cloud: 'Cloud',
@@ -49,7 +85,26 @@ export const INTEGRATION_CATEGORY_DISPLAY = {
   updates_available: 'Updates available',
 };
 
-export type IntegrationCategory = keyof typeof INTEGRATION_CATEGORY_DISPLAY;
+export const shipper = [
+  'beats',
+  'language_clients',
+  'other',
+  'sample_data',
+  'tests',
+  'tutorial',
+] as const;
+
+export type Shipper = typeof shipper[number];
+
+// TODO: consider i18n
+export const SHIPPER_DISPLAY: { [K in Shipper]: string } = {
+  beats: 'Beats',
+  language_clients: 'Language clients',
+  other: 'Other',
+  sample_data: 'Sample data',
+  tests: 'Tests',
+  tutorial: 'Tutorials',
+};
 
 export interface CustomIntegrationIcon {
   src: string;
@@ -65,7 +120,7 @@ export interface CustomIntegration {
   isBeta: boolean;
   icons: CustomIntegrationIcon[];
   categories: IntegrationCategory[];
-  shipper: string;
+  shipper: Shipper;
   eprOverlap?: string; // name of the equivalent Elastic Agent integration in EPR. e.g. a beat module can correspond to an EPR-package, or an APM-tutorial. When completed, Integrations-UX can preferentially show the EPR-package, rather than the custom-integration
 }
 

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.stories.tsx

@@ -9,15 +9,15 @@ import React from 'react';
 
 import { action } from '@storybook/addon-actions';
 
-import type { ListProps } from './package_list_grid';
+import type { Props } from './package_list_grid';
 import { PackageListGrid } from './package_list_grid';
 
 export default {
   component: PackageListGrid,
   title: 'Sections/EPM/Package List Grid',
 };
 
-type Args = Pick<ListProps, 'title' | 'isLoading' | 'showMissingIntegrationMessage'>;
+type Args = Pick<Props, 'title' | 'isLoading' | 'showMissingIntegrationMessage'>;
 
 const args: Args = {
   title: 'Installed integrations',

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.tsx

@@ -14,7 +14,6 @@ import {
   EuiLink,
   EuiSpacer,
   EuiTitle,
-  // @ts-ignore
   EuiSearchBar,
   EuiText,
 } from '@elastic/eui';
@@ -29,7 +28,7 @@ import type { IntegrationCardItem } from '../../../../../../common/types/models'
 
 import { PackageCard } from './package_card';
 
-export interface ListProps {
+export interface Props {
   isLoading?: boolean;
   controls?: ReactNode;
   title: string;
@@ -51,7 +50,7 @@ export function PackageListGrid({
   setSelectedCategory,
   showMissingIntegrationMessage = false,
   callout,
-}: ListProps) {
+}: Props) {
   const [searchTerm, setSearchTerm] = useState(initialSearch || '');
   const localSearchRef = useLocalSearch(list);
 
@@ -107,7 +106,12 @@ export function PackageListGrid({
           }}
           onChange={onQueryChange}
         />
-        {callout ? callout : null}
+        {callout ? (
+          <>
+            <EuiSpacer />
+            {callout}
+          </>
+        ) : null}
         <EuiSpacer />
         {gridContent}
         {showMissingIntegrationMessage && (

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx

@@ -0,0 +1,212 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo, useMemo } from 'react';
+import { useLocation, useHistory, useParams } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
+
+import { pagePathGetters } from '../../../../constants';
+import {
+  useGetCategories,
+  useGetPackages,
+  useBreadcrumbs,
+  useGetAppendCustomIntegrations,
+  useGetReplacementCustomIntegrations,
+  useLink,
+} from '../../../../hooks';
+import { doesPackageHaveIntegrations } from '../../../../services';
+import type { PackageList } from '../../../../types';
+import { PackageListGrid } from '../../components/package_list_grid';
+
+import type { CustomIntegration } from '../../../../../../../../../../src/plugins/custom_integrations/common';
+
+import type { PackageListItem } from '../../../../types';
+
+import type { IntegrationCategory } from '../../../../../../../../../../src/plugins/custom_integrations/common';
+
+import { useMergeEprPackagesWithReplacements } from '../../../../../../hooks/use_merge_epr_with_replacements';
+
+import { mergeAndReplaceCategoryCounts } from './util';
+import { CategoryFacets } from './category_facets';
+import type { CategoryFacet } from './category_facets';
+
+import type { CategoryParams } from '.';
+import { getParams, categoryExists, mapToCard } from '.';
+
+// Packages can export multiple integrations, aka `policy_templates`
+// In the case where packages ship >1 `policy_templates`, we flatten out the
+// list of packages by bringing all integrations to top-level so that
+// each integration is displayed as its own tile
+const packageListToIntegrationsList = (packages: PackageList): PackageList => {
+  return packages.reduce((acc: PackageList, pkg) => {
+    const { policy_templates: policyTemplates = [], ...restOfPackage } = pkg;
+    return [
+      ...acc,
+      restOfPackage,
+      ...(doesPackageHaveIntegrations(pkg)
+        ? policyTemplates.map((integration) => {
+            const { name, title, description, icons } = integration;
+            return {
+              ...restOfPackage,
+              id: `${restOfPackage}-${name}`,
+              integration: name,
+              title,
+              description,
+              icons: icons || restOfPackage.icons,
+            };
+          })
+        : []),
+    ];
+  }, []);
+};
+
+const title = i18n.translate('xpack.fleet.epmList.allTitle', {
+  defaultMessage: 'Browse by category',
+});
+
+// TODO: clintandrewhall - this component is hard to test due to the hooks, particularly those that use `http`
+// or `location` to load data.  Ideally, we'll split this into "connected" and "pure" components.
+export const AvailablePackages: React.FC = memo(() => {
+  useBreadcrumbs('integrations_all');
+
+  const { selectedCategory, searchParam } = getParams(
+    useParams<CategoryParams>(),
+    useLocation().search
+  );
+
+  const history = useHistory();
+
+  const { getHref, getAbsolutePath } = useLink();
+
+  function setSelectedCategory(categoryId: string) {
+    const url = pagePathGetters.integrations_all({
+      category: categoryId,
+      searchTerm: searchParam,
+    })[1];
+    history.push(url);
+  }
+
+  function setSearchTerm(search: string) {
+    // Use .replace so the browser's back button is not tied to single keystroke
+    history.replace(
+      pagePathGetters.integrations_all({ category: selectedCategory, searchTerm: search })[1]
+    );
+  }
+
+  const { data: allCategoryPackagesRes, isLoading: isLoadingAllPackages } = useGetPackages({
+    category: '',
+  });
+
+  const { data: categoryPackagesRes, isLoading: isLoadingCategoryPackages } = useGetPackages({
+    category: selectedCategory,
+  });
+
+  const { data: categoriesRes, isLoading: isLoadingCategories } = useGetCategories({
+    include_policy_templates: true,
+  });
+
+  const eprPackages = useMemo(
+    () => packageListToIntegrationsList(categoryPackagesRes?.response || []),
+    [categoryPackagesRes]
+  );
+
+  const allEprPackages = useMemo(
+    () => packageListToIntegrationsList(allCategoryPackagesRes?.response || []),
+    [allCategoryPackagesRes]
+  );
+
+  const { value: replacementCustomIntegrations } = useGetReplacementCustomIntegrations();
+
+  const mergedEprPackages: Array<PackageListItem | CustomIntegration> =
+    useMergeEprPackagesWithReplacements(
+      eprPackages || [],
+      replacementCustomIntegrations || [],
+      selectedCategory as IntegrationCategory
+    );
+
+  const { loading: isLoadingAppendCustomIntegrations, value: appendCustomIntegrations } =
+    useGetAppendCustomIntegrations();
+
+  const filteredAddableIntegrations = appendCustomIntegrations
+    ? appendCustomIntegrations.filter((integration: CustomIntegration) => {
+        if (!selectedCategory) {
+          return true;
+        }
+        return integration.categories.indexOf(selectedCategory as IntegrationCategory) >= 0;
+      })
+    : [];
+
+  const eprAndCustomPackages: Array<CustomIntegration | PackageListItem> = [
+    ...mergedEprPackages,
+    ...filteredAddableIntegrations,
+  ];
+
+  eprAndCustomPackages.sort((a, b) => {
+    return a.title.localeCompare(b.title);
+  });
+
+  const categories = useMemo(() => {
+    const eprAndCustomCategories: CategoryFacet[] =
+      isLoadingCategories ||
+      isLoadingAppendCustomIntegrations ||
+      !appendCustomIntegrations ||
+      !categoriesRes
+        ? []
+        : mergeAndReplaceCategoryCounts(
+            categoriesRes.response as CategoryFacet[],
+            appendCustomIntegrations
+          );
+
+    return [
+      {
+        id: '',
+        count: (allEprPackages?.length || 0) + (appendCustomIntegrations?.length || 0),
+      },
+      ...(eprAndCustomCategories ? eprAndCustomCategories : []),
+    ] as CategoryFacet[];
+  }, [
+    allEprPackages?.length,
+    appendCustomIntegrations,
+    categoriesRes,
+    isLoadingAppendCustomIntegrations,
+    isLoadingCategories,
+  ]);
+
+  if (!isLoadingCategories && !categoryExists(selectedCategory, categories)) {
+    history.replace(pagePathGetters.integrations_all({ category: '', searchTerm: searchParam })[1]);
+    return null;
+  }
+
+  const controls = categories ? (
+    <CategoryFacets
+      showCounts={false}
+      isLoading={isLoadingCategories || isLoadingAllPackages || isLoadingAppendCustomIntegrations}
+      categories={categories}
+      selectedCategory={selectedCategory}
+      onCategoryChange={({ id }: CategoryFacet) => {
+        setSelectedCategory(id);
+      }}
+    />
+  ) : null;
+
+  const cards = eprAndCustomPackages.map((item) => {
+    return mapToCard(getAbsolutePath, getHref, item);
+  });
+
+  return (
+    <PackageListGrid
+      isLoading={isLoadingCategoryPackages}
+      title={title}
+      controls={controls}
+      initialSearch={searchParam}
+      list={cards}
+      setSelectedCategory={setSelectedCategory}
+      onSearchChange={setSearchTerm}
+      showMissingIntegrationMessage
+    />
+  );
+});

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/category_facets.tsx

@@ -21,19 +21,21 @@ interface ALL_CATEGORY {
 
 export type CategoryFacet = IntegrationCategoryCount | ALL_CATEGORY;
 
+export interface Props {
+  showCounts: boolean;
+  isLoading?: boolean;
+  categories: CategoryFacet[];
+  selectedCategory: string;
+  onCategoryChange: (category: CategoryFacet) => unknown;
+}
+
 export function CategoryFacets({
   showCounts,
   isLoading,
   categories,
   selectedCategory,
   onCategoryChange,
-}: {
-  showCounts: boolean;
-  isLoading?: boolean;
-  categories: CategoryFacet[];
-  selectedCategory: string;
-  onCategoryChange: (category: CategoryFacet) => unknown;
-}) {
+}: Props) {
   const controls = (
     <EuiFacetGroup>
       {isLoading ? (