Merge branch 'main' into gated-agent-tamper-api

packages/kbn-expandable-flyout/README.md

@@ -27,7 +27,11 @@ The expandable-flyout is making some strict UI design decisions:
 
 The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/index.tsx) renders the UI, leveraging an [EuiFlyout](https://eui.elastic.co/#/layout/flyout).
 
-The ExpandableFlyout [hooks](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx) expose the state and the following api:
+To retrieve the flyout's layout (left, right and preview panels), you can utilize [useExpandableFlyoutState](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_state.ts).
+
+To control (or mutate) flyout's layout, you can utilize [useExpandableFlyoutApi](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_api.ts).
+
+**Expandable Flyout API** exposes the following methods:
 - **openFlyout**: open the flyout with a set of panels
 - **openRightPanel**: open a right panel
 - **openLeftPanel**: open a left panel
@@ -38,10 +42,6 @@ The ExpandableFlyout [hooks](https://github.com/elastic/kibana/blob/main/package
 - **previousPreviewPanel**: navigate to the previous preview panel
 - **closeFlyout**: close the flyout
 
-To retrieve the flyout's layout (left, right and preview panels), you can use the **useExpandableFlyoutState** from the same [React context](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx).
-
-To control (or mutate) flyout's layout, you can use the **useExpandableFlyoutApi** from the same [React context](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx).
-
 ## Usage
 
 To use the expandable flyout in your plugin, first you need wrap your code with the [context provider](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx) at a high enough level as follows:

packages/kbn-expandable-flyout/index.ts

@@ -8,11 +8,8 @@
 
 export { ExpandableFlyout } from './src';
 
-export {
-  type ExpandableFlyoutContext,
-  useExpandableFlyoutState,
-  useExpandableFlyoutApi,
-} from './src/context';
+export { useExpandableFlyoutApi } from './src/hooks/use_expandable_flyout_api';
+export { useExpandableFlyoutState } from './src/hooks/use_expandable_flyout_state';
 
 export { type State as ExpandableFlyoutState } from './src/state';
 

packages/kbn-expandable-flyout/kibana.jsonc

@@ -1,5 +1,5 @@
 {
-  "type": "shared-common",
+  "type": "shared-browser",
   "id": "@kbn/expandable-flyout",
   "owner": "@elastic/security-threat-hunting-investigations"
 }

packages/kbn-expandable-flyout/src/actions.ts

@@ -19,6 +19,7 @@ export enum ActionType {
   closePreviewPanel = 'close_preview_panel',
   previousPreviewPanel = 'previous_preview_panel',
   closeFlyout = 'close_flyout',
+  urlChanged = 'urlChanged',
 }
 
 export const openPanelsAction = createAction<{
@@ -37,3 +38,9 @@ export const closeLeftPanelAction = createAction(ActionType.closeLeftPanel);
 export const closePreviewPanelAction = createAction(ActionType.closePreviewPanel);
 
 export const previousPreviewPanelAction = createAction(ActionType.previousPreviewPanel);
+
+export const urlChangedAction = createAction<{
+  right?: FlyoutPanelProps;
+  left?: FlyoutPanelProps;
+  preview?: FlyoutPanelProps;
+}>(ActionType.urlChanged);

packages/kbn-expandable-flyout/src/components/preview_section.test.tsx

@@ -14,21 +14,19 @@ import {
   PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID,
   PREVIEW_SECTION_TEST_ID,
 } from './test_ids';
-import { ExpandableFlyoutContextValue } from '../context';
 import { TestProvider } from '../test/provider';
+import { State } from '../state';
 
 describe('PreviewSection', () => {
   const context = {
-    panels: {
-      right: {},
-      left: {},
-      preview: [
-        {
-          id: 'key',
-        },
-      ],
-    },
-  } as unknown as ExpandableFlyoutContextValue;
+    right: {},
+    left: {},
+    preview: [
+      {
+        id: 'key',
+      },
+    ],
+  } as unknown as State;
 
   const component = <div>{'component'}</div>;
   const left = 500;
@@ -37,7 +35,7 @@ describe('PreviewSection', () => {
     const showBackButton = false;
 
     const { getByTestId } = render(
-      <TestProvider state={context.panels}>
+      <TestProvider state={context}>
         <PreviewSection component={component} leftPosition={left} showBackButton={showBackButton} />
       </TestProvider>
     );
@@ -49,7 +47,7 @@ describe('PreviewSection', () => {
     const showBackButton = true;
 
     const { getByTestId } = render(
-      <TestProvider state={context.panels}>
+      <TestProvider state={context}>
         <PreviewSection component={component} leftPosition={left} showBackButton={showBackButton} />
       </TestProvider>
     );
@@ -67,7 +65,7 @@ describe('PreviewSection', () => {
     };
 
     const { getByTestId, getByText } = render(
-      <TestProvider state={context.panels}>
+      <TestProvider state={context}>
         <PreviewSection
           component={component}
           leftPosition={left}

packages/kbn-expandable-flyout/src/context/memory_state_provider.tsx → packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_api.ts

@@ -6,18 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { createContext, FC, useCallback, useMemo } from 'react';
-import {
-  createDispatchHook,
-  createSelectorHook,
-  Provider as ReduxProvider,
-  ReactReduxContextValue,
-} from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-
-import { reducer } from '../reducer';
-import { initialState, State } from '../state';
-import type { ExpandableFlyoutApi, FlyoutPanelProps } from '../types';
+import { useCallback, useMemo } from 'react';
 import {
   closeLeftPanelAction,
   closePanelsAction,
@@ -29,24 +18,15 @@ import {
   openRightPanelAction,
   previousPreviewPanelAction,
 } from '../actions';
+import { useDispatch } from '../redux';
+import { FlyoutPanelProps, type ExpandableFlyoutApi } from '../types';
 
-export const store = configureStore({
-  reducer,
-  devTools: process.env.NODE_ENV !== 'production',
-  preloadedState: {},
-  enhancers: [],
-});
-
-export const Context = createContext<ReactReduxContextValue<State>>({
-  store,
-  storeState: initialState,
-});
+export type { ExpandableFlyoutApi };
 
-const useDispatch = createDispatchHook(Context);
-const useSelector = createSelectorHook(Context);
-
-export const useFlyoutMemoryState = (): ExpandableFlyoutApi => {
-  const state = useSelector((s) => s);
+/**
+ * This hook allows you to interact with the flyout, open panels and previews etc.
+ */
+export const useExpandableFlyoutApi = () => {
   const dispatch = useDispatch();
 
   const openPanels = useCallback(
@@ -94,7 +74,6 @@ export const useFlyoutMemoryState = (): ExpandableFlyoutApi => {
 
   const api: ExpandableFlyoutApi = useMemo(
     () => ({
-      panels: state,
       openFlyout: openPanels,
       openRightPanel,
       openLeftPanel,
@@ -106,7 +85,6 @@ export const useFlyoutMemoryState = (): ExpandableFlyoutApi => {
       previousPreviewPanel,
     }),
     [
-      state,
       openPanels,
       openRightPanel,
       openLeftPanel,
@@ -121,15 +99,3 @@ export const useFlyoutMemoryState = (): ExpandableFlyoutApi => {
 
   return api;
 };
-
-/**
- * In-memory state provider for the expandable flyout, for cases when we don't want changes to be persisted
- * in the url.
- */
-export const MemoryStateProvider: FC = ({ children }) => {
-  return (
-    <ReduxProvider context={Context} store={store}>
-      {children}
-    </ReduxProvider>
-  );
-};

packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_state.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { stateSelector, useSelector } from '../redux';
+
+/**
+ * This hook allows you to access the flyout state, read open panels and previews.
+ */
+export const useExpandableFlyoutState = () => {
+  return useSelector(stateSelector);
+};