[7.x] add button link to ingest (elastic#70142) (elastic#70896)

update security solution empty page (elastic#70142)
Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { useRouteMatch, Switch, Route } from 'react-router-dom';
+import { useRouteMatch, Switch, Route, useLocation, useHistory } from 'react-router-dom';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import { i18n } from '@kbn/i18n';
 import { PAGE_ROUTING_PATHS } from '../../../../constants';
@@ -114,7 +114,10 @@ function InstalledPackages() {
 
 function AvailablePackages() {
   useBreadcrumbs('integrations_all');
-  const [selectedCategory, setSelectedCategory] = useState('');
+  const history = useHistory();
+  const queryParams = new URLSearchParams(useLocation().search);
+  const initialCategory = queryParams.get('category') || '';
+  const [selectedCategory, setSelectedCategory] = useState(initialCategory);
   const { data: categoryPackagesRes, isLoading: isLoadingPackages } = useGetPackages({
     category: selectedCategory,
   });
@@ -141,7 +144,13 @@ function AvailablePackages() {
       isLoading={isLoadingCategories}
       categories={categories}
       selectedCategory={selectedCategory}
-      onCategoryChange={({ id }: CategorySummaryItem) => setSelectedCategory(id)}
+      onCategoryChange={({ id }: CategorySummaryItem) => {
+        // clear category query param in the url
+        if (queryParams.get('category')) {
+          history.push({});
+        }
+        setSelectedCategory(id);
+      }}
     />
   ) : null;
 

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx

@@ -31,7 +31,7 @@ import { NoWriteAlertsCallOut } from '../../components/no_write_alerts_callout';
 import { AlertsHistogramPanel } from '../../components/alerts_histogram_panel';
 import { alertsHistogramOptions } from '../../components/alerts_histogram_panel/config';
 import { useUserInfo } from '../../components/user_info';
-import { DetectionEngineEmptyPage } from './detection_engine_empty_page';
+import { OverviewEmpty } from '../../../overview/components/overview_empty';
 import { DetectionEngineNoIndex } from './detection_engine_no_signal_index';
 import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
@@ -159,7 +159,7 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
       ) : (
         <WrapperPage>
           <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />
-          <DetectionEngineEmptyPage />
+          <OverviewEmpty />
         </WrapperPage>
       )}
       <SpyRoute pageName={SecurityPageName.alerts} />

x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx

@@ -43,7 +43,7 @@ import { DetectionEngineHeaderPage } from '../../../../components/detection_engi
 import { AlertsHistogramPanel } from '../../../../components/alerts_histogram_panel';
 import { AlertsTable } from '../../../../components/alerts_table';
 import { useUserInfo } from '../../../../components/user_info';
-import { DetectionEngineEmptyPage } from '../../detection_engine_empty_page';
+import { OverviewEmpty } from '../../../../../overview/components/overview_empty';
 import { useAlertInfo } from '../../../../components/alerts_info';
 import { StepDefineRule } from '../../../../components/rules/step_define_rule';
 import { StepScheduleRule } from '../../../../components/rules/step_schedule_rule';
@@ -426,7 +426,7 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
         <WrapperPage>
           <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />
 
-          <DetectionEngineEmptyPage />
+          <OverviewEmpty />
         </WrapperPage>
       )}
 

x-pack/plugins/security_solution/public/common/components/empty_page/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
-import React from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import styled from 'styled-components';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
@@ -19,12 +19,14 @@ interface EmptyPageProps {
   actionPrimaryLabel: string;
   actionPrimaryTarget?: string;
   actionPrimaryUrl: string;
+  actionPrimaryFill?: boolean;
   actionSecondaryIcon?: IconType;
   actionSecondaryLabel?: string;
   actionSecondaryTarget?: string;
   actionSecondaryUrl?: string;
+  actionSecondaryOnClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
   'data-test-subj'?: string;
-  message?: string;
+  message?: ReactNode;
   title: string;
 }
 
