[SecuritySolution] Update get started page UI (elastic#171078)

## Summary

[Test
env](https://p.elstc.co/paste/Y83spa-G#0BRN87aMZxLJfbVok3W0U-7D/sss9OGfH9IIqw4oHL6)

1. When landing on the page the first time, all the tasks are collapsed.
If visited before, it keeps the last expanded task.
2. When clicking on the task, the url has the task id appended as
`#{taskId}`
3. When visiting the page, if url has `#{taskId}`, the relevant task
should be expanded. If no `#{taskId}` in the url, it expands the last
expanded task according to **local storage**.
4. Tasks completion are checked automatically, users are not able to
undo any tasks unless the **local storage** is cleanned.
5. Task completion criteria:
elastic/security-team#8032 `Onboarding tasks
with success criteria`:

- [x] "create first project" -> ~unexpandable~, already complete when
user arrives
- [x] "watch overview video" -> user clicks to expand (success == users
opens section/clicks "Start")
- [x] "add integrations" -> users clicks to expand and goes to
integration page (success == query fleet to confirm an agent exists with
an integration) `Update we use **indicesExist** from sourcerer to
replace fleet api as some performance issue found when running locally,
not sure how it will affect the production.`
- [x] - after user clicks "Start" and expands, if success criteria is
already met (e.g. agent is installed with an integration), notify user
agent is installed and mark step as complete.
- [x] "view and analyze dashboards" -> users clicks to expand (success
== click action)
- [x] "enable prebuilt rules" -> clicks to expand (success == at least
one rule **enabled**, show enabled rules like integrations above)
- [x] "view alerts" -> user clicks to expand (success == click action)

6. Design:
elastic#171078 (comment)

elastic#170643


<img width="2556" alt="Screenshot 2023-12-04 at 16 47 48"
src="https://github.com/elastic/kibana/assets/6295984/c98eb2f5-6b31-43f9-9db5-0829e78bb3c2">



<img width="2548" alt="Screenshot 2023-12-04 at 16 29 50"
src="https://github.com/elastic/kibana/assets/6295984/41cb329c-417f-4b95-b19b-67663380a9a3">


<img width="2546" alt="Screenshot 2023-12-04 at 16 30 47"
src="https://github.com/elastic/kibana/assets/6295984/daa3cf3b-9d2e-4c69-83f1-fcc4817f6b8f">






- Integration added:




https://github.com/elastic/kibana/assets/6295984/1f9aefe4-c20b-4d46-b8b0-1aabf8bd7091




- Integration not added:





https://github.com/elastic/kibana/assets/6295984/8b0d6c6b-0bae-4857-aeb1-715f9f4080b8





https://github.com/elastic/kibana/assets/6295984/29432bfe-f270-4e5e-a1c9-86ad806ea5bb















### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Sergi Massaneda <[email protected]>

packages/kbn-optimizer/limits.yml

@@ -124,7 +124,7 @@ pageLoadAssetSize:
   screenshotting: 22870
   searchprofiler: 67080
   security: 81771
-  securitySolution: 67584
+  securitySolution: 82780
   securitySolutionEss: 16573
   securitySolutionServerless: 62488
   serverless: 16573

x-pack/plugins/security_solution/common/index.ts

@@ -17,8 +17,10 @@ export {
   MANAGE_PATH,
   ADD_DATA_PATH,
   SecurityPageName,
+  DETECTION_ENGINE_RULES_URL_FIND,
 } from './constants';
 export { ELASTIC_SECURITY_RULE_ID } from './detection_engine/constants';
+export { ENABLED_FIELD } from './detection_engine/rule_management/rule_fields';
 export { allowedExperimentalValues, type ExperimentalFeatures } from './experimental_features';
 
 // Careful of exporting anything from this file as any file(s) you export here will cause your page bundle size to increase.

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

@@ -12,6 +12,9 @@ const mockUseContractComponents = jest.fn(() => ({}));
 jest.mock('../../hooks/use_contract_component', () => ({
   useContractComponents: () => mockUseContractComponents(),
 }));
+jest.mock('../../containers/sourcerer', () => ({
+  useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }),
+}));
 
 describe('LandingPageComponent', () => {
   beforeEach(() => {

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

@@ -6,11 +6,13 @@
  */
 
 import React, { memo } from 'react';
+import { useSourcererDataView } from '../../containers/sourcerer';
 import { useContractComponents } from '../../hooks/use_contract_component';
 
 export const LandingPageComponent = memo(() => {
   const { GetStarted } = useContractComponents();
-  return GetStarted ? <GetStarted /> : null;
+  const { indicesExist } = useSourcererDataView();
+  return GetStarted ? <GetStarted indicesExist={indicesExist} /> : null;
 });
 
 LandingPageComponent.displayName = 'LandingPageComponent';

x-pack/plugins/security_solution/public/contract_components.ts

@@ -9,7 +9,7 @@ import { BehaviorSubject } from 'rxjs';
 import type { Observable } from 'rxjs';
 
 export type ContractComponents = Partial<{
-  GetStarted: React.ComponentType<{}>;
+  GetStarted: React.ComponentType<{ indicesExist?: boolean }>;
   DashboardsLandingCallout: React.ComponentType<{}>;
 }>;
 

x-pack/plugins/security_solution/public/index.ts

@@ -10,6 +10,7 @@ import { Plugin } from './plugin';
 import type { PluginSetup, PluginStart } from './types';
 export type { TimelineModel } from './timelines/store/timeline/model';
 export type { LinkItem } from './common/links';
+export type { FetchRulesResponse } from './detection_engine/rule_management/logic/types';
 
 export const plugin = (context: PluginInitializerContext): Plugin => new Plugin(context);
 

x-pack/plugins/security_solution_serverless/public/get_started/welcome_panel/__mocks__/index.tsx → x-pack/plugins/security_solution_serverless/public/common/hooks/__mocks__/use_user_name.ts

@@ -4,9 +4,4 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import React from 'react';
-
-export const WelcomePanel = jest
-  .fn()
-  .mockImplementation(({ children }) => <div data-test-subj="welcome-panel">{children}</div>);
+export const useUserName = jest.fn().mockReturnValue('mocked_user_name');

x-pack/plugins/security_solution_serverless/public/common/hooks/use_user_name.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { useKibana } from '../services';
+
+export const useUserName = () => {
+  const [userName, setUserName] = useState<string>();
+  const {
+    services: {
+      security: { authc },
+    },
+  } = useKibana();
+  useEffect(() => {
+    const getUser = async () => {
+      const { username } = await authc.getCurrentUser();
+      setUserName(username);
+    };
+
+    getUser();
+  });
+
+  return userName;
+};

x-pack/plugins/security_solution_serverless/public/get_started/apis/index.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 type { FetchRulesResponse } from '@kbn/security-solution-plugin/public';
+import { DETECTION_ENGINE_RULES_URL_FIND } from '@kbn/security-solution-plugin/common';
+import type { HttpSetup } from '@kbn/core/public';
+
+export const fetchRuleManagementFilters = async ({
+  http,
+  signal,
+  query,
+}: {
+  http: HttpSetup;
+  signal?: AbortSignal;
+  query?: {
+    page: number;
+    per_page: number;
+    sort_field: string;
+    sort_order: string;
+    filter: string;
+  };
+}): Promise<FetchRulesResponse> =>
+  http.fetch<FetchRulesResponse>(DETECTION_ENGINE_RULES_URL_FIND, {
+    method: 'GET',
+    version: '2023-10-31',
+    signal,
+    query,
+  });

x-pack/plugins/security_solution_serverless/public/get_started/card_item.test.tsx

@@ -5,140 +5,55 @@
  * 2.0.
  */
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { CardItem } from './card_item';
-import type { CardId, ExpandedCardSteps, StepId } from './types';
-import { GetSetUpCardId, IntroductionSteps, SectionId } from './types';
-import type { EuiThemeComputed } from '@elastic/eui';
-import { introductionSteps } from './sections';
-import { ProductLine } from '../../common/product';
+import type { ExpandedCardSteps, StepId } from './types';
+
+import { QuickStartSectionCardsId, SectionId, OverviewSteps } from './types';
 jest.mock('./card_step');
 
 describe('CardItemComponent', () => {
-  const finishedSteps = {} as Record<CardId, Set<StepId>>;
-  const onCardStepClicked = jest.fn();
+  const finishedSteps = new Set([]) as Set<StepId>;
   const onStepClicked = jest.fn();
-  const onStepButtonClicked = jest.fn();
+  const toggleTaskCompleteStatus = jest.fn();
   const expandedCardSteps = {
-    [GetSetUpCardId.introduction]: {
+    [QuickStartSectionCardsId.watchTheOverviewVideo]: {
       isExpanded: false,
       expandedSteps: [] as StepId[],
     },
   } as ExpandedCardSteps;
 
-  const mockEuiTheme = { size: { xxs: '4px' }, base: 16 } as EuiThemeComputed;
   it('should render card', () => {
-    const { getByText, queryByText } = render(
+    const { getByTestId } = render(
       <CardItem
-        activeProducts={new Set([ProductLine.security])}
-        activeStepIds={introductionSteps.map((step) => step.id)}
-        cardId={GetSetUpCardId.introduction}
+        activeStepIds={[OverviewSteps.getToKnowElasticSecurity]}
+        cardId={QuickStartSectionCardsId.watchTheOverviewVideo}
         expandedCardSteps={expandedCardSteps}
-        euiTheme={mockEuiTheme}
         finishedSteps={finishedSteps}
-        onCardClicked={onCardStepClicked}
-        onStepButtonClicked={onStepButtonClicked}
+        toggleTaskCompleteStatus={toggleTaskCompleteStatus}
         onStepClicked={onStepClicked}
-        sectionId={SectionId.getSetUp}
-        shadow=""
-        stepsLeft={1}
-        timeInMins={30}
+        sectionId={SectionId.quickStart}
       />
     );
 
-    const cardTitle = getByText('Introduction');
+    const cardTitle = getByTestId(QuickStartSectionCardsId.watchTheOverviewVideo);
     expect(cardTitle).toBeInTheDocument();
-
-    const step = getByText('1 step left');
-    expect(step).toBeInTheDocument();
-
-    const step1 = queryByText('Step 1');
-    expect(step1).not.toBeInTheDocument();
   });
 
   it('should not render card when no active steps', () => {
     const { queryByText } = render(
       <CardItem
-        activeProducts={new Set([])}
         activeStepIds={[]}
-        cardId={GetSetUpCardId.introduction}
+        cardId={QuickStartSectionCardsId.watchTheOverviewVideo}
         expandedCardSteps={expandedCardSteps}
-        euiTheme={mockEuiTheme}
-        finishedSteps={finishedSteps}
-        onCardClicked={onCardStepClicked}
-        onStepButtonClicked={onStepButtonClicked}
+        finishedSteps={new Set([])}
+        toggleTaskCompleteStatus={toggleTaskCompleteStatus}
         onStepClicked={onStepClicked}
-        sectionId={SectionId.getSetUp}
-        shadow=""
-        stepsLeft={1}
-        timeInMins={30}
+        sectionId={SectionId.quickStart}
       />
     );
 
     const cardTitle = queryByText('Introduction');
     expect(cardTitle).not.toBeInTheDocument();
   });
-
-  it('should not render steps left information when all steps are done', () => {
-    const mockFinishedSteps = {
-      [GetSetUpCardId.introduction]: new Set([IntroductionSteps.getToKnowElasticSecurity]),
-    } as Record<CardId, Set<StepId>>;
-
-    const { getByText, queryByText } = render(
-      <CardItem
-        activeProducts={new Set([ProductLine.security])}
-        activeStepIds={introductionSteps.map((step) => step.id)}
-        cardId={GetSetUpCardId.introduction}
-        sectionId={SectionId.getSetUp}
-        expandedCardSteps={expandedCardSteps}
-        euiTheme={mockEuiTheme}
-        shadow=""
-        stepsLeft={0}
-        timeInMins={0}
-        onCardClicked={onCardStepClicked}
-        onStepClicked={onStepClicked}
-        onStepButtonClicked={onStepButtonClicked}
-        finishedSteps={mockFinishedSteps}
-      />
-    );
-
-    const cardTitle = getByText('Introduction');
-    expect(cardTitle).toBeInTheDocument();
-
-    const step = queryByText('1 step left');
-    expect(step).not.toBeInTheDocument();
-
-    const time = queryByText('• About 30 mins');
-    expect(time).not.toBeInTheDocument();
-  });
-
-  it('should toggle step expansion on click', () => {
-    const testCardTitle = 'Introduction';
-    const { getByText } = render(
-      <CardItem
-        activeProducts={new Set([ProductLine.security])}
-        activeStepIds={introductionSteps.map((step) => step.id)}
-        expandedCardSteps={expandedCardSteps}
-        cardId={GetSetUpCardId.introduction}
-        sectionId={SectionId.getSetUp}
-        euiTheme={mockEuiTheme}
-        shadow=""
-        stepsLeft={0}
-        timeInMins={0}
-        onCardClicked={onCardStepClicked}
-        onStepClicked={onStepClicked}
-        onStepButtonClicked={onStepButtonClicked}
-        finishedSteps={finishedSteps}
-      />
-    );
-
-    const stepTitle = getByText(testCardTitle);
-    fireEvent.click(stepTitle);
-
-    expect(onCardStepClicked).toHaveBeenCalledTimes(1);
-    expect(onCardStepClicked).toHaveBeenCalledWith({
-      cardId: GetSetUpCardId.introduction,
-      isExpanded: true,
-    });
-  });
 });