[fleet] Introduce Storybook to Fleet (#112611)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.buildkite/scripts/steps/storybooks/build_and_upload.js

@@ -13,6 +13,7 @@ const STORYBOOKS = [
   'dashboard_enhanced',
   'data_enhanced',
   'embeddable',
+  'fleet',
   'infra',
   'security_solution',
   'ui_actions_enhanced',

src/dev/storybook/aliases.ts

@@ -24,6 +24,7 @@ export const storybookAliases = {
   expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   expression_shape: 'src/plugins/expression_shape/.storybook',
   expression_tagcloud: 'src/plugins/chart_expressions/expression_tagcloud/.storybook',
+  fleet: 'x-pack/plugins/fleet/storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/assets_facet_group.stories.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 from 'react';
+
+import { AssetsFacetGroup as Component } from './assets_facet_group';
+
+export default {
+  component: Component,
+  title: 'Sections/EPM/Assets Facet Group',
+};
+
+interface Args {
+  width: number;
+}
+
+const args: Args = {
+  width: 250,
+};
+
+export const AssetsFacetGroup = ({ width }: Args) => {
+  return (
+    <div style={{ width }}>
+      <Component
+        assets={{
+          kibana: {
+            dashboard: [],
+            visualization: [],
+            index_pattern: [],
+            search: [],
+            map: [],
+            lens: [],
+            security_rule: [],
+            ml_module: [],
+          },
+          elasticsearch: {
+            component_template: [],
+            data_stream_ilm_policy: [],
+            data_stream: [],
+            ilm_policy: [],
+            index_template: [],
+            ingest_pipeline: [],
+            transform: [],
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+AssetsFacetGroup.args = args;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 from 'react';
+
+import type { SavedObject } from 'src/core/public';
+
+import type { Installation } from '../../../../../../common';
+
+import type { PackageCardProps } from './package_card';
+import { PackageCard } from './package_card';
+
+export default {
+  title: 'Sections/EPM/Package Card',
+  description: 'A card representing a package available in Fleet',
+};
+
+type Args = Omit<PackageCardProps, 'status'> & { width: number };
+
+const args: Args = {
+  width: 250,
+  title: 'Title',
+  description: 'Description',
+  name: 'beats',
+  release: 'ga',
+  id: 'id',
+  version: '1.0.0',
+  download: '/',
+  path: 'path',
+};
+
+const argTypes = {
+  release: {
+    control: {
+      type: 'radio',
+      options: ['ga', 'beta', 'experimental'],
+    },
+  },
+};
+
+export const NotInstalled = ({ width, ...props }: Args) => (
+  <div style={{ width }}>
+    <PackageCard {...props} status="not_installed" />
+  </div>
+);
+
+export const Installed = ({ width, ...props }: Args) => {
+  const savedObject: SavedObject<Installation> = {
+    id: props.id,
+    type: props.type || '',
+    attributes: {
+      name: props.name,
+      version: props.version,
+      install_version: props.version,
+      es_index_patterns: {},
+      installed_kibana: [],
+      installed_es: [],
+      install_status: 'installed',
+      install_source: 'registry',
+      install_started_at: '2020-01-01T00:00:00.000Z',
+    },
+    references: [],
+  };
+
+  return (
+    <div style={{ width }}>
+      <PackageCard {...props} status="installed" savedObject={savedObject} />
+    </div>
+  );
+};
+
+NotInstalled.args = args;
+NotInstalled.argTypes = argTypes;
+Installed.args = args;
+Installed.argTypes = argTypes;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx

@@ -15,7 +15,7 @@ import { PackageIcon } from '../../../components';
 
 import { RELEASE_BADGE_LABEL, RELEASE_BADGE_DESCRIPTION } from './release_badge';
 
-type PackageCardProps = PackageListItem;
+export type PackageCardProps = PackageListItem;
 
 // adding the `href` causes EuiCard to use a `a` instead of a `button`
 // `a` tags use `euiLinkColor` which results in blueish Badge text

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.stories.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 from 'react';
+
+import { action } from '@storybook/addon-actions';
+
+import type { SavedObject } from 'src/core/public';
+
+import type { Installation } from '../../../../../../common';
+
+import type { ListProps } from './package_list_grid';
+import { PackageListGrid } from './package_list_grid';
+
+export default {
+  component: PackageListGrid,
+  title: 'Sections/EPM/Package List Grid',
+};
+
+type Args = Pick<ListProps, 'title' | 'isLoading' | 'showMissingIntegrationMessage'>;
+
+const args: Args = {
+  title: 'Installed integrations',
+  isLoading: false,
+  showMissingIntegrationMessage: false,
+};
+
+const savedObject: SavedObject<Installation> = {
+  id: 'id',
+  type: 'integration',
+  attributes: {
+    name: 'savedObject',
+    version: '1.2.3',
+    install_version: '1.2.3',
+    es_index_patterns: {},
+    installed_kibana: [],
+    installed_es: [],
+    install_status: 'installed',
+    install_source: 'registry',
+    install_started_at: '2020-01-01T00:00:00.000Z',
+  },
+  references: [],
+};
+
+export const EmptyList = (props: Args) => (
+  <PackageListGrid
+    list={[]}
+    onSearchChange={action('onSearchChange')}
+    setSelectedCategory={action('setSelectedCategory')}
+    {...props}
+  />
+);
+
+export const List = (props: Args) => (
+  <PackageListGrid
+    list={[
+      {
+        title: 'Package One',
+        description: 'Not Installed Description',
+        name: 'beats',
+        release: 'ga',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'not_installed',
+      },
+      {
+        title: 'Package Two',
+        description: 'Not Installed Description',
+        name: 'aws',
+        release: 'beta',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'not_installed',
+      },
+      {
+        title: 'Package Three',
+        description: 'Not Installed Description',
+        name: 'azure',
+        release: 'experimental',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'not_installed',
+      },
+      {
+        title: 'Package Four',
+        description: 'Installed Description',
+        name: 'elastic',
+        release: 'ga',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'installed',
+        savedObject,
+      },
+      {
+        title: 'Package Five',
+        description: 'Installed Description',
+        name: 'unknown',
+        release: 'beta',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'installed',
+        savedObject,
+      },
+      {
+        title: 'Package Six',
+        description: 'Installed Description',
+        name: 'kibana',
+        release: 'experimental',
+        id: 'id',
+        version: '1.0.0',
+        download: '/',
+        path: 'path',
+        status: 'installed',
+        savedObject,
+      },
+    ]}
+    onSearchChange={action('onSearchChange')}
+    setSelectedCategory={action('setSelectedCategory')}
+    {...props}
+  />
+);
+
+EmptyList.args = args;
+List.args = args;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.tsx

@@ -28,7 +28,7 @@ import { useLocalSearch, searchIdField } from '../../../hooks';
 
 import { PackageCard } from './package_card';
 
-interface ListProps {
+export interface ListProps {
   isLoading?: boolean;
   controls?: ReactNode;
   title: string;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/requirements.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 from 'react';
+
+import { Requirements as Component } from './requirements';
+
+export default {
+  component: Component,
+  title: 'Sections/EPM/Requirements',
+};
+
+interface Args {
+  width: number;
+}
+
+const args: Args = {
+  width: 250,
+};
+
+export const Requirements = ({ width }: Args) => {
+  return (
+    <div style={{ width }}>
+      <Component
+        requirements={{
+          kibana: {
+            version: '1.2.3',
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+Requirements.args = args;