Merge pull request #8854 from ToolJet/chore/pyodide-static-asset

Chore: Move pyodide to static assets

.version

@@ -1 +1 @@
-2.30.3
+2.30.4

docs/docs/app-builder/overview.md

@@ -7,11 +7,14 @@ title: Overview
 
 ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
 
-- **[Topbar](/docs/app-builder/topbar)**: configure app settings
+- **[Topbar](/docs/app-builder/topbar)**: Configure app settings
 - **[Canvas](/docs/app-builder/canvas)**: Arrange the components to build the interface of app
 - **[Left-sidebar](/docs/app-builder/left-sidebar)**: Add **[pages](/docs/tutorial/pages)**, **[inspect](/docs/how-to/use-inspector)** the components, queries or variables, and **[debug](#debugger)** the errors.
 - **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag any component or modify the property or styling
 - **[Query Panel](/docs/app-builder/query-panel)**: Create, edit or manage the queries from the **[datasources](/docs/data-sources/overview)**
+- **[Preview](/docs/app-builder/preview)**: Preview your application
+
+
 
 <div style={{textAlign: 'center'}}>
 

docs/docs/app-builder/preview.md

@@ -0,0 +1,12 @@
+---
+id: preview
+title: Preview
+---
+
+You can preview your app by clicking on the `Preview` icon on the top-right of the App-Builder.
+
+<div style={{textAlign: 'center'}}>
+ <img className="screenshot-full" src="/img/v2-beta/app-builder/preview/preview-mode.png" alt="App In Preview Mode"/>
+</div>
+
+Once you are in preview mode, you can change preview settings to test the app in different settings. Change the version of the app and switch between different versions to see how they compare. You can also select **Mobile** or **Desktop** view to see how the components are displayed in different screen settings.

docs/docs/app-builder/toolbar.md

@@ -5,12 +5,6 @@ title: Topbar
 
 Topbar is present at the top of the app-builder, and is used to configure the app settings.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/topbarnew.png" alt="App Builder: Topbar"/>
-
-</div>
-
 ### App name
 
 The App name can be modified by selecting the application name located on the left side of the topbar.

docs/docs/data-sources/run-py.md

@@ -6,12 +6,10 @@ title: Run Python code
 You can write custom Python code to interact with components and queries. To do that, you just need to create a new query and select **Run Python Code** from the available datasources.
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/custom-python/run-py.png" alt="Run JavaScript code" />
-
+ <img className="screenshot-full" src="/img/datasource-reference/custom-python/run-py.png" alt="Run JavaScript code" />
 </div>
 
-#### Example: Using Python code to trigger component specific actions
+## Using Python code to trigger component specific actions
 
 - Let's drag a **button** and a **text** widget onto the canvas. We will set a text on the text component and trigger button click event from the Python query.
 - Click on the `+` on the query panel to create a query and select **Run Python code** from the available datasources
@@ -44,13 +42,70 @@ You can write custom Python code to interact with components and queries. To do
  - For the text component, we don't have to edit any property since we are changing the value directly from the Python code.
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/custom-python/runpyg.gif" alt="Run Python code" />
-
+ <img className="screenshot-full" src="/img/datasource-reference/custom-python/runpyg.gif" alt="Run Python code" />
 </div>
 
 You can also write custom Python code to get the data from **External APIs** and manipulate the response for graphical representation. 
 
+## Get Query Data
+
+To immediately access the data returned by a query in the RunPy code, you can use the below functions: 
+
+#### Retrieve the latest data of a query:
+```py
+response = await queries.getSalesData.run()
+#replace getSalesData with your query name
+
+value = queries.getSalesData.getData()
+#replace getSalesData with your query name
+
+value
+```
+
+#### Retrieve the latest raw data of a query:
+```py
+response = await queries.getCustomerData.run()
+#replace getCustomerData with your query name
+
+value = queries.getCustomerData.getRawData()
+#replace getCustomerData with your query name
+
+value
+```
+
+#### Retreive the loading state of a query:
+```py
+response = await queries.getTodos.run()
+#replace getTodos with your query name
+
+value = queries.getTodos.getLoadingState()
+#replace getTodos with your query name
+
+value
+```
+
+## Get Variables
+
+To immediately access a variable or page variable after setting it in the RunPy code, you can use the below functions.
+
+#### Retrieve the current value of a variable: 
+```py
+actions.setVariable('mode','dark')
+#replace mode with your desired variable name
+
+actions.getVariable('mode')
+#replace mode with your desired variable name
+```
+
+#### Retrieve the current value of a page-specific variable:
+```py
+actions.setPageVariable('number',1)
+#replace number with your desired variable name
+
+actions.getPageVariable('number')
+#replace number with your desired variable name
+```
+
 :::info
 Issues with writing custom Python code? Ask in our [Slack community](https://www.tooljet.com/slack).
 :::

docs/docs/getting-started/quickstart-guide.md

@@ -6,7 +6,7 @@ title: Quickstart Guide
 <!-- <div style={{paddingTop:'24px', paddingBottom:'24px'}}> -->
 
 
-This Quickstart Guide will show you how to create an employee directory application in minutes using ToolJet. This app will let you track and update employee information with a beautiful user interface. Here are the step-by-step instructions:
+This tutorial will show you how to create an employee directory application in minutes using ToolJet. This app will let you track and update employee information with a beautiful user interface. Here are the step-by-step instructions:
 
 **[1. Create Your First Application](#1-create-your-first-application)** <br/>
 **[2. Create Employee Database](#2-create-employee-database)** <br/>
@@ -75,7 +75,6 @@ Now, create a new table in **[ToolJet’s Database](/docs/tooljet-database/)** t
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-
 ### 3. Integrate Data
 
 To display employees in the application, we first need to fetch data from the database using a query:
@@ -119,7 +118,7 @@ Click on the Preview button to see a preview of the fetched data.
 
 ### 4. List Employees
 
-Now, we need to bind the data returned by the `getEmployees` query above with the Table created in Step 1. Click on the Table component to open its configuration panel on the right. Under the `Data` property, paste the below code:
+Now, we need to bind the data returned by the `getEmployees` query above with the Table created in Step 1. Click on the Table component to open its properties panel on the right. Under the `Data` property, paste the below code:
 
 ```js
 {{queries.getEmployees.data}}
@@ -162,7 +161,7 @@ Next step is to create a way to add data for new employees.
 Frame all the remaining keys in the same format.
 
 <div style={{textAlign: 'center'}}>
- <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/quickstart-guide/add-employee-query-v2.png" alt="Add Employee Query" />
+ <img style={{ marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/quickstart-guide/add-employee-query-v2.png" alt="Add Employee Query" />
 </div>
 
 Let's continue working on this query. The data needs to reload once this query runs since we want the Table component to be populated with the updated data. Follow the below steps to run the `getEmployees` query after the `addEmployee` query is completed. 
@@ -172,13 +171,13 @@ Let's continue working on this query. The data needs to reload once this query r
 - Select `getEmployees` as Query.
 
 <div style={{textAlign: 'center'}}>
- <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px'}} className="screenshot-full" src="/img/quickstart-guide/reload-data-v2.png" alt="Reload Table Data" />
+ <img style={{ marginBottom:'15px', borderRadius: '6px'}} className="screenshot-full" src="/img/quickstart-guide/reload-data-v2.png" alt="Reload Table Data" />
 </div>
 
 We are now ready with a query that will allow us to add new employee data. Let's link this query to a button.
 
 In the bottom-right corner of the Table component, there is a `+`/Add new row button. Follow the below steps to run the `addEmployee` query on click of the `+`/Add new row button: 
-- Click on the Table component, go to Events in configuration panel and add a New event handler.
+- Click on the Table component, go to Events in properties panel and add a New event handler.
 - Choose Add new rows as Event, Run Query as Action.
 - Select `addEmployee` as the Query.
 
@@ -227,7 +226,7 @@ The preview, release and share buttons are on the top-right of the App-Builder.
  <img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/quickstart-guide/preview-share-v2.png" alt="Preview And Share" />
 </div>
 
-Congratulations! You've successfully built an employee directory application and, in the process, covered the fundamentals of ToolJet. 
+Congratulations on completing the tutorial! You've successfully built an employee directory application and, in the process, covered the fundamentals of ToolJet. 
 
 To learn more about how ToolJet works, explore the subjects covered in **[ToolJet Concepts](/docs/tooljet-concepts/what-are-components)**.
 

docs/docs/how-to/access-cellvalue-rowdata.md

@@ -17,7 +17,7 @@ https://fakestoreapi.com/products
 
 ## 2. Display Data on the Table
 
-- Hide the Query Panel and click on the Table component to open its configuration panel on the right.
+- Hide the Query Panel and click on the Table component to open its properties panel on the right.
 - Under Table Data, enter the below code:
 ```
 {{queries.restapi1.data}}

docs/docs/how-to/conditionally-format-table.md

@@ -26,7 +26,7 @@ Conditional formatting enhances the visual representation of data by allowing yo
 
 ## Display Data on the Table
 
-1. Hide the Query Panel and click on the Table component to open its configuration panel.
+1. Hide the Query Panel and click on the Table component to open its properties panel.
 
 2. Under **Table Data**, enter the following code:
  ```js title="Table Data"