diff --git a/app/client/cypress/fixtures/tableV2NewDsl.json b/app/client/cypress/fixtures/tableV2NewDsl.json index d4e9e78e72..f19b88f4aa 100644 --- a/app/client/cypress/fixtures/tableV2NewDsl.json +++ b/app/client/cypress/fixtures/tableV2NewDsl.json @@ -21,6 +21,7 @@ "children": [ { "widgetName": "Table1", + "inlineEditingSaveOption": "ROW_LEVEL", "columnOrder": [ "id", "email", diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Color_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Color_spec.js index 2a61efeeb3..e36dd0db3f 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Color_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Color_spec.js @@ -1,9 +1,12 @@ +const ObjectsRegistry = require("../../../../../support/Objects/Registry") + .ObjectsRegistry; +let propPane = ObjectsRegistry.PropertyPane; const widgetsPage = require("../../../../../locators/Widgets.json"); const dsl = require("../../../../../fixtures/tableV2NewDsl.json"); const publish = require("../../../../../locators/publishWidgetspage.json"); describe("Table Widget V2 property pane feature validation", function() { - before(() => { + beforeEach(() => { cy.addDsl(dsl); }); @@ -65,4 +68,18 @@ describe("Table Widget V2 property pane feature validation", function() { ); cy.get(publish.backToEditor).click(); }); + + it("2. check background of the edit action column", function() { + cy.openPropertyPane("tablewidgetv2"); + cy.makeColumnEditable("id"); + cy.readTableV2dataValidateCSS(0, 5, "background-color", "rgba(0, 0, 0, 0)"); + cy.get(".t--property-control-cellbackgroundcolor") + .find(".t--js-toggle") + .click(); + propPane.UpdatePropertyFieldValue( + "Cell Background Color", + "rgb(255, 0, 0)", + ); + cy.readTableV2dataValidateCSS(0, 5, "background-color", "rgb(255, 0, 0)"); + }); }); diff --git a/app/client/src/components/ads/DraggableList.tsx b/app/client/src/components/ads/DraggableList.tsx index 34a0ca3516..577a3075ac 100644 --- a/app/client/src/components/ads/DraggableList.tsx +++ b/app/client/src/components/ads/DraggableList.tsx @@ -102,26 +102,31 @@ function DraggableList(props: any) { }, [items]); useEffect(() => { - if (focusedIndex && listRef && listRef.current) { - const container = listRef.current; + /* + * we need to wait for the ui to get rendered before scrolling to the focusedColumn + */ + requestAnimationFrame(() => { + if (focusedIndex && listRef && listRef.current) { + const container = listRef.current; - if (focusedIndex * itemHeight < container.scrollTop) { - listRef.current.scrollTo({ - top: (focusedIndex - 1) * itemHeight, - left: 0, - behavior: "smooth", - }); - } else if ( - (focusedIndex + 1) * itemHeight > - listRef.current.scrollTop + listRef.current.clientHeight - ) { - listRef.current.scrollTo({ - top: (focusedIndex + 1) * itemHeight - listRef.current.clientHeight, - left: 0, - behavior: "smooth", - }); + if (focusedIndex * itemHeight < container.scrollTop) { + listRef.current.scrollTo({ + top: (focusedIndex - 1) * itemHeight, + left: 0, + behavior: "smooth", + }); + } else if ( + (focusedIndex + 1) * itemHeight > + listRef.current.scrollTop + listRef.current.clientHeight + ) { + listRef.current.scrollTo({ + top: (focusedIndex + 1) * itemHeight - listRef.current.clientHeight, + left: 0, + behavior: "smooth", + }); + } } - } + }); }, [focusedIndex]); const [springs, setSprings] = useSprings( diff --git a/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx b/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx index df60c0ce9b..6e43d08045 100644 --- a/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx +++ b/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx @@ -94,7 +94,7 @@ type State = { hasScrollableList: boolean; }; -const LIST_CLASSNAME = "tablewidget-primarycolumn-list"; +const LIST_CLASSNAME = "tablewidgetv2-primarycolumn-list"; class PrimaryColumnsControlV2 extends BaseControl { constructor(props: ControlProps) { super(props); diff --git a/app/client/src/sagas/WidgetAdditionSagas.ts b/app/client/src/sagas/WidgetAdditionSagas.ts index a455ba85a7..3db53eb9f1 100644 --- a/app/client/src/sagas/WidgetAdditionSagas.ts +++ b/app/client/src/sagas/WidgetAdditionSagas.ts @@ -69,11 +69,21 @@ function* getEntityNames() { * @returns */ function* getThemeDefaultConfig(type: string) { + const fallbackStylesheet: Record = { + TABLE_WIDGET_V2: "TABLE_WIDGET", + }; + const stylesheet: Record = yield select( getSelectedAppThemeStylesheet, ); - return stylesheet[type] || themePropertiesDefaults; + if (stylesheet[type]) { + return stylesheet[type]; + } else if (fallbackStylesheet[type] && stylesheet[fallbackStylesheet[type]]) { + return stylesheet[fallbackStylesheet[type]]; + } else { + return themePropertiesDefaults; + } } function* getChildWidgetProps( diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/EditActionsCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/EditActionsCell.tsx index d606a4a8dd..e9f0782c42 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/EditActionsCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/EditActionsCell.tsx @@ -58,6 +58,8 @@ export function EditActionCell(props: RenderEditActionsProps) { return (