fix: Change "Allow Horizontal Scroll" text to "Allow scroll" (#8085)

* chore: Change "Allow Horizontal Scroll" to "Allow Scroll"

* chore: Hide option to choose scroll for pie chart

* fix: Fix prettier errors

* feat: Add migration to allowScroll for `CHART_WIDGET`s

Closes #4227

* fix: Fix chart widget prop recursively

Per https://github.com/appsmithorg/appsmith/pull/8085#discussion_r733442011
Closes #4227

app/client/cypress/fixtures/ChartDsl.json

@@ -24,7 +24,7 @@
         "widgetName": "Chart1",
         "chartType": "BAR_CHART",
         "chartName": "Sales on working days",
-        "allowHorizontalScroll": false,
+        "allowScroll": false,
         "version": 1,
         "chartData": [
           {

app/client/cypress/fixtures/ChartTextDsl.json

@@ -57,7 +57,7 @@
                             "widgetName": "Chart1",
                             "chartType": "LINE_CHART",
                             "chartName": "Sales on working days",
-                            "allowHorizontalScroll": false,
+                            "allowScroll": false,
                             "chartData": {
                               "some-random-id": {"seriesName":"Sales","data": []}
                             },

app/client/cypress/fixtures/chartUpdatedDsl.json

@@ -107,7 +107,7 @@
                                 "widgetName": "Chart1",
                                 "chartType": "LINE_CHART",
                                 "chartName": "Last week's revenue",
-                                "allowHorizontalScroll": false,
+                                "allowScroll": false,
                                 "version": 1,
                                 "chartData": {
                                     "q4pm3w97mo": {

app/client/cypress/fixtures/displayWidgetDsl.json

@@ -114,7 +114,7 @@
                                "widgetName": "Chart1",
                                "chartType": "LINE_CHART",
                                "chartName": "Sales on working days",
-                               "allowHorizontalScroll": false,
+                               "allowScroll": false,
                                "chartData": [
                                     {
                                       "seriesName": "Sales",

app/client/cypress/fixtures/viewdsl.json

@@ -147,7 +147,7 @@
                   "widgetName": "Chart1",
                   "chartType": "BAR_CHART",
                   "chartName": "App Sign Up",
-                  "allowHorizontalScroll": false,
+                  "allowScroll": false,
                   "chartData": [
                     {
                       "seriesName": "Sales",

app/client/cypress/fixtures/widgetSelection.json

@@ -23,7 +23,7 @@
         {
           "widgetName": "Chart1",
           "rightColumn": 26,
-          "allowHorizontalScroll": false,
+          "allowScroll": false,
           "widgetId": "ypstklohw5",
           "topRow": 4,
           "bottomRow": 36,

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js

@@ -292,13 +292,13 @@ describe("Chart Widget Functionality", function() {
   });
 
   it("Chart Widget Functionality To Uncheck Horizontal Scroll Visible", function() {
-    cy.togglebarDisable(commonlocators.horizontalScroll);
+    cy.togglebarDisable(commonlocators.allowScroll);
     cy.PublishtheApp();
     cy.get(publish.horizontalTab).should("not.exist");
   });
 
   it("Chart Widget Functionality To Check Horizontal Scroll Visible", function() {
-    cy.togglebar(commonlocators.horizontalScroll);
+    cy.togglebar(commonlocators.allowScroll);
     cy.PublishtheApp();
     cy.get(publish.horizontalTab)
       .eq(1)

app/client/cypress/locators/commonlocators.json

@@ -40,7 +40,7 @@
   "TableRow": ".t--draggable-tablewidget .tbody",
   "Disablejs": ".t--property-control-disabled",
   "requiredjs": ".t--property-control-required",
-  "horizontalScroll": ".t--property-control-allowhorizontalscroll input",
+  "allowScroll": ".t--property-control-allowscroll input",
   "tableInner": ".t--draggable-tablewidget span.t--widget-name",
   "pdfSupport": ".t--property-control-pdfexport input",
   "ExcelSupport": ".t--property-control-excelexport input",

app/client/src/comments/dsl.json

@@ -68,7 +68,7 @@
         "widgetName":"Chart1",
         "chartType":"LINE_CHART",
         "chartName":"Sales on working days",
-        "allowHorizontalScroll":false,
+        "allowScroll":false,
         "version":1,
         "chartData":[
            {

app/client/src/constants/WidgetConstants.tsx

@@ -69,7 +69,7 @@ export const layoutConfigurations: LayoutConfigurations = {
   FLUID: { minWidth: -1, maxWidth: -1 },
 };
 
-export const LATEST_PAGE_VERSION = 43;
+export const LATEST_PAGE_VERSION = 44;
 
 export const GridDefaults = {
   DEFAULT_CELL_SIZE: 1,

app/client/src/entities/Widget/utils.test.ts

@@ -223,7 +223,7 @@ describe("getAllPathsFromPropertyConfig", () => {
       widgetName: "Chart1",
       chartType: "LINE_CHART",
       chartName: "Sales on working days",
-      allowHorizontalScroll: false,
+      allowScroll: false,
       version: 1,
       chartData: {
         "random-id": {

app/client/src/utils/DSLMigrations.ts

@@ -39,6 +39,7 @@ import { ButtonStyleTypes, ButtonVariantTypes } from "../components/constants";
 import { Colors } from "../constants/Colors";
 import { migrateResizableModalWidgetProperties } from "./migrations/ModalWidget";
 import { migrateMapWidgetIsClickedMarkerCentered } from "./migrations/MapWidget";
+import { DSLWidget } from "widgets/constants";
 
 /**
  * adds logBlackList key for all list widget children
@@ -292,6 +293,24 @@ const mapDataMigration = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
   return currentDSL;
 };
 
+const mapAllowHorizontalScrollMigration = (
+  currentDSL: ContainerWidgetProps<WidgetProps>,
+) => {
+  currentDSL.children = currentDSL.children?.map((child: DSLWidget) => {
+    if (child.type === "CHART_WIDGET") {
+      child.allowScroll = child.allowHorizontalScroll;
+      delete child.allowHorizontalScroll;
+    }
+
+    if (Array.isArray(child.children) && child.children.length > 0)
+      child = mapAllowHorizontalScrollMigration(child);
+
+    return child;
+  });
+
+  return currentDSL;
+};
+
 const tabsWidgetTabsPropertyMigration = (
   currentDSL: ContainerWidgetProps<WidgetProps>,
 ) => {
@@ -949,6 +968,11 @@ export const transformDSL = (
 
   if (currentDSL.version === 42) {
     currentDSL = migrateMapWidgetIsClickedMarkerCentered(currentDSL);
+    currentDSL.version = 43;
+  }
+
+  if (currentDSL.version === 43) {
+    currentDSL = mapAllowHorizontalScrollMigration(currentDSL);
     currentDSL.version = LATEST_PAGE_VERSION;
   }
 

app/client/src/widgets/ChartWidget/component/index.tsx

@@ -44,7 +44,7 @@ FusionCharts.options.license({
 });
 
 export interface ChartComponentProps {
-  allowHorizontalScroll: boolean;
+  allowScroll: boolean;
   chartData: AllChartData;
   chartName: string;
   chartType: ChartType;
@@ -81,38 +81,26 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   chartContainerId = this.props.widgetId + "chart-container";
 
   getChartType = () => {
-    const { allowHorizontalScroll, chartData, chartType } = this.props;
+    const { allowScroll, chartData, chartType } = this.props;
     const dataLength = Object.keys(chartData).length;
     const isMSChart = dataLength > 1;
     switch (chartType) {
       case "PIE_CHART":
         return "pie2d";
       case "LINE_CHART":
-        return allowHorizontalScroll
-          ? "scrollline2d"
-          : isMSChart
-          ? "msline"
-          : "line";
+        return allowScroll ? "scrollline2d" : isMSChart ? "msline" : "line";
       case "BAR_CHART":
-        return allowHorizontalScroll
-          ? "scrollBar2D"
-          : isMSChart
-          ? "msbar2d"
-          : "bar2d";
+        return allowScroll ? "scrollBar2D" : isMSChart ? "msbar2d" : "bar2d";
+      case "AREA_CHART":
+        return allowScroll ? "scrollarea2d" : isMSChart ? "msarea" : "area2d";
       case "COLUMN_CHART":
-        return allowHorizontalScroll
+        return allowScroll
           ? "scrollColumn2D"
           : isMSChart
           ? "mscolumn2d"
           : "column2d";
-      case "AREA_CHART":
-        return allowHorizontalScroll
-          ? "scrollarea2d"
-          : isMSChart
-          ? "msarea"
-          : "area2d";
       default:
-        return allowHorizontalScroll ? "scrollColumn2D" : "mscolumn2d";
+        return allowScroll ? "scrollColumn2D" : "mscolumn2d";
     }
   };
 
@@ -396,7 +384,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       return;
     }
     const dataSource =
-      this.props.allowHorizontalScroll && this.props.chartType !== "PIE_CHART"
+      this.props.allowScroll && this.props.chartType !== "PIE_CHART"
         ? this.getScrollChartDataSource()
         : this.getChartDataSource();
 
@@ -470,10 +458,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       }
       const chartType = this.getChartType();
       this.chartInstance.chartType(chartType);
-      if (
-        this.props.allowHorizontalScroll &&
-        this.props.chartType !== "PIE_CHART"
-      ) {
+      if (this.props.allowScroll && this.props.chartType !== "PIE_CHART") {
         this.chartInstance.setChartData(this.getScrollChartDataSource());
       } else {
         this.chartInstance.setChartData(this.getChartDataSource());

app/client/src/widgets/ChartWidget/index.ts

@@ -15,7 +15,7 @@ export const CONFIG = {
     widgetName: "Chart",
     chartType: "COLUMN_CHART",
     chartName: "Sales Report",
-    allowHorizontalScroll: false,
+    allowScroll: false,
     version: 1,
     chartData: {
       [generateReactKey()]: {

app/client/src/widgets/ChartWidget/widget/index.tsx

@@ -52,7 +52,7 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
     return (
       <Suspense fallback={<Skeleton />}>
         <ChartComponent
-          allowHorizontalScroll={this.props.allowHorizontalScroll}
+          allowScroll={this.props.allowScroll}
           chartData={this.props.chartData}
           chartName={this.props.chartName}
           chartType={this.props.chartType}
@@ -83,7 +83,7 @@ export interface ChartWidgetProps extends WidgetProps {
   yAxisName: string;
   chartName: string;
   isVisible?: boolean;
-  allowHorizontalScroll: boolean;
+  allowScroll: boolean;
 }
 
 type ChartComponentPartialProps = Omit<ChartComponentProps, "onDataPointClick">;

app/client/src/widgets/ChartWidget/widget/propertyConfig.ts

@@ -216,12 +216,13 @@ export default [
       },
       {
         helpText: "Enables scrolling inside the chart",
-        propertyName: "allowHorizontalScroll",
-        label: "Allow horizontal scroll",
+        propertyName: "allowScroll",
+        label: "Allow scroll",
         controlType: "SWITCH",
         isBindProperty: false,
         isTriggerProperty: false,
-        hidden: (x: ChartWidgetProps) => x.chartType === "CUSTOM_FUSION_CHART",
+        hidden: (x: ChartWidgetProps) =>
+          x.chartType === "CUSTOM_FUSION_CHART" || x.chartType === "PIE_CHART",
         dependencies: ["chartType"],
       },
     ],

app/client/test/factories/Widgets/ChartFactory.ts

@@ -6,7 +6,7 @@ export const ChartFactory = Factory.Sync.makeFactory<WidgetProps>({
   isVisible: true,
   chartType: "LINE_CHART",
   chartName: "Sales on working days",
-  allowHorizontalScroll: false,
+  allowScroll: false,
   chartData: [
     {
       seriesName: "Sales",

app/server/appsmith-server/src/main/resources/examples-organization.json

@@ -164,7 +164,7 @@
                   {
                     "widgetName": "Chart1",
                     "rightColumn": 8,
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "widgetId": "n536wy81vu",
                     "topRow": 3,
                     "bottomRow": 14,
@@ -324,7 +324,7 @@
                   {
                     "widgetName": "Chart1",
                     "rightColumn": 8,
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "widgetId": "n536wy81vu",
                     "topRow": 3,
                     "bottomRow": 14,
@@ -537,7 +537,7 @@
                   {
                     "widgetName": "Chart1",
                     "rightColumn": 8,
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "widgetId": "ul3c5oquih",
                     "topRow": 4,
                     "bottomRow": 14,
@@ -801,7 +801,7 @@
                   {
                     "widgetName": "Chart1",
                     "rightColumn": 8,
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "widgetId": "ul3c5oquih",
                     "topRow": 4,
                     "bottomRow": 14,
@@ -2856,7 +2856,7 @@
                     "widgetName": "Chart1",
                     "chartType": "PIE_CHART",
                     "chartName": "Orders",
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n  {\\n    \\\"x\\\": \\\"ORDER_PLACED\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n  },\\n    {\\n    \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n  },\\n  {\\n    \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n  },\\n    {\\n    \\\"x\\\": \\\"REFUNDED\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n  }\\n  \\n]\"}]",
                     "xAxisName": "Last Week",
                     "yAxisName": "Total Order Revenue $",
@@ -4277,7 +4277,7 @@
                     "widgetName": "Chart1",
                     "chartType": "PIE_CHART",
                     "chartName": "Orders",
-                    "allowHorizontalScroll": false,
+                    "allowScroll": false,
                     "chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n  {\\n    \\\"x\\\": \\\"ORDER_PLACED\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n  },\\n    {\\n    \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n  },\\n  {\\n    \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n  },\\n    {\\n    \\\"x\\\": \\\"REFUNDED\\\",\\n    \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n  }\\n  \\n]\"}]",
                     "xAxisName": "Last Week",
                     "yAxisName": "Total Order Revenue $",

deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2

@@ -635,8 +635,8 @@ let res = [
                         {
                             "id" : "13.1.4",
                             "helpText" : "Enables scrolling inside the chart",
-                            "propertyName" : "allowHorizontalScroll",
-                            "label" : "Allow horizontal scroll",
+                            "propertyName" : "allowScroll",
+                            "label" : "Allow scroll",
                             "controlType" : "SWITCH"
                         }, 
                         {

deploy/template/mongo-init.js.sh

@@ -642,8 +642,8 @@ let res = [
                         {
                             "id" : "13.1.4",
                             "helpText" : "Enables scrolling inside the chart",
-                            "propertyName" : "allowHorizontalScroll",
-                            "label" : "Allow horizontal scroll",
+                            "propertyName" : "allowScroll",
+                            "label" : "Allow scroll",
                             "controlType" : "SWITCH"
                         }, 
                         {