From af6379a2fdc400ed46a74ca66e135335f575fce8 Mon Sep 17 00:00:00 2001 From: Ville Brofeldt <33317356+villebro@users.noreply.github.com> Date: Wed, 7 Oct 2020 21:11:22 +0300 Subject: [PATCH] fix(generator-superset): add fixes to viz plugin generator (#803) * fix(generator-superset): regressions in viz plugin generator * address comments --- .../generators/plugin-chart/index.js | 7 ++++ .../plugin-chart/templates/README.erb | 3 +- .../plugin-chart/templates/src/MyChart.erb | 21 +--------- .../templates/src/plugin/controlPanel.erb | 2 +- .../templates/src/plugin/index.erb | 12 +++--- .../templates/src/plugin/transformProps.erb | 21 ++++------ .../plugin-chart/templates/src/types.erb | 40 +++++++++++++++++++ .../plugin-chart/templates/tsconfig.json | 25 ++++++++++++ 8 files changed, 91 insertions(+), 40 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/types.erb create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/tsconfig.json diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/index.js b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/index.js index 74f506a8f735..a55fb6141e1a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/index.js +++ b/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'], diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/README.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/README.erb index 1622e13a2726..97304db4d7f8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/README.erb +++ b/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 diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb index 6b144e5f7101..a7a6b1500b43 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb +++ b/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; // 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
element, which has been styled using Emotion // For docs, visit https://emotion.sh/docs/styled diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/controlPanel.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/controlPanel.erb index 4f41482379a1..0c8d61f2c751 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/controlPanel.erb +++ b/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 = { /** diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/index.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/index.erb index 8b2a30d77cdf..6426df86fff8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/index.erb +++ b/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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/transformProps.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/transformProps.erb index bbe67134f7f8..23c203c64744 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/plugin/transformProps.erb +++ b/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,7 +49,8 @@ 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); @@ -63,15 +58,15 @@ export default function transformProps(chartProps: ChartProps) { 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, }; } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/types.erb b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/src/types.erb new file mode 100644 index 000000000000..509fd1121e67 --- /dev/null +++ b/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! + }; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/tsconfig.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/tsconfig.json new file mode 100644 index 000000000000..f164c580609c --- /dev/null +++ b/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" + } + ] +}