feat: D&D of nested layout

- empty layout is missing drop zone JIRA: LX-588
gooddata · Nov 5, 2024 · bd79dc8 · bd79dc8
1 parent 69e09c9
commit bd79dc8
Show file tree

Hide file tree

Showing 47 changed files with 845 additions and 37 deletions.
diff --git a/libs/sdk-ui-dashboard/api/sdk-ui-dashboard.api.md b/libs/sdk-ui-dashboard/api/sdk-ui-dashboard.api.md
@@ -173,6 +173,7 @@ import { IDashboardLayoutItem } from '@gooddata/sdk-model';
 import { IDashboardLayoutSection } from '@gooddata/sdk-model';
 import { IDashboardLayoutSectionHeader } from '@gooddata/sdk-model';
 import { IDashboardLayoutSizeByScreenSize } from '@gooddata/sdk-model';
+import { IDashboardNestedLayoutProps as IDashboardNestedLayoutProps_2 } from './types.js';
 import { IDashboardObjectIdentity } from '@gooddata/sdk-model';
 import { IDashboardPermissions } from '@gooddata/sdk-model';
 import { IDashboardRichTextProps as IDashboardRichTextProps_2 } from './types.js';
@@ -1226,6 +1227,9 @@ export type CustomDashboardKpiComponent = ComponentType<IDashboardKpiProps>;
 // @alpha (undocumented)
 export type CustomDashboardLayoutComponent = ComponentType<IDashboardLayoutProps>;
 
+// @public (undocumented)
+export type CustomDashboardNestedLayoutComponent = ComponentType<IDashboardNestedLayoutProps>;
+
 // @public (undocumented)
 export type CustomDashboardRichTextComponent = ComponentType<IDashboardRichTextProps>;
 
