From 9967f193c88e13135cd3e7ff329cd6539851c8fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Mon, 22 Feb 2021 11:04:27 +0100
Subject: [PATCH] Revert "StoryBook: Introduces Grafana Controls (#31351)"
 (#31388)

This reverts commit c5797cc2748829f7f609c180044c8211d63f61b7.
---
 packages/grafana-ui/.storybook/main.ts        |  1 -
 .../src/addons/grafana-controls/preset.ts     |  5 --
 .../src/addons/grafana-controls/register.tsx  | 43 ----------------
 .../components/BigValue/BigValue.story.tsx    | 50 +++++++++++--------
 4 files changed, 28 insertions(+), 71 deletions(-)
 delete mode 100644 packages/grafana-ui/src/addons/grafana-controls/preset.ts
 delete mode 100644 packages/grafana-ui/src/addons/grafana-controls/register.tsx

diff --git a/packages/grafana-ui/.storybook/main.ts b/packages/grafana-ui/.storybook/main.ts
index 1e5bcdf75ec..a7b4217a1a4 100644
--- a/packages/grafana-ui/.storybook/main.ts
+++ b/packages/grafana-ui/.storybook/main.ts
@@ -14,7 +14,6 @@ module.exports = {
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
-    '../src/addons/grafana-controls/preset.ts',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     'storybook-dark-mode/register',
diff --git a/packages/grafana-ui/src/addons/grafana-controls/preset.ts b/packages/grafana-ui/src/addons/grafana-controls/preset.ts
deleted file mode 100644
index 38cdfb7e6a3..00000000000
--- a/packages/grafana-ui/src/addons/grafana-controls/preset.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  managerEntries(entry = []) {
-    return [...entry, require.resolve('./register')];
-  },
-};
diff --git a/packages/grafana-ui/src/addons/grafana-controls/register.tsx b/packages/grafana-ui/src/addons/grafana-controls/register.tsx
deleted file mode 100644
index d89c80076eb..00000000000
--- a/packages/grafana-ui/src/addons/grafana-controls/register.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { ArgTypes } from '@storybook/react';
-import { addons, types } from '@storybook/addons';
-import { AddonPanel, ArgsTable } from '@storybook/components';
-import { useArgs, useArgTypes, useParameter } from '@storybook/api';
-
-const ADDON_ID = 'storybook/grafana-controls';
-const PANEL_ID = `${ADDON_ID}/controls`;
-const PARAM_KEY = 'grafanaControls';
-
-const GrafanaControlsPanel = () => {
-  const [args, updateArgs, resetArgs] = useArgs();
-  const rows = useArgTypes();
-  const argTypes = useParameter<ArgTypes>(PARAM_KEY, {});
-  const newRows: ArgTypes = {};
-
-  for (const key in argTypes) {
-    if (!Object.hasOwnProperty.call(argTypes, key)) {
-      continue;
-    }
-
-    if (Object.hasOwnProperty.call(rows, key)) {
-      newRows[key] = { ...rows[key], ...argTypes[key] };
-    }
-  }
-
-  return (
-    <ArgsTable rows={newRows} args={args} updateArgs={updateArgs} resetArgs={resetArgs as any} inAddonPanel compact />
-  );
-};
-
-addons.register(ADDON_ID, (api) => {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: 'Grafana Controls',
-    // eslint-disable-next-line react/display-name
-    render: ({ active, key }) => (
-      <AddonPanel active={Boolean(active)} key={key}>
-        <GrafanaControlsPanel />
-      </AddonPanel>
-    ),
-  });
-});
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
index 7227795b9c2..c74e9a82d70 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
@@ -11,6 +11,7 @@ import {
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './BigValue.mdx';
 import { useTheme } from '../../themes';
+import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
 import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
 
 export default {
@@ -22,31 +23,36 @@ export default {
       page: mdx,
     },
     knobs: {
-      disable: true,
+      disabled: true,
     },
-    controls: {
-      disable: true,
-    },
-    grafanaControls: {
-      width: { control: { type: 'range', min: 200, max: 800 } },
-      height: { control: { type: 'range', min: 200, max: 800 } },
-      colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
-      graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
-      justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
-      textMode: {
-        control: {
-          type: 'radio',
-          options: [
-            BigValueTextMode.Auto,
-            BigValueTextMode.Name,
-            BigValueTextMode.ValueAndName,
-            BigValueTextMode.None,
-            BigValueTextMode.Value,
-          ],
-        },
+  },
+  argTypes: {
+    width: { control: { type: 'range', min: 200, max: 800 } },
+    height: { control: { type: 'range', min: 200, max: 800 } },
+    colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
+    graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
+    justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
+    textMode: {
+      control: {
+        type: 'radio',
+        options: [
+          BigValueTextMode.Auto,
+          BigValueTextMode.Name,
+          BigValueTextMode.ValueAndName,
+          BigValueTextMode.None,
+          BigValueTextMode.Value,
+        ],
       },
-      color: { control: { type: 'color' } },
     },
+    color: { control: 'color' },
+    value: NOOP_CONTROL,
+    sparkline: NOOP_CONTROL,
+    onClick: NOOP_CONTROL,
+    className: NOOP_CONTROL,
+    alignmentFactors: NOOP_CONTROL,
+    text: NOOP_CONTROL,
+    count: NOOP_CONTROL,
+    theme: NOOP_CONTROL,
   },
 };