Fixed Tutorial bug

lowcoder-org · FalkWolsky · Dec 3, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
commit 46796e54d9201ad3cd719236bdc6433b629daf92
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -62,7 +62,7 @@ export const en = {
     selectDesc: "Triggered when the user selects part of the data in the chart",
     unselectDesc: "Triggered when the user unselects part of the data in the chart",
     selectedPointsDesc: "Selected points",
-    dataDesc: "The raw data used in the current chart",
+    dataDesc: "The JSON data for the chart",
     titleDesc: "Current chart title",
     scatterShape: "Scatter shape",
     circle: "Circle",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1279,7 +1279,7 @@ export const en = {
     "displayDataDesc": "Data Displayed in the Current Table",
     "selectedIndexDesc": "Selected Index in Display Data",
     "filterDesc": "Table Filtering Parameters",
-    "dataDesc": "The Raw Data Used in the Current Table",
+    "dataDesc": "The JSON Data for the Table",
     "saveChanges": "Save Changes",
     "cancelChanges": "Cancel Changes",
     "rowSelectChange": "Row Select Change",
@@ -2147,11 +2147,11 @@ export const en = {
   },
   "editorTutorials": {
     "component": "Component",
-    "componentContent": "The Right Component Area Has Tables, Buttons, Input Boxes, Selectors, and Other Components That Can Be Dragged onto the Canvas for Use.",
+    "componentContent": "The Right Component Panel offers you many ready made Application Blocks (Components). These Can Be Dragged onto the Canvas for Use. You Can Also Create Your Own Components with a little coding knowledge.",
     "canvas": "Canvas",
-    "canvasContent": "What You See on the Canvas is What You Get, and You Can Adjust Component Layout and Size by Dragging and Dropping, and Delete/Copy/Paste Components with Keyboard Shortcuts.",
+    "canvasContent": "Build your apps on the Canvas with a 'What You See Is What You Get' approach. Simply drag and drop components to design your layout, and use keyboard shortcuts for quick editing like delete, copy, and paste. Once a component is selected, you can fine-tune every detail—from styling and layout to data binding and logical behavior. Plus, enjoy the added benefit of responsive design, ensuring your apps look great on any device.",
     "queryData": "Query Data",
-    "queryDataContent": "Create a New Query Here and Connect to Your MySQL, MongoDB, Redis, Airtable, and Other Data Sources. After Configuring the Query, Click 'Run' to Obtain the Data.",
+    "queryDataContent": "You can create Data Queries Here and Connect to Your MySQL, MongoDB, Redis, Airtable, and many Other Data Sources. After Configuring the Query, Click 'Run' to Obtain the Data and continue the Tutorial.",
     "compProperties": "Component Properties"
   },
   "homeTutorials": {

diff --git a/client/packages/lowcoder/src/i18n/locales/enObj.tsx b/client/packages/lowcoder/src/i18n/locales/enObj.tsx
@@ -115,16 +115,14 @@ export const enObj: I18nObjects = {
     mockDataUrl: "https://6523073ef43b179384152c4f.mockapi.io/api/lowcoder/users",
     data: (code) => (
       <>
-        The component and query data are listed here, which can be referenced through
-        {code("{{ }}")}. For example: {code("{{table1.selectedRow}}")}.
+        The current State of the Component with all Settings and Data listed here. You can reference to this data with the handlebar expression.
+        For example: {code("{{table1.selectedRow}}")}.
       </>
     ),
     compProperties: (code) => (
       <>
-        When the component is selected, its properties are displayed on the right
-        {code("{{query1.data}}")}. Reference the data just queried, you can use in the input box
-        {code("{{ }}")}
-        write JavaScript.
+        When the component is selected, its properties are displayed on the right. Now you can set a Data Binding. Please delete all static Data and enter the following handlebar expression:
+        {code("{{query1.data}}")}. With this, you bind the data of the query to the table. The table will automatically display the data returned by the query. If the query updates the data, the table will also update the data automatically.
       </>
     ),
   },

diff --git a/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx b/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx
@@ -42,7 +42,7 @@ const tourSteps: Step[] = [
     placement: "left",
     styles: {
       options: {
-        width: 408,
+        width: 500,
       },
     },
     target: `.${tableDragClassName}`,
@@ -55,7 +55,7 @@ const tourSteps: Step[] = [
     spotlightClicks: true,
     styles: {
       options: {
-        width: 480,
+        width: 600,
       },
     },
     target: `.${editorContentClassName}`,
@@ -68,7 +68,7 @@ const tourSteps: Step[] = [
     spotlightClicks: true,
     styles: {
       options: {
-        width: 480,
+        width: 500,
       },
     },
     target: `.${editorBottomClassName}`,
@@ -84,7 +84,7 @@ const tourSteps: Step[] = [
     spotlightPadding: 8,
     styles: {
       options: {
-        width: 408,
+        width: 500,
       },
     },
     target: `.${tableDataDivClassName}`,
@@ -103,7 +103,7 @@ const tourSteps: Step[] = [
     spotlightClicks: true,
     styles: {
       options: {
-        width: 408,
+        width: 500,
       },
     },
     target: `.${leftCompListClassName}`,
@@ -134,8 +134,8 @@ function addTable(editorState: EditorState) {
           {
             [key]: {
               i: key,
-              x: 0,
-              y: 0,
+              x: 6,
+              y: 25,
               ...defaultLayout(compType),
             },
           },
@@ -237,6 +237,7 @@ export default function EditorTutorials() {
     const { status, index, action, type } = data;
     const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
     const nextIndex = index + (action === ACTIONS.PREV ? -1 : 1);
+
     if (finishedStatuses.includes(status)) {
       dispatch(markUserStatus("newUserGuidance", true));
       history.replace({
@@ -265,9 +266,6 @@ export default function EditorTutorials() {
     } else if (index === 2 && action === ACTIONS.NEXT) {
       // change data
       openTableData();
-      const tableComp = editorState.getUICompByName("table1");
-      tableComp &&
-        tableComp.children.comp.children.data.dispatchChangeValueAction("{{query1.data}}");
       setStepIndex(nextIndex);
     } else if (index === 1 && action === ACTIONS.PREV) {
       // cancel select