fix(generator-superset): add fixes to viz plugin generator (apache#803)

* fix(generator-superset): regressions in viz plugin generator

* address comments

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/index.js

@@ -62,21 +62,28 @@ module.exports = class extends Generator {
   }
 
   writing() {
+    // 'hello-world' -> 'HelloWorld'
     const packageLabel = _.upperFirst(_.camelCase(this.answers.packageName));
 
+    // 'hello-world' -> 'Hello World'
+    const pluginName = _.startCase(_.camelCase(this.answers.packageName));
+
     const params = {
       ...this.answers,
       packageLabel,
+      pluginName,
     };
 
     [
       ['package.erb', 'package.json'],
+      ['tsconfig.json', 'tsconfig.json'],
       ['README.erb', 'README.md'],
       ['src/index.erb', 'src/index.ts'],
       ['src/plugin/buildQuery.erb', 'src/plugin/buildQuery.ts'],
       ['src/plugin/controlPanel.erb', 'src/plugin/controlPanel.ts'],
       ['src/plugin/index.erb', 'src/plugin/index.ts'],
       ['src/plugin/transformProps.erb', 'src/plugin/transformProps.ts'],
+      ['src/types.erb', 'src/types.ts'],
       ['src/MyChart.erb', `src/${packageLabel}.tsx`],
       ['test/index.erb', 'test/index.test.ts'],
       ['test/plugin/buildQuery.test.erb', 'test/plugin/buildQuery.test.ts'],

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/README.erb

@@ -34,8 +34,9 @@ Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/
 ### File structure generated
 
 ```
-├── README.md
 ├── package.json
+├── README.md
+├── tsconfig.json
 ├── src
 │   ├── <%= packageLabel %>.tsx
 │   ├── images

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb

@@ -17,25 +17,8 @@
  * under the License.
  */
 import React, { <%if (componentType == 'class') { %>PureComponent<% } %><%if (componentType == 'function') { %>useEffect<% } %>, createRef } from 'react';
-import { styled, supersetTheme } from '@superset-ui/core';
-
-interface <%= packageLabel %>StylesProps {
-  height: number;
-  width: number;
-  headerFontSize: keyof typeof supersetTheme.typography.sizes;
-  boldText: boolean;
-}
-
-export type <%= packageLabel %>Props = {
-  height: number;
-  width: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  data: Record<any, any>; // please add additional typing for your data here
-  // add typing here for the props you pass in from transformProps.ts!
-  boldText: boolean;
-  headerFontSize: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-  headerText: string;
-};
+import { styled } from '@superset-ui/core';
+import { <%= packageLabel %>Props, <%= packageLabel %>StylesProps } from './types';
 
 // The following Styles component is a <div> element, which has been styled using Emotion
 // For docs, visit https://emotion.sh/docs/styled

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/controlPanel.erb

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { t, validateNonEmpty } from '@superset-ui/core';
-import { ControlPanelConfig } from '@superset-ui/chart-controls'
+import { ControlPanelConfig } from '@superset-ui/chart-controls';
 
 const config: ControlPanelConfig = {
   /**

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/index.erb

@@ -22,12 +22,6 @@ import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from '../images/thumbnail.png';
 
-const metadata = new ChartMetadata({
-  description: '<%= description %>',
-  name: t('<%= packageLabel %>'),
-  thumbnail,
-});
-
 export default class <%= packageLabel %>ChartPlugin extends ChartPlugin {
   /**
    * The constructor is used to pass relevant metadata and callbacks that get
@@ -40,6 +34,12 @@ export default class <%= packageLabel %>ChartPlugin extends ChartPlugin {
    * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
    */
   constructor() {
+    const metadata = new ChartMetadata({
+      description: '<%= description %>',
+      name: t('<%= pluginName %>'),
+      thumbnail,
+    });
+
     super({
       buildQuery,
       controlPanel,

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/transformProps.erb

@@ -16,13 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, DataRecord } from '@superset-ui/core';
-
-<%if (chartType === 'timeseries') { %>type TimestampType = string | number | Date;
-
-interface <%= packageLabel %>Datum extends DataRecord {
-  __timestamp: TimestampType;
-}<% } else { %>type <%= packageLabel %>Datum = DataRecord;<% } %>
+import { ChartProps, TimeseriesDataRecord } from '@superset-ui/core';
 
 export default function transformProps(chartProps: ChartProps) {
   /**
@@ -55,23 +49,24 @@ export default function transformProps(chartProps: ChartProps) {
    * be seen until restarting the development server.
    */
   const { width, height, formData, queryData } = chartProps;
-  const data = queryData.data as <%= packageLabel %>Datum[];
+  const { boldText, headerFontSize, headerText } = formData;
+  const data = queryData.data as TimeseriesDataRecord[];
 
   console.log('formData via TransformProps.ts', formData);
 
   return {
     width,
     height,
 <%if (chartType === 'timeseries') { %>
-    data: data.map((item: { __timestamp: TimestampType }) => ({
+    data: data.map(item => ({
       ...item,
       // convert epoch to native Date
       // eslint-disable-next-line no-underscore-dangle
-      __timestamp: new Date(item.__timestamp),
+      __timestamp: new Date(item.__timestamp as number),
     })),<% } else { %>    data,<% } %>
     // and now your control data, manipulated as needed, and passed through as props!
-    boldText: formData.boldText,
-    headerFontSize: formData.headerFontSize,
-    headerText: formData.headerText,
+    boldText,
+    headerFontSize,
+    headerText,
   };
 }

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/types.erb

@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { QueryFormData, supersetTheme, TimeseriesDataRecord } from '@superset-ui/core';
+
+export interface <%= packageLabel %>StylesProps {
+  height: number;
+  width: number;
+  headerFontSize: keyof typeof supersetTheme.typography.sizes;
+  boldText: boolean;
+}
+
+interface <%= packageLabel %>CustomizeProps {
+  headerText: string;
+}
+
+export type <%= packageLabel %>QueryFormData = QueryFormData &
+  <%= packageLabel %>StylesProps &
+  <%= packageLabel %>CustomizeProps;
+
+export type <%= packageLabel %>Props = <%= packageLabel %>StylesProps &
+  <%= packageLabel %>CustomizeProps & {
+    data: TimeseriesDataRecord[];
+    // add typing here for the props you pass in from transformProps.ts!
+  };

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "declarationDir": "lib",
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "exclude": [
+    "lib",
+    "test"
+  ],
+  "extends": "../../tsconfig.options.json",
+  "include": [
+    "src/**/*",
+    "types/**/*",
+    "../../types/**/*"
+  ],
+  "references": [
+    {
+      "path": "../../packages/superset-ui-chart-controls"
+    },
+    {
+      "path": "../../packages/superset-ui-core"
+    }
+  ]
+}