Storybook: Add documentation and controls to RefreshPicker story (#51736)

packages/grafana-ui/package.json

@@ -110,6 +110,7 @@
     "@storybook/addons": "6.4.21",
     "@storybook/api": "6.4.21",
     "@storybook/builder-webpack5": "6.4.21",
+    "@storybook/client-api": "6.4.21",
     "@storybook/components": "6.4.21",
     "@storybook/core-events": "6.4.21",
     "@storybook/manager-webpack5": "6.4.21",

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.mdx

@@ -0,0 +1,19 @@
+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { RefreshPicker } from './RefreshPicker';
+
+<Meta title="MDX|RefreshPicker" component={RefreshPicker} />
+
+# Refresh Picker
+
+This component is used on dashboards to refresh visualizations. Grafana does not do this automatically, queries run on their own schedule according to the panel settings. Grafana cancels any pending requests when a new refresh is triggered.
+
+**The refresh icon:** will immediately run the query and refresh the visualizations.
+
+**The down arrow:** will display a list of refresh intervals. If one of them is selected the dashboard will regularly refresh according to that schedule.
+
+<Preview>
+  <RefreshPicker tooltip="Run query" />
+  <RefreshPicker text="Run query" tooltip="Run query" />
+  <RefreshPicker text="Run query" isLoading={true} tooltip="Run query" value="1h" />
+</Preview>
+<Props of={RefreshPicker} />

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx

@@ -1,24 +1,45 @@
 import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { Story } from '@storybook/react';
 import React from 'react';
 
 import { RefreshPicker } from '@grafana/ui';
 
-import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { StoryExample } from '../../utils/storybook/StoryExample';
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { HorizontalGroup } from '../Layout/Layout';
+
+import { Props } from './RefreshPicker';
+import mdx from './RefreshPicker.mdx';
 
 export default {
   title: 'Pickers and Editors/RefreshPicker',
   component: RefreshPicker,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+    controls: {
+      sort: 'alpha',
+    },
+  },
+  args: {
+    isLoading: false,
+    isLive: false,
+    width: 'auto',
+    text: 'Run query',
+    tooltip: 'My tooltip text goes here',
+    value: '1h',
+    primary: false,
+    noIntervalPicker: false,
+    intervals: ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'],
+  },
 };
 
-export const Examples = () => {
-  const intervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
+export const Examples: Story<Props> = (args) => {
+  const [, updateArgs] = useArgs();
   const onIntervalChanged = (interval: string) => {
     action('onIntervalChanged fired')(interval);
+    updateArgs({ value: interval });
   };
 
   const onRefresh = () => {
@@ -26,45 +47,17 @@ export const Examples = () => {
   };
 
   return (
-    <DashboardStoryCanvas>
-      <UseState initialState={'1h'}>
-        {(value, updateValue) => {
-          return (
-            <HorizontalGroup>
-              <StoryExample name="Simple">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-              <StoryExample name="With text">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  text="Run query"
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-              <StoryExample name="With text and loading">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  text="Run query"
-                  isLoading={true}
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-            </HorizontalGroup>
-          );
-        }}
-      </UseState>
-    </DashboardStoryCanvas>
+    <RefreshPicker
+      tooltip={args.tooltip}
+      value={args.value}
+      text={args.text}
+      isLoading={args.isLoading}
+      intervals={args.intervals}
+      width={args.width}
+      onIntervalChanged={onIntervalChanged}
+      onRefresh={onRefresh}
+      noIntervalPicker={args.noIntervalPicker}
+      primary={args.primary}
+    />
   );
 };

yarn.lock

@@ -5034,6 +5034,7 @@ __metadata:
     "@storybook/addons": 6.4.21
     "@storybook/api": 6.4.21
     "@storybook/builder-webpack5": 6.4.21
+    "@storybook/client-api": 6.4.21
     "@storybook/components": 6.4.21
     "@storybook/core-events": 6.4.21
     "@storybook/manager-webpack5": 6.4.21