[fleet] Add Integration Preference selector

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

@@ -0,0 +1,36 @@
+/*
+ * 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 from 'react';
+import type { Meta } from '@storybook/react';
+
+import { action } from '@storybook/addon-actions';
+
+import { IntegrationPreference as Component } from './integration_preference';
+
+export default {
+  title: 'Sections/EPM/Integration Preference',
+  description: '',
+  decorators: [
+    (storyFn, { globals }) => (
+      <div
+        style={{
+          padding: 40,
+          backgroundColor:
+            globals.euiTheme === 'v8.dark' || globals.euiTheme === 'v7.dark' ? '#1D1E24' : '#FFF',
+          width: 280,
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+} as Meta;
+
+export const IntegrationPreference = () => {
+  return <Component onChange={action('onChange')} />;
+};

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

@@ -0,0 +1,82 @@
+/*
+ * 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 from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiLink, EuiText, EuiForm, EuiRadioGroup, EuiSpacer } from '@elastic/eui';
+
+import { SHIPPER_DISPLAY } from '../../../../../../../../../src/plugins/custom_integrations/common';
+
+type Value = 'beats' | 'agent';
+
+interface Option {
+  value: Value;
+  label: string;
+}
+
+export interface Props {
+  onChange: (value: Value) => void;
+}
+
+const link = (
+  <EuiLink href="#">
+    <FormattedMessage
+      id="xpack.fleet.epm.integrationPreference.titleLink"
+      defaultMessage="Elastic Agent and Beats"
+    />
+  </EuiLink>
+);
+
+const title = (
+  <FormattedMessage
+    id="xpack.fleet.epm.integrationPreference.title"
+    defaultMessage="When an integration is available for {link}, use:"
+    values={{ link }}
+  />
+);
+
+export const IntegrationPreference = ({ onChange }: Props) => {
+  const [idSelected, setIdSelected] = React.useState<Value>('agent');
+
+  const options: Option[] = [
+    {
+      value: 'agent',
+      label: i18n.translate('xpack.fleet.epm.integrationPreference.elasticAgentLabel', {
+        defaultMessage: 'Elastic Agent (recommended)',
+      }),
+    },
+    {
+      value: 'beats',
+      label: SHIPPER_DISPLAY.beats,
+    },
+  ];
+
+  const radios = options.map((option) => ({
+    id: option.value,
+    ...option,
+  }));
+
+  return (
+    <EuiPanel hasShadow={false} paddingSize="none">
+      <EuiText size="s">{title}</EuiText>
+      <EuiSpacer size="m" />
+      <EuiForm>
+        <EuiRadioGroup
+          options={radios}
+          idSelected={idSelected}
+          onChange={(id, value) => {
+            setIdSelected(id as Value);
+            onChange(value as Value);
+          }}
+          name="preference"
+        />
+      </EuiForm>
+    </EuiPanel>
+  );
+};

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

@@ -30,7 +30,7 @@ import { PackageCard } from './package_card';
 
 export interface Props {
   isLoading?: boolean;
-  controls?: ReactNode;
+  controls?: ReactNode | ReactNode[];
   title: string;
   list: IntegrationCardItem[];
   initialSearch?: string;

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

@@ -8,6 +8,7 @@
 import React, { memo, useMemo } from 'react';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { EuiHorizontalRule } from '@elastic/eui';
 
 import { pagePathGetters } from '../../../../constants';
 import {
@@ -19,20 +20,21 @@ import {
   useLink,
 } from '../../../../hooks';
 import { doesPackageHaveIntegrations } from '../../../../services';
-import type { PackageList } from '../../../../types';
+import type { PackageList, PackageListItem } 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 type {
+  CustomIntegration,
+  IntegrationCategory,
+} from '../../../../../../../../../../src/plugins/custom_integrations/common';
 
 import { useMergeEprPackagesWithReplacements } from '../../../../../../hooks/use_merge_epr_with_replacements';
 
+import { IntegrationPreference } from '../../components/integration_preference';
+
 import { mergeAndReplaceCategoryCounts } from './util';
-import { CategoryFacets } from './category_facets';
 import type { CategoryFacet } from './category_facets';
+import { CategoryFacets } from './category_facets';
 
 import type { CategoryParams } from '.';
 import { getParams, categoryExists, mapToCard } from '.';
@@ -181,17 +183,23 @@ export const AvailablePackages: React.FC = memo(() => {
     return null;
   }
 
-  const controls = categories ? (
-    <CategoryFacets
-      showCounts={false}
-      isLoading={isLoadingCategories || isLoadingAllPackages || isLoadingAppendCustomIntegrations}
-      categories={categories}
-      selectedCategory={selectedCategory}
-      onCategoryChange={({ id }: CategoryFacet) => {
-        setSelectedCategory(id);
-      }}
-    />
-  ) : null;
+  // TODO: clintandrewhall - figure out the right logic for the onChange.
+  let controls = [<EuiHorizontalRule />, <IntegrationPreference onChange={() => {}} />];
+
+  if (categories) {
+    controls = [
+      <CategoryFacets
+        showCounts={false}
+        isLoading={isLoadingCategories || isLoadingAllPackages || isLoadingAppendCustomIntegrations}
+        categories={categories}
+        selectedCategory={selectedCategory}
+        onCategoryChange={({ id }: CategoryFacet) => {
+          setSelectedCategory(id);
+        }}
+      />,
+      ...controls,
+    ];
+  }
 
   const cards = eprAndCustomPackages.map((item) => {
     return mapToCard(getAbsolutePath, getHref, item);

x-pack/plugins/fleet/storybook/context/http.ts

@@ -74,6 +74,7 @@ export const getHttp = (basepath = BASE_PATH) => {
         return await import('./fixtures/integration.okta');
       }
 
+      action(path)('KP: UNSUPPORTED ROUTE');
       return {};
     }) as HttpHandler,
   } as unknown as HttpStart;