[Security Solution] Changed landing page navigation

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -89,7 +89,7 @@ const overviewIDsToHide = ['kibanaOverview', 'enterpriseSearch'];
 const overviewIDs = [
   ...overviewIDsToHide,
   'observability-overview',
-  'securitySolutionUI:overview',
+  'securitySolutionUI:get_started',
   'management',
 ];
 

x-pack/plugins/security_solution/public/app/home/home_navigations.ts

@@ -34,20 +34,20 @@ import {
 } from '../../../common/constants';
 
 export const navTabs: SecurityNav = {
-  [SecurityPageName.overview]: {
-    id: SecurityPageName.overview,
-    name: i18n.OVERVIEW,
-    href: APP_OVERVIEW_PATH,
-    disabled: false,
-    urlKey: 'overview',
-  },
   [SecurityPageName.landing]: {
     id: SecurityPageName.landing,
     name: i18n.GETTING_STARTED,
     href: APP_LANDING_PATH,
     disabled: false,
     urlKey: 'get_started',
   },
+  [SecurityPageName.overview]: {
+    id: SecurityPageName.overview,
+    name: i18n.OVERVIEW,
+    href: APP_OVERVIEW_PATH,
+    disabled: false,
+    urlKey: 'overview',
+  },
   [SecurityPageName.detectionAndResponse]: {
     id: SecurityPageName.detectionAndResponse,
     name: i18n.DETECTION_RESPONSE,

x-pack/plugins/security_solution/public/overview/components/landing_cards/index.tsx → x-pack/plugins/security_solution/public/common/components/landing_cards/index.tsx

@@ -22,7 +22,7 @@ import endpointPng from '../../images/endpoint.png';
 import siemPng from '../../images/siem.png';
 import videoSvg from '../../images/video.svg';
 import { ADD_DATA_PATH } from '../../../../common/constants';
-import { useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../lib/kibana';
 
 const imgUrls = {
   siem: siemPng,

x-pack/plugins/security_solution/public/common/components/landing_page/index.test.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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { EmptyPage } from './index';
+
+describe('EmptyPage component', () => {
+  it('renders actions without descriptions', () => {
+    const actions = {
+      actions: {
+        label: 'Do Something',
+        url: 'my/url/from/nowwhere',
+      },
+    };
+    const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
+    expect(EmptyComponent).toMatchSnapshot();
+  });
+
+  it('renders actions with descriptions', () => {
+    const actions = {
+      actions: {
+        description: 'My Description',
+        label: 'Do Something',
+        url: 'my/url/from/nowwhere',
+      },
+    };
+    const EmptyComponent = shallow(<EmptyPage actions={actions} title="My Super Title" />);
+    expect(EmptyComponent).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,18 @@
+/*
+ * 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 } from 'react';
+import { LandingCards } from '../landing_cards';
+import { SecuritySolutionPageWrapper } from '../page_wrapper';
+
+export const LandingPageComponent = memo(() => {
+  return (
+    <SecuritySolutionPageWrapper>
+      <LandingCards />
+    </SecuritySolutionPageWrapper>
+  );
+});

x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts

@@ -8,7 +8,7 @@
 import { SecurityPageName } from '../../../../app/types';
 
 export { getDetectionEngineUrl } from '../redirect_to_detection_engine';
-export { getAppOverviewUrl } from '../redirect_to_overview';
+export { getAppLandingUrl } from '../redirect_to_landing';
 export { getHostDetailsUrl, getHostsUrl } from '../redirect_to_hosts';
 export { getNetworkUrl, getNetworkDetailsUrl } from '../redirect_to_network';
 export { getTimelineTabsUrl, getTimelineUrl } from '../redirect_to_timelines';

x-pack/plugins/security_solution/public/common/components/link_to/index.ts

@@ -14,7 +14,7 @@ import { SecurityNavKey } from '../navigation/types';
 import { SecurityPageName } from '../../../app/types';
 
 export { getDetectionEngineUrl, getRuleDetailsUrl } from './redirect_to_detection_engine';
-export { getAppOverviewUrl } from './redirect_to_overview';
+export { getAppLandingUrl } from './redirect_to_landing';
 export { getHostDetailsUrl, getTabsOnHostDetailsUrl, getHostsUrl } from './redirect_to_hosts';
 export { getNetworkUrl, getNetworkDetailsUrl } from './redirect_to_network';
 export { getTimelineTabsUrl, getTimelineUrl } from './redirect_to_timelines';

x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx → x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_landing.tsx

@@ -6,9 +6,6 @@
  */
 
 import { appendSearch } from './helpers';
-import { LANDING_PATH } from '../../../../common/constants';
 
-export const getAppOverviewUrl = (overviewPath: string, search?: string) =>
+export const getAppLandingUrl = (overviewPath: string, search?: string) =>
   `${overviewPath}${appendSearch(search)}`;
-
-export const getAppLandingUrl = (search?: string) => `${LANDING_PATH}${appendSearch(search)}`;

x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts

@@ -26,7 +26,7 @@ import {
   AdministrationRouteSpyState,
   UsersRouteSpyState,
 } from '../../../utils/route/types';
-import { getAppOverviewUrl } from '../../link_to';
+import { getAppLandingUrl } from '../../link_to';
 import { timelineActions } from '../../../../../public/timelines/store/timeline';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { TabNavigationProps } from '../tab_navigation/types';
@@ -91,10 +91,11 @@ export const getBreadcrumbsForRoute = (
   getUrlForApp: GetUrlForApp
 ): ChromeBreadcrumb[] | null => {
   const spyState: RouteSpyState = omit('navTabs', object);
-  const overviewPath = getUrlForApp(APP_UI_ID, { deepLinkId: SecurityPageName.overview });
+  const landingPath = getUrlForApp(APP_UI_ID, { deepLinkId: SecurityPageName.landing });
+  console.log(landingPath)
   const siemRootBreadcrumb: ChromeBreadcrumb = {
     text: APP_NAME,
-    href: getAppOverviewUrl(overviewPath),
+    href: getAppLandingUrl(landingPath),
   };
   if (isHostsRoutes(spyState) && object.navTabs) {
     const tempNav: SearchNavTab = { urlKey: 'host', isDetailPage: false };

x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/use_navigation_items.tsx

@@ -77,8 +77,8 @@ function usePrimaryNavigationItemsToDisplay(navTabs: Record<string, NavTab>) {
               id: 'main',
               name: '',
               items: [
-                navTabs[SecurityPageName.overview],
                 navTabs[SecurityPageName.landing],
+                navTabs[SecurityPageName.overview],
                 // Temporary check for detectionAndResponse while page is feature flagged
                 ...(navTabs[SecurityPageName.detectionAndResponse] != null
                   ? [navTabs[SecurityPageName.detectionAndResponse]]

x-pack/plugins/security_solution/public/common/utils/empty_view/use_show_pages_with_empty_view.tsx

@@ -17,6 +17,7 @@ const isPageNameWithEmptyView = (currentName: string) => {
     SecurityPageName.network,
     SecurityPageName.timelines,
     SecurityPageName.overview,
+    SecurityPageName.landing,
   ];
   return pageNamesWithEmptyView.includes(currentName);
 };

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

@@ -40,7 +40,6 @@ import { AlertsTable } from '../../components/alerts_table';
 import { NoApiIntegrationKeyCallOut } from '../../components/callouts/no_api_integration_callout';
 import { AlertsHistogramPanel } from '../../components/alerts_kpis/alerts_histogram_panel';
 import { useUserData } from '../../components/user_info';
-import { OverviewEmpty } from '../../../overview/components/overview_empty';
 import { DetectionEngineNoIndex } from './detection_engine_no_index';
 import { useListsConfig } from '../../containers/detection_engine/lists/use_lists_config';
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
@@ -77,6 +76,7 @@ import {
 } from '../../components/alerts_table/alerts_filter_group';
 import { EmptyPage } from '../../../common/components/empty_page';
 import { HeaderPage } from '../../../common/components/header_page';
+import { LandingPageComponent } from '../../../common/components/landing_page';
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
  */
@@ -389,10 +389,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
           </SecuritySolutionPageWrapper>
         </StyledFullHeightContainer>
       ) : (
-        <SecuritySolutionPageWrapper>
-          <HeaderPage border title={i18n.PAGE_TITLE} />
-          <OverviewEmpty />
-        </SecuritySolutionPageWrapper>
+        <LandingPageComponent />
       )}
     </>
   );

x-pack/plugins/security_solution/public/helpers.tsx

@@ -18,7 +18,7 @@ import {
   RULES_PATH,
   SERVER_APP_ID,
   CASES_FEATURE_ID,
-  OVERVIEW_PATH,
+  LANDING_PATH,
   CASES_PATH,
 } from '../common/constants';
 import { Ecs } from '../common/ecs';
@@ -138,7 +138,7 @@ export const manageOldSiemRoutes = async (coreStart: CoreStart) => {
       break;
     default:
       application.navigateToApp(APP_UI_ID, {
-        deepLinkId: SecurityPageName.overview,
+        deepLinkId: SecurityPageName.landing,
         replace: true,
         path,
       });
@@ -197,12 +197,12 @@ export const RedirectRoute = React.memo<{ capabilities: Capabilities }>(({ capab
   const overviewAvailable = isSubPluginAvailable('overview', capabilities);
   const casesAvailable = isSubPluginAvailable(CASES_SUB_PLUGIN_KEY, capabilities);
   if (overviewAvailable) {
-    return <Redirect to={OVERVIEW_PATH} />;
+    return <Redirect to={LANDING_PATH} />;
   }
   if (casesAvailable) {
     return <Redirect to={CASES_PATH} />;
   }
-  return <Redirect to={OVERVIEW_PATH} />;
+  return <Redirect to={LANDING_PATH} />;
 });
 RedirectRoute.displayName = 'RedirectRoute';
 

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

@@ -36,7 +36,6 @@ import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import { getEsQueryConfig } from '../../../../../../../src/plugins/data/common';
 
-import { OverviewEmpty } from '../../../overview/components/overview_empty';
 import { HostDetailsTabs } from './details_tabs';
 import { navTabsHostDetails } from './nav_tabs';
 import { HostDetailsProps } from './types';
@@ -54,6 +53,7 @@ import { manageQuery } from '../../../common/components/page/manage_query';
 import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_query';
 import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+import { LandingPageComponent } from '../../../common/components/landing_page';
 
 const HostOverviewManage = manageQuery(HostOverview);
 
@@ -227,9 +227,7 @@ const HostDetailsComponent: React.FC<HostDetailsProps> = ({ detailName, hostDeta
           </SecuritySolutionPageWrapper>
         </>
       ) : (
-        <SecuritySolutionPageWrapper>
-          <OverviewEmpty />
-        </SecuritySolutionPageWrapper>
+        <LandingPageComponent />
       )}
 
       <SpyRoute pageName={SecurityPageName.hosts} />

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

@@ -26,7 +26,7 @@ import { HostsTabs } from './hosts_tabs';
 import { useSourcererDataView } from '../../common/containers/sourcerer';
 import { mockCasesContract } from '../../../../cases/public/mocks';
 import { APP_UI_ID, SecurityPageName } from '../../../common/constants';
-import { getAppLandingUrl } from '../../common/components/link_to/redirect_to_overview';
+import { getAppLandingUrl } from '../../common/components/link_to/redirect_to_landing';
 
 jest.mock('../../common/containers/sourcerer');
 

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

@@ -35,7 +35,6 @@ import { setAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { getEsQueryConfig } from '../../../../../../src/plugins/data/common';
 import { useMlCapabilities } from '../../common/components/ml/hooks/use_ml_capabilities';
-import { OverviewEmpty } from '../../overview/components/overview_empty';
 import { Display } from './display';
 import { HostsTabs } from './hosts_tabs';
 import { navTabsHosts } from './nav_tabs';
@@ -56,6 +55,7 @@ import { useInvalidFilterQuery } from '../../common/hooks/use_invalid_filter_que
 import { ID } from '../containers/hosts';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 import { filterHostExternalAlertData } from '../../common/components/visualization_actions/utils';
+import { LandingPageComponent } from '../../common/components/landing_page';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -240,9 +240,7 @@ const HostsComponent = () => {
           </SecuritySolutionPageWrapper>
         </StyledFullHeightContainer>
       ) : (
-        <SecuritySolutionPageWrapper>
-          <OverviewEmpty />
-        </SecuritySolutionPageWrapper>
+        <LandingPageComponent />
       )}
 
       <SpyRoute pageName={SecurityPageName.hosts} />

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

@@ -38,7 +38,6 @@ import { inputsSelectors } from '../../../common/store';
 import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
 import { setNetworkDetailsTablesActivePageToZero } from '../../store/actions';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
-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';
@@ -50,6 +49,7 @@ import { networkModel } from '../../store';
 import { SecurityPageName } from '../../../app/types';
 import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_query';
+import { LandingPageComponent } from '../../../common/components/landing_page';
 export { getBreadcrumbs } from './utils';
 
 const NetworkDetailsManage = manageQuery(IpOverview);
@@ -301,9 +301,7 @@ const NetworkDetailsComponent: React.FC = () => {
           </SecuritySolutionPageWrapper>
         </>
       ) : (
-        <SecuritySolutionPageWrapper>
-          <OverviewEmpty />
-        </SecuritySolutionPageWrapper>
+        <LandingPageComponent />
       )}
 
       <SpyRoute pageName={SecurityPageName.network} />