From 44b6c896ae60e677134a7c6822512aa0edf8fcf2 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 12 Apr 2021 12:18:23 +0100
Subject: [PATCH] VizLegend: updates story from knobs to controls (#32801)

* VizLegend: updates story from knobs to controls

* refactored story to be small and concise

* reverted stories to be WithValues and WithNoValues

* fixes the seriesCount control not having effects to the story by using the Effect hook
---
 .../components/VizLegend/VizLegend.story.tsx  | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
index c4428b10658..c21ffb51d09 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
@@ -1,35 +1,34 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { useTheme, VizLegend } from '@grafana/ui';
-import { number, select } from '@storybook/addon-knobs';
+import { Story, Meta } from '@storybook/react';
 import {} from './VizLegendListItem';
 import { DisplayValue, getColorForTheme, GrafanaTheme } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { VizLegendItem } from './types';
 import { LegendDisplayMode, LegendPlacement } from './models.gen';
 
-const getStoriesKnobs = (table = false) => {
-  const seriesCount = number('Number of series', 5);
-  const containerWidth = select(
-    'Container width',
-    {
-      Small: '200px',
-      Medium: '500px',
-      'Full width': '100%',
-    },
-    '100%'
-  );
-
-  return {
-    seriesCount,
-    containerWidth,
-  };
-};
-
 export default {
   title: 'Visualizations/VizLegend',
   component: VizLegend,
   decorators: [withCenteredStory],
-};
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    containerWidth: '100%',
+    seriesCount: 5,
+  },
+  argTypes: {
+    containerWidth: {
+      control: {
+        type: 'select',
+        options: ['200px', '500px', '100%'],
+      },
+    },
+  },
+} as Meta;
 
 interface LegendStoryDemoProps {
   name: string;
@@ -43,6 +42,10 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
   const theme = useTheme();
   const [items, setItems] = useState<VizLegendItem[]>(generateLegendItems(seriesCount, theme, stats));
 
+  useEffect(() => {
+    setItems(generateLegendItems(seriesCount, theme, stats));
+  }, [seriesCount, theme, stats]);
+
   const onSeriesColorChange = (label: string, color: string) => {
     setItems(
       items.map((item) => {
@@ -90,9 +93,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
   );
 };
 
-export const WithNoValues = () => {
-  const { seriesCount, containerWidth } = getStoriesKnobs();
-
+export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
   return (
     <div style={{ width: containerWidth }}>
       <LegendStoryDemo
@@ -117,8 +118,7 @@ export const WithNoValues = () => {
   );
 };
 
-export const WithValues = () => {
-  const { seriesCount, containerWidth } = getStoriesKnobs();
+export const WithValues: Story = ({ containerWidth, seriesCount }) => {
   const stats: DisplayValue[] = [
     {
       title: 'Min',