From 967da8fda401634eb9d2075bac70d12dce541773 Mon Sep 17 00:00:00 2001
From: Krist Wongsuphasawat <krist.wongz@gmail.com>
Date: Mon, 27 Apr 2020 12:45:34 -0700
Subject: [PATCH] fix: add query storybook back

---
 .../shared/components/createQueryStory.tsx    | 144 +++++++++---------
 .../plugins/preset-chart-xy/Line/Stories.tsx  |   1 +
 .../preset-chart-xy/Line/stories/query.tsx    | 129 ++++++++--------
 3 files changed, 132 insertions(+), 142 deletions(-)

diff --git a/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx b/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
index 3f01df76a4..484c2489e5 100644
--- a/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
+++ b/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
@@ -1,82 +1,74 @@
-// import React from 'react';
-// import { text, select } from '@storybook/addon-knobs';
-// import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
-// import { SupersetClient } from '@superset-ui/connection';
-// import Expandable from './Expandable';
-// import VerifyCORS, { renderError } from './VerifyCORS';
+import React from 'react';
+import { text, select } from '@storybook/addon-knobs';
+import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
+import { SupersetClient } from '@superset-ui/connection';
+import Expandable from './Expandable';
+import VerifyCORS, { renderError } from './VerifyCORS';
 
-// export default function createQueryStory({
-//   choices,
-//   storyName = 'Queries',
-//   storyPath = '',
-// }: {
-//   choices: {
-//     [key: string]: {
-//       chartType: string;
-//       formData: {
-//         [key: string]: any;
-//       };
-//     };
-//   };
-//   storyName: string;
-//   storyPath: string;
-// }) {
-//   const keys = Object.keys(choices);
+export default function createQueryStory({
+  choices,
+}: {
+  choices: {
+    [key: string]: {
+      chartType: string;
+      formData: {
+        [key: string]: any;
+      };
+    };
+  };
+}) {
+  const keys = Object.keys(choices);
 
-//   return {
-//     renderStory: () => {
-//       const host = text('Set Superset App host for CORS request', 'localhost:8088');
-//       const mode = select('Choose mode:', keys, keys[0]);
-//       const { formData: presetFormData, chartType } = choices[mode];
-//       const width = text('Vis width', '400');
-//       const height = text('Vis height', '400');
-//       const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
+  return () => {
+    const host = text('Set Superset App host for CORS request', 'localhost:8088');
+    const mode = select('Choose mode:', keys, keys[0]);
+    const { formData: presetFormData, chartType } = choices[mode];
+    const width = text('Vis width', '400');
+    const height = text('Vis height', '400');
+    const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
 
-//       return (
-//         <div style={{ margin: 16 }}>
-//           <VerifyCORS host={host}>
-//             {() => (
-//               <ChartDataProvider
-//                 client={SupersetClient}
-//                 formData={JSON.parse(formData.replace(/&quot;/g, '"'))}
-//               >
-//                 {({ loading, payload, error }) => {
-//                   if (loading) return <div>Loading!</div>;
+    return (
+      <div style={{ margin: 16 }}>
+        <VerifyCORS host={host}>
+          {() => (
+            <ChartDataProvider
+              client={SupersetClient}
+              formData={JSON.parse(formData.replace(/&quot;/g, '"'))}
+            >
+              {({ loading, payload, error }) => {
+                if (loading) return <div>Loading!</div>;
 
-//                   if (error) return renderError(error);
+                if (error) return renderError(error);
 
-//                   if (payload)
-//                     return (
-//                       <>
-//                         <SuperChart
-//                           chartType={chartType}
-//                           width={width}
-//                           height={height}
-//                           formData={payload.formData}
-//                           // @TODO fix typing
-//                           // all vis's now expect objects but api/v1/ returns an array
-//                           queryData={
-//                             Array.isArray(payload.queryData)
-//                               ? payload.queryData[0]
-//                               : payload.queryData
-//                           }
-//                         />
-//                         <br />
-//                         <Expandable expandableWhat="payload">
-//                           <pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre>
-//                         </Expandable>
-//                       </>
-//                     );
+                if (payload)
+                  return (
+                    <>
+                      <SuperChart
+                        chartType={chartType}
+                        width={width}
+                        height={height}
+                        formData={payload.formData}
+                        // @TODO fix typing
+                        // all vis's now expect objects but api/v1/ returns an array
+                        queryData={
+                          Array.isArray(payload.queryData)
+                            ? payload.queryData[0]
+                            : payload.queryData
+                        }
+                      />
+                      <br />
+                      <Expandable expandableWhat="payload">
+                        <pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre>
+                      </Expandable>
+                    </>
+                  );
 
-//                   return null;
-//                 }}
-//               </ChartDataProvider>
-//             )}
-//           </VerifyCORS>
-//         </div>
-//       );
-//     },
-//     storyName,
-//     storyPath,
-//   };
-// }
+                return null;
+              }}
+            </ChartDataProvider>
+          )}
+        </VerifyCORS>
+      </div>
+    );
+  };
+}
diff --git a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
index 48e396e6d6..e27f9e043c 100644
--- a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
+++ b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
@@ -13,3 +13,4 @@ export { default as withLabelFlush } from './stories/flush';
 export { default as withMissingData } from './stories/missing';
 export { default as legacyShim } from './stories/legacy';
 export { default as withTimeShift } from './stories/timeShift';