@@ -2404,6 +2408,28 @@ export interface DashboardLayoutChangedPayload {
 // @beta (undocumented)
 export type DashboardLayoutCommands = AddLayoutSection | MoveLayoutSection | RemoveLayoutSection | ChangeLayoutSectionHeader | AddSectionItems | MoveSectionItem | RemoveSectionItem | RemoveSectionItemByWidgetRef | ResizeHeight;
 
+// @alpha (undocumented)
+export type DashboardLayoutComponentProvider = (widget: IDashboardLayout) => CustomDashboardNestedLayoutComponent;
+
+// @internal (undocumented)
+export type DashboardLayoutDraggableComponent = {
+    DraggingComponent?: DashboardLayoutDraggingComponent;
+    type: "dashboardLayout";
+};
+
+// @internal (undocumented)
+export type DashboardLayoutDraggableItem = BaseDraggableMovingItem & {
+    type: "dashboardLayout";
+};
+
+// @internal (undocumented)
+export type DashboardLayoutDraggableListItem = BaseDraggableLayoutItem & {
+    type: "dashboardLayoutListItem";
+};
+
+// @internal (undocumented)
+export type DashboardLayoutDraggingComponent = ComponentType<IDashboardLayoutDraggingComponentProps>;
+
 // @beta
 export interface DashboardLayoutSectionAdded extends IDashboardEvent {
     // (undocumented)
@@ -2530,6 +2556,9 @@ export interface DashboardLayoutSectionRemovedPayload {
     readonly stashIdentifier?: StashedDashboardItemsId;
 }
 
+// @internal
+export type DashboardLayoutWidgetComponentSet = CustomComponentBase<IDashboardNestedLayoutProps, Parameters<DashboardLayoutComponentProvider>> & DraggableComponent & Partial<CreatableByDragComponent> & Partial<CreatablePlaceholderComponent<IDashboardNestedLayoutProps>> & ConfigurableWidget<IDashboardLayout>;
+
 // @beta (undocumented)
 export interface DashboardMetaState {
     descriptor?: DashboardDescriptor;
@@ -3062,9 +3091,15 @@ export const DefaultDashboardKpiPlaceholderWidget: CustomDashboardWidgetComponen
 // @alpha (undocumented)
 export const DefaultDashboardLayout: (props: IDashboardLayoutProps) => JSX.Element;
 
+// @internal (undocumented)
+export function DefaultDashboardLayoutComponentSetFactory(dashboardLayoutComponentProvider: DashboardLayoutComponentProvider): DashboardLayoutWidgetComponentSet;
+
 // @internal (undocumented)
 export const DefaultDashboardMainContent: (_: IDashboardProps) => React_2.JSX.Element;
 
+// @public
+export const DefaultDashboardNestedLayout: ComponentType<IDashboardNestedLayoutProps_2>;
+
 // @public
 export const DefaultDashboardRichText: ComponentType<IDashboardRichTextProps_2>;
 
@@ -3202,14 +3237,14 @@ export function dispatchAndWaitFor<TCommand extends DashboardCommands, TResult>(
 
 // @internal
 export type DraggableComponent = {
-    dragging: AttributeFilterDraggableComponent | DateFilterDraggableComponent | KpiDraggableComponent | InsightDraggableComponent | RichTextDraggableComponent | VisualizationSwitcherDraggableComponent | CustomDraggableComponent;
+    dragging: AttributeFilterDraggableComponent | DateFilterDraggableComponent | KpiDraggableComponent | InsightDraggableComponent | RichTextDraggableComponent | VisualizationSwitcherDraggableComponent | DashboardLayoutDraggableComponent | CustomDraggableComponent;
 };
 
 // @internal (undocumented)
-export type DraggableContentItem = AttributeFilterDraggableItem | AttributeFilterPlaceholderDraggableItem | DateFilterDraggableItem | InsightDraggableItem | InsightDraggableListItem | InsightPlaceholderDraggableItem | KpiDraggableItem | KpiPlaceholderDraggableItem | RichTextDraggableItem | RichTextDraggableListItem | VisualizationSwitcherDraggableItem | VisualizationSwitcherDraggableListItem | CustomWidgetDraggableItem | CustomDraggableItem;
+export type DraggableContentItem = AttributeFilterDraggableItem | AttributeFilterPlaceholderDraggableItem | DateFilterDraggableItem | InsightDraggableItem | InsightDraggableListItem | InsightPlaceholderDraggableItem | KpiDraggableItem | KpiPlaceholderDraggableItem | RichTextDraggableItem | RichTextDraggableListItem | VisualizationSwitcherDraggableItem | VisualizationSwitcherDraggableListItem | DashboardLayoutDraggableItem | DashboardLayoutDraggableListItem | CustomWidgetDraggableItem | CustomDraggableItem;
 
 // @internal (undocumented)
-export type DraggableContentItemType = "attributeFilter" | "dateFilter" | "attributeFilter-placeholder" | "insightListItem" | "insight" | "insight-placeholder" | "kpi" | "kpi-placeholder" | "richText" | "richTextListItem" | "visualizationSwitcher" | "visualizationSwitcherListItem" | "custom";
+export type DraggableContentItemType = "attributeFilter" | "dateFilter" | "attributeFilter-placeholder" | "insightListItem" | "insight" | "insight-placeholder" | "kpi" | "kpi-placeholder" | "richText" | "richTextListItem" | "visualizationSwitcher" | "visualizationSwitcherListItem" | "dashboardLayout" | "dashboardLayoutListItem" | "custom";
 
 // @internal (undocumented)
 export const DraggableCreatePanelItem: React_2.FC<IDraggableCreatePanelItemProps>;
@@ -3237,6 +3272,8 @@ export type DraggableItemComponentTypeMapping = {
     richTextListItem: RichTextDraggableListItem;
     visualizationSwitcher: VisualizationSwitcherDraggableItem;
     visualizationSwitcherListItem: VisualizationSwitcherDraggableListItem;
+    dashboardLayout: DashboardLayoutDraggableItem;
+    dashboardLayoutListItem: DashboardLayoutDraggableListItem;
     custom: CustomDraggableItem;
 };
 
@@ -3253,7 +3290,7 @@ export type DraggableItemType = DraggableContentItemType | DraggableInternalItem
 export type DraggableItemTypeMapping = DraggableItemComponentTypeMapping & DraggableItemInternalTypeMapping;
 
 // @internal (undocumented)
-export type DraggableLayoutItem = InsightDraggableItem | KpiDraggableItem | RichTextDraggableItem | VisualizationSwitcherDraggableItem | CustomWidgetDraggableItem;
+export type DraggableLayoutItem = InsightDraggableItem | KpiDraggableItem | RichTextDraggableItem | VisualizationSwitcherDraggableItem | DashboardLayoutDraggableItem | CustomWidgetDraggableItem;
 
 // @internal (undocumented)
 export interface DraggingComponentProps {
@@ -4012,6 +4049,7 @@ export interface IDashboardCustomComponentProps {
     DashboardContentComponentProvider?: OptionalDashboardContentComponentProvider;
     // @alpha
     DashboardDateFilterComponentProvider?: OptionalDateFilterComponentProvider;
+    DashboardLayoutComponentProvider?: OptionalDashboardLayoutComponentProvider;
     // @internal
     EmptyLayoutDropZoneBodyComponent?: CustomEmptyLayoutDropZoneBodyComponent;
     // @alpha
@@ -4296,6 +4334,12 @@ export interface IDashboardLayoutCustomizer {
     customizeFluidLayout(fun: FluidLayoutCustomizationFn): IDashboardLayoutCustomizer;
 }
 
+// @internal (undocumented)
+export type IDashboardLayoutDraggingComponentProps = {
+    itemType: "dashboardLayout";
+    item: DashboardLayoutDraggableItem;
+};
+
 // @alpha (undocumented)
 export interface IDashboardLayoutProps {
     // (undocumented)
@@ -4308,6 +4352,27 @@ export interface IDashboardLayoutProps {
     onFiltersChange?: (filters: (IDashboardFilter | FilterContextItem)[], resetOthers?: boolean) => void;
 }
 
+// @public
+export interface IDashboardNestedLayoutProps {
+    // @alpha
+    backend?: IAnalyticalBackend;
+    // @alpha
+    clientHeight?: number;
+    // @alpha
+    clientWidth?: number;
+    layout: IDashboardLayout;
+    // (undocumented)
+    onError?: OnError;
+    // (undocumented)
+    onExportReady?: OnExportReady;
+    // (undocumented)
+    onLoadingChanged?: OnLoadingChanged;
+    // (undocumented)
+    screen: ScreenSize;
+    // @alpha
+    workspace?: string;
+}
+
 // @public
 export interface IDashboardPluginContract_V1 extends DashboardPluginDescriptor {
     onPluginLoaded?(ctx: DashboardContext, parameters?: string): Promise<void> | void;
@@ -5397,6 +5462,12 @@ export const isDashboardKpiWidgetMeasureChanged: (obj: unknown) => obj is Dashbo
 // @beta
 export const isDashboardLayoutChanged: (obj: unknown) => obj is DashboardLayoutChanged;
 
+// @internal (undocumented)
+export function isDashboardLayoutDraggableItem(item: any): item is DashboardLayoutDraggableItem;
+
+// @internal (undocumented)
+export function isDashboardLayoutDraggableListItem(item: any): item is DashboardLayoutDraggableListItem;
+
 // @beta
 export const isDashboardLayoutSectionAdded: (obj: unknown) => obj is DashboardLayoutSectionAdded;
 
@@ -5552,6 +5623,8 @@ export interface ISidebarProps {
     // @internal
     AttributeFilterComponentSet?: AttributeFilterComponentSet;
     configurationPanelClassName?: string;
+    // @internal
+    DashboardLayoutWidgetComponentSet?: DashboardLayoutWidgetComponentSet;
     DefaultSidebar: ComponentType<ISidebarProps>;
     // @internal
     DeleteDropZoneComponent?: React.ComponentType;
@@ -6151,6 +6224,9 @@ export type OptionalAttributeFilterComponentProvider = OptionalProvider<Attribut
 // @alpha (undocumented)
 export type OptionalDashboardContentComponentProvider = OptionalProvider<DashboardContentComponentProvider>;
 
+// @alpha (undocumented)
+export type OptionalDashboardLayoutComponentProvider = OptionalProvider<DashboardLayoutComponentProvider>;
+
 // @public (undocumented)
 export type OptionalDateFilterComponentProvider = OptionalProvider<DateFilterComponentProvider>;
 

diff --git a/libs/sdk-ui-dashboard/src/presentation/componentDefinition/types.ts b/libs/sdk-ui-dashboard/src/presentation/componentDefinition/types.ts
@@ -15,6 +15,7 @@ import {
 import {
     AttributeFilterDraggableItem,
     CustomDraggableItem,
+    DashboardLayoutDraggableItem,
     DateFilterDraggableItem,
     DraggableContentItemType,
     IWrapCreatePanelItemWithDragComponent,
@@ -31,14 +32,17 @@ import {
     RichTextComponentProvider,
     WidgetComponentProvider,
     VisualizationSwitcherComponentProvider,
+    DashboardLayoutComponentProvider,
 } from "../dashboardContexts/types.js";
 import {
+    IDashboardLayout,
     IInsightWidget,
     IKpiWidget,
     IRichTextWidget,
     IVisualizationSwitcherWidget,
 } from "@gooddata/sdk-model";
 import { ICustomWidget } from "../../model/index.js";
+import { IDashboardNestedLayoutProps } from "../widget/index.js";
 
 /**
  * @internal
@@ -114,6 +118,14 @@ export type IVisualizationSwitcherDraggingComponentProps = {
     item: VisualizationSwitcherDraggableItem;
 };
 
+/**
+ * @internal
+ */
+export type IDashboardLayoutDraggingComponentProps = {
+    itemType: "dashboardLayout";
+    item: DashboardLayoutDraggableItem;
+};
+
 /**
  * @internal
  */
@@ -153,6 +165,11 @@ export type RichTextDraggingComponent = ComponentType<IRichTextDraggingComponent
 export type VisualizationSwitcherDraggingComponent =
     ComponentType<IVisualizationSwitcherDraggingComponentProps>;
 
+/**
+ * @internal
+ */
+export type DashboardLayoutDraggingComponent = ComponentType<IDashboardLayoutDraggingComponentProps>;
+
 /**
  * @internal
  */
@@ -206,6 +223,14 @@ export type VisualizationSwitcherDraggableComponent = {
     type: "visualizationSwitcher";
 };
 
+/**
+ * @internal
+ */
+export type DashboardLayoutDraggableComponent = {
+    DraggingComponent?: DashboardLayoutDraggingComponent;
+    type: "dashboardLayout";
+};
+
 /**
  * @internal
  */
@@ -226,6 +251,7 @@ export type DraggableComponent = {
         | InsightDraggableComponent
         | RichTextDraggableComponent
         | VisualizationSwitcherDraggableComponent
+        | DashboardLayoutDraggableComponent
         | CustomDraggableComponent;
 };
 
@@ -396,6 +422,19 @@ export type VisualizationSwitcherWidgetComponentSet = CustomComponentBase<
     Partial<CreatablePlaceholderComponent<IDashboardWidgetProps>> &
     ConfigurableWidget<IVisualizationSwitcherWidget>;
 
+/**
+ * Definition of Dashboard layout widget
+ * @internal
+ */
+export type DashboardLayoutWidgetComponentSet = CustomComponentBase<
+    IDashboardNestedLayoutProps,
+    Parameters<DashboardLayoutComponentProvider>
+> &
+    DraggableComponent &
+    Partial<CreatableByDragComponent> &
+    Partial<CreatablePlaceholderComponent<IDashboardNestedLayoutProps>> &
+    ConfigurableWidget<IDashboardLayout>;
+
 /**
  * Definition of widget
  * @internal

diff --git a/libs/sdk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/CreationPanel.tsx b/libs/sdk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/CreationPanel.tsx
@@ -15,6 +15,7 @@ import {
     selectEnableKDRichText,
     selectSupportsRichTextWidgets,
     selectEnableVisualizationSwitcher,
+    selectEnableFlexibleLayout,
 } from "../../../model/index.js";
 import cx from "classnames";
 import {
@@ -27,6 +28,7 @@ import {
     KpiWidgetComponentSet,
     RichTextWidgetComponentSet,
     VisualizationSwitcherWidgetComponentSet,
+    DashboardLayoutWidgetComponentSet,
 } from "../../componentDefinition/index.js";
 
 interface ICreationPanelProps {
@@ -38,6 +40,7 @@ interface ICreationPanelProps {
     InsightWidgetComponentSet?: InsightWidgetComponentSet;
     RichTextWidgetComponentSet?: RichTextWidgetComponentSet;
     VisualizationSwitcherWidgetComponentSet?: VisualizationSwitcherWidgetComponentSet;
+    DashboardLayoutWidgetComponentSet?: DashboardLayoutWidgetComponentSet;
 }
 
 export const CreationPanel: React.FC<ICreationPanelProps> = (props) => {
@@ -46,6 +49,7 @@ export const CreationPanel: React.FC<ICreationPanelProps> = (props) => {
     const supportsRichText = useDashboardSelector(selectSupportsRichTextWidgets);
     const enableRichText = useDashboardSelector(selectEnableKDRichText);
     const enableVisualizationSwitcher = useDashboardSelector(selectEnableVisualizationSwitcher);
+    const enableFlexibleLayout = useDashboardSelector(selectEnableFlexibleLayout);
     const isAnalyticalDesignerEnabled = useDashboardSelector(selectIsAnalyticalDesignerEnabled);
     const isNewDashboard = useDashboardSelector(selectIsNewDashboard);
     const settings = useDashboardSelector(selectSettings);
@@ -54,12 +58,14 @@ export const CreationPanel: React.FC<ICreationPanelProps> = (props) => {
     const InsightWidgetComponentSet = props.InsightWidgetComponentSet!;
     const RichTextWidgetComponentSet = props.RichTextWidgetComponentSet!;
     const VisualizationSwitcherWidgetComponentSet = props.VisualizationSwitcherWidgetComponentSet!;
+    const DashboardLayoutWidgetComponentSet = props.DashboardLayoutWidgetComponentSet!;
 
     const addItemPanelItems = useMemo(() => {
         const items = compact([
+            InsightWidgetComponentSet.creating,
             supportsKpis && KpiWidgetComponentSet.creating,
             AttributeFilterComponentSet.creating,
-            InsightWidgetComponentSet.creating,
+            enableFlexibleLayout && DashboardLayoutWidgetComponentSet.creating,
             enableVisualizationSwitcher && VisualizationSwitcherWidgetComponentSet.creating,
             supportsRichText && enableRichText && RichTextWidgetComponentSet.creating,
         ]);
@@ -78,10 +84,12 @@ export const CreationPanel: React.FC<ICreationPanelProps> = (props) => {
         InsightWidgetComponentSet,
         RichTextWidgetComponentSet,
         VisualizationSwitcherWidgetComponentSet,
+        DashboardLayoutWidgetComponentSet,
         supportsKpis,
         supportsRichText,
         enableRichText,
         enableVisualizationSwitcher,
+        enableFlexibleLayout,
         WrapCreatePanelItemWithDragComponent,
     ]);
 

diff --git a/libs/sdk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/DashboardSidebar.tsx b/libs/sdk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/DashboardSidebar.tsx
@@ -17,6 +17,7 @@ export const DashboardSidebar = (props: ISidebarProps): JSX.Element => {
         InsightWidgetComponentSet,
         RichTextWidgetComponentSet,
         VisualizationSwitcherWidgetComponentSet,
+        DashboardLayoutWidgetComponentSet,
     } = useDashboardComponentsContext();
 
     return (
@@ -27,6 +28,7 @@ export const DashboardSidebar = (props: ISidebarProps): JSX.Element => {
             InsightWidgetComponentSet={InsightWidgetComponentSet}
             RichTextWidgetComponentSet={RichTextWidgetComponentSet}
             VisualizationSwitcherWidgetComponentSet={VisualizationSwitcherWidgetComponentSet}
+            DashboardLayoutWidgetComponentSet={DashboardLayoutWidgetComponentSet}
             WrapCreatePanelItemWithDragComponent={WrapCreatePanelItemWithDragComponent}
             WrapInsightListItemWithDragComponent={WrapInsightListItemWithDragComponent}
             DeleteDropZoneComponent={DeleteDropZoneComponent}

diff --git a/...dk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/SidebarConfigurationPanel.tsx b/...dk-ui-dashboard/src/presentation/dashboard/DashboardSidebar/SidebarConfigurationPanel.tsx
@@ -19,6 +19,7 @@ export const SidebarConfigurationPanel: React.FC<Omit<ISidebarProps, "DefaultSid
         InsightWidgetComponentSet,
         RichTextWidgetComponentSet,
         VisualizationSwitcherWidgetComponentSet,
+        DashboardLayoutWidgetComponentSet,
     } = props;
     const { deselectWidgets } = useWidgetSelection();
     const DeleteDropZoneComponent = props.DeleteDropZoneComponent!;
@@ -35,6 +36,7 @@ export const SidebarConfigurationPanel: React.FC<Omit<ISidebarProps, "DefaultSid
                     InsightWidgetComponentSet={InsightWidgetComponentSet}
                     RichTextWidgetComponentSet={RichTextWidgetComponentSet}
                     VisualizationSwitcherWidgetComponentSet={VisualizationSwitcherWidgetComponentSet}
+                    DashboardLayoutWidgetComponentSet={DashboardLayoutWidgetComponentSet}
                 />
             </div>
             <DeleteDropZoneComponent />