fix: cell background for edit actions column in Table v2 (#15233)

app/client/cypress/fixtures/tableV2NewDsl.json

@@ -21,6 +21,7 @@
         "children": [
             {
                 "widgetName": "Table1",
+                "inlineEditingSaveOption": "ROW_LEVEL",
                 "columnOrder": [
                     "id",
                     "email",

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)");
+  });
 });

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) {
+        if (focusedIndex * itemHeight < container.scrollTop) {
-        listRef.current.scrollTo({
+          listRef.current.scrollTo({
-          top: (focusedIndex - 1) * itemHeight,
+            top: (focusedIndex - 1) * itemHeight,
-          left: 0,
+            left: 0,
-          behavior: "smooth",
+            behavior: "smooth",
-        });
+          });
-      } else if (
+        } else if (
-        (focusedIndex + 1) * itemHeight >
+          (focusedIndex + 1) * itemHeight >
-        listRef.current.scrollTop + listRef.current.clientHeight
+          listRef.current.scrollTop + listRef.current.clientHeight
-      ) {
+        ) {
-        listRef.current.scrollTo({
+          listRef.current.scrollTo({
-          top: (focusedIndex + 1) * itemHeight - listRef.current.clientHeight,
+            top: (focusedIndex + 1) * itemHeight - listRef.current.clientHeight,
-          left: 0,
+            left: 0,
-          behavior: "smooth",
+            behavior: "smooth",
-        });
+          });
+        }
       }
-    }
+    });
   }, [focusedIndex]);
 
   const [springs, setSprings] = useSprings<any>(

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<ControlProps, State> {
   constructor(props: ControlProps) {
     super(props);

app/client/src/sagas/WidgetAdditionSagas.ts

@@ -69,11 +69,21 @@ function* getEntityNames() {
  * @returns
  */
 function* getThemeDefaultConfig(type: string) {
+  const fallbackStylesheet: Record<string, string> = {
+    TABLE_WIDGET_V2: "TABLE_WIDGET",
+  };
+
   const stylesheet: Record<string, unknown> = 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(

app/client/src/widgets/TableWidgetV2/component/cellComponents/EditActionsCell.tsx

@@ -58,6 +58,8 @@ export function EditActionCell(props: RenderEditActionsProps) {
   return (
     <CellWrapper
       allowCellWrapping={allowCellWrapping}
+      cellBackground={cellBackground}
+      className="cell-wrapper"
       compactMode={compactMode}
       horizontalAlignment={horizontalAlignment}
       isCellVisible={isCellVisible}

app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Styles.ts

@@ -8,13 +8,7 @@ export default {
     return hideByColumnType(
       props,
       propertyPath,
-      [
+      [ColumnTypes.TEXT, ColumnTypes.DATE, ColumnTypes.NUMBER, ColumnTypes.URL],
-        ColumnTypes.TEXT,
-        ColumnTypes.DATE,
-        ColumnTypes.NUMBER,
-        ColumnTypes.URL,
-        ColumnTypes.EDIT_ACTIONS,
-      ],
       true,
     );
   },
@@ -59,7 +53,6 @@ export default {
           ColumnTypes.DATE,
           ColumnTypes.NUMBER,
           ColumnTypes.URL,
-          ColumnTypes.EDIT_ACTIONS,
         ]);
       },
     },