Merge pull request #5746 from gooddata/ine-fl-test-classes

feat: add test classes
gooddata · Jan 2, 2025 · cba5436 · cba5436
2 parents c0f98ff + bc648bc
commit cba5436
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 31 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
@@ -4395,27 +4395,15 @@ export interface IDashboardLayoutProps {
 }
 
 // @alpha (undocumented)
-export interface IDashboardNestedLayoutProps {
-    backend?: IAnalyticalBackend;
-    clientHeight?: number;
-    clientWidth?: number;
+export interface IDashboardNestedLayoutProps extends INestedLayoutProps {
     // (undocumented)
     ErrorComponent?: React.ComponentType<IErrorProps>;
     // (undocumented)
-    layout?: IDashboardLayout<ExtendedDashboardWidget>;
-    // (undocumented)
     onDrill?: OnFiredDashboardDrillEvent;
     // (undocumented)
     onError?: OnError;
     // (undocumented)
     onFiltersChange?: (filters: (IDashboardFilter | FilterContextItem)[], resetOthers?: boolean) => void;
-    // (undocumented)
-    parentLayoutItemSize?: IDashboardLayoutSizeByScreenSize;
-    // (undocumented)
-    parentLayoutPath?: ILayoutItemPath;
-    // (undocumented)
-    widget?: ExtendedDashboardLayoutWidget;
-    workspace?: string;
 }
 
 // @public
@@ -4974,6 +4962,19 @@ export interface IMetricsAndFacts {
     metrics: ICatalogMeasure[];
 }
 
+// @alpha (undocumented)
+export interface INestedLayoutProps {
+    backend?: IAnalyticalBackend;
+    clientHeight?: number;
+    clientWidth?: number;
+    dashboardItemClasses?: string;
+    layout?: IDashboardLayout<ExtendedDashboardWidget>;
+    parentLayoutItemSize?: IDashboardLayoutSizeByScreenSize;
+    parentLayoutPath?: ILayoutItemPath;
+    widget?: ExtendedDashboardLayoutWidget;
+    workspace?: string;
+}
+
 // @beta
 export interface InitializeAutomations extends IDashboardCommand {
     // (undocumented)

diff --git a/libs/sdk-ui-dashboard/src/presentation/flexibleLayout/DefaultFlexibleDashboardLayout.tsx b/libs/sdk-ui-dashboard/src/presentation/flexibleLayout/DefaultFlexibleDashboardLayout.tsx
@@ -1,4 +1,4 @@
-// (C) 2020-2024 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React, { useCallback, useMemo } from "react";
 import {
     ObjRef,
@@ -10,6 +10,7 @@ import {
 } from "@gooddata/sdk-model";
 import { LRUCache } from "lru-cache";
 import max from "lodash/max.js";
+import cx from "classnames";
 
 import {
     useDashboardSelector,
@@ -96,7 +97,7 @@ const itemKeyGetter: IDashboardLayoutItemKeyGetter<ExtendedDashboardWidget> = (k
  * @alpha
  */
 export const DefaultFlexibleDashboardLayout = (props: IDashboardLayoutProps): JSX.Element => {
-    const { layout: providedLayout, onFiltersChange, onDrill, onError } = props;
+    const { layout: providedLayout, onFiltersChange, onDrill, onError, dashboardItemClasses } = props;
 
     const selectedLayout = useDashboardSelector(selectLayout);
 
@@ -167,7 +168,9 @@ export const DefaultFlexibleDashboardLayout = (props: IDashboardLayoutProps): JS
     return (
         <>
             <DashboardLayout
-                className={isExport ? "export-mode" : ""}
+                className={cx(dashboardItemClasses, {
+                    "export-mode": isExport,
+                })}
                 layout={transformedLayout}
                 parentLayoutItemSize={itemSize}
                 parentLayoutPath={itemPath}

diff --git a/libs/sdk-ui-dashboard/src/presentation/widget/dashboardLayout/index.ts b/libs/sdk-ui-dashboard/src/presentation/widget/dashboardLayout/index.ts
@@ -1,8 +1,9 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
 export type {
     CustomDashboardLayoutComponent as CustomDashboardNestedLayoutComponent,
     IDashboardLayoutProps as IDashboardNestedLayoutProps,
+    INestedLayoutProps,
 } from "./types.js";
 export { DefaultDashboardLayout as DefaultDashboardNestedLayout } from "./DefaultDashboardLayout.js";
 export { DefaultDashboardLayoutComponentSetFactory } from "./DefaultDashboardLayoutComponentSetFactory.js";
diff --git a/libs/sdk-ui-dashboard/src/presentation/widget/dashboardLayout/types.ts b/libs/sdk-ui-dashboard/src/presentation/widget/dashboardLayout/types.ts
@@ -1,4 +1,4 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
 import { ComponentType } from "react";
 import { IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
@@ -10,20 +10,30 @@ import { ExtendedDashboardLayoutWidget, ExtendedDashboardWidget } from "../../..
 /**
  * @alpha
  */
-export interface IDashboardLayoutProps {
-    ErrorComponent?: React.ComponentType<IErrorProps>;
-    // TODO: is this necessary? (there are events for it)
-    onFiltersChange?: (filters: (IDashboardFilter | FilterContextItem)[], resetOthers?: boolean) => void;
-    onDrill?: OnFiredDashboardDrillEvent;
-    onError?: OnError;
-    // valid only for nested layouts
+export interface INestedLayoutProps {
+    /**
+     * Nested layout widget to render.
+     */
     widget?: ExtendedDashboardLayoutWidget;
-    // if not provided, root layout from appState will be used
+    /**
+     * Corresponding layout.
+     * If not provided, root layout from appState will be used.
+     */
     layout?: IDashboardLayout<ExtendedDashboardWidget>;
-    // if not provided, the layout size will be considered to be default (12 columns)
+    /**
+     * Item size.
+     * If not provided, the layout size will be considered to be default (12 columns)
+     */
     parentLayoutItemSize?: IDashboardLayoutSizeByScreenSize;
-    // if not provided, the layout is expected to be root
+    /**
+     * Item path.
+     * If not provided, the layout is expected to be root
+     */
     parentLayoutPath?: ILayoutItemPath;
+    /**
+     * CSS classes to apply to the nested layout dashboard item.
+     */
+    dashboardItemClasses?: string;
     /**
      * Backend to work with.
      *
@@ -61,6 +71,17 @@ export interface IDashboardLayoutProps {
     clientWidth?: number;
 }
 
+/**
+ * @alpha
+ */
+export interface IDashboardLayoutProps extends INestedLayoutProps {
+    ErrorComponent?: React.ComponentType<IErrorProps>;
+    // TODO: is this necessary? (there are events for it)
+    onFiltersChange?: (filters: (IDashboardFilter | FilterContextItem)[], resetOthers?: boolean) => void;
+    onDrill?: OnFiredDashboardDrillEvent;
+    onError?: OnError;
+}
+
 /**
  * @alpha
  */

diff --git a/...ntation/widget/widget/DashboardNestedLayoutWidget/EditableDashboardNestedLayoutWidget.tsx b/...ntation/widget/widget/DashboardNestedLayoutWidget/EditableDashboardNestedLayoutWidget.tsx
@@ -1,4 +1,4 @@
-// (C) 2020-2024 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import cx from "classnames";
@@ -31,6 +31,7 @@ export const EditableDashboardNestedLayoutWidget: React.FC<IDashboardLayoutProps
     layout,
     parentLayoutItemSize,
     parentLayoutPath,
+    dashboardItemClasses,
 }) => {
     const screen = useScreenSize();
     const dispatch = useDashboardDispatch();
@@ -49,6 +50,7 @@ export const EditableDashboardNestedLayoutWidget: React.FC<IDashboardLayoutProps
         <>
             <DashboardItem
                 className={cx(
+                    dashboardItemClasses,
                     "gd-dashboard-nested-layout-widget",
                     "gd-dashboard-view-widget",
                     "is-edit-mode",

diff --git a/libs/sdk-ui-dashboard/src/presentation/widget/widget/DefaultDashboardWidget.tsx b/libs/sdk-ui-dashboard/src/presentation/widget/widget/DefaultDashboardWidget.tsx
@@ -1,4 +1,4 @@
-// (C) 2020-2024 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 import React, { useMemo } from "react";
 import { IDataView, UnexpectedError } from "@gooddata/sdk-backend-spi";
 import {
@@ -96,7 +96,10 @@ export const DefaultDashboardWidget = React.memo(function DefaultDashboardWidget
         });
     }, [effectiveBackend, dispatchEvent, safeSerializeObjRef(ref)]);
 
-    const dashboardItemClasses = `s-dash-item-${index}`;
+    const pathItems = parentLayoutPath
+        ? parentLayoutPath.map((pathItem) => `-${pathItem.itemIndex}`).join("")
+        : "";
+    const dashboardItemClasses = parentLayoutPath ? `s-dash-item${pathItems}` : `s-dash-item-${index}`;
 
     if (isWidget(widget)) {
         let renderWidget = null;
@@ -138,6 +141,9 @@ export const DefaultDashboardWidget = React.memo(function DefaultDashboardWidget
 
         return <BackendProvider backend={backendWithEventing}>{renderWidget}</BackendProvider>;
     } else if (isFlexibleLayoutEnabled && isExtendedDashboardLayoutWidget(widget)) {
+        const dashboardItemClasses = parentLayoutPath
+            ? `s-dash-item${pathItems}--container`
+            : `s-dash-item-${index}--container`;
         return (
             <RenderModeAwareDashboardNestedLayoutWidget
                 // nested layout widget merges layout and other widget props into single object. Split them here
@@ -146,6 +152,7 @@ export const DefaultDashboardWidget = React.memo(function DefaultDashboardWidget
                 onFiltersChange={onFiltersChange}
                 parentLayoutItemSize={parentLayoutItemSize}
                 parentLayoutPath={parentLayoutPath}
+                dashboardItemClasses={dashboardItemClasses}
             />
         );
     }