@@ -34,23 +36,25 @@ export const EmptyPage = React.memo<EmptyPageProps>(
     actionPrimaryLabel,
     actionPrimaryTarget,
     actionPrimaryUrl,
+    actionPrimaryFill = true,
     actionSecondaryIcon,
     actionSecondaryLabel,
     actionSecondaryTarget,
     actionSecondaryUrl,
+    actionSecondaryOnClick,
     message,
     title,
     ...rest
   }) => (
     <EmptyPrompt
-      iconType="securityAnalyticsApp"
+      iconType="logoSecurity"
       title={<h2>{title}</h2>}
       body={message && <p>{message}</p>}
       actions={
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
             <EuiButton
-              fill
+              fill={actionPrimaryFill}
               href={actionPrimaryUrl}
               iconType={actionPrimaryIcon}
               target={actionPrimaryTarget}
@@ -61,10 +65,13 @@ export const EmptyPage = React.memo<EmptyPageProps>(
 
           {actionSecondaryLabel && actionSecondaryUrl && (
             <EuiFlexItem grow={false}>
+              {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
               <EuiButton
                 href={actionSecondaryUrl}
+                onClick={actionSecondaryOnClick}
                 iconType={actionSecondaryIcon}
                 target={actionSecondaryTarget}
+                data-test-subj="empty-page-secondary-action"
               >
                 {actionSecondaryLabel}
               </EuiButton>

x-pack/plugins/security_solution/public/common/hooks/endpoint/ingest_enabled.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+
+/**
+ * Returns an object which ingest permissions are allowed
+ */
+export const useIngestEnabledCheck = (): {
+  allEnabled: boolean;
+  show: boolean;
+  write: boolean;
+  read: boolean;
+} => {
+  const { services } = useKibana();
+
+  // Check if Ingest Manager is present in the configuration
+  const show = services.application.capabilities.ingestManager?.show ?? false;
+  const write = services.application.capabilities.ingestManager?.write ?? false;
+  const read = services.application.capabilities.ingestManager?.read ?? false;
+
+  // Check if all Ingest Manager permissions are enabled
+  const allEnabled = show && read && write ? true : false;
+
+  return {
+    allEnabled,
+    show,
+    write,
+    read,
+  };
+};

x-pack/plugins/security_solution/public/common/translations.ts

@@ -10,11 +10,6 @@ export const EMPTY_TITLE = i18n.translate('xpack.securitySolution.pages.common.e
   defaultMessage: 'Welcome to Security Solution. Let’s get you started.',
 });
 
-export const EMPTY_MESSAGE = i18n.translate('xpack.securitySolution.pages.common.emptyMessage', {
-  defaultMessage:
-    'To begin using security information and event management (Security Solution), you’ll need to add security solution related data, in Elastic Common Schema (ECS) format, to the Elastic Stack. An easy way to get started is by installing and configuring our data shippers, called Beats. Let’s do that now!',
-});
-
 export const EMPTY_ACTION_PRIMARY = i18n.translate(
   'xpack.securitySolution.pages.common.emptyActionPrimary',
   {
@@ -25,6 +20,13 @@ export const EMPTY_ACTION_PRIMARY = i18n.translate(
 export const EMPTY_ACTION_SECONDARY = i18n.translate(
   'xpack.securitySolution.pages.common.emptyActionSecondary',
   {
-    defaultMessage: 'View getting started guide',
+    defaultMessage: 'getting started guide.',
+  }
+);
+
+export const EMPTY_ACTION_ENDPOINT = i18n.translate(
+  'xpack.securitySolution.pages.common.emptyActionEndpoint',
+  {
+    defaultMessage: 'Add data with Elastic Agent (Beta)',
   }
 );

x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx

@@ -38,7 +38,7 @@ import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '.
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import { esQuery, Filter } from '../../../../../../../src/plugins/data/public';
 
-import { HostsEmptyPage } from '../hosts_empty_page';
+import { OverviewEmpty } from '../../../overview/components/overview_empty';
 import { HostDetailsTabs } from './details_tabs';
 import { navTabsHostDetails } from './nav_tabs';
 import { HostDetailsProps } from './types';
@@ -194,7 +194,7 @@ const HostDetailsComponent = React.memo<HostDetailsProps & PropsFromRedux>(
           <WrapperPage>
             <HeaderPage border title={detailName} />
 
-            <HostsEmptyPage />
+            <OverviewEmpty />
           </WrapperPage>
         )}
 

x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx

@@ -33,7 +33,7 @@ import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { esQuery } from '../../../../../../src/plugins/data/public';
 import { useMlCapabilities } from '../../common/components/ml_popover/hooks/use_ml_capabilities';
-import { HostsEmptyPage } from './hosts_empty_page';
+import { OverviewEmpty } from '../../overview/components/overview_empty';
 import { HostsTabs } from './hosts_tabs';
 import { navTabsHosts } from './nav_tabs';
 import * as i18n from './translations';
@@ -141,7 +141,7 @@ export const HostsComponent = React.memo<HostsComponentProps & PropsFromRedux>(
           <WrapperPage>
             <HeaderPage border title={i18n.PAGE_TITLE} />
 
-            <HostsEmptyPage />
+            <OverviewEmpty />
           </WrapperPage>
         )}
 

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts

@@ -24,16 +24,16 @@ export function useHostSelector<TSelected>(selector: (state: HostState) => TSele
 /**
  * Returns an object that contains Ingest app and URL information
  */
-export const useHostIngestUrl = (): { url: string; appId: string; appPath: string } => {
+export const useIngestUrl = (subpath: string): { url: string; appId: string; appPath: string } => {
   const { services } = useKibana();
   return useMemo(() => {
-    const appPath = `#/fleet`;
+    const appPath = `#/${subpath}`;
     return {
       url: `${services.application.getUrlForApp('ingestManager')}${appPath}`,
       appId: 'ingestManager',
       appPath,
     };
-  }, [services.application]);
+  }, [services.application, subpath]);
 };
 
 /**

x-pack/plugins/security_solution/public/network/pages/ip_details/index.tsx

@@ -33,7 +33,7 @@ import { State, inputsSelectors } from '../../../common/store';
 import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
 import { setIpDetailsTablesActivePageToZero as dispatchIpDetailsTablesActivePageToZero } from '../../store/actions';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
-import { NetworkEmptyPage } from '../network_empty_page';
+import { OverviewEmpty } from '../../../overview/components/overview_empty';
 import { NetworkHttpQueryTable } from './network_http_query_table';
 import { NetworkTopCountriesQueryTable } from './network_top_countries_query_table';
 import { NetworkTopNFlowQueryTable } from './network_top_n_flow_query_table';
@@ -264,7 +264,7 @@ export const IPDetailsComponent: React.FC<IPDetailsComponentProps & PropsFromRed
         <WrapperPage>
           <HeaderPage border title={ip} />
 
-          <NetworkEmptyPage />
+          <OverviewEmpty />
         </WrapperPage>
       )}
 

x-pack/plugins/security_solution/public/network/pages/network.tsx

@@ -34,7 +34,7 @@ import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { networkModel } from '../store';
 import { navTabsNetwork, NetworkRoutes, NetworkRoutesLoading } from './navigation';
 import { filterNetworkData } from './navigation/alerts_query_tab_body';
-import { NetworkEmptyPage } from './network_empty_page';
+import { OverviewEmpty } from '../../overview/components/overview_empty';
 import * as i18n from './translations';
 import { NetworkComponentProps } from './types';
 import { NetworkRouteType } from './navigation/types';
@@ -164,7 +164,7 @@ const NetworkComponent = React.memo<NetworkComponentProps & PropsFromRedux>(
         ) : (
           <WrapperPage>
             <HeaderPage border title={i18n.PAGE_TITLE} />
-            <NetworkEmptyPage />
+            <OverviewEmpty />
           </WrapperPage>
         )}