feat: split superset-ui/query from superset-ui/chart (#178)

BREAKING CHANGE: some api and types are removed from @superset-ui/chart and moved to /query

* feat: split superset-ui/query from superset-ui/chart

* fix: update references

* test: fix broken tests

* refactor: rename ChartFormData to QueryFormData

* fix: rename file

* fix: remove annotation layer from query package

packages/superset-ui-chart/package.json

@@ -43,6 +43,7 @@
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/core": "^0.11.0",
     "@superset-ui/dimension": "^0.11.10",
+    "@superset-ui/query": "^0.11.10",
     "react": "^15 || ^16"
   }
 }

packages/superset-ui-chart/src/clients/ChartClient.ts

@@ -6,19 +6,18 @@ import {
   Json,
   SupersetClientClass,
 } from '@superset-ui/connection';
+import { QueryFormData, Datasource } from '@superset-ui/query';
 import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
 import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySingleton';
-import { AnnotationLayerMetadata } from '../types/Annotation';
-import { ChartFormData } from '../types/ChartFormData';
 import { QueryData } from '../models/ChartProps';
-import { Datasource } from '../types/Datasource';
+import { AnnotationLayerMetadata } from '../types/Annotation';
 
 // This expands to Partial<All> & (union of all possible single-property types)
 type AtLeastOne<All, Each = { [K in keyof All]: Pick<All, K> }> = Partial<All> & Each[keyof Each];
 
 export type SliceIdAndOrFormData = AtLeastOne<{
   sliceId: number;
-  formData: Partial<ChartFormData>;
+  formData: Partial<QueryFormData>;
 }>;
 
 interface AnnotationData {
@@ -28,7 +27,7 @@ interface AnnotationData {
 export interface ChartData {
   annotationData: AnnotationData;
   datasource: object;
-  formData: ChartFormData;
+  formData: QueryFormData;
   queryData: QueryData;
 }
 
@@ -47,7 +46,7 @@ export default class ChartClient {
   loadFormData(
     input: SliceIdAndOrFormData,
     options?: Partial<RequestConfig>,
-  ): Promise<ChartFormData> {
+  ): Promise<QueryFormData> {
     /* If sliceId is provided, use it to fetch stored formData from API */
     if ('sliceId' in input) {
       const promise = this.client
@@ -62,19 +61,19 @@ export default class ChartClient {
        * If formData is also specified, override API result
        * with user-specified formData
        */
-      return promise.then((dbFormData: ChartFormData) => ({
+      return promise.then((dbFormData: QueryFormData) => ({
         ...dbFormData,
         ...input.formData,
       }));
     }
 
     /* If sliceId is not provided, returned formData wrapped in a Promise */
     return input.formData
-      ? Promise.resolve(input.formData as ChartFormData)
+      ? Promise.resolve(input.formData as QueryFormData)
       : Promise.reject(new Error('At least one of sliceId or formData must be specified'));
   }
 
-  async loadQueryData(formData: ChartFormData, options?: Partial<RequestConfig>): Promise<object> {
+  async loadQueryData(formData: QueryFormData, options?: Partial<RequestConfig>): Promise<object> {
     const { viz_type: visType } = formData;
     const metaDataRegistry = getChartMetadataRegistry();
     const buildQueryRegistry = getChartBuildQueryRegistry();
@@ -132,17 +131,23 @@ export default class ChartClient {
   }
 
   loadChartData(input: SliceIdAndOrFormData): Promise<ChartData> {
-    return this.loadFormData(input).then(formData =>
-      Promise.all([
-        this.loadAnnotations(formData.annotation_layers),
-        this.loadDatasource(formData.datasource),
-        this.loadQueryData(formData),
-      ]).then(([annotationData, datasource, queryData]) => ({
-        annotationData,
-        datasource,
-        formData,
-        queryData,
-      })),
+    return this.loadFormData(input).then(
+      (
+        formData: QueryFormData & {
+          // eslint-disable-next-line camelcase
+          annotation_layers?: AnnotationLayerMetadata[];
+        },
+      ) =>
+        Promise.all([
+          this.loadAnnotations(formData.annotation_layers),
+          this.loadDatasource(formData.datasource),
+          this.loadQueryData(formData),
+        ]).then(([annotationData, datasource, queryData]) => ({
+          annotationData,
+          datasource,
+          formData,
+          queryData,
+        })),
     );
   }
 }

packages/superset-ui-chart/src/components/ChartDataProvider.tsx

@@ -1,14 +1,12 @@
 /* eslint react/sort-comp: 'off' */
 import React, { ReactNode } from 'react';
 import { SupersetClientInterface, RequestConfig } from '@superset-ui/connection';
-
+import { QueryFormData, Datasource } from '@superset-ui/query';
 import ChartClient, { SliceIdAndOrFormData } from '../clients/ChartClient';
-import { ChartFormData } from '../types/ChartFormData';
-import { Datasource } from '../types/Datasource';
 import { QueryData } from '../models/ChartProps';
 
 interface Payload {
-  formData: Partial<ChartFormData>;
+  formData: Partial<QueryFormData>;
   queryData: QueryData;
   datasource?: Datasource;
 }

packages/superset-ui-chart/src/index.ts

@@ -16,14 +16,6 @@ export {
   default as getChartTransformPropsRegistry,
 } from './registries/ChartTransformPropsRegistrySingleton';
 
-export { default as buildQueryContext } from './query/buildQueryContext';
-export { default as DatasourceKey } from './query/DatasourceKey';
-
 export { default as ChartDataProvider } from './components/ChartDataProvider';
 
-export * from './types/Annotation';
-export * from './types/ChartFormData';
-export * from './types/Datasource';
-export * from './types/Metric';
-export * from './types/Query';
 export * from './types/TransformFunction';

packages/superset-ui-chart/src/models/ChartPlugin.ts

@@ -1,11 +1,11 @@
 import { FunctionComponent, ComponentType } from 'react';
 import { isRequired, Plugin } from '@superset-ui/core';
+import { QueryFormData } from '@superset-ui/query';
 import ChartMetadata from './ChartMetadata';
 import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySingleton';
 import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
 import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton';
 import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton';
-import { ChartFormData } from '../types/ChartFormData';
 import { BuildQueryFunction, TransformProps } from '../types/TransformFunction';
 
 const IDENTITY = (x: any) => x;
@@ -15,7 +15,7 @@ export type PromiseOrValueLoader<T> = () => PromiseOrValue<T>;
 export type ChartType = ComponentType<any> | FunctionComponent<any>;
 type ValueOrModuleWithValue<T> = T | { default: T };
 
-interface ChartPluginConfig<T extends ChartFormData> {
+interface ChartPluginConfig<T extends QueryFormData> {
   metadata: ChartMetadata;
   /** Use buildQuery for immediate value. For lazy-loading, use loadBuildQuery. */
   buildQuery?: BuildQueryFunction<T>;
@@ -47,7 +47,7 @@ function sanitizeLoader<T>(
   };
 }
 
-export default class ChartPlugin<T extends ChartFormData = ChartFormData> extends Plugin {
+export default class ChartPlugin<T extends QueryFormData = QueryFormData> extends Plugin {
   metadata: ChartMetadata;
   loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<T>>;
   loadTransformProps: PromiseOrValueLoader<TransformProps>;

packages/superset-ui-chart/src/registries/ChartBuildQueryRegistrySingleton.ts

@@ -1,7 +1,7 @@
 import { Registry, makeSingleton, OverwritePolicy } from '@superset-ui/core';
-import { QueryContext } from '../types/Query';
+import { QueryContext } from '@superset-ui/query';
 
-// Ideally this would be <T extends ChartFormData>
+// Ideally this would be <T extends QueryFormData>
 type BuildQuery = (formData: any) => QueryContext;
 
 class ChartBuildQueryRegistry extends Registry<BuildQuery> {

packages/superset-ui-chart/src/types/TransformFunction.ts

@@ -1,6 +1,5 @@
-import { ChartFormData } from './ChartFormData';
+import { QueryFormData, QueryContext } from '@superset-ui/query';
 import ChartProps from '../models/ChartProps';
-import { QueryContext } from './Query';
 
 export interface PlainProps {
   [key: string]: any;
@@ -12,4 +11,4 @@ export type PreTransformProps = TransformFunction<ChartProps, ChartProps>;
 export type TransformProps = TransformFunction<ChartProps>;
 export type PostTransformProps = TransformFunction;
 
-export type BuildQueryFunction<T extends ChartFormData> = (formData: T) => QueryContext;
+export type BuildQueryFunction<T extends QueryFormData> = (formData: T) => QueryContext;

packages/superset-ui-chart/test/clients/ChartClient.test.ts

@@ -1,15 +1,12 @@
 import fetchMock from 'fetch-mock';
 import { SupersetClientClass, SupersetClient } from '@superset-ui/connection';
-
+import { buildQueryContext, QueryFormData } from '@superset-ui/query';
 import {
   ChartClient,
   getChartBuildQueryRegistry,
-  buildQueryContext,
-  ChartFormData,
   getChartMetadataRegistry,
   ChartMetadata,
 } from '../../src';
-
 import { SliceIdAndOrFormData } from '../../src/clients/ChartClient';
 import { LOGIN_GLOB } from '../../../superset-ui-connection/test/fixtures/constants';
 
@@ -103,7 +100,7 @@ describe('ChartClient', () => {
         new ChartMetadata({ name: 'Word Cloud', thumbnail: '' }),
       );
 
-      getChartBuildQueryRegistry().registerValue('word_cloud', (formData: ChartFormData) =>
+      getChartBuildQueryRegistry().registerValue('word_cloud', (formData: QueryFormData) =>
         buildQueryContext(formData),
       );
       fetchMock.post('glob:*/api/v1/query/', {
@@ -247,7 +244,7 @@ describe('ChartClient', () => {
         new ChartMetadata({ name: 'Line', thumbnail: '.gif' }),
       );
 
-      getChartBuildQueryRegistry().registerValue('line', (formData: ChartFormData) =>
+      getChartBuildQueryRegistry().registerValue('line', (formData: QueryFormData) =>
         buildQueryContext(formData),
       );
 

packages/superset-ui-chart/test/components/MockChartPlugins.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChartMetadata, ChartPlugin, ChartFormData } from '../../src';
+import { ChartMetadata, ChartPlugin, QueryFormData } from '../../src';
 
 const DIMENSION_STYLE = {
   fontSize: 36,
@@ -52,7 +52,7 @@ export const ChartKeys = {
   BUGGY: 'buggy-chart',
 };
 
-export class DiligentChartPlugin extends ChartPlugin<ChartFormData> {
+export class DiligentChartPlugin extends ChartPlugin<QueryFormData> {
   constructor() {
     super({
       metadata: new ChartMetadata({
@@ -65,7 +65,7 @@ export class DiligentChartPlugin extends ChartPlugin<ChartFormData> {
   }
 }
 
-export class LazyChartPlugin extends ChartPlugin<ChartFormData> {
+export class LazyChartPlugin extends ChartPlugin<QueryFormData> {
   constructor() {
     super({
       metadata: new ChartMetadata({
@@ -80,7 +80,7 @@ export class LazyChartPlugin extends ChartPlugin<ChartFormData> {
   }
 }
 
-export class SlowChartPlugin extends ChartPlugin<ChartFormData> {
+export class SlowChartPlugin extends ChartPlugin<QueryFormData> {
   constructor() {
     super({
       metadata: new ChartMetadata({
@@ -98,7 +98,7 @@ export class SlowChartPlugin extends ChartPlugin<ChartFormData> {
   }
 }
 
-export class BuggyChartPlugin extends ChartPlugin<ChartFormData> {
+export class BuggyChartPlugin extends ChartPlugin<QueryFormData> {
   constructor() {
     super({
       metadata: new ChartMetadata({

packages/superset-ui-chart/test/models/ChartPlugin.test.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
+import { QueryFormData, DatasourceType } from '@superset-ui/query';
 import {
   ChartPlugin,
   ChartMetadata,
-  ChartFormData,
-  DatasourceType,
   ChartProps,
   BuildQueryFunction,
   TransformProps,
@@ -61,7 +59,7 @@ describe('ChartPlugin', () => {
           loadBuildQuery: () => buildQuery,
         });
         if (typeof plugin.loadBuildQuery === 'function') {
-          const fn = plugin.loadBuildQuery() as BuildQueryFunction<ChartFormData>;
+          const fn = plugin.loadBuildQuery() as BuildQueryFunction<QueryFormData>;
           expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' });
         }
       });
@@ -73,7 +71,7 @@ describe('ChartPlugin', () => {
           buildQuery,
         });
         if (typeof plugin.loadBuildQuery === 'function') {
-          const fn = plugin.loadBuildQuery() as BuildQueryFunction<ChartFormData>;
+          const fn = plugin.loadBuildQuery() as BuildQueryFunction<QueryFormData>;
           expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' });
         }
       });

packages/superset-ui-query/README.md

@@ -0,0 +1,23 @@
+## @superset-ui/query
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/query.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/query.svg?style=flat)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-query&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-query)
+
+Description
+
+#### Example usage
+
+```js
+import { xxx } from '@superset-ui/query';
+```
+
+#### API
+
+`fn(args)`
+
+- Do something
+
+### Development
+
+`@data-ui/build-config` is used to manage the build configuration for this package including babel
+builds, jest testing, eslint, and prettier.

packages/superset-ui-query/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@superset-ui/query",
+  "version": "0.0.0",
+  "description": "Superset UI query",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "keywords": ["superset"],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/superset-ui-chart/src/query/DatasourceKey.ts → packages/superset-ui-query/src/DatasourceKey.ts

@@ -1,4 +1,4 @@
-import { DatasourceType } from '../types/Datasource';
+import { DatasourceType } from './types/Datasource';
 
 export default class DatasourceKey {
   readonly id: number;

packages/superset-ui-chart/src/query/buildQueryContext.ts → packages/superset-ui-query/src/buildQueryContext.ts

@@ -1,12 +1,12 @@
 import buildQueryObject from './buildQueryObject';
 import DatasourceKey from './DatasourceKey';
-import { ChartFormData } from '../types/ChartFormData';
-import { QueryContext, QueryObject } from '../types/Query';
+import { QueryFormData } from './types/QueryFormData';
+import { QueryContext, QueryObject } from './types/Query';
 
 const WRAP_IN_ARRAY = (baseQueryObject: QueryObject) => [baseQueryObject];
 
 export default function buildQueryContext(
-  formData: ChartFormData,
+  formData: QueryFormData,
   buildQuery: (baseQueryObject: QueryObject) => QueryObject[] = WRAP_IN_ARRAY,
 ): QueryContext {
   return {