feat: Dynamic dashboard component (#17208)

* fix:fix get permission function * feat: dynamic loading of dashboard components * fix: revert image * fix: fix py * fix: fix py * fix: pass state to dynamic component * lint: add typing * lint: fix lint * lint: fix lint * refactor: re-run pipeline * fix: fix CR notes * fix: fix CR notes * move types and interfaces to core * reorder exports * rename Scope and Target Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>
apache · Feb 9, 2022 · bcad1ac · bcad1ac
1 parent 5ee070c
commit bcad1ac
Show file tree

Hide file tree

Showing 74 changed files with 803 additions and 218 deletions.
diff --git a/superset-frontend/src/dataMask/types.ts → ...s/superset-ui-core/src/dashboard/index.ts b/superset-frontend/src/dataMask/types.ts → ...s/superset-ui-core/src/dashboard/index.ts
@@ -16,14 +16,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DataMask } from '@superset-ui/core';
 
-export enum DataMaskType {
-  NativeFilters = 'nativeFilters',
-  CrossFilters = 'crossFilters',
-}
-
-export type DataMaskState = { [id: string]: DataMask };
-
-export type DataMaskWithId = { id: string } & DataMask;
-export type DataMaskStateWithId = { [filterId: string]: DataMaskWithId };
+export * from './types/Base';
diff --git a/...shboard/components/nativeFilters/types.ts → ...erset-ui-core/src/dashboard/types/Base.ts b/...shboard/components/nativeFilters/types.ts → ...erset-ui-core/src/dashboard/types/Base.ts
@@ -19,20 +19,20 @@
 
 import { AdhocFilter, DataMask } from '@superset-ui/core';
 
