feat: Dynamic dashboard component

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}

superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx

@@ -0,0 +1,184 @@
+/**
+ * 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 React, { FC, Suspense } from 'react';
+import { JsonObject, t } from '@superset-ui/core';
+import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import DragDroppable from '../dnd/DragDroppable';
+import { COLUMN_TYPE, ROW_TYPE } from '../../util/componentTypes';
+import WithPopoverMenu from '../menu/WithPopoverMenu';
+import ResizableContainer from '../resizable/ResizableContainer';
+import {
+  BACKGROUND_TRANSPARENT,
+  GRID_BASE_UNIT,
+  GRID_MIN_COLUMN_COUNT,
+} from '../../util/constants';
+import HoverMenu from '../menu/HoverMenu';
+import DeleteComponentButton from '../DeleteComponentButton';
+import BackgroundStyleDropdown from '../menu/BackgroundStyleDropdown';
+import dashboardComponents from '../../../visualizations/presets/dashboardComponents';
+import { RootState } from '../../types';
+import { NativeFiltersState } from '../../reducers/types';
+import { DataMaskStateWithId } from '../../../dataMask/types';
+
+type DashboardComponentMetadata = {
+  nativeFilters: NativeFiltersState;
+  dataMask: DataMaskStateWithId;
+};
+
+type FilterSummaryType = {
+  component: JsonObject;
+  parentComponent: JsonObject;
+  index: number;
+  depth: number;
+  handleComponentDrop: (...args: any[]) => any;
+  editMode: boolean;
+  columnWidth: number;
+  availableColumnCount: number;
+  onResizeStart: Function;
+  onResizeStop: Function;
+  onResize: Function;
+  deleteComponent: Function;
+  updateComponents: Function;
+  parentId: number;
+  id: number;
+};
+
+const DynamicComponent: FC<FilterSummaryType> = ({
+  component,
+  parentComponent,
+  index,
+  depth,
+  handleComponentDrop,
+  editMode,
+  columnWidth,
+  availableColumnCount,
+  onResizeStart,
+  onResizeStop,
+  onResize,
+  deleteComponent,
+  parentId,
+  updateComponents,
+  id,
+}) => {
+  // inherit the size of parent columns
+  const widthMultiple =
+    parentComponent.type === COLUMN_TYPE
+      ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
+      : component.meta.width || GRID_MIN_COLUMN_COUNT;
+
+  const handleDeleteComponent = () => {
+    deleteComponent(id, parentId);
+  };
+
+  const rowStyle = backgroundStyleOptions.find(
+    opt => opt.value === (component.meta.background || BACKGROUND_TRANSPARENT),
+  );
+
+  const updateMeta = (metaKey: string, nextValue: string | number) => {
+    updateComponents({
+      [component.id]: {
+        ...component,
+        meta: {
+          ...component.meta,
+          [metaKey]: nextValue,
+        },
+      },
+    });
+  };
+
+  const { Component } = dashboardComponents.get(component.meta.componentKey);
+  const dashboardData = useSelector<RootState, DashboardComponentMetadata>(
+    ({ nativeFilters, dataMask }) => ({
+      nativeFilters,
+      dataMask,
+    }),
+  );
+
+  return (
+    <DragDroppable
+      // @ts-ignore
+      component={component}
+      // @ts-ignore
+      parentComponent={parentComponent}
+      orientation={parentComponent.type === ROW_TYPE ? 'column' : 'row'}
+      index={index}
+      depth={depth}
+      onDrop={handleComponentDrop}
+      editMode={editMode}
+    >
+      {({ dropIndicatorProps, dragSourceRef }) => (
+        <WithPopoverMenu
+          menuItems={[
+            <BackgroundStyleDropdown
+              id={`${component.id}-background`}
+              value={component.meta.background}
+              onChange={value => updateMeta('background', value)}
+            />,
+          ]}
+          editMode={editMode}
+        >
+          <div
+            data-test={`dashboard-${component.componentKey}`}
+            className={cx(
+              'dashboard-component',
+              `dashboard-${component.componentKey}`,
+              rowStyle?.className,
+            )}
+            id={component.id}
+          >
+            <ResizableContainer
+              id={component.id}
+              adjustableWidth={parentComponent.type === ROW_TYPE}
+              widthStep={columnWidth}
+              widthMultiple={widthMultiple}
+              heightStep={GRID_BASE_UNIT}
+              adjustableHeight={false}
+              heightMultiple={component.meta.height}
+              minWidthMultiple={GRID_MIN_COLUMN_COUNT}
+              minHeightMultiple={GRID_MIN_COLUMN_COUNT}
+              maxWidthMultiple={availableColumnCount + widthMultiple}
+              onResizeStart={onResizeStart}
+              onResize={onResize}
+              onResizeStop={onResizeStop}
+            >
+              <div
+                ref={dragSourceRef}
+                className="dashboard-component"
+                data-test="dashboard-component-chart-holder"
+              >
+                {editMode && (
+                  <HoverMenu position="top">
+                    <DeleteComponentButton onDelete={handleDeleteComponent} />
+                  </HoverMenu>
+                )}
+                <Suspense fallback={<div>{t('Loading...')}</div>}>
+                  <Component dashboardData={dashboardData} />
+                </Suspense>
+              </div>
+            </ResizableContainer>
+          </div>
+          {dropIndicatorProps && <div {...dropIndicatorProps} />}
+        </WithPopoverMenu>
+      )}
+    </DragDroppable>
+  );
+};
+export default DynamicComponent;

superset-frontend/src/dashboard/components/gridComponents/index.js

@@ -25,6 +25,7 @@ import {
   ROW_TYPE,
   TAB_TYPE,
   TABS_TYPE,
+  DYNAMIC_TYPE,
 } from '../../util/componentTypes';
 
 import ChartHolder from './ChartHolder';
@@ -35,6 +36,7 @@ import Header from './Header';
 import Row from './Row';
 import Tab from './Tab';
 import TabsConnected from './Tabs';
+import DynamicComponent from './DynamicComponent';
 
 export { default as ChartHolder } from './ChartHolder';
 export { default as Markdown } from './Markdown';
@@ -44,6 +46,7 @@ export { default as Header } from './Header';
 export { default as Row } from './Row';
 export { default as Tab } from './Tab';
 export { default as Tabs } from './Tabs';
+export { default as DynamicComponent } from './DynamicComponent';
 
 export const componentLookup = {
   [CHART_TYPE]: ChartHolder,
@@ -54,4 +57,5 @@ export const componentLookup = {
   [ROW_TYPE]: Row,
   [TAB_TYPE]: Tab,
   [TABS_TYPE]: TabsConnected,
+  [DYNAMIC_TYPE]: DynamicComponent,
 };

superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx

@@ -37,10 +37,10 @@ const defaultProps = {
 
 export default class DraggableNewComponent extends React.PureComponent {
   render() {
-    const { label, id, type, className } = this.props;
+    const { label, id, type, className, meta } = this.props;
     return (
       <DragDroppable
-        component={{ type, id }}
+        component={{ type, id, meta }}
         parentComponent={{
           id: NEW_COMPONENTS_SOURCE_ID,
           type: NEW_COMPONENT_SOURCE_TYPE,

superset-frontend/src/dashboard/components/gridComponents/new/NewDynamicComponent.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 React, { FC } from 'react';
+import DraggableNewComponent from './DraggableNewComponent';
+import { DYNAMIC_TYPE } from '../../../util/componentTypes';
+import { NEW_DYNAMIC_COMPONENT } from '../../../util/constants';
+import { DashboardComponentsRegistryMetadata } from '../../../../visualizations/dashboardComponents/DashboardComponentsRegistry';
+
+type DraggableNewDynamicComponent = {
+  componentKey: string;
+  metadata: DashboardComponentsRegistryMetadata;
+};
+
+const DraggableNewDynamicComponent: FC<DraggableNewDynamicComponent> = ({
+  componentKey,
+  metadata,
+}) => (
+  <DraggableNewComponent
+    id={NEW_DYNAMIC_COMPONENT}
+    type={DYNAMIC_TYPE}
+    label={metadata.name}
+    meta={{ metadata, componentKey }}
+    className={`fa fa-${metadata.iconName}`}
+  />
+);
+
+export default DraggableNewDynamicComponent;

superset-frontend/src/dashboard/util/componentIsResizable.ts

@@ -16,8 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { COLUMN_TYPE, CHART_TYPE, MARKDOWN_TYPE } from './componentTypes';
+import {
+  COLUMN_TYPE,
+  CHART_TYPE,
+  MARKDOWN_TYPE,
+  DYNAMIC_TYPE,
+} from './componentTypes';
 
 export default function componentIsResizable(entity: { type: string }) {
-  return [COLUMN_TYPE, CHART_TYPE, MARKDOWN_TYPE].indexOf(entity.type) > -1;
+  return (
+    [COLUMN_TYPE, CHART_TYPE, MARKDOWN_TYPE, DYNAMIC_TYPE].indexOf(
+      entity.type,
+    ) > -1
+  );
 }

superset-frontend/src/dashboard/util/componentTypes.ts

@@ -28,6 +28,8 @@ export const NEW_COMPONENT_SOURCE_TYPE = 'NEW_COMPONENT_SOURCE';
 export const ROW_TYPE = 'ROW';
 export const TABS_TYPE = 'TABS';
 export const TAB_TYPE = 'TAB';
+// Dynamic type proposes lazy loading of custom dashboard components that can be added in separate repository
+export const DYNAMIC_TYPE = 'DYNAMIC';
 
 export default {
   CHART_TYPE,
@@ -42,4 +44,5 @@ export default {
   ROW_TYPE,
   TABS_TYPE,
   TAB_TYPE,
+  DYNAMIC_TYPE,
 };

superset-frontend/src/dashboard/util/constants.ts

@@ -31,6 +31,7 @@ export const NEW_MARKDOWN_ID = 'NEW_MARKDOWN_ID';
 export const NEW_ROW_ID = 'NEW_ROW_ID';
 export const NEW_TAB_ID = 'NEW_TAB_ID';
 export const NEW_TABS_ID = 'NEW_TABS_ID';
+export const NEW_DYNAMIC_COMPONENT = 'NEW_DYNAMIC_COMPONENT';
 
 // grid constants
 export const DASHBOARD_ROOT_DEPTH = 0;

superset-frontend/src/dashboard/util/getDetailedComponentWidth.js

@@ -23,6 +23,7 @@ import {
   COLUMN_TYPE,
   MARKDOWN_TYPE,
   CHART_TYPE,
+  DYNAMIC_TYPE,
 } from './componentTypes';
 
 function getTotalChildWidth({ id, components }) {
@@ -84,6 +85,7 @@ export default function getDetailedComponentWidth({
       }
     });
   } else if (
+    component.type === DYNAMIC_TYPE ||
     component.type === MARKDOWN_TYPE ||
     component.type === CHART_TYPE
   ) {

superset-frontend/src/dashboard/util/isDashboardEmpty.ts

@@ -16,9 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CHART_TYPE, MARKDOWN_TYPE } from './componentTypes';
+import { CHART_TYPE, MARKDOWN_TYPE, DYNAMIC_TYPE } from './componentTypes';
 
-const USER_CONTENT_COMPONENT_TYPE: string[] = [CHART_TYPE, MARKDOWN_TYPE];
+const USER_CONTENT_COMPONENT_TYPE: string[] = [
+  CHART_TYPE,
+  MARKDOWN_TYPE,
+  DYNAMIC_TYPE,
+];
 export default function isDashboardEmpty(layout: any): boolean {
   // has at least one chart or markdown component
   return !Object.values(layout).some(