diff --git a/libs/sdk-ui-dashboard/src/_staging/layout/sizing.ts b/libs/sdk-ui-dashboard/src/_staging/layout/sizing.ts index b9a9aa5d3d2..9d6ede908e5 100644 --- a/libs/sdk-ui-dashboard/src/_staging/layout/sizing.ts +++ b/libs/sdk-ui-dashboard/src/_staging/layout/sizing.ts @@ -24,11 +24,14 @@ import { getInsightSizeInfo, INSIGHT_WIDGET_SIZE_INFO_DEFAULT, INSIGHT_WIDGET_SIZE_INFO_DEFAULT_LEGACY, + INSIGHT_WIDGET_SIZE_INFO_NEW_DEFAULT, IVisualizationSizeInfo, KPI_WIDGET_SIZE_INFO_DEFAULT, KPI_WIDGET_SIZE_INFO_DEFAULT_LEGACY, RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT, VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT, + RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT, + VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT, } from "@gooddata/sdk-ui-ext"; import { ObjRefMap } from "../metadata/objRefMap.js"; @@ -55,9 +58,13 @@ export function getSizeInfo( if (widgetType === "kpi") { return getKpiSizeInfo(settings, widgetContent); } else if (widgetType === "richText") { - return RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT; + return settings.enableDashboardFlexibleLayout + ? RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT + : RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT; } else if (widgetType === "visualizationSwitcher" && !widgetContent) { - return VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT; + return settings.enableDashboardFlexibleLayout + ? VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT + : VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT; } return getVisualizationSizeInfo(settings, widgetContent); @@ -83,7 +90,9 @@ function getVisualizationSizeInfo( if (!settings.enableKDWidgetCustomHeight) { return INSIGHT_WIDGET_SIZE_INFO_DEFAULT_LEGACY; } - return INSIGHT_WIDGET_SIZE_INFO_DEFAULT; + return settings.enableDashboardFlexibleLayout + ? INSIGHT_WIDGET_SIZE_INFO_NEW_DEFAULT + : INSIGHT_WIDGET_SIZE_INFO_DEFAULT; } return sizeInfo; } diff --git a/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/addVisualizationToSwitcherWidgetHandler.ts b/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/addVisualizationToSwitcherWidgetHandler.ts index 1f13375a78c..908d7e1def7 100644 --- a/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/addVisualizationToSwitcherWidgetHandler.ts +++ b/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/addVisualizationToSwitcherWidgetHandler.ts @@ -15,6 +15,7 @@ import { validateExistingVisualizationSwitcherWidget } from "./validation/widget import { layoutActions } from "../../store/layout/index.js"; import { insightsActions } from "../../store/insights/index.js"; import { getSizeInfo } from "../../../_staging/layout/sizing.js"; +import { selectSettings } from "../../store/config/configSelectors.js"; export function* addVisualizationToSwticherWidgetContentHandler( ctx: DashboardContext, @@ -26,8 +27,9 @@ export function* addVisualizationToSwticherWidgetContentHandler( } = cmd; const widgets: ReturnType = yield select(selectWidgetsMap); const visualizationSwitcherWidget = validateExistingVisualizationSwitcherWidget(widgets, cmd, ctx); + const settings: ReturnType = yield select(selectSettings); - const newSize = getSizeInfo({ enableKDWidgetCustomHeight: true }, "insight", insight); + const newSize = getSizeInfo(settings, "insight", insight); yield put( batchActions([ diff --git a/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/changeInsightWidgetInsightHandler.ts b/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/changeInsightWidgetInsightHandler.ts index 35366eff164..fbb5db024d7 100644 --- a/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/changeInsightWidgetInsightHandler.ts +++ b/libs/sdk-ui-dashboard/src/model/commandHandlers/widgets/changeInsightWidgetInsightHandler.ts @@ -25,6 +25,7 @@ import { uiActions } from "../../store/ui/index.js"; import { selectInsightByRef } from "../../store/insights/insightsSelectors.js"; import { getSizeInfo } from "../../../_staging/layout/sizing.js"; import { loadInsight } from "./common/loadInsight.js"; +import { selectSettings } from "../../store/config/configSelectors.js"; export function* changeInsightWidgetInsightHandler( ctx: DashboardContext, @@ -37,6 +38,7 @@ export function* changeInsightWidgetInsightHandler( const widgetsMap: ReturnType = yield select(selectWidgetsMap); const widgets: ReturnType = yield select(selectWidgets); + const settings: ReturnType = yield select(selectSettings); // Find if changed insight is part of Vis. Switcher let visSwitcherRef: ObjRef | undefined; @@ -79,7 +81,7 @@ export function* changeInsightWidgetInsightHandler( const isTitleDifferent = insightTitle(insight) !== originalInsightTitle; const shouldChangeTitle = !hasCustomName && isTitleDifferent; - const newSize = getSizeInfo({ enableKDWidgetCustomHeight: true }, "insight", insight); + const newSize = getSizeInfo(settings, "insight", insight); yield put( batchActions([ diff --git a/libs/sdk-ui-dashboard/src/presentation/dragAndDrop/draggableWidget/DraggableRichTextCreatePanelItem.tsx b/libs/sdk-ui-dashboard/src/presentation/dragAndDrop/draggableWidget/DraggableRichTextCreatePanelItem.tsx index b25e296fe6e..092ed6abd71 100644 --- a/libs/sdk-ui-dashboard/src/presentation/dragAndDrop/draggableWidget/DraggableRichTextCreatePanelItem.tsx +++ b/libs/sdk-ui-dashboard/src/presentation/dragAndDrop/draggableWidget/DraggableRichTextCreatePanelItem.tsx @@ -1,10 +1,16 @@ // (C) 2022-2024 GoodData Corporation import React from "react"; -import { RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT } from "@gooddata/sdk-ui-ext"; +import { + RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT, + RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT, +} from "@gooddata/sdk-ui-ext"; import { CustomCreatePanelItemComponent } from "../../componentDefinition/index.js"; import { DraggableCreatePanelItem } from "../DraggableCreatePanelItem.js"; import { DraggableItem, IWrapCreatePanelItemWithDragComponent } from "../types.js"; +import { selectSettings } from "../../../model/store/config/configSelectors.js"; +import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js"; +import { ISettings } from "@gooddata/sdk-model"; /** * @internal @@ -14,12 +20,16 @@ interface IDraggableRichTextCreatePanelItemProps { WrapCreatePanelItemWithDragComponent?: IWrapCreatePanelItemWithDragComponent; } -const dragItem: DraggableItem = { - type: "richTextListItem", - size: { - gridHeight: RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT.height.default, - gridWidth: RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT.width.default, - }, +const getDragItem = (settings: ISettings): DraggableItem => { + return { + type: "richTextListItem", + size: { + gridHeight: RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT.height.default, + gridWidth: settings.enableDashboardFlexibleLayout + ? RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT.width.default + : RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT.width.default, + }, + }; }; /** @@ -29,6 +39,8 @@ export const DraggableRichTextCreatePanelItem: React.FC { + const settings = useDashboardSelector(selectSettings); + const dragItem = getDragItem(settings); return ( { + return { + type: "visualizationSwitcherListItem", + size: { + gridHeight: VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT.height.default, + gridWidth: settings.enableDashboardFlexibleLayout + ? VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT.width.default + : VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT.width.default, + }, + }; }; /** @@ -29,6 +39,8 @@ const dragItem: DraggableItem = { export const DraggableVisualizationSwitcherCreatePanelItem: React.FC< IDraggableRichTextCreatePanelItemProps > = ({ CreatePanelItemComponent, WrapCreatePanelItemWithDragComponent }) => { + const settings = useDashboardSelector(selectSettings); + const dragItem = getDragItem(settings); return ( > & { WrappedComponent: React_2.ComponentType; @@ -561,6 +564,9 @@ export function provideCreateRoot(createRoot: CreateRoot): void; // @internal (undocumented) export const RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo; +// @internal (undocumented) +export const RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo; + // @public export interface Root { // (undocumented) @@ -590,6 +596,9 @@ export type UserGroupEditDialogMode = "VIEW" | "WORKSPACE" | "USERS" | "DATA_SOU // @internal (undocumented) export const VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo; +// @internal (undocumented) +export const VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo; + // @internal (undocumented) export const WIDGET_DROPZONE_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo; diff --git a/libs/sdk-ui-ext/src/index.ts b/libs/sdk-ui-ext/src/index.ts index 4622c50fde2..86c5246771a 100644 --- a/libs/sdk-ui-ext/src/index.ts +++ b/libs/sdk-ui-ext/src/index.ts @@ -50,11 +50,14 @@ export { DASHBOARD_LAYOUT_DEFAULT_VIS_HEIGHT_PX, INSIGHT_WIDGET_SIZE_INFO_DEFAULT, INSIGHT_WIDGET_SIZE_INFO_DEFAULT_LEGACY, + INSIGHT_WIDGET_SIZE_INFO_NEW_DEFAULT, KPI_WIDGET_SIZE_INFO_DEFAULT, KPI_WIDGET_SIZE_INFO_DEFAULT_LEGACY, WIDGET_DROPZONE_SIZE_INFO_DEFAULT, RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT, + RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT, VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT, + VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT, EmbedInsightDialog, } from "./internal/index.js"; diff --git a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/BigChartDescriptor.ts b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/BigChartDescriptor.ts index 0260e2e157e..9de06f2460c 100644 --- a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/BigChartDescriptor.ts +++ b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/BigChartDescriptor.ts @@ -1,4 +1,4 @@ -// (C) 2021-2022 GoodData Corporation +// (C) 2021-2024 GoodData Corporation import { IInsightDefinition, ISettings } from "@gooddata/sdk-model"; @@ -20,7 +20,7 @@ export abstract class BigChartDescriptor extends BaseChartDescriptor { ): IVisualizationSizeInfo { return { width: { - default: 6, + default: settings.enableDashboardFlexibleLayout ? 4 : 6, min: 4, max: layoutDescriptor.gridColumnsCount, }, diff --git a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/baseChart/BaseChartDescriptor.ts b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/baseChart/BaseChartDescriptor.ts index 553cb109215..0016c812163 100644 --- a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/baseChart/BaseChartDescriptor.ts +++ b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/baseChart/BaseChartDescriptor.ts @@ -28,7 +28,7 @@ export abstract class BaseChartDescriptor implements IVisualizationDescriptor { ): IVisualizationSizeInfo { return { width: { - default: 6, + default: settings.enableDashboardFlexibleLayout ? 4 : 6, min: 4, max: layoutDescriptor.gridColumnsCount, }, diff --git a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/constants.ts b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/constants.ts index 32fdb444c22..683b86dde6d 100644 --- a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/constants.ts +++ b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/constants.ts @@ -40,6 +40,21 @@ export const INSIGHT_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo = { }, }; +/** + * @internal + */ +export const INSIGHT_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo = { + width: { + min: 4, + default: 4, + }, + height: { + default: 22, + min: 22, + max: 40, + }, +}; + /** * @internal */ @@ -55,6 +70,21 @@ export const RICH_TEXT_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo = }, }; +/** + * @internal + */ +export const RICH_TEXT_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo = { + width: { + min: 2, + default: 4, + }, + height: { + default: 22, + min: 6, + max: 40, + }, +}; + /** * @internal */ @@ -70,6 +100,21 @@ export const VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefa }, }; +/** + * @internal + */ +export const VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo = { + width: { + min: 4, + default: 4, + }, + height: { + default: 22, + min: 12, + max: 40, + }, +}; + /** * @internal */ diff --git a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PivotTableDescriptor.ts b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PivotTableDescriptor.ts index 46356f43ec9..848c09bb163 100644 --- a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PivotTableDescriptor.ts +++ b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PivotTableDescriptor.ts @@ -45,7 +45,7 @@ export class PivotTableDescriptor extends BaseChartDescriptor implements IVisual ): IVisualizationSizeInfo { return { width: { - default: layoutDescriptor.gridColumnsCount, + default: settings.enableDashboardFlexibleLayout ? 4 : layoutDescriptor.gridColumnsCount, min: 3, max: layoutDescriptor.gridColumnsCount, }, diff --git a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/repeater/RepeaterDescriptor.ts b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/repeater/RepeaterDescriptor.ts index 4deae2c3c9e..5f8b58f6f45 100644 --- a/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/repeater/RepeaterDescriptor.ts +++ b/libs/sdk-ui-ext/src/internal/components/pluggableVisualizations/repeater/RepeaterDescriptor.ts @@ -36,7 +36,7 @@ export class RepeaterDescriptor extends BaseChartDescriptor implements IVisualiz ): IVisualizationSizeInfo { return { width: { - default: layoutDescriptor.gridColumnsCount, + default: settings.enableDashboardFlexibleLayout ? 4 : layoutDescriptor.gridColumnsCount, min: 3, max: layoutDescriptor.gridColumnsCount, },