feat: extend dash types to support nested layout

JIRA: LX-588
risk: low

libs/sdk-model/api/sdk-model.api.md

@@ -1341,6 +1341,12 @@ export interface IDashboardLayoutSizeByScreenSize {
     xs?: IDashboardLayoutSize;
 }
 
+// @public
+export interface IDashboardLayoutWidget extends IDashboardLayout<IDashboardWidget>, IBaseWidget, IDashboardObjectIdentity {
+    // (undocumented)
+    type: "IDashboardLayout";
+}
+
 // @public
 export interface IDashboardMetadataObject extends IMetadataObject {
     // (undocumented)
@@ -1386,7 +1392,7 @@ export interface IDashboardPluginLink {
 }
 
 // @public
-export type IDashboardWidget = IWidget | IWidgetDefinition | IDashboardLayout<IDashboardWidget>;
+export type IDashboardWidget = IWidget | IWidgetDefinition | IDashboardLayoutWidget;
 
 // @public
 export interface IDataColumn {

libs/sdk-model/src/dashboard/layout.ts

@@ -1,7 +1,9 @@
-// (C) 2019-2022 GoodData Corporation
+// (C) 2019-2024 GoodData Corporation
 import isEmpty from "lodash/isEmpty.js";
 import isArray from "lodash/isArray.js";
 import { IWidget, IWidgetDefinition, isWidget, isWidgetDefinition } from "./widget.js";
+import { IDashboardObjectIdentity } from "./common.js";
+import { IBaseWidget } from "./baseWidget.js";
 
 /**
  * Classification of the screen size according to its size with respect to the set breakpoints.
@@ -10,12 +12,24 @@ import { IWidget, IWidgetDefinition, isWidget, isWidgetDefinition } from "./widg
  */
 export type ScreenSize = "xl" | "lg" | "md" | "sm" | "xs";
 
+/**
+ * Widget representing nested layout
+ *
+ * @public
+ */
+export interface IDashboardLayoutWidget
+    extends IDashboardLayout<IDashboardWidget>,
+        IBaseWidget,
+        IDashboardObjectIdentity {
+    type: "IDashboardLayout";
+}
+
 /**
  * Default dashboard widgets - kpi widget, insight widget, or nested layout.
  *
  * @public
  */
-export type IDashboardWidget = IWidget | IWidgetDefinition | IDashboardLayout<IDashboardWidget>;
+export type IDashboardWidget = IWidget | IWidgetDefinition | IDashboardLayoutWidget;
 
 /**
  * Type-guard testing whether the provided object is an instance of {@link IDashboardWidget}.

libs/sdk-model/src/index.ts

@@ -738,6 +738,7 @@ export type {
     IDashboardLayoutSize,
     IDashboardLayoutSizeByScreenSize,
     IDashboardLayoutItem,
+    IDashboardLayoutWidget,
     ScreenSize,
 } from "./dashboard/layout.js";
 export {

libs/sdk-ui-dashboard/api/sdk-ui-dashboard.api.md

@@ -124,7 +124,6 @@ import { DrillState as DrillState_2 } from './drillState.js';
 import { EntityId } from '@reduxjs/toolkit';
 import { EntityState } from '@reduxjs/toolkit';
 import { ExplicitDrill } from '@gooddata/sdk-ui';
-import { ExtendedDashboardWidget as ExtendedDashboardWidget_2 } from '../../index.js';
 import { FilterContextItem } from '@gooddata/sdk-model';
 import { FilterViewDialogMode as FilterViewDialogMode_2 } from './uiState.js';
 import { GoodDataSdkError } from '@gooddata/sdk-ui';
@@ -3532,11 +3531,20 @@ export type ExtendedDashboardItemTypes<T extends ReadonlyArray<ExtendedDashboard
 export type ExtendedDashboardLayoutSection = IDashboardLayoutSection<ExtendedDashboardWidget>;
 
 // @public
-export type ExtendedDashboardWidget = IWidget | ICustomWidget;
+export interface ExtendedDashboardLayoutWidget extends IDashboardLayout<ExtendedDashboardWidget>, IBaseWidget, IDashboardObjectIdentity {
+    // (undocumented)
+    type: "IDashboardLayout";
+}
+
+// @public
+export type ExtendedDashboardWidget = IWidget | ICustomWidget | ExtendedDashboardLayoutWidget;
 
 // @internal
 export function extendedWidgetDebugStr(widget: ExtendedDashboardWidget): string;
 
+// @public
+export type FilterableDashboardWidget = IWidget | ICustomWidget;
+
 // @internal (undocumented)
 export const FilterBar: (props: IFilterBarProps) => JSX.Element;
 
@@ -5491,6 +5499,9 @@ export function isDrillDownDefinition(obj: unknown): obj is IDrillDownDefinition
 // @alpha
 export const isDrillTargetsAdded: (obj: unknown) => obj is DrillTargetsAdded;
 
+// @public
+export function isExtendedDashboardLayoutWidget(obj: unknown): obj is ExtendedDashboardLayoutWidget;
+
 // @beta (undocumented)
 export interface IShareButtonProps {
     // (undocumented)
@@ -5660,7 +5671,7 @@ export interface IUseDashboardScheduledEmailsFiltersProps {
     // (undocumented)
     scheduledExportToEdit?: IAutomationMetadataObject;
     // (undocumented)
-    widget?: ExtendedDashboardWidget;
+    widget?: FilterableDashboardWidget;
 }
 
 // @alpha (undocumented)
@@ -5672,7 +5683,7 @@ export interface IUseFiltersForDashboardScheduledExportProps {
 export interface IUseFiltersForWidgetScheduledExportProps {
     insight?: IInsightDefinition;
     scheduledExportToEdit?: IAutomationMetadataObjectDefinition;
-    widget?: ExtendedDashboardWidget;
+    widget?: FilterableDashboardWidget;
 }
 
 // @public
@@ -6167,7 +6178,7 @@ export type OptionalProvider<T> = T extends (...args: infer TArgs) => infer TRes
 // @public (undocumented)
 export type OptionalRichTextComponentProvider = OptionalProvider<RichTextComponentProvider>;
 
-// @public (undocumented)
+// @alpha (undocumented)
 export type OptionalVisualizationSwitcherComponentProvider = OptionalProvider<VisualizationSwitcherComponentProvider>;
 
 // @alpha (undocumented)
@@ -9054,7 +9065,7 @@ export const useDashboardScheduledEmails: () => {
     automations: IAutomationMetadataObject[];
     automationsCount: number;
     numberOfAvailableDestinations: number;
-    widget: ExtendedDashboardWidget_2 | undefined;
+    widget: IWidget | undefined;
     insight: IInsight | undefined;
     automationsLoading: boolean;
     automationsError: GoodDataSdkError | undefined;
@@ -9327,7 +9338,7 @@ export function useWidgetExecutionsHandler(widgetRef: ObjRef): {
 };
 
 // @public
-export function useWidgetFilters(widget: ExtendedDashboardWidget | undefined | null, insight?: IInsightDefinition): QueryProcessingState<IFilter[]>;
+export function useWidgetFilters(widget: FilterableDashboardWidget | undefined | null, insight?: IInsightDefinition): QueryProcessingState<IFilter[]>;
 
 // @internal (undocumented)
 export function useWidgetSelection(widgetRef?: ObjRef): IUseWidgetSelectionResult;

libs/sdk-ui-dashboard/src/model/index.ts

@@ -41,6 +41,8 @@ export type {
     RelativeIndex,
     ExtendedDashboardItemType,
     ExtendedDashboardItemTypes,
+    ExtendedDashboardLayoutWidget,
+    FilterableDashboardWidget,
 } from "./types/layoutTypes.js";
 export {
     newCustomWidget,
@@ -50,6 +52,7 @@ export {
     isCustomWidgetBase,
     isCustomWidget,
     extendedWidgetDebugStr,
+    isExtendedDashboardLayoutWidget,
 } from "./types/layoutTypes.js";
 export type {
     FilterOp,

libs/sdk-ui-dashboard/src/model/queryServices/queryWidgetFilters.ts

@@ -34,7 +34,10 @@ import {
     IVisualizationSwitcherWidget,
 } from "@gooddata/sdk-model";
 import { QueryWidgetFilters } from "../queries/widgets.js";
-import { selectAllFiltersForWidgetByRef, selectWidgetByRef } from "../store/layout/layoutSelectors.js";
+import {
+    selectAllFiltersForWidgetByRef,
+    selectAnalyticalWidgetByRef,
+} from "../store/layout/layoutSelectors.js";
 import { selectInsightByRef } from "../store/insights/insightsSelectors.js";
 import { invalidQueryArguments } from "../events/general.js";
 import compact from "lodash/compact.js";
@@ -43,7 +46,7 @@ import { DashboardState } from "../store/types.js";
 import { resolveDisplayFormMetadata } from "../utils/displayFormResolver.js";
 import { invariant } from "ts-invariant";
 import isEmpty from "lodash/isEmpty.js";
-import { ExtendedDashboardWidget, ICustomWidget } from "../types/layoutTypes.js";
+import { ICustomWidget, FilterableDashboardWidget } from "../types/layoutTypes.js";
 import { selectSupportsMultipleDateFilters } from "../store/backendCapabilities/backendCapabilitiesSelectors.js";
 import { selectAttributeFilterConfigsDisplayAsLabelMap } from "../store/attributeFilterConfigs/attributeFilterConfigsSelectors.js";
 
@@ -108,7 +111,7 @@ function selectDateDatasetsForDateFilters(
 
 function* getResolvedInsightAttributeFilters(
     ctx: DashboardContext,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     dashboardAttributeFilters: IAttributeFilter[],
     insightAttributeFilters: IAttributeFilter[],
 ): SagaIterator<IAttributeFilter[]> {
@@ -125,7 +128,7 @@ function* getResolvedInsightAttributeFilters(
 
 function* getResolvedAttributeFilters(
     ctx: DashboardContext,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     attributeFilters: IAttributeFilter[],
 ): SagaIterator<IAttributeFilter[]> {
     const attributeFilterDisplayFormPairs: SagaReturnType<typeof loadDisplayFormsForAttributeFilters> =
@@ -144,7 +147,7 @@ function* getResolvedAttributeFilters(
 }
 
 function resolveWidgetFilterIgnore(
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     dashboardNonDateFilterDisplayFormPairs: IFilterDisplayFormPair[],
     displayAsLabelMap: Map<string, ObjRef>,
 ): IFilterDisplayFormPair[] {
@@ -166,7 +169,7 @@ function resolveWidgetFilterIgnore(
 
 function selectResolvedInsightDateFilters(
     state: DashboardState,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     dashboardCommonDateFilters: IDateFilter[],
     dashboardDateFiltersWithDimensions: IDateFilter[],
     insightDateFilters: IDateFilter[],
@@ -190,7 +193,7 @@ function selectResolvedInsightDateFilters(
 
 function selectResolveWidgetDateFilterIgnore(
     state: DashboardState,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     dashboardCommonDateFilters: IDateFilter[],
     dashboardDateFiltersWithDimensions: IDateFilter[],
 ): IFilterDateDatasetPair[] {
@@ -211,7 +214,7 @@ function selectResolveWidgetDateFilterIgnore(
 }
 
 function resolveWidgetDateFilterIgnore(
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     commonDateFilterDateDatasetPairs: IFilterDateDatasetPair[],
     widgetDateFilterDateDatasetPairs: IFilterDateDatasetPair[],
 ): IFilterDateDatasetPair[] {
@@ -240,7 +243,7 @@ function resolveWidgetDateFilterIgnore(
 
 function selectResolvedDateFilters(
     state: DashboardState,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     dashboardCommonDateFilters: IDateFilter[],
     dashboardDateFiltersWithDimensions: IDateFilter[],
     supportsMultipleDateFilters: boolean,
@@ -288,7 +291,7 @@ function resolveDateFilters(
 
 function* queryWithInsight(
     ctx: DashboardContext,
-    widget: ExtendedDashboardWidget,
+    widget: FilterableDashboardWidget,
     insight: IInsightDefinition,
 ): SagaIterator<IFilter[]> {
     const widgetAwareDashboardFiltersSelector = selectAllFiltersForWidgetByRef(widget.ref);
@@ -378,7 +381,7 @@ function* queryService(ctx: DashboardContext, query: QueryWidgetFilters): SagaIt
         payload: { widgetRef, insight },
         correlationId,
     } = query;
-    const widgetSelector = selectWidgetByRef(widgetRef);
+    const widgetSelector = selectAnalyticalWidgetByRef(widgetRef);
     const widget: ReturnType<typeof widgetSelector> = yield select(widgetSelector);
 
     if (!widget) {

libs/sdk-ui-dashboard/src/model/react/useDasboardScheduledEmails/useDashboardScheduledEmailsData.ts

@@ -21,11 +21,11 @@ import {
     selectIsScheduleEmailDialogOpen,
     selectIsScheduleEmailDialogContext,
     selectIsScheduleEmailManagementDialogOpen,
-    selectWidgetByRef,
     selectInsightByWidgetRef,
     selectNotificationChannelsCount,
     selectNotificationChannels,
     selectAutomationsIsInitialized,
+    selectAnalyticalWidgetByRef,
 } from "../../store/index.js";
 import { useDashboardSelector } from "../DashboardStoreProvider.js";
 
@@ -106,7 +106,7 @@ export const useDashboardScheduledEmailsData = ({
     )?.widget;
     const editWidgetRef = editWidgetId ? { identifier: editWidgetId } : undefined;
     const widget = useDashboardSelector(
-        selectWidgetByRef(scheduleEmailingDialogContext?.widgetRef ?? editWidgetRef),
+        selectAnalyticalWidgetByRef(scheduleEmailingDialogContext?.widgetRef ?? editWidgetRef),
     );
     const insight = useDashboardSelector(selectInsightByWidgetRef(widget?.ref));
 

libs/sdk-ui-dashboard/src/model/react/useDasboardScheduledEmails/useDashboardScheduledEmailsFilters.ts

@@ -2,14 +2,14 @@
 import { IAutomationMetadataObject, IInsight } from "@gooddata/sdk-model";
 import { useFiltersForWidgetScheduledExport } from "./useFiltersForWidgetScheduledExport.js";
 import { useFiltersForDashboardScheduledExport } from "./useFiltersForDashboardScheduledExport.js";
-import { ExtendedDashboardWidget } from "../../../model/types/layoutTypes.js";
+import { FilterableDashboardWidget } from "../../../model/types/layoutTypes.js";
 
 /**
  * @alpha
  */
 export interface IUseDashboardScheduledEmailsFiltersProps {
     scheduledExportToEdit?: IAutomationMetadataObject;
-    widget?: ExtendedDashboardWidget;
+    widget?: FilterableDashboardWidget;
     insight?: IInsight;
 }
 

libs/sdk-ui-dashboard/src/model/react/useDasboardScheduledEmails/useFiltersForWidgetScheduledExport.ts

@@ -9,7 +9,7 @@ import {
 } from "@gooddata/sdk-model";
 import { useWidgetFilters } from "../useWidgetFilters.js";
 import { getAutomationVisualizationFilters } from "../../../_staging/automation/index.js";
-import { ExtendedDashboardWidget } from "../../types/layoutTypes.js";
+import { FilterableDashboardWidget } from "../../types/layoutTypes.js";
 import { QueryProcessingState } from "../useDashboardQueryProcessing.js";
 import { useDashboardSelector } from "../DashboardStoreProvider.js";
 import { selectCrossFilteringItems } from "../../store/drill/drillSelectors.js";
@@ -27,7 +27,7 @@ export interface IUseFiltersForWidgetScheduledExportProps {
     /**
      * Widget to get filters for.
      */
-    widget?: ExtendedDashboardWidget;
+    widget?: FilterableDashboardWidget;
 
     /**
      * Insight to get filters for.

libs/sdk-ui-dashboard/src/model/react/useWidgetFilters.ts

@@ -21,7 +21,7 @@ import {
     selectCrossFilteringFiltersLocalIdentifiersByWidgetRef,
 } from "../../model/store/index.js";
 import { safeSerializeObjRef } from "../../_staging/metadata/safeSerializeObjRef.js";
-import { ExtendedDashboardWidget } from "../types/layoutTypes.js";
+import { FilterableDashboardWidget } from "../types/layoutTypes.js";
 import {
     QueryProcessingState,
     QueryProcessingStatus,
@@ -44,7 +44,7 @@ import { useDashboardSelector } from "./DashboardStoreProvider.js";
  * @public
  */
 export function useWidgetFilters(
-    widget: ExtendedDashboardWidget | undefined | null,
+    widget: FilterableDashboardWidget | undefined | null,
     insight?: IInsightDefinition,
 ): QueryProcessingState<IFilter[]> {
     const [effectiveFiltersState, setEffectiveFiltersState] = useState<{
@@ -125,7 +125,7 @@ export function useWidgetFilters(
  *
  * @param widget - widget to get the non-ignored filters for
  */
-function useNonIgnoredFilters(widget: ExtendedDashboardWidget | undefined | null) {
+function useNonIgnoredFilters(widget: FilterableDashboardWidget | undefined | null) {
     const dashboardFilters = useDashboardSelector(selectFilterContextFilters);
     const crossFilteringLocalIdentifiersForThisWidget = useDashboardSelector(
         selectCrossFilteringFiltersLocalIdentifiersByWidgetRef(widget?.ref),

libs/sdk-ui-dashboard/src/model/store/layout/layoutSelectors.ts

@@ -23,7 +23,11 @@ import partition from "lodash/partition.js";
 import isEmpty from "lodash/isEmpty.js";
 
 import { DashboardSelector, DashboardState } from "../types.js";
-import { ExtendedDashboardWidget, isCustomWidget } from "../../types/layoutTypes.js";
+import {
+    ExtendedDashboardWidget,
+    isCustomWidget,
+    isExtendedDashboardLayoutWidget,
+} from "../../types/layoutTypes.js";
 import { UndoableCommand, createUndoableCommandsMapping } from "../_infra/undoEnhancer.js";
 import { ObjRefMap, newMapForObjectWithIdentity } from "../../../_staging/metadata/objRefMap.js";
 import { selectFilterContextFilters } from "../filterContext/filterContextSelectors.js";
@@ -196,7 +200,7 @@ export const selectWidgetByRef: (
 
 /**
  * Selects analytical widget by its ref. This selector will return undefined if the provided
- * widget ref is for a custom widget.
+ * widget ref is not analytical widget, eg. custom widget or nested layout.
  *
  * @remarks
  * To include custom widgets as well, use {@link selectWidgetByRef}.
@@ -213,7 +217,7 @@ export const selectAnalyticalWidgetByRef: (
 
         const widget = widgetMap.get(ref);
 
-        if (!widget || isCustomWidget(widget)) {
+        if (!widget || isCustomWidget(widget) || isExtendedDashboardLayoutWidget(widget)) {
             return undefined;
         }
 
@@ -270,6 +274,10 @@ export const selectAllFiltersForWidgetByRef: (
         ) => {
             invariant(widget, `widget with ref ${objRefToString(ref)} does not exist in the state`);
 
+            if (isExtendedDashboardLayoutWidget(widget)) {
+                return [[], []];
+            }
+
             // Widget is the source of cross-filtering, so filtering out the cross-filtering filters
             const filtersWithoutCrossFilteringFilters = dashboardFilters.filter((f) => {
                 if (isDashboardAttributeFilter(f)) {