Merge branch 'main' into update-lucide-react

docs/advanced/1_self_host/index.md

@@ -31,7 +31,7 @@ The docker-compose below use the 6 parts and we recommend doing TLS termination
 
 We recommend using the [helm chart](#helm-chart) to deploy on managed kubernetes. But for simplified setup, simply use the docker-compose (see [below](#docker)) on a single large instance and use a high number of replicas for the worker service. The rule of thumb is 1 worker per 1vCPU and 1/2GB of RAM. Cloud providers have managed load balancer services (ELB, GCLB, ALB) and managed database (RDS, Cloud SQL, Aurora, Postgres on Azure). We recommend disabling the db service in the docker-compose and using an external database by setting according the `DATABASE_URL` in the `.env` file. Windmill is compatible with AWS Aurora, GCP Cloud SQL and Neon serverless database.
 
-Use the managed load balancer to point to your instance on the port you have chosen to expose in the caddy section of the docker-compose (by default 80). We recommend doing TLS termination and associating your domain on your managed load balancer. Once the domain name is chosen, set BASE_URL accordingly in `.env`. That is it for a minimal setup. Read about [Worker groups](../../core_concepts/9_worker_groups/index.md) to configure more finely your workers on more nodes and with different resources. Once done, be sure to setup [SSO login](../../misc/2_setup_oauth/index.md) with Azure AD, Google Workspace or Github if relevant.
+Use the managed load balancer to point to your instance on the port you have chosen to expose in the caddy section of the docker-compose (by default 80). We recommend doing TLS termination and associating your domain on your managed load balancer. Once the domain name is chosen, set BASE_URL accordingly in `.env`. That is it for a minimal setup. Read about [Worker groups](../../core_concepts/9_worker_groups/index.mdx) to configure more finely your workers on more nodes and with different resources. Once done, be sure to setup [SSO login](../../misc/2_setup_oauth/index.md) with Azure AD, Google Workspace or Github if relevant.
 
 :::tip AWS ECS
 

docs/advanced/7_docker/index.md → docs/advanced/7_docker/index.mdx

@@ -1,12 +1,24 @@
+import DocCard from '@site/src/components/DocCard';
+
 # Run Docker Containers
 
-Windmill support running any docker container through its bash support. As a pre-requisite, the host docker daemon need to be mounted into the worker container. This is done through a simple volume mount: `/var/run/docker.sock:/var/run/docker.sock`.
+Windmill supports running any [Docker](https://www.docker.com/) container through its [Bash](../../getting_started/0_scripts_quickstart/4_bash_quickstart/index.mdx) support. As a pre-requisite, the host docker daemon needs to be mounted into the worker container. This is done through a simple volume mount: `/var/run/docker.sock:/var/run/docker.sock`.
+
+Once Docker is set up, see:
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+		title="Docker Quickstart"
+		description="Learn to run a script using from Docker containers."
+		href="/docs/getting_started/scripts_quickstart/docker"
+	/>
+</div>
 
 ## Setup
 
 ### Docker compose
 
-On the docker-compose, it is enough to uncomment the volume mount of the windmill worker
+On the docker-compose, it is enough to uncomment the volume mount of the Windmill worker
 
 ```dockerfile
       # mount the docker socket to allow to run docker containers from within the workers
@@ -15,7 +27,7 @@ On the docker-compose, it is enough to uncomment the volume mount of the windmil
 
 ### Helm charts
 
-In the charts values of our [helm charts](https://github.com/windmill-labs/windmill-helm-charts), set `windmill.exposeHostDocker` to `true`
+In the charts values of our [helm charts](https://github.com/windmill-labs/windmill-helm-charts), set `windmill.exposeHostDocker` to `true`.
 
 ### Remote Docker Daemon
 
@@ -39,7 +51,6 @@ spec:
       privileged: true
 ```
 
-
 ## Use
 
 The default code is as follows:
@@ -70,15 +81,15 @@ Like any bash script, it will return the last line of the stdout. So be sure to
 
 As a script:
 
-![script 1](./as_script.png.webp)
+![script 1](./as_script.png)
 
-![script 2](./as_script2.png.webp)
+![script 2](./as_script2.png)
 
 As a flow step:
 
-![flow step 1](./as_flow.png.webp)
+![flow step 1](./as_flow.png)
 
-![flow step 2](./as_flow2.png.webp)
+![flow step 2](./as_flow2.png)
 
 ## Use with Remote Docker Daemon
 

docs/advanced/index.md

@@ -14,6 +14,6 @@ Windmill's most advanced guides.
   </a>
   <a href="/docs/advanced/docker" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
    <div class="text-lg font-semibold text-gray-900">Run Docker Containers</div>
-    <div class="text-sm text-gray-500">Windmill support running any docker container through its bash support.</div>
+    <div class="text-sm text-gray-500">Windmill supports running any docker container through its Bash support.</div>
   </a>
 </div>

docs/apps/0_app_editor/index.mdx

@@ -2,7 +2,7 @@ import DocCard from '@site/src/components/DocCard';
 
 # App Editor
 
-The app editor is where you build an app with components, create interactions with runnables, and configure the app settings.
+The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings.
 
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
@@ -21,31 +21,22 @@ The app editor is where you build an app with components, create interactions wi
 
 <br />
 
-The app editor is composed of 5 main sections:
+The app editor is composed of 6 main sections:
 
 1. [Toolbar](/docs/apps/app_editor#toolbar)
 2. [Canvas](#canvas)
 3. [Outputs](#outputs)
 4. [Runnables panel](#runnables-panel)
 5. [Component Library and Settings](#component-library-and-settings)
+6. [App Styling]
 
 ![App Editor](../../assets/apps/0_app_editor/plain-app-editor.png.webp)
 
 ## Toolbar
 
-In the topbar, you have several options to configure your app:
+The topbar helps you in your app editing.
 
-- **Change App Summary**: Modify the summary of your app.
-- **Undo/Redo**: Perform undo or redo actions.
-- **Toggle Layout**: Switch between Mobile and Desktop layout.
-- **Toggle Width**: Switch between full and max width.
-- **Export as JSON**: Export your app as a JSON or [Hub](https://hub.windmill.dev/) compatible file.
-- **Debugging**: Open the debugging panel.
-- **Editor/Preview Mode**: Toggle between the Editor and Preview modes.
-- **Save as Draft**: Save your app as a [draft](../../core_concepts/0_draft_and_deploy/index.mdx#draft).
-- **Deploy**: [Deploy](../../core_concepts/0_draft_and_deploy/index.mdx#deployed-version) your app.
-
-![App Menu](../../assets/apps/1_app_toolbar/app-toolbar.png.webp)
+![App Menu](../../assets/apps/1_app_toolbar/app-toolbar.png)
 
 #### Learn more
 
@@ -56,18 +47,6 @@ In the topbar, you have several options to configure your app:
 		description="Discover all the features of the toolbar."
 		href="/docs/apps/toolbar"
 	/>
-	<DocCard
-		color="orange"
-		title="Debugging"
-		description="Learn how to debug your app."
-		href="/docs/apps/app_debugging"
-	/>
-	<DocCard
-		color="orange"
-		title="Deployment"
-		description="Save as draft or deploy your app."
-		href="/docs/apps/app_deployment"
-	/>
 </div>
 
 ## Canvas
@@ -101,14 +80,14 @@ The canvas at the center of the editor is where you design and see the overall U
 
 ## Outputs
 
-On the left panel of the editor, you can see the list of outputs of the app. These outputs represent the state of the app and are categorized into four types:
+On the left panel of the editor, you can see the list of outputs of the app. These outputs represent the states & results of the app and are categorized into four types:
 
 - **Context**: The context holds information such as the user email, username, workspace, query parameters, and more.
 - **State**: The state holds the app's current state, which can be manipulated by the frontend scripts.
 - **Component Outputs**: These outputs correspond to the outputs of the individual components.
 - **Background Runnables**: These outputs represent the outputs of the background runnables.
 
-![App Outputs](../../assets/apps/0_app_editor/app-outputs.png.webp)
+![App Outputs](../../assets/apps/0_app_editor/app-outputs.png)
 
 You can perform the following actions with the outputs:
 
@@ -122,8 +101,8 @@ You can perform the following actions with the outputs:
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
 		color="orange"
-		title="Context"
-		description="The context holds such information as the user email, username, the workspace, the query parameters, etc."
+		title="Outputs"
+		description="The outputs represent the states & results of the app"
 		href="/docs/apps/outputs"
 	/>
 	<DocCard
@@ -138,7 +117,7 @@ You can perform the following actions with the outputs:
 
 On the bottom panel of the editor, you can see the list of runnables of the app. The runnables are the scripts or flows that are linked to components, or ran in the background. They are used to perform actions when a component is clicked, to fetch data, etc. They make all the interactions of the app.
 
-![App Runnables panel](../../assets/apps/0_app_editor/app-runnable-panel.png.webp)
+![App Runnables panel](../../assets/apps/0_app_editor/app-runnable-panel.png)
 
 #### Learn more
 
@@ -155,7 +134,9 @@ On the bottom panel of the editor, you can see the list of runnables of the app.
 
 Finally, on the right panel of the editor, you can insert a new component, configure a component or edit the component styles.
 
-![App Runnables panel](../../assets/apps/0_app_editor/app-components-settings.png.webp)
+![App Components Library](../../assets/apps/0_app_editor/app_components_add.png "App Components Library")
+
+![App Components Configuration](../../assets/apps/0_app_editor/app_components_configuration.png "App Components Configuration")
 
 #### Learn more
 
@@ -172,16 +153,36 @@ Finally, on the right panel of the editor, you can insert a new component, confi
 		description="Learn how to trigger a runnable."
 		href="/docs/apps/app_configuration-settings/app_runnable_triggers"
 	/>
-	<DocCard
-		color="orange"
-		title="Component Configuration"
-		description="Learn how to configure a component."
-		href="/docs/apps/app_configuration-settings/app_component_configuration"
-	/>
+</div>
+
+## Styling
+
+Styling on the app editor can be managed at the component and app-level, with pre-set configurations or using CSS & [Tailwind](https://tailwindcss.com/).
+
+#### Learn more
+
+<div class="grid grid-cols-2 gap-2 my-4">
 	<DocCard
 		color="orange"
 		title="Styling"
 		description="Learn how to edit the component styles."
 		href="/docs/apps/app_configuration-settings/app_styling"
 	/>
 </div>
+
+## Other app features
+
+<div class="grid grid-cols-2 gap-2 my-4">
+	<DocCard
+		title="Group of Components"
+		description="Components can be grouped within containers."
+		href="/docs/apps/app_configuration-settings/components_groups"
+		color="orange"
+	/>
+	<DocCard
+		title="Public Apps"
+		description="Apps can be accessed as a standalone app by anyone who has the secret URL"
+		href="/docs/apps/public_apps"
+		color="orange"
+	/>
+</div>

docs/apps/0_toolbar.md

@@ -0,0 +1,75 @@
+# Toolbar Guide
+
+The app toolbar is located at the top of the app editor. It enables you to adjust app settings.
+
+![App Menu](../assets/apps/1_app_toolbar/app-toolbar.png)
+
+## App Summary
+
+The app summary can be modified on the left side of the toolbar. It serves to describe the app and is displayed in the app list. By default, the summary is the app's name.
+
+## Undo/Redo
+
+The undo/redo buttons facilitate undoing or redoing the most recent action.
+
+## Desktop/Mobile Mode
+
+You can switch the canvas' mode to `Mobile` or `Desktop` layout from the toolbar. This enables you to manually set the position and size of the components in both modes.
+
+## Width
+
+You can set the canvas' width to:
+- Limited width: The max width is 1168px and the content stay centered instead of taking the full page width.
+- Max width: The width is of the app if the full width of its container.
+
+## Menu `⋮`
+
+The `⋮` menu provides access to the following options:
+
+### Deployement history
+
+In the menu, you can view the [deployment](./6_app_deployment.mdx) history of the app. It displays the date and time of the deployment, the user who deployed the app, and the version of the app.
+
+You can:
+
+- View the app at a specific version.
+- Restore a fork.
+- Restore here.
+
+![Deployement history](../assets/apps/1_app_toolbar/deployement-history.png.webp)
+
+### JSON
+
+View the [JSON representation](../core_concepts/13_json_schema_and_parsing/index.md) of the app.
+
+### Hub compatible JSON
+
+Hub Compatible JSON: View the JSON representation of the app in a format that is compatible with the [Windmill Hub](https://hub.windmill.dev/).
+
+### App Inputs Configuration
+
+The app inputs menu displays a list of all the inputs of each component. A toggle allows you to display only resources inputs, enabling you to easily configure your third-party resources for an app imported from the Hub, for example:
+
+![App Inputs Configuration](../assets/apps/1_app_toolbar/app-inputs-configuration.png.webp)
+
+## Debug Runs
+
+The app builder enables you to examine recent runs to [identify potential bugs](./5_app_debugging.md).
+
+![App Debug Runs](../assets/apps/1_app_toolbar/app-debug-runs.png.webp)
+
+## Preview Mode
+
+The app editor mode can be toggled between `Editor` and `Preview` modes. The preview mode allows you to see the app in action.
+
+## Save as draft
+
+You can [save](./6_app_deployment.mdx) the app. The first time you save the app, you'll be asked to select the owner of the app. You can choose either a user or a [folder](../core_concepts/8_groups_and_folders/index.mdx#folders).
+
+## Deploy
+
+Windmill apps are custom-made user interfaces meant to interact with scripts and flows.
+
+There are two ways to [deploy](./6_app_deployment.mdx) an app:
+- **Read-Access Required**: The app can be accessed & triggered by anyone who has [read access](../core_concepts/16_roles_and_permissions/index.mdx) to the app.
+- **Publish Publicly**: The app can be accessed as a standalone app by anyone who has the secret URL.