From 99e90aa120dc8fc9254694793ea6459c14ed6543 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Wed, 21 Oct 2020 15:43:57 -0500
Subject: [PATCH] Use Storybook Controls instead of Knobs (#80705)

* Change an example in embeddable to use controls instead of knobs
* Add controls to SyncBadge APM story
* Convert both to [CSF](https://storybook.js.org/docs/react/api/csf)
* Remove the Knobs addon from the default Storybook configuration

Do not remove the Knobs addon package, since Canvas is still using it and this does not change anything in Canvas.
---
 packages/kbn-storybook/lib/default_config.ts  |  7 +--
 .../panel_options_menu.stories.tsx            | 60 +++++++++++--------
 .../Waterfall/SyncBadge.stories.tsx           | 35 +++++------
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/packages/kbn-storybook/lib/default_config.ts b/packages/kbn-storybook/lib/default_config.ts
index dc2647b7b5757..c3bc65059d4a6 100644
--- a/packages/kbn-storybook/lib/default_config.ts
+++ b/packages/kbn-storybook/lib/default_config.ts
@@ -20,12 +20,7 @@
 import { StorybookConfig } from '@storybook/core/types';
 
 export const defaultConfig: StorybookConfig = {
-  addons: [
-    '@kbn/storybook/preset',
-    '@storybook/addon-a11y',
-    '@storybook/addon-knobs',
-    '@storybook/addon-essentials',
-  ],
+  addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'],
   stories: ['../**/*.stories.tsx'],
   typescript: {
     reactDocgen: false,
diff --git a/src/plugins/embeddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx b/src/plugins/embeddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx
index 33724068a6ba8..551caa28d2291 100644
--- a/src/plugins/embeddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx
+++ b/src/plugins/embeddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx
@@ -17,37 +17,45 @@
  * under the License.
  */
 
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import * as React from 'react';
 import { PanelOptionsMenu } from '..';
 
-const euiContextDescriptors = {
-  id: 'mainMenu',
-  title: 'Options',
-  items: [
-    {
-      name: 'Inspect',
-      icon: 'inspect',
-      onClick: action('onClick(inspect)'),
-    },
-    {
-      name: 'Full screen',
-      icon: 'expand',
-      onClick: action('onClick(expand)'),
+export default {
+  title: 'components/PanelOptionsMenu',
+  component: PanelOptionsMenu,
+  argTypes: {
+    isViewMode: {
+      control: { type: 'boolean' },
     },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ height: 150 }}>
+        <Story />
+      </div>
+    ),
   ],
 };
 
-storiesOf('components/PanelOptionsMenu', module)
-  .addDecorator(withKnobs)
-  .add('default', () => {
-    const isViewMode = boolean('isViewMode', false);
+export function Default({ isViewMode }: React.ComponentProps<typeof PanelOptionsMenu>) {
+  const euiContextDescriptors = {
+    id: 'mainMenu',
+    title: 'Options',
+    items: [
+      {
+        name: 'Inspect',
+        icon: 'inspect',
+        onClick: action('onClick(inspect)'),
+      },
+      {
+        name: 'Full screen',
+        icon: 'expand',
+        onClick: action('onClick(expand)'),
+      },
+    ],
+  };
 
-    return (
-      <div style={{ height: 150 }}>
-        <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />
-      </div>
-    );
-  });
+  return <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />;
+}
+Default.args = { isViewMode: false } as React.ComponentProps<typeof PanelOptionsMenu>;
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
index a5393995f0864..0e517f6bf6212 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
@@ -4,27 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { boolean, withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { SyncBadge } from './SyncBadge';
 
-storiesOf('app/TransactionDetails/SyncBadge', module)
-  .addDecorator(withKnobs)
-  .add(
-    'example',
-    () => {
-      return <SyncBadge sync={boolean('sync', true)} />;
+export default {
+  title: 'app/TransactionDetails/SyncBadge',
+  component: SyncBadge,
+  argTypes: {
+    sync: {
+      control: { type: 'inline-radio', options: [true, false, undefined] },
     },
-    {
-      showPanel: true,
-      info: { source: false },
-    }
-  )
-  .add(
-    'sync=undefined',
-    () => {
-      return <SyncBadge />;
-    },
-    { info: { source: false } }
-  );
+  },
+};
+
+export function Example({ sync }: ComponentProps<typeof SyncBadge>) {
+  return <SyncBadge sync={sync} />;
+}
+Example.args = { sync: true } as ComponentProps<typeof SyncBadge>;