[8.x] [Inventory] Fix Inventory storybook (#197174) (#198532)

# Backport This will backport the following commits from `main` to `8.x`: - [[Inventory] Fix Inventory storybook (#197174)](#197174)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Carlos Crespo <[email protected]>
elastic · Oct 31, 2024 · a16b026 · a16b026
1 parent 0a56187
commit a16b026
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 3,045 deletions.
diff --git a/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx b/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx
@@ -12,8 +12,10 @@ import type { EntityManagerPublicPluginStart } from '@kbn/entityManager-plugin/p
 import type { InferencePublicStart } from '@kbn/inference-plugin/public';
 import type { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
 import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
-import type { SharePluginStart } from '@kbn/share-plugin/public';
+import type { LocatorPublic, SharePluginStart } from '@kbn/share-plugin/public';
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
+import type { HttpStart } from '@kbn/core-http-browser';
+import { action } from '@storybook/addon-actions';
 import type { InventoryKibanaContext } from '../public/hooks/use_kibana';
 import { ITelemetryClient } from '../public/services/telemetry/types';
 
@@ -25,7 +27,21 @@ export function getMockInventoryContext(): InventoryKibanaContext {
     entityManager: {} as unknown as EntityManagerPublicPluginStart,
     observabilityShared: {} as unknown as ObservabilitySharedPluginStart,
     inference: {} as unknown as InferencePublicStart,
-    share: {} as unknown as SharePluginStart,
+    share: {
+      url: {
+        locators: {
+          get: (_id: string) =>
+            ({
+              navigate: async () => {
+                return Promise.resolve();
+              },
+              getRedirectUrl: (args: any) => {
+                action('share.url.locators.getRedirectUrl')(args);
+              },
+            } as unknown as LocatorPublic<any>),
+        },
+      },
+    } as unknown as SharePluginStart,
     telemetry: {} as unknown as ITelemetryClient,
     unifiedSearch: {} as unknown as UnifiedSearchPublicPluginStart,
     dataViews: {} as unknown as DataViewsPublicPluginStart,
@@ -34,6 +50,13 @@ export function getMockInventoryContext(): InventoryKibanaContext {
       fetch: jest.fn(),
       stream: jest.fn(),
     },
+    http: {
+      basePath: {
+        prepend: (_path: string) => {
+          return '';
+        },
+      },
+    } as unknown as HttpStart,
     spaces: {} as unknown as SpacesPluginStart,
     kibanaEnvironment: {
       isCloudEnv: false,

diff --git a/x-pack/plugins/observability_solution/inventory/.storybook/jest_setup.js b/x-pack/plugins/observability_solution/inventory/.storybook/jest_setup.js
diff --git a/...ity_solution/inventory/.storybook/main.js → ...ity_solution/inventory/.storybook/main.ts b/...ity_solution/inventory/.storybook/main.js → ...ity_solution/inventory/.storybook/main.ts
@@ -5,4 +5,6 @@
  * 2.0.
  */
 
-module.exports = require('@kbn/storybook').defaultConfig;
+import { defaultConfig } from '@kbn/storybook';
+
+module.exports = defaultConfig;
diff --git a/..._solution/inventory/.storybook/preview.js → ...solution/inventory/.storybook/preview.tsx b/..._solution/inventory/.storybook/preview.js → ...solution/inventory/.storybook/preview.tsx
@@ -5,9 +5,11 @@
  * 2.0.
  */
 
-import { EuiThemeProviderDecorator } from '@kbn/kibana-react-plugin/common';
+import { addDecorator } from '@storybook/react';
 import * as jest from 'jest-mock';
+import { KibanaReactStorybookDecorator } from './storybook_decorator';
 
+// @ts-ignore
 window.jest = jest;
 
-export const decorators = [EuiThemeProviderDecorator];
+addDecorator(KibanaReactStorybookDecorator);
diff --git a/x-pack/plugins/observability_solution/inventory/.storybook/storybook_decorator.tsx b/x-pack/plugins/observability_solution/inventory/.storybook/storybook_decorator.tsx
@@ -4,15 +4,12 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { ComponentType, useMemo } from 'react';
+import React, { useMemo } from 'react';
+import { DecoratorFn } from '@storybook/react';
 import { InventoryContextProvider } from '../public/context/inventory_context_provider';
 import { getMockInventoryContext } from './get_mock_inventory_context';
 
-export function KibanaReactStorybookDecorator(Story: ComponentType) {
+export const KibanaReactStorybookDecorator: DecoratorFn = (story) => {
   const context = useMemo(() => getMockInventoryContext(), []);
-  return (
-    <InventoryContextProvider context={context}>
-      <Story />
-    </InventoryContextProvider>
-  );
-}
+  return <InventoryContextProvider context={context}>{story()}</InventoryContextProvider>;
+};
diff --git a/x-pack/plugins/observability_solution/inventory/jest.config.js b/x-pack/plugins/observability_solution/inventory/jest.config.js
@@ -13,9 +13,6 @@ module.exports = {
     '<rootDir>/x-pack/plugins/observability_solution/inventory/common',
     '<rootDir>/x-pack/plugins/observability_solution/inventory/server',
   ],
-  setupFiles: [
-    '<rootDir>/x-pack/plugins/observability_solution/inventory/.storybook/jest_setup.js',
-  ],
   collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/x-pack/plugins/observability_solution/inventory/{public,common,server}/**/*.{js,ts,tsx}',

diff --git a/...bservability_solution/inventory/public/components/entities_grid/entities_grid.stories.tsx b/...bservability_solution/inventory/public/components/entities_grid/entities_grid.stories.tsx
@@ -5,51 +5,69 @@
  * 2.0.
  */
 
-import { EuiDataGridSorting, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiButton, EuiDataGridSorting, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Meta, Story } from '@storybook/react';
 import { orderBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { ENTITY_LAST_SEEN, ENTITY_TYPE } from '@kbn/observability-shared-plugin/common';
+import { useArgs } from '@storybook/addons';
 import { EntitiesGrid } from '.';
 import { EntityType } from '../../../common/entities';
 import { entitiesMock } from './mock/entities_mock';
 
-const stories: Meta<{}> = {
+interface EntityGridStoriesArgs {
+  entityType?: EntityType;
+}
+
+const entityTypeOptions: EntityType[] = ['host', 'container', 'service'];
+
+const stories: Meta<EntityGridStoriesArgs> = {
   title: 'app/inventory/entities_grid',
   component: EntitiesGrid,
+  argTypes: {
+    entityType: {
+      options: entityTypeOptions,
+      name: 'Entity type',
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: { entityType: undefined },
 };
-export default stories;
 
-export const Example: Story<{}> = () => {
+export const Grid: Story<EntityGridStoriesArgs> = (args) => {
   const [pageIndex, setPageIndex] = useState(0);
+  const [{ entityType }, updateArgs] = useArgs();
   const [sort, setSort] = useState<EuiDataGridSorting['columns'][0]>({
     id: ENTITY_LAST_SEEN,
     direction: 'desc',
   });
-  const [selectedEntityType, setSelectedEntityType] = useState<EntityType | undefined>();
   const filteredAndSortedItems = useMemo(
     () =>
       orderBy(
-        selectedEntityType
-          ? entitiesMock.filter((mock) => mock[ENTITY_TYPE] === selectedEntityType)
-          : entitiesMock,
+        entityType ? entitiesMock.filter((mock) => mock[ENTITY_TYPE] === entityType) : entitiesMock,
         sort.id,
         sort.direction
       ),
-    [selectedEntityType, sort.direction, sort.id]
+    [entityType, sort.direction, sort.id]
   );
 
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
-        {`Entity filter: ${selectedEntityType || 'N/A'}`}
-        <EuiLink
-          disabled={!selectedEntityType}
-          data-test-subj="inventoryExampleClearFilterButton"
-          onClick={() => setSelectedEntityType(undefined)}
-        >
-          Clear filter
-        </EuiLink>
+        <EuiFlexGroup direction="column" alignItems="flexStart">
+          <EuiFlexItem grow={false}>{`Entity filter: ${entityType || 'N/A'}`}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              disabled={!entityType}
+              data-test-subj="inventoryExampleClearFilterButton"
+              onClick={() => updateArgs({ entityType: undefined })}
+            >
+              Clear filter
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EntitiesGrid
@@ -60,14 +78,14 @@ export const Example: Story<{}> = () => {
           onChangePage={setPageIndex}
           onChangeSort={setSort}
           pageIndex={pageIndex}
-          onFilterByType={setSelectedEntityType}
+          onFilterByType={(selectedEntityType) => updateArgs({ entityType: selectedEntityType })}
         />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
 
-export const EmptyGridExample: Story<{}> = () => {
+export const EmptyGrid: Story<EntityGridStoriesArgs> = (args) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [sort, setSort] = useState<EuiDataGridSorting['columns'][0]>({
     id: ENTITY_LAST_SEEN,
@@ -87,3 +105,5 @@ export const EmptyGridExample: Story<{}> = () => {
     />
   );
 };
+
+export default stories;