From 21f0509f8b5de307f2f1879442f4c5479828a03b Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 17 May 2021 14:27:05 +0100
Subject: [PATCH] Table: updates story from knobs to control (#34193)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Tables: updates story from knobs to control

* removes the Descending and sortByDisplayName controls since they have no effect on component

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
---
 .../src/components/Table/Table.story.tsx      | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx
index ad6ffe80d71..51372480455 100644
--- a/packages/grafana-ui/src/components/Table/Table.story.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.story.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { merge } from 'lodash';
 import { Table } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { number } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
 import { useTheme2 } from '../../themes';
 import mdx from './Table.mdx';
 import {
@@ -21,11 +21,22 @@ export default {
   component: Table,
   decorators: [withCenteredStory],
   parameters: {
+    controls: {
+      exclude: ['onColumnResize', 'onSortByChange', 'onCellFilterAdded', 'ariaLabel', 'data', 'initialSortBy'],
+    },
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
   },
-};
+  args: {
+    width: 700,
+    height: 500,
+    columnMinWidth: 150,
+  },
+} as Meta;
 
 function buildData(theme: GrafanaTheme2, config: Record<string, FieldConfig>): DataFrame {
   const data = new MutableDataFrame({
@@ -99,21 +110,19 @@ const defaultThresholds: ThresholdsConfig = {
   mode: ThresholdsMode.Absolute,
 };
 
-export const Simple = () => {
+export const Basic: Story = (args) => {
   const theme = useTheme2();
-  const width = number('width', 700, {}, 'Props');
   const data = buildData(theme, {});
 
   return (
     <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={500} width={width} />
+      <Table data={data} height={args.height} width={args.width} {...args} />
     </div>
   );
 };
 
-export const BarGaugeCell = () => {
+export const BarGaugeCell: Story = (args) => {
   const theme = useTheme2();
-  const width = number('width', 700, {}, 'Props');
   const data = buildData(theme, {
     Progress: {
       custom: {
@@ -126,14 +135,13 @@ export const BarGaugeCell = () => {
 
   return (
     <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={500} width={width} />
+      <Table data={data} height={args.height} width={args.width} {...args} />
     </div>
   );
 };
 
-export const ColoredCells = () => {
+export const ColoredCells: Story = (args) => {
   const theme = useTheme2();
-  const width = number('width', 750, {}, 'Props');
   const data = buildData(theme, {
     Progress: {
       custom: {
@@ -146,7 +154,7 @@ export const ColoredCells = () => {
 
   return (
     <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={500} width={width} />
+      <Table data={data} height={args.height} width={args.width} {...args} />
     </div>
   );
 };