diff --git a/app/client/cypress/fixtures/Bugs/CheckboxGroupInListWidgetDsl.json b/app/client/cypress/fixtures/Bugs/CheckboxGroupInListWidgetDsl.json index 70a0677350..7f8906186b 100644 --- a/app/client/cypress/fixtures/Bugs/CheckboxGroupInListWidgetDsl.json +++ b/app/client/cypress/fixtures/Bugs/CheckboxGroupInListWidgetDsl.json @@ -813,9 +813,6 @@ "parentId": "9iszxoqodt", "renderMode": "CANVAS", "isLoading": false, - "disabledWidgetFeatures": [ - "dynamicHeight" - ], "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "maxDynamicHeight": 9000.0, "minDynamicHeight": 10.0 diff --git a/app/client/cypress/fixtures/dynamicHeightListDsl.json b/app/client/cypress/fixtures/dynamicHeightListDsl.json index 6904924498..b5803190ec 100644 --- a/app/client/cypress/fixtures/dynamicHeightListDsl.json +++ b/app/client/cypress/fixtures/dynamicHeightListDsl.json @@ -547,9 +547,6 @@ "isDeletable": false, "disallowCopy": true, "disablePropertyPane": true, - "disabledWidgetFeatures": [ - "dynamicHeight" - ], "openParentPropertyPane": true, "widgetId": "z1hyon6hsf", "renderMode": "CANVAS", diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DynamicHeight/DynamicHeight_List_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DynamicHeight/DynamicHeight_List_spec.js index 86a85351ab..61294085f0 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DynamicHeight/DynamicHeight_List_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DynamicHeight/DynamicHeight_List_spec.js @@ -21,12 +21,10 @@ describe("Dynamic Height Width validation", function() { .then((lheight) => { cy.get(commonlocators.generalSectionHeight).should("not.exist"); cy.openPropertyPaneWithIndex("textwidget", 0); - cy.get(commonlocators.generalSectionHeight).should("be.visible"); - cy.changeLayoutHeightWithoutWait(commonlocators.autoHeight); + cy.get(commonlocators.generalSectionHeight).should("not.exist"); cy.testCodeMirror(textMsg); cy.openPropertyPaneWithIndex("textwidget", 1); - cy.get(commonlocators.generalSectionHeight).should("be.visible"); - cy.changeLayoutHeightWithoutWait(commonlocators.autoHeight); + cy.get(commonlocators.generalSectionHeight).should("not.exist"); cy.testCodeMirror(textMsg); cy.get(".t--widget-listwidget") .invoke("css", "height") diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index 858cea81b5..7f3fc4a4a6 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -70,7 +70,7 @@ export const layoutConfigurations: LayoutConfigurations = { FLUID: { minWidth: -1, maxWidth: -1 }, }; -export const LATEST_PAGE_VERSION = 72; +export const LATEST_PAGE_VERSION = 73; export const GridDefaults = { DEFAULT_CELL_SIZE: 1, diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx index e4fb60973a..5c92e73a91 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx +++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx @@ -38,7 +38,7 @@ import { getWidgetPropsForPropertyName, WidgetProperties, } from "selectors/propertyPaneSelectors"; -import { getWidgetEnhancementSelector } from "selectors/widgetEnhancementSelectors"; +import { EnhancementFns } from "selectors/widgetEnhancementSelectors"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import AppsmithConsole from "utils/AppsmithConsole"; import { ENTITY_TYPE } from "entities/AppsmithConsole"; @@ -62,6 +62,7 @@ type Props = PropertyPaneControlConfig & { panel: IPanelProps; theme: EditorTheme; isSearchResult: boolean; + enhancements: EnhancementFns | undefined; }; const SHOULD_NOT_REJECT_DYNAMIC_BINDING_LIST_FOR = ["COLOR_PICKER"]; @@ -101,14 +102,8 @@ const PropertyControl = memo((props: Props) => { }, ); - const enhancementSelector = getWidgetEnhancementSelector( - widgetProperties.widgetId, - ); - - const { enhancementFns, parentIdWithEnhancementFn } = useSelector( - enhancementSelector, - equal, - ); + const { enhancementFns, parentIdWithEnhancementFn } = + props.enhancements || {}; useEffect(() => { // This is required because layered panels like Column Panel have Animation of 300ms @@ -177,8 +172,9 @@ const PropertyControl = memo((props: Props) => { customJSControlEnhancementFn: childWidgetCustomJSControlEnhancementFn, hideEvaluatedValueEnhancementFn: childWidgetHideEvaluatedValueEnhancementFn, propertyPaneEnhancementFn: childWidgetPropertyUpdateEnhancementFn, + shouldHidePropertyFn: childWidgetShouldHidePropertyFn, updateDataTreePathFn: childWidgetDataTreePathEnhancementFn, - } = enhancementFns; + } = enhancementFns || {}; const toggleDynamicProperty = useCallback( (propertyName: string, isDynamic: boolean) => { @@ -475,7 +471,9 @@ const PropertyControl = memo((props: Props) => { // Do not render the control if it needs to be hidden if ( (props.hidden && props.hidden(widgetProperties, props.propertyName)) || - props.invisible + props.invisible || + (childWidgetShouldHidePropertyFn && + childWidgetShouldHidePropertyFn(props.propertyName)) ) { return null; } diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControlsGenerator.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControlsGenerator.tsx index 431bb6d777..1d37ab3c55 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyControlsGenerator.tsx +++ b/app/client/src/pages/Editor/PropertyPane/PropertyControlsGenerator.tsx @@ -16,6 +16,11 @@ import { useSelector } from "react-redux"; import { getWidgetPropsForPropertyPane } from "selectors/propertyPaneSelectors"; import { searchPropertyPaneConfig } from "./propertyPaneSearch"; import { evaluateHiddenProperty } from "./helpers"; +import { + EnhancementFns, + getWidgetEnhancementSelector, +} from "selectors/widgetEnhancementSelectors"; +import equal from "fast-deep-equal/es6"; export type PropertyControlsGeneratorProps = { id: string; @@ -32,6 +37,7 @@ const generatePropertyControl = ( propertyPaneConfig: readonly PropertyPaneConfig[], props: PropertyControlsGeneratorProps, isSearchResult: boolean, + enhancements: EnhancementFns, ) => { if (!propertyPaneConfig) return null; return propertyPaneConfig.map((config: PropertyPaneConfig) => { @@ -58,7 +64,12 @@ const generatePropertyControl = ( tag={sectionConfig.tag} > {config.children && - generatePropertyControl(config.children, props, isSearchResult)} + generatePropertyControl( + config.children, + props, + isSearchResult, + enhancements, + )} ); @@ -76,6 +87,7 @@ const generatePropertyControl = ( isPanelProperty={!!props.isPanelProperty} key={config.id + props.id} {...(config as PropertyPaneControlConfig)} + enhancements={enhancements} isSearchResult={isSearchResult} panel={props.panel} theme={props.theme} @@ -89,8 +101,20 @@ const generatePropertyControl = ( function PropertyControlsGenerator(props: PropertyControlsGeneratorProps) { const widgetProps: any = useSelector(getWidgetPropsForPropertyPane); + + const enhancementSelector = getWidgetEnhancementSelector( + widgetProps?.widgetId, + ); + const enhancements = useSelector(enhancementSelector, equal); + if (!widgetProps) return null; - const finalProps = evaluateHiddenProperty(props.config, widgetProps); + + const finalProps = evaluateHiddenProperty( + props.config, + widgetProps, + enhancements?.enhancementFns?.shouldHidePropertyFn, + ); + const searchResults = searchPropertyPaneConfig( finalProps as PropertyPaneSectionConfig[], props.searchQuery, @@ -107,6 +131,7 @@ function PropertyControlsGenerator(props: PropertyControlsGeneratorProps) { searchResults as readonly PropertyPaneConfig[], props, isSearchResult, + enhancements, )} ); diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx index 5e1c4556ed..1859cdc086 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx +++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx @@ -32,7 +32,6 @@ import WidgetFactory from "utils/WidgetFactory"; import { PropertyPaneTab } from "./PropertyPaneTab"; import { useSearchText } from "./helpers"; import { PropertyPaneSearchInput } from "./PropertyPaneSearchInput"; -import { disableWidgetFeatures } from "utils/WidgetFeatures"; import { sendPropertyPaneSearchAnalytics } from "./propertyPaneSearch"; // TODO(abhinav): The widget should add a flag in their configuration if they donot subscribe to data @@ -247,11 +246,8 @@ function PropertyPaneView( {searchText.length > 0 ? ( boolean | undefined, ) { const finalConfig: PropertyPaneConfig[] = []; for (const conf of config) { @@ -44,6 +45,7 @@ export function evaluateHiddenProperty( const children = evaluateHiddenProperty( sectionConfig.children, widgetProps, + shouldHidePropertyFn, ); if (children.length > 0) { finalConfig.push({ @@ -55,8 +57,10 @@ export function evaluateHiddenProperty( } } else if (controlConfig.controlType) { const isControlHidden = - controlConfig.hidden && - controlConfig.hidden(widgetProps, controlConfig.propertyName); + (controlConfig.hidden && + controlConfig.hidden(widgetProps, controlConfig.propertyName)) || + (shouldHidePropertyFn && + shouldHidePropertyFn(controlConfig.propertyName)); if (!isControlHidden) { finalConfig.push(conf); } diff --git a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts index 6b1caf6749..af8c12c379 100644 --- a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts +++ b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts @@ -24,6 +24,7 @@ import { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; import { all, call, put, select, takeLatest } from "redux-saga/effects"; import { getWidget, getWidgets } from "sagas/selectors"; import { getUpdateDslAfterCreatingChild } from "sagas/WidgetAdditionSagas"; +import { traverseTreeAndExecuteBlueprintChildOperations } from "sagas/WidgetBlueprintSagas"; import { getMainCanvasProps, getOccupiedSpacesSelectorForContainer, @@ -242,6 +243,22 @@ function* moveAndUpdateWidgets( bottomRow: updatedCanvasBottomRow, }; } + + const widgetPayload = draggedBlocksToUpdate?.[0]?.updateWidgetParams?.payload; + //execute blueprint sagas when moving to a different canvas + if (widgetPayload && widgetPayload.newParentId !== widgetPayload.parentId) { + // some widgets need to update property of parent if the parent have CHILD_OPERATIONS + // so here we are traversing up the tree till we get to MAIN_CONTAINER_WIDGET_ID + // while traversing, if we find any widget which has CHILD_OPERATION, we will call the fn in it + const modifiedWidgets: CanvasWidgetsReduxState = yield call( + traverseTreeAndExecuteBlueprintChildOperations, + updatedWidgets[canvasId], + movedWidgetIds, + updatedWidgets, + ); + return modifiedWidgets; + } + return updatedWidgets; } diff --git a/app/client/src/sagas/WidgetAdditionSagas.ts b/app/client/src/sagas/WidgetAdditionSagas.ts index 73e929fe13..594506766a 100644 --- a/app/client/src/sagas/WidgetAdditionSagas.ts +++ b/app/client/src/sagas/WidgetAdditionSagas.ts @@ -299,7 +299,7 @@ export function* getUpdateDslAfterCreatingChild( const updatedWidgets: CanvasWidgetsReduxState = yield call( traverseTreeAndExecuteBlueprintChildOperations, parent, - addChildPayload.newWidgetId, + [addChildPayload.newWidgetId], widgets, ); diff --git a/app/client/src/sagas/WidgetBlueprintSagas.test.ts b/app/client/src/sagas/WidgetBlueprintSagas.test.ts index b477ae1bda..6ec6704b4a 100644 --- a/app/client/src/sagas/WidgetBlueprintSagas.test.ts +++ b/app/client/src/sagas/WidgetBlueprintSagas.test.ts @@ -42,7 +42,7 @@ describe("WidgetBlueprintSagas", () => { disablePropertyPane: false, }, }, - "widgetId", + ["widgetId"], "parentId", ); diff --git a/app/client/src/sagas/WidgetBlueprintSagas.ts b/app/client/src/sagas/WidgetBlueprintSagas.ts index 2b344c0f97..a7ea8a20ae 100644 --- a/app/client/src/sagas/WidgetBlueprintSagas.ts +++ b/app/client/src/sagas/WidgetBlueprintSagas.ts @@ -138,30 +138,39 @@ export function* executeWidgetBlueprintOperations( export function* executeWidgetBlueprintChildOperations( operation: BlueprintOperation, canvasWidgets: { [widgetId: string]: FlattenedWidgetProps }, - widgetId: string, + widgetIds: string[], parentId: string, ) { // TODO(abhinav): Special handling for child operaionts // This needs to be deprecated soon - // Get the default properties map of the current widget - // The operation can handle things based on this map - // Little abstraction leak, but will be deprecated soon - const widgetPropertyMaps = { - defaultPropertyMap: WidgetFactory.getWidgetDefaultPropertiesMap( - canvasWidgets[widgetId].type as WidgetType, - ), - }; + let widgets = canvasWidgets, + message; - const { - message, - widgets, - } = (operation.fn as BlueprintOperationChildOperationsFn)( - canvasWidgets, - widgetId, - parentId, - widgetPropertyMaps, - ); + for (const widgetId of widgetIds) { + // Get the default properties map of the current widget + // The operation can handle things based on this map + // Little abstraction leak, but will be deprecated soon + const widgetPropertyMaps = { + defaultPropertyMap: WidgetFactory.getWidgetDefaultPropertiesMap( + canvasWidgets[widgetId].type as WidgetType, + ), + }; + + let currMessage; + + ({ + message: currMessage, + widgets, + } = (operation.fn as BlueprintOperationChildOperationsFn)( + widgets, + widgetId, + parentId, + widgetPropertyMaps, + )); + //set message if one of the widget has any message to show + if (currMessage) message = currMessage; + } // If something odd happens show the message related to the odd scenario if (message) { @@ -189,7 +198,7 @@ export function* executeWidgetBlueprintChildOperations( */ export function* traverseTreeAndExecuteBlueprintChildOperations( parent: FlattenedWidgetProps, - newWidgetId: string, + newWidgetIds: string[], widgets: { [widgetId: string]: FlattenedWidgetProps }, ) { let root = parent; @@ -215,7 +224,7 @@ export function* traverseTreeAndExecuteBlueprintChildOperations( executeWidgetBlueprintChildOperations, blueprintChildOperation, widgets, - newWidgetId, + newWidgetIds, root.widgetId, ); diff --git a/app/client/src/sagas/WidgetEnhancementHelpers.ts b/app/client/src/sagas/WidgetEnhancementHelpers.ts index 1f0b5111e6..43684fac78 100644 --- a/app/client/src/sagas/WidgetEnhancementHelpers.ts +++ b/app/client/src/sagas/WidgetEnhancementHelpers.ts @@ -32,13 +32,14 @@ export enum WidgetEnhancementType { AUTOCOMPLETE = "child.autocomplete", HIDE_EVALUATED_VALUE = "child.hideEvaluatedValue", UPDATE_DATA_TREE_PATH = "child.updateDataTreePath", + SHOULD_HIDE_PROPERTY = "child.shouldHideProperty", } export function getParentWithEnhancementFn( - widgetId: string, + widgetId: string | undefined, widgets: CanvasWidgetsReduxState, ) { - let widget = get(widgets, widgetId, undefined); + let widget = get(widgets, widgetId || "", undefined); // While this widget has a parent while (widget?.parentId) { diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index 6df4caf82c..23b7771e90 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -144,6 +144,7 @@ import { builderURL } from "RouteBuilder"; import history from "utils/history"; import { updateMultipleWidgetProperties } from "actions/widgetActions"; import { generateAutoHeightLayoutTreeAction } from "actions/autoHeightActions"; +import { traverseTreeAndExecuteBlueprintChildOperations } from "./WidgetBlueprintSagas"; import { MetaState } from "reducers/entityReducers/metaReducer"; export function* updateAllChildCanvasHeights( @@ -1694,7 +1695,18 @@ function* pasteWidgetSaga( reflowedMovementMap, ); - yield put(updateAndSaveLayout(reflowedWidgets)); + // some widgets need to update property of parent if the parent have CHILD_OPERATIONS + // so here we are traversing up the tree till we get to MAIN_CONTAINER_WIDGET_ID + // while traversing, if we find any widget which has CHILD_OPERATION, we will call the fn in it + const updatedWidgets: CanvasWidgetsReduxState = yield call( + traverseTreeAndExecuteBlueprintChildOperations, + reflowedWidgets[pastingIntoWidgetId], + newlyCreatedWidgetIds.filter( + (widgetId) => !reflowedWidgets[widgetId]?.detachFromLayout, + ), + reflowedWidgets, + ); + yield put(updateAndSaveLayout(updatedWidgets)); const pageId: string = yield select(getCurrentPageId); diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx index e773caeaf8..0d2dfd365d 100644 --- a/app/client/src/selectors/propertyPaneSelectors.tsx +++ b/app/client/src/selectors/propertyPaneSelectors.tsx @@ -19,7 +19,6 @@ import { getLastSelectedWidget, getSelectedWidgets } from "./ui"; import { EVALUATION_PATH } from "utils/DynamicBindingUtils"; import { generateClassName } from "utils/generators"; import { getWidgets } from "sagas/selectors"; -import { RegisteredWidgetFeatures } from "utils/WidgetFeatures"; export type WidgetProperties = WidgetProps & { [EVALUATION_PATH]?: DataTreeEntity; @@ -86,7 +85,6 @@ export const getWidgetPropsForPropertyPane = createSelector( ); type WidgetPropertiesForPropertyPaneView = { - disabledWidgetFeatures?: RegisteredWidgetFeatures[]; type: string; widgetId: string; widgetName: string; @@ -101,7 +99,6 @@ export const getWidgetPropsForPropertyPaneView = createSelector( "widgetId", "widgetName", "displayName", - "disabledWidgetFeatures", ]) as WidgetPropertiesForPropertyPaneView, ); diff --git a/app/client/src/selectors/widgetEnhancementSelectors.ts b/app/client/src/selectors/widgetEnhancementSelectors.ts index 6eaf769ae0..ec003c4eb1 100644 --- a/app/client/src/selectors/widgetEnhancementSelectors.ts +++ b/app/client/src/selectors/widgetEnhancementSelectors.ts @@ -26,11 +26,12 @@ export type EnhancementFns = { autoCompleteEnhancementFn: any; customJSControlEnhancementFn: any; hideEvaluatedValueEnhancementFn: any; + shouldHidePropertyFn: any; }; parentIdWithEnhancementFn: any; }; -export const getWidgetEnhancementSelector = (widgetId: string) => { +export const getWidgetEnhancementSelector = (widgetId: string | undefined) => { return createSelector( getWidgets, getEvaluationTree, @@ -41,6 +42,7 @@ export const getWidgetEnhancementSelector = (widgetId: string) => { autoCompleteEnhancementFn: undefined, customJSControlEnhancementFn: undefined, hideEvaluatedValueEnhancementFn: undefined, + shouldHidePropertyFn: undefined, }; // Get the parent which wants to enhance this widget @@ -79,6 +81,10 @@ export const getWidgetEnhancementSelector = (widgetId: string) => { parentWithEnhancementFn.type, WidgetEnhancementType.HIDE_EVALUATED_VALUE, ), + shouldHidePropertyFn: getWidgetEnhancementFn( + parentWithEnhancementFn.type, + WidgetEnhancementType.SHOULD_HIDE_PROPERTY, + ), }; Object.keys(widgetEnhancementFns).map((key: string) => { diff --git a/app/client/src/utils/DSLMigration.test.ts b/app/client/src/utils/DSLMigration.test.ts index b783f8f4b1..a0cf7c7624 100644 --- a/app/client/src/utils/DSLMigration.test.ts +++ b/app/client/src/utils/DSLMigration.test.ts @@ -700,6 +700,15 @@ const migrations: Migration[] = [ ], version: 71, }, + { + functionLookup: [ + { + moduleObj: migrateAutoHeight, + functionName: "migrateListWidgetChildrenForAutoHeight", + }, + ], + version: 72, + }, ]; const mockFnObj: Record = {}; diff --git a/app/client/src/utils/DSLMigrations.ts b/app/client/src/utils/DSLMigrations.ts index 8fb05d5c7b..a09d9e9f54 100644 --- a/app/client/src/utils/DSLMigrations.ts +++ b/app/client/src/utils/DSLMigrations.ts @@ -72,7 +72,10 @@ import { migrateMapChartWidgetReskinningData } from "./migrations/MapChartReskin import { migrateRateWidgetDisabledState } from "./migrations/RateWidgetMigrations"; import { migrateCodeScannerLayout } from "./migrations/CodeScannerWidgetMigrations"; import { migrateLabelPosition } from "./migrations/MigrateLabelPosition"; -import { migratePropertiesForDynamicHeight } from "./migrations/autoHeightMigrations"; +import { + migrateListWidgetChildrenForAutoHeight, + migratePropertiesForDynamicHeight, +} from "./migrations/autoHeightMigrations"; /** * adds logBlackList key for all list widget children @@ -1139,6 +1142,11 @@ export const transformDSL = (currentDSL: DSLWidget, newPage = false) => { if (currentDSL.version === 71) { currentDSL = migrateTableWidgetV2SelectOption(currentDSL); + currentDSL.version = 72; + } + + if (currentDSL.version === 72) { + currentDSL = migrateListWidgetChildrenForAutoHeight(currentDSL); currentDSL.version = LATEST_PAGE_VERSION; } diff --git a/app/client/src/utils/DSLMigrationsUtils.test.ts b/app/client/src/utils/DSLMigrationsUtils.test.ts index 76daea9eb6..af30c8c7bd 100644 --- a/app/client/src/utils/DSLMigrationsUtils.test.ts +++ b/app/client/src/utils/DSLMigrationsUtils.test.ts @@ -1003,6 +1003,7 @@ describe("correctly migrate dsl", () => { enableRotation: false, borderRadius: "0px", boxShadow: "none", + dynamicHeight: "FIXED", }, { widgetName: "Text1", @@ -1616,6 +1617,7 @@ describe("correctly migrate dsl", () => { maxZoomLevel: 1, enableDownload: false, enableRotation: false, + dynamicHeight: "FIXED", }, { widgetName: "Text1", @@ -1685,6 +1687,7 @@ describe("correctly migrate dsl", () => { isLoading: false, fontSize: "PARAGRAPH", textStyle: "HEADING", + dynamicHeight: "FIXED", }, { widgetName: "Text2", @@ -1754,6 +1757,7 @@ describe("correctly migrate dsl", () => { isLoading: false, fontSize: "PARAGRAPH", textStyle: "BODY", + dynamicHeight: "FIXED", }, ], key: "omhgz5cakp", @@ -2229,6 +2233,7 @@ describe("correctly migrate dsl", () => { enableRotation: false, borderRadius: "0px", boxShadow: "none", + dynamicHeight: "FIXED", }, { widgetName: "Text1", diff --git a/app/client/src/utils/WidgetFeatures.ts b/app/client/src/utils/WidgetFeatures.ts index 31d7ab31b9..4296ef6bcf 100644 --- a/app/client/src/utils/WidgetFeatures.ts +++ b/app/client/src/utils/WidgetFeatures.ts @@ -2,14 +2,12 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { PropertyPaneConfig, PropertyPaneControlConfig, - PropertyPaneSectionConfig, } from "constants/PropertyControlConstants"; import { GridDefaults, WidgetHeightLimits, WidgetType, } from "constants/WidgetConstants"; -import { klona } from "klona/lite"; import { WidgetProps } from "widgets/BaseWidget"; import { WidgetConfiguration } from "widgets/constants"; @@ -340,32 +338,3 @@ export const PropertyPaneConfigTemplates: Record< }, ], }; - -//TODO make this logic a lot cleaner -export function disableWidgetFeatures( - widgetConfig: readonly PropertyPaneConfig[], - disabledWidgetFeatures?: string[], -) { - if (!disabledWidgetFeatures || disabledWidgetFeatures.length <= 0) - return widgetConfig; - - const clonedConfig = klona(widgetConfig); - const GeneralConfig = clonedConfig.find( - (sectionConfig) => - (sectionConfig as PropertyPaneSectionConfig)?.sectionName === "General", - ); - - for (let i = 0; i < (GeneralConfig?.children?.length || -1); i++) { - const config = GeneralConfig?.children?.[i]; - if ( - disabledWidgetFeatures.indexOf( - (config as PropertyPaneControlConfig)?.propertyName || "", - ) > -1 - ) { - GeneralConfig?.children?.splice(i, 1); - i--; - } - } - - return clonedConfig; -} diff --git a/app/client/src/utils/migrations/autoHeightMigrations.ts b/app/client/src/utils/migrations/autoHeightMigrations.ts index 758565cef9..b7ea4ddc1c 100644 --- a/app/client/src/utils/migrations/autoHeightMigrations.ts +++ b/app/client/src/utils/migrations/autoHeightMigrations.ts @@ -49,3 +49,40 @@ export const migratePropertiesForDynamicHeight = (currentDSL: DSLWidget) => { } return currentDSL; }; + +export function migrateListWidgetChildrenForAutoHeight( + currentDSL: DSLWidget, + isChildOfListWidget = false, +): DSLWidget { + if (!currentDSL) return currentDSL; + + let isCurrentListWidget = false; + if (currentDSL.type === "LIST_WIDGET") isCurrentListWidget = true; + + //Iterate and recursively call each children + const children = currentDSL.children?.map((childDSL: DSLWidget) => + migrateListWidgetChildrenForAutoHeight( + childDSL, + isCurrentListWidget || isChildOfListWidget, + ), + ); + + let newDSL; + // Add dynamicHeight to FIXED for each of it's children + if (isChildOfListWidget && !currentDSL.detachFromLayout) { + newDSL = { + ...currentDSL, + dynamicHeight: "FIXED", + }; + } else { + newDSL = { + ...currentDSL, + }; + } + + if (children) { + newDSL.children = children; + } + + return newDSL; +} diff --git a/app/client/src/widgets/ListWidget/index.ts b/app/client/src/widgets/ListWidget/index.ts index 624811d2a4..2713440782 100644 --- a/app/client/src/widgets/ListWidget/index.ts +++ b/app/client/src/widgets/ListWidget/index.ts @@ -3,7 +3,6 @@ import { combineDynamicBindings, getDynamicBindings, } from "utils/DynamicBindingUtils"; -import { RegisteredWidgetFeatures } from "utils/WidgetFeatures"; import { WidgetProps } from "widgets/BaseWidget"; import { BlueprintOperationTypes, @@ -34,6 +33,11 @@ export const CONFIG = { updateDataTreePath: (parentProps: any, dataTreePath: string) => { return `${parentProps.widgetName}.template.${dataTreePath}`; }, + shouldHideProperty: (parentProps: any, propertyName: string) => { + if (propertyName === "dynamicHeight") return true; + + return false; + }, propertyUpdateHook: ( parentProps: any, widgetName: string, @@ -123,9 +127,6 @@ export const CONFIG = { isDeletable: false, disallowCopy: true, disablePropertyPane: true, - disabledWidgetFeatures: [ - RegisteredWidgetFeatures.DYNAMIC_HEIGHT, - ], openParentPropertyPane: true, children: [], blueprint: { @@ -179,6 +180,7 @@ export const CONFIG = { textStyle: "HEADING", textAlign: "LEFT", boxShadow: "none", + dynamicHeight: "FIXED", dynamicBindingPathList: [ { key: "text", @@ -202,6 +204,7 @@ export const CONFIG = { textStyle: "BODY", textAlign: "LEFT", boxShadow: "none", + dynamicHeight: "FIXED", dynamicBindingPathList: [ { key: "text", @@ -330,6 +333,8 @@ export const CONFIG = { const parent = { ...widgets[parentId] }; const logBlackList: { [key: string]: boolean } = {}; + widget.dynamicHeight = "FIXED"; + /* * Only widgets that don't have derived or meta properties * work well inside the current version of List widget. @@ -375,19 +380,12 @@ export const CONFIG = { widgets[widget.parentId] = _parent; } delete widgets[widgetId]; - return { widgets, message: `This widget cannot be used inside the list widget.`, }; } - const template = { - ...get(parent, "template", {}), - [widget.widgetName]: widget, - }; - parent.template = template; - // add logBlackList for the children being added Object.keys(widget).map((key) => { logBlackList[key] = true; @@ -397,7 +395,6 @@ export const CONFIG = { widgets[parentId] = parent; widgets[widgetId] = widget; - return { widgets }; }, },