+export { default as query } from './stories/query';
diff --git a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
index a6635c154c..9c61c1de97 100644
--- a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
+++ b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
@@ -1,67 +1,64 @@
-// /* eslint-disable sort-keys */
-// import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
-// import createQueryStory from '../../../../../shared/components/createQueryStory';
+import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
+import createQueryStory from '../../../../../shared/components/createQueryStory';
 
-// export default createQueryStory({
-//     choices: {
-//       'Line Chart - Legacy API': {
-//         chartType: LINE_PLUGIN_LEGACY_TYPE,
-//         formData: {
-//           datasource: '3__table',
-//           viz_type: 'line',
-//           url_params: {},
-//           granularity_sqla: 'ds',
-//           time_grain_sqla: 'P1D',
-//           time_range: '100 years ago : now',
-//           metrics: ['sum__num'],
-//           adhoc_filters: [],
-//           groupby: [],
-//           limit: 25,
-//           row_limit: 50000,
-//         },
-//       },
-//       'Line Chart - /api/v1/query': {
-//         chartType: LINE_PLUGIN_TYPE,
-//         formData: {
-//           viz_type: LINE_PLUGIN_TYPE,
-//           datasource: '3__table',
-//           granularity_sqla: 'ds',
-//           time_grain_sqla: 'P1D',
-//           time_range: '100 years ago : now',
-//           metrics: ['sum__num'],
-//           limit: 25,
-//           row_limit: 50000,
-//           encoding: {
-//             x: {
-//               field: '__timestamp',
-//               type: 'temporal',
-//               format: '%Y',
-//               scale: {
-//                 type: 'time',
-//               },
-//               axis: {
-//                 title: 'Time',
-//               },
-//             },
-//             y: {
-//               field: 'sum__num',
-//               type: 'quantitative',
-//               scale: {
-//                 type: 'linear',
-//               },
-//               axis: {
-//                 title: 'Number of Babies',
-//               },
-//             },
-//             stroke: {
-//               field: 'gender',
-//               type: 'nominal',
-//               legend: true,
-//             },
-//           },
-//         },
-//       },
-//     },
-//     storyName: 'Queries',
-//     storyPath: 'preset-chart-xy|LineChartPlugin',
-//   })
+export default createQueryStory({
+  choices: {
+    'Line Chart - Legacy API': {
+      chartType: LINE_PLUGIN_LEGACY_TYPE,
+      formData: {
+        datasource: '3__table',
+        viz_type: 'line',
+        url_params: {},
+        granularity_sqla: 'ds',
+        time_grain_sqla: 'P1D',
+        time_range: '100 years ago : now',
+        metrics: ['sum__num'],
+        adhoc_filters: [],
+        groupby: [],
+        limit: 25,
+        row_limit: 50000,
+      },
+    },
+    'Line Chart - /api/v1/query': {
+      chartType: LINE_PLUGIN_TYPE,
+      formData: {
+        viz_type: LINE_PLUGIN_TYPE,
+        datasource: '3__table',
+        granularity_sqla: 'ds',
+        time_grain_sqla: 'P1D',
+        time_range: '100 years ago : now',
+        metrics: ['sum__num'],
+        limit: 25,
+        row_limit: 50000,
+        encoding: {
+          x: {
+            field: '__timestamp',
+            type: 'temporal',
+            format: '%Y',
+            scale: {
+              type: 'time',
+            },
+            axis: {
+              title: 'Time',
+            },
+          },
+          y: {
+            field: 'sum__num',
+            type: 'quantitative',
+            scale: {
+              type: 'linear',
+            },
+            axis: {
+              title: 'Number of Babies',
+            },
+          },
+          stroke: {
+            field: 'gender',
+            type: 'nominal',
+            legend: true,
+          },
+        },
+      },
+    },
+  },
+});