feat: change default size of all widgets

JIRA: LX-585 risk: low feat: test
gooddata · Oct 16, 2024 · 83629d9 · 83629d9
1 parent bacc4d0
commit 83629d9
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 25 deletions.
diff --git 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/...ui-dashboard/src/model/commandHandlers/widgets/addVisualizationToSwitcherWidgetHandler.ts b/...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<typeof selectWidgetsMap> = yield select(selectWidgetsMap);
     const visualizationSwitcherWidget = validateExistingVisualizationSwitcherWidget(widgets, cmd, ctx);
+    const settings: ReturnType<typeof selectSettings> = 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
@@ -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<typeof selectWidgetsMap> = yield select(selectWidgetsMap);
     const widgets: ReturnType<typeof selectWidgets> = yield select(selectWidgets);
+    const settings: ReturnType<typeof selectSettings> = 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/...shboard/src/presentation/dragAndDrop/draggableWidget/DraggableRichTextCreatePanelItem.tsx b/...shboard/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<IDraggableRichTextCreate
     CreatePanelItemComponent,
     WrapCreatePanelItemWithDragComponent,
 }) => {
+    const settings = useDashboardSelector(selectSettings);
+    const dragItem = getDragItem(settings);
     return (
         <DraggableCreatePanelItem
             Component={CreatePanelItemComponent}

diff --git a/...resentation/dragAndDrop/draggableWidget/DraggableVisualizationSwitcherCreatePanelItem.tsx b/...resentation/dragAndDrop/draggableWidget/DraggableVisualizationSwitcherCreatePanelItem.tsx
@@ -1,11 +1,17 @@
 // (C) 2024 GoodData Corporation
 
 import React from "react";
-import { VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT } from "@gooddata/sdk-ui-ext";
+import {
+    VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT,
+    VISUALIZATION_SWITCHER_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
@@ -15,12 +21,16 @@ interface IDraggableRichTextCreatePanelItemProps {
     WrapCreatePanelItemWithDragComponent?: IWrapCreatePanelItemWithDragComponent;
 }
 
-const dragItem: DraggableItem = {
-    type: "visualizationSwitcherListItem",
-    size: {
-        gridHeight: VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT.height.default,
-        gridWidth: VISUALIZATION_SWITCHER_WIDGET_SIZE_INFO_DEFAULT.width.default,
-    },
+const getDragItem = (settings: ISettings): DraggableItem => {
+    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 (
         <DraggableCreatePanelItem
             Component={CreatePanelItemComponent}

diff --git a/libs/sdk-ui-dashboard/src/presentation/layout/DashboardLayoutWidget.tsx b/libs/sdk-ui-dashboard/src/presentation/layout/DashboardLayoutWidget.tsx
@@ -294,7 +294,7 @@ function createDraggableItem(
         };
     } else if (isInsightWidget(widget)) {
         const insight = insights.get(widget.insight)!;
-        const sizeInfo = getSizeInfo(settings, "kpi", insight);
+        const sizeInfo = getSizeInfo(settings, "kpi", insight); // TODO INE: "kpi"???
 
         return {
             type: "insight",

diff --git a/libs/sdk-ui-ext/api/sdk-ui-ext.api.md b/libs/sdk-ui-ext/api/sdk-ui-ext.api.md
@@ -418,6 +418,9 @@ export const INSIGHT_WIDGET_SIZE_INFO_DEFAULT: IVisualizationDefaultSizeInfo;
 // @internal (undocumented)
 export const INSIGHT_WIDGET_SIZE_INFO_DEFAULT_LEGACY: IVisualizationDefaultSizeInfo;
 
+// @internal (undocumented)
+export const INSIGHT_WIDGET_SIZE_INFO_NEW_DEFAULT: IVisualizationDefaultSizeInfo;
+
 // @internal (undocumented)
 export const InsightError: React_2.FC<WithIntlProps<IInsightErrorProps & WrappedComponentProps>> & {
     WrappedComponent: React_2.ComponentType<IInsightErrorProps & WrappedComponentProps>;
@@ -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
@@ -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
@@ -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/...k-ui-ext/src/internal/components/pluggableVisualizations/baseChart/BaseChartDescriptor.ts b/...k-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
@@ -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/...ui-ext/src/internal/components/pluggableVisualizations/pivotTable/PivotTableDescriptor.ts b/...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/...sdk-ui-ext/src/internal/components/pluggableVisualizations/repeater/RepeaterDescriptor.ts b/...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,
             },