Features integrations + mobile, copy, design tweaks

src/core/public/rendering/_base.scss

@@ -43,10 +43,12 @@
     top: $headerHeight;
   }
 
-  .kbnStickyMenu {
-    position: sticky;
-    max-height: calc(100vh - #{$headerHeight + $euiSize});
-    top: $headerHeight + $euiSize;
+  @include euiBreakpoint('xl', 'l') {
+    .kbnStickyMenu {
+      position: sticky;
+      max-height: calc(100vh - #{$headerHeight + $euiSize});
+      top: $headerHeight + $euiSize;
+    }
   }
 }
 

src/plugins/index_pattern_editor/public/components/empty_prompts/empty_index_list_prompt/empty_index_list_prompt.tsx

@@ -91,7 +91,7 @@ export const EmptyIndexListPrompt = ({
               <EuiCard
                 className="inpEmptyState__card"
                 onClick={() => {
-                  navigateToApp('home', { path: '/app/integrations/browse' });
+                  navigateToApp('integrations', { path: '/browse' });
                   closeFlyout();
                 }}
                 icon={<EuiIcon size="xl" type="database" color="subdued" />}

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx

@@ -43,6 +43,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
       <EuiCard
         paddingSize="l"
         image={image}
+        textAlign="left"
         title={
           <EuiTextColor color="default">
             {i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', {
@@ -78,6 +79,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
   return (
     <EuiCard
       paddingSize="l"
+      textAlign="left"
       image={image}
       href={href ?? addBasePath(`/app/integrations/browse${hasCategory}`)}
       // Bad hack to fix the need for an a11y title even though the button exists

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx

@@ -27,6 +27,7 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
   return (
     <EuiCard
       paddingSize="l"
+      textAlign="left"
       // TODO: we should require both title and description to be passed in by consumers since defaults are not adequate.
       // see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140
       title={title!}

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

@@ -46,7 +46,7 @@ const link = (
 const title = (
   <FormattedMessage
     id="xpack.fleet.epm.integrationPreference.title"
-    defaultMessage="When an integration is available for {link}, show:"
+    defaultMessage="If an integration is available for {link}, show:"
     values={{ link }}
   />
 );
@@ -115,6 +115,7 @@ export const IntegrationPreference = ({ initialType, onChange }: Props) => {
           name="preference"
         />
       </EuiForm>
+      <EuiSpacer size="m" />
     </EuiPanel>
   );
 };

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

@@ -18,6 +18,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { Loading } from '../../../components';
@@ -32,6 +33,7 @@ export interface Props {
   controls?: ReactNode | ReactNode[];
   title?: string;
   list: IntegrationCardItem[];
+  featuredList?: JSX.Element | null;
   initialSearch?: string;
   setSelectedCategory: (category: string) => void;
   onSearchChange: (search: string) => void;
@@ -48,6 +50,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
   onSearchChange,
   setSelectedCategory,
   showMissingIntegrationMessage = false,
+  featuredList = null,
   callout,
 }) => {
   const [searchTerm, setSearchTerm] = useState(initialSearch || '');
@@ -106,42 +109,45 @@ export const PackageListGrid: FunctionComponent<Props> = ({
   }
 
   return (
-    <div ref={menuRef}>
-      <EuiFlexGroup alignItems="flexStart" gutterSize="xl">
-        <EuiFlexItem grow={1} className={isSticky ? 'kbnStickyMenu' : ''}>
-          {controlsContent}
-        </EuiFlexItem>
-        <EuiFlexItem grow={5}>
-          <EuiSearchBar
-            query={searchTerm || undefined}
-            box={{
-              placeholder: i18n.translate('xpack.fleet.epmList.searchPackagesPlaceholder', {
-                defaultMessage: 'Search for integrations',
-              }),
-              incremental: true,
-            }}
-            onChange={onQueryChange}
-          />
-          {callout ? (
-            <>
-              <EuiSpacer />
-              {callout}
-            </>
-          ) : null}
-          <EuiSpacer />
-          {gridContent}
-          {showMissingIntegrationMessage && (
-            <>
-              <EuiSpacer />
-              <MissingIntegrationContent
-                resetQuery={resetQuery}
-                setSelectedCategory={setSelectedCategory}
-              />
-            </>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <>
+      {featuredList}
+      <div ref={menuRef}>
+        <EuiFlexGroup alignItems="flexStart" gutterSize="xl">
+          <EuiFlexItem grow={1} className={isSticky ? 'kbnStickyMenu' : ''}>
+            {controlsContent}
+          </EuiFlexItem>
+          <EuiFlexItem grow={5}>
+            <EuiSearchBar
+              query={searchTerm || undefined}
+              box={{
+                placeholder: i18n.translate('xpack.fleet.epmList.searchPackagesPlaceholder', {
+                  defaultMessage: 'Search for integrations',
+                }),
+                incremental: true,
+              }}
+              onChange={onQueryChange}
+            />
+            {callout ? (
+              <>
+                <EuiSpacer />
+                {callout}
+              </>
+            ) : null}
+            <EuiSpacer />
+            {gridContent}
+            {showMissingIntegrationMessage && (
+              <>
+                <EuiSpacer />
+                <MissingIntegrationContent
+                  resetQuery={resetQuery}
+                  setSelectedCategory={setSelectedCategory}
+                />
+              </>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    </>
   );
 };
 

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

@@ -8,7 +8,18 @@
 import React, { memo, useMemo, useState } from 'react';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
 import _ from 'lodash';
-import { EuiHorizontalRule, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiHorizontalRule,
+  EuiFlexItem,
+  EuiFlexGrid,
+  EuiSpacer,
+  EuiCard,
+  EuiFlexGroup,
+  EuiIcon,
+} from '@elastic/eui';
+
+import { useStartServices } from '../../../../hooks';
 
 import { pagePathGetters } from '../../../../constants';
 import {
@@ -98,6 +109,9 @@ export const AvailablePackages: React.FC = memo(() => {
   const [preference, setPreference] = useState<IntegrationPreferenceType>('recommended');
   useBreadcrumbs('integrations_all');
 
+  const { http } = useStartServices();
+  const addBasePath = http.basePath.prepend;
+
   const { selectedCategory, searchParam } = getParams(
     useParams<CategoryParams>(),
     useLocation().search
@@ -210,8 +224,56 @@ export const AvailablePackages: React.FC = memo(() => {
     return c.categories.includes(selectedCategory);
   });
 
+  // TODO: Remove this hard coded list of integrations with a suggestion service
+  const featuredList = (
+    <>
+      <EuiFlexGrid columns={3}>
+        <EuiFlexItem>
+          <EuiCard
+            icon={<EuiIcon type="logoSecurity" size="xxl" />}
+            href={addBasePath('/app/integrations/detail/endpoint/')}
+            title={i18n.translate('xpack.fleet.featuredSecurityTitle', {
+              defaultMessage: 'Endpoint Security',
+            })}
+            description={i18n.translate('xpack.fleet.featuredSecurityDesc', {
+              defaultMessage:
+                'Protect your hosts with threat prevention, detection, and deep security data visibility.',
+            })}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            title={i18n.translate('xpack.fleet.featuredObsTitle', {
+              defaultMessage: 'Elastic APM',
+            })}
+            description={i18n.translate('xpack.fleet.featuredObsDesc', {
+              defaultMessage:
+                'Monitor, detect and diagnose complex performance issues from your application.',
+            })}
+            href={addBasePath('/app/integrations/detail/apm')}
+            icon={<EuiIcon type="logoObservability" size="xxl" />}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            icon={<EuiIcon type="logoAppSearch" size="xxl" />}
+            href={addBasePath('/app/enterprise_search/app_search')}
+            title={i18n.translate('xpack.fleet.featuredSearchTitle', {
+              defaultMessage: 'Web site crawler',
+            })}
+            description={i18n.translate('xpack.fleet.featuredSearchDesc', {
+              defaultMessage: 'Add search to your website with the App Search web crawler.',
+            })}
+          />
+        </EuiFlexItem>
+      </EuiFlexGrid>
+      <EuiSpacer size="xl" />
+    </>
+  );
+
   return (
     <PackageListGrid
+      featuredList={featuredList}
       isLoading={isLoadingAllPackages}
       controls={controls}
       initialSearch={searchParam}

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

@@ -25,6 +25,13 @@ export const ALL_CATEGORY = {
   }),
 };
 
+export const INSTALLED_CATEGORY = {
+  id: '',
+  title: i18n.translate('xpack.fleet.epmList.allPackagesInstalledFilterLinkText', {
+    defaultMessage: 'All installed',
+  }),
+};
+
 export interface Props {
   isLoading?: boolean;
   categories: CategoryFacet[];

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

@@ -23,7 +23,7 @@ import { CategoryFacets } from './category_facets';
 
 import type { CategoryParams } from '.';
 import { getParams, categoryExists, mapToCard } from '.';
-import { ALL_CATEGORY } from './category_facets';
+import { INSTALLED_CATEGORY } from './category_facets';
 
 const AnnouncementLink = () => {
   const { docLinks } = useStartServices();
@@ -56,10 +56,6 @@ const Callout = () => (
   </EuiCallOut>
 );
 
-const title = i18n.translate('xpack.fleet.epmList.installedTitle', {
-  defaultMessage: 'Installed integrations',
-});
-
 // 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 InstalledPackages: React.FC = memo(() => {
@@ -115,7 +111,7 @@ export const InstalledPackages: React.FC = memo(() => {
   const categories: CategoryFacet[] = useMemo(
     () => [
       {
-        ...ALL_CATEGORY,
+        ...INSTALLED_CATEGORY,
         count: allInstalledPackages.length,
       },
       {
@@ -153,7 +149,7 @@ export const InstalledPackages: React.FC = memo(() => {
 
   return (
     <PackageListGrid
-      {...{ isLoading, title, controls, setSelectedCategory, callout }}
+      {...{ isLoading, controls, setSelectedCategory, callout }}
       onSearchChange={setSearchTerm}
       initialSearch={searchParam}
       list={cards}

x-pack/plugins/observability/public/components/app/header/header_menu.tsx

@@ -37,5 +37,5 @@ export function ObservabilityHeaderMenu(): React.ReactElement | null {
 }
 
 const addDataLinkText = i18n.translate('xpack.observability.home.addData', {
-  defaultMessage: 'Add data',
+  defaultMessage: 'Add integrations',
 });