-export interface Column {
+export interface NativeFilterColumn {
   name: string;
   displayName?: string;
 }
 
-export interface Scope {
+export interface NativeFilterScope {
   rootPath: string[];
   excluded: number[];
 }
 
 /** The target of a filter is the datasource/column being filtered */
-export interface Target {
+export interface NativeFilterTarget {
   datasetId: number;
-  column: Column;
+  column: NativeFilterColumn;
 
   // maybe someday support this?
   // show values from these columns in the filter options selector
@@ -44,16 +44,37 @@ export enum NativeFilterType {
   DIVIDER = 'DIVIDER',
 }
 
+export enum DataMaskType {
+  NativeFilters = 'nativeFilters',
+  CrossFilters = 'crossFilters',
+}
+
+export type DataMaskState = { [id: string]: DataMask };
+
+export type DataMaskWithId = { id: string } & DataMask;
+export type DataMaskStateWithId = { [filterId: string]: DataMaskWithId };
+
+export type FilterSet = {
+  id: number;
+  name: string;
+  nativeFilters: Filters;
+  dataMask: DataMaskStateWithId;
+};
+
+export type FilterSets = {
+  [filtersSetId: string]: FilterSet;
+};
+
 export interface Filter {
   cascadeParentIds: string[];
   defaultDataMask: DataMask;
   id: string; // randomly generated at filter creation
   name: string;
-  scope: Scope;
+  scope: NativeFilterScope;
   filterType: string;
   // for now there will only ever be one target
   // when multiple targets are supported, change this to Target[]
-  targets: [Partial<Target>];
+  targets: [Partial<NativeFilterTarget>];
   controlValues: {
     [key: string]: any;
   };
@@ -70,6 +91,7 @@ export interface Filter {
   type: typeof NativeFilterType.NATIVE_FILTER;
   description: string;
 }
+
 export interface Divider {
   id: string;
   title: string;
@@ -78,3 +100,18 @@ export interface Divider {
 }
 
 export type FilterConfiguration = Array<Filter | Divider>;
+
+export type Filters = {
+  [filterId: string]: Filter;
+};
+
+export type NativeFiltersState = {
+  filters: Filters;
+  filterSets: FilterSets;
+  focusedFilterId?: string;
+};
+
+export type DashboardComponentMetadata = {
+  nativeFilters: NativeFiltersState;
+  dataMask: DataMaskStateWithId;
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/index.ts b/superset-frontend/packages/superset-ui-core/src/index.ts
@@ -16,11 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 export * from './models';
 export * from './utils';
 export * from './types';
 export * from './translation';
 export * from './connection';
+export * from './dashboard';
 export * from './dynamic-plugins';
 export * from './query';
 export * from './number-format';

diff --git a/superset-frontend/spec/fixtures/mockNativeFilters.ts b/superset-frontend/spec/fixtures/mockNativeFilters.ts
@@ -16,10 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ExtraFormData } from '@superset-ui/core';
-import { NativeFilterType } from 'src/dashboard/components/nativeFilters/types';
-import { NativeFiltersState } from 'src/dashboard/reducers/types';
-import { DataMaskStateWithId } from '../../src/dataMask/types';
+import {
+  DataMaskStateWithId,
+  ExtraFormData,
+  NativeFiltersState,
+  NativeFilterType,
+} from '@superset-ui/core';
 
 export const nativeFilters: NativeFiltersState = {
   filterSets: {},

diff --git a/superset-frontend/src/dashboard/actions/nativeFilters.ts b/superset-frontend/src/dashboard/actions/nativeFilters.ts
@@ -17,21 +17,21 @@
  * under the License.
  */
 
-import { makeApi } from '@superset-ui/core';
+import {
+  FilterConfiguration,
+  Filters,
+  FilterSet,
+  FilterSets,
+  makeApi,
+} from '@superset-ui/core';
 import { Dispatch } from 'redux';
-import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
 import {
   SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL,
   setDataMaskForFilterConfigComplete,
 } from 'src/dataMask/actions';
 import { HYDRATE_DASHBOARD } from './hydrate';
 import { dashboardInfoChanged } from './dashboardInfo';
-import {
-  Filters,
-  FilterSet,
-  FilterSetFullData,
-  FilterSets,
-} from '../reducers/types';
+import { FilterSetFullData } from '../reducers/types';
 import { DashboardInfo, RootState } from '../types';
 
 export const SET_FILTER_CONFIG_BEGIN = 'SET_FILTER_CONFIG_BEGIN';

diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
@@ -31,6 +31,8 @@ import NewRow from './gridComponents/new/NewRow';
 import NewTabs from './gridComponents/new/NewTabs';
 import NewMarkdown from './gridComponents/new/NewMarkdown';
 import SliceAdder from '../containers/SliceAdder';
+import dashboardComponents from '../../visualizations/presets/dashboardComponents';
+import NewDynamicComponent from './gridComponents/new/NewDynamicComponent';
 
 export interface BCPProps {
   isStandalone: boolean;
@@ -106,6 +108,14 @@ const BuilderComponentPane: React.FC<BCPProps> = ({
                       <NewHeader />
                       <NewMarkdown />
                       <NewDivider />
+                      {dashboardComponents
+                        .getAll()
+                        .map(({ key: componentKey, metadata }) => (
+                          <NewDynamicComponent
+                            metadata={metadata}
+                            componentKey={componentKey}
+                          />
+                        ))}
                     </Tabs.TabPane>
                     <Tabs.TabPane
                       key={2}

diff --git a/...rontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingForm/index.tsx b/...rontend/src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingForm/index.tsx
@@ -18,15 +18,15 @@
  */
 import React, { FC } from 'react';
 import { FormInstance } from 'antd/lib/form';
+import { NativeFilterScope } from '@superset-ui/core';
 import FilterScope from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope';
 import { setCrossFilterFieldValues } from 'src/dashboard/components/CrossFilterScopingModal/utils';
-import { Scope } from 'src/dashboard/components/nativeFilters/types';
 import { useForceUpdate } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils';
 import { CrossFilterScopingFormType } from 'src/dashboard/components/CrossFilterScopingModal/types';
 
 type CrossFilterScopingFormProps = {
   chartId: number;
-  scope: Scope;
+  scope: NativeFilterScope;
   form: FormInstance<CrossFilterScopingFormType>;
 };
 

diff --git a/superset-frontend/src/dashboard/components/CrossFilterScopingModal/types.ts b/superset-frontend/src/dashboard/components/CrossFilterScopingModal/types.ts
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import { Scope } from '../nativeFilters/types';
+import { NativeFilterScope } from '@superset-ui/core';
 
 export type CrossFilterScopingFormType = {
-  scope: Scope;
+  scope: NativeFilterScope;
 };
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -20,7 +20,7 @@
 // when its container size changes, due to e.g., builder side panel opening
 import React, { FC, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
+import { FeatureFlag, Filters, isFeatureEnabled } from '@superset-ui/core';
 import { ParentSize } from '@vx/responsive';
 import Tabs from 'src/components/Tabs';
 import DashboardGrid from 'src/dashboard/containers/DashboardGrid';
@@ -31,7 +31,6 @@ import {
   DASHBOARD_ROOT_DEPTH,
 } from 'src/dashboard/util/constants';
 import { getRootLevelTabIndex, getRootLevelTabsComponent } from './utils';
-import { Filters } from '../../reducers/types';
 import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
 import findTabIndexByComponentId from '../../util/findTabIndexByComponentId';
 import { findTabsWithChartsInScope } from '../nativeFilters/utils';

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { useSelector } from 'react-redux';
+import { Filter } from '@superset-ui/core';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { useCallback, useEffect, useState, useContext } from 'react';
 import { URL_PARAMS } from 'src/constants';
@@ -27,7 +28,6 @@ import {
   useFilters,
   useNativeFiltersDataMask,
 } from '../nativeFilters/FilterBar/state';
-import { Filter } from '../nativeFilters/types';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useNativeFilters = () => {

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -20,9 +20,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { uniqWith } from 'lodash';
 import cx from 'classnames';
+import { DataMaskStateWithId, Filters } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { usePrevious } from 'src/hooks/usePrevious';
-import { DataMaskStateWithId } from 'src/dataMask/types';
 import DetailsPanelPopover from './DetailsPanel';
 import { Pill } from './Styles';
 import {
@@ -38,7 +38,6 @@ import {
   DashboardLayout,
   RootState,
 } from '../../types';
-import { Filters } from '../../reducers/types';
 
 export interface FiltersBadgeProps {
   chartId: number;

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
@@ -17,19 +17,21 @@
  * under the License.
  */
 import {
+  DataMaskStateWithId,
+  DataMaskType,
   ensureIsArray,
   FeatureFlag,
+  Filters,
   FilterState,
   isFeatureEnabled,
+  NativeFilterType,
 } from '@superset-ui/core';
 import { NO_TIME_RANGE, TIME_FILTER_MAP } from 'src/explore/constants';
 import { getChartIdsInFilterScope } from 'src/dashboard/util/activeDashboardFilters';
-import { ChartConfiguration, Filters } from 'src/dashboard/reducers/types';
-import { DataMaskStateWithId, DataMaskType } from 'src/dataMask/types';
+import { ChartConfiguration } from 'src/dashboard/reducers/types';
 import { areObjectsEqual } from 'src/reduxUtils';
 import { Layout } from '../../types';
 import { getTreeCheckedItems } from '../nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils';
-import { NativeFilterType } from '../nativeFilters/types';
 
 export enum IndicatorStatus {
   Unset = 'UNSET',