Whitelabel, flow quickstart & App triggers (windmill-labs#584)

hcourdent · web-flow · commit bfc526e8eb0d · 2024-04-15T17:41:15.000+02:00
diff --git a/changelog/2024-04-12-aggrid-actions/index.md b/changelog/2024-04-12-aggrid-actions/index.md
@@ -4,7 +4,7 @@ version: v1.306.0
 title: AgGrid Actions
 tags: ['App Editor']
 image: ./aggrid_actions.png
-description: AgGrid rows now support actions, components that will be displayed at each row of the table.
+description: AgGrid and Database Studio rows now support actions, components that will be displayed at each row of the table.
 features:
   [
     'Support the following components:',
diff --git a/docs/apps/3_app-runnable-panel.mdx b/docs/apps/3_app-runnable-panel.mdx
@@ -226,8 +226,13 @@ Inputs of runnables that are either connected to an output or [evaluated](#evals
 
 Runnables can "Recompute" and "Recompute others":
 
-- Recompute: Other component can trigger a component to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded. See Recompute Others for more information.
-- Recompute others: Button and Form components can trigger other components to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded.
+#### Recompute
+
+Other component can trigger a component to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded. See Recompute Others for more information.
+
+#### Recompute others
+
+[Button](./4_app_configuration_settings/button.mdx) & [Form](./4_app_configuration_settings/submit_form.mdx) components and [background scripts](#background-runnables) can trigger other components to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded.
 
 ### Manual Dependencies
 
diff --git a/docs/apps/4_react_components.md b/docs/apps/4_react_components.md
@@ -11,6 +11,8 @@ If you're looking for a way to:
 
 :::
 
+Importing Custom React Components is a [Cloud and Self-Hosted-Enterprise-Only](/pricing) feature
+
 Once imported to Windmill, custom React components will be able to interact with the rest of the app.
 
 There are 3 main benefits of using your own components:
diff --git a/docs/core_concepts/index.mdx b/docs/core_concepts/index.mdx
@@ -507,7 +507,7 @@ All details & features on [Pricing page](/pricing).
 	/>
 	<DocCard
 		title="White Labeling Windmill"
-		description="Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand."
+		description="Windmill offers white labeling capabilities, allowing you to embed and customize the Windmill platform to align with your brand."
 		href="/docs/misc/white_labelling"
 	/>
 	<DocCard
diff --git a/docs/flows/16_architecture.mdx b/docs/flows/16_architecture.mdx
@@ -129,3 +129,22 @@ def main(x: str):
 		color="teal"
 	/>
 </div>
+
+## Shared Directory
+
+By default, flows on Windmill are based on a result basis (see above). A step will take as input the results of previous steps. And this works fine for lightweight automation.
+
+For heavier ETLs and any output that is not suitable for JSON, you might want to use the `Shared Directory` to share data between steps. Steps share a folder at `./shared` in which they can store heavier data and pass them to the next step.
+
+Get more details on the [Persistent Storage & Databases dedicated page](../core_concepts/11_persistent_storage/index.mdx).
+
+![Flows shared directory](../getting_started/6_flows_quickstart/flows_shared_directory.png.webp)
+
+<div className="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+		color="teal"
+		title="Persistent Storage & Databases"
+		description="Ensure that your data is safely stored and easily accessible whenever required."
+		href="/docs/core_concepts/persistent_storage"
+	/>
+</div>
diff --git a/docs/getting_started/6_flows_quickstart/index.mdx b/docs/getting_started/6_flows_quickstart/index.mdx
@@ -18,11 +18,11 @@ The present document will introduce you to Flows and how to build your first one
 
 <br />
 
-It is important to have in mind that **in Windmill Scripts are at the basis of Flows and Apps**. To sum up roughly, workflows are state machines represented as DAG to compose scripts together. Learn more in the [Script Quickstart](../0_scripts_quickstart/index.mdx) in the previous section. You will not necessarily have to re-build each script as you can reuse them from your workspace or from the [Hub](https://hub.windmill.dev/).
+Have in mind that in Windmill, Scripts are at the basis of Flows and Apps. To sum up roughly, workflows are state machines [represented as DAGs](../../flows/16_architecture.mdx) (Directed Acyclic Graphs) to compose scripts together. To learn more about scripts, check the [Script Quickstart](../0_scripts_quickstart/index.mdx). You will not necessarily have to re-build each script as you can reuse them from your workspace or from the [Hub](https://hub.windmill.dev/).
 
 Those workflows can run for-loops, branches (parralellizable) suspend themselves until a timeout or receiving events such as webhooks or approvals. They can be scheduled very frequently and check for new external items to process (what we call "Trigger" script).
 
-The overhead and coldstart between each step is about 20ms, which is faster than any other orchestration engine, by a large margin.
+The overhead and coldstart between each step is about 20ms, which is [faster than any other orchestration engine](/blog/launch-week-1/fastest-workflow-engine), by a large margin.
 
 To create your first workflow, you could also pick one from our [Hub](https://hub.windmill.dev/flows) and fork it. Here, we're going to build our own flow from scratch, step by step.
 
@@ -38,15 +38,24 @@ Follow our [detailed section](../../flows/1_flow_editor.mdx) on the Flow Editor
 
 ### Metadata
 
-The first thing you'll see is the [Metadata](../../flows/3_editor_components.mdx#metadata) menu. From there, you can set the [permissions](../../core_concepts/16_roles_and_permissions/index.mdx) of the workflow: User (by default, you), and Folder (referring to read and/or write groups).
+The first thing you'll see is the [Metadata](../../flows/3_editor_components.mdx#metadata) menu. From there, you can set the [permissions](../../core_concepts/16_roles_and_permissions/index.mdx) of the workflow: User (by default, you), and [Folder](../../core_concepts/8_groups_and_folders/index.mdx) (referring to read and/or write groups).
 
 Also, you can give succinctly a Name, a Summary and a Description to your flow. Those are supposed to be explicit, we recommend you to give context and make them as self-explanatory as possible.
 
 ![Flows metadata](./flows_metadata.png.webp)
 
+<div className="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+		title="Roles and Permissions"
+		description="Control access and manage permissions within your instance and workspaces."
+		href="/docs/core_concepts/roles_and_permissions"
+		color="teal"
+	/>
+</div>
+
 ### Schedule
 
-On another tab, you can configure a [Schedule](../../core_concepts/1_scheduling/index.mdx)\* to trigger your flow. Flows can be [triggered](../9_trigger_flows/index.mdx) by any schedules, their [webhooks](../../core_concepts/4_webhooks/index.mdx) or their UI but they only have only one primary schedule with which they share the same path. This menu is where you set the primary schedule with CRON. The default schedule is none.
+On another tab, you can configure a [Schedule](../../core_concepts/1_scheduling/index.mdx) to trigger your flow. Flows can be [triggered](../9_trigger_flows/index.mdx) by any schedules, their [webhooks](../../core_concepts/4_webhooks/index.mdx) or their UI but they only have only one primary schedule with which they share the same path. This menu is where you set the primary schedule with CRON. The default schedule is none.
 
 ![Flows schedule](./flows_schedule.png.webp)
 
@@ -63,7 +72,7 @@ On another tab, you can configure a [Schedule](../../core_concepts/1_scheduling/
 
 Last tab of the settings menu is the [Shared Directory](../../core_concepts/11_persistent_storage/within_windmill.mdx#shared-directory).
 
-By default, flows on Windmill are based on a result basis. A step will take as inputs the results of previous steps. And this works fine for lightweight automation.
+By default, flows on Windmill are based on a [result basis](#how-data-is-exchanged-between-steps). A step will take as inputs the results of previous steps. And this works fine for lightweight automation.
 
 For heavier ETLs and any output that is not suitable for JSON, you might want to use the `Shared Directory` to share data between steps. Steps share a folder at `./shared` in which they can store heavier data and pass them to the next step.
 
@@ -82,7 +91,7 @@ Get more details on the [Persistent Storage & Databases dedicated page](../../co
 
 ### Worker Group
 
-When a worker group is defined at the flow level, any steps inside the flow will run on that worker group, regardless of the steps' worker group. If no worker group is defined, the flow controls will be executed by the default worker group 'flow' and the steps will be executed in their respective worker group.
+When a [worker group](../../core_concepts/9_worker_groups/index.mdx) is defined at the flow level, any steps inside the flow will run on that worker group, regardless of the steps' worker group. If no worker group is defined, the flow controls will be executed by the default worker group 'flow' and the steps will be executed in their respective worker group.
 
 <div className="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
@@ -105,7 +114,7 @@ Inputs are either:
 - [Dynamically linked to others](../../flows/16_architecture.mdx): with [JSON objects](../../core_concepts/13_json_schema_and_parsing/index.md) as result that allow to refer to the output of any step.
   You can refer to the result of any step:
   - using the id associated with the step
-  - clicking on the plug logo that will let you pick flow inputs or previous steps' results (after testing flow or step)
+  - clicking on the plug logo that will let you pick flow inputs or previous steps' results (after testing flow or step).
 
 ![Static & Dynamic Inputs](./static_and_dynamic_inputs.png.webp)
 
@@ -120,13 +129,13 @@ Inputs are either:
 
 ## Flow editor
 
-On the left you'll find a graphical view of the flow. From there you can architecture your flow and take action at each step.
+On the left of the editor, you'll find a graphical view of the flow. From there you can architecture your flow and take action at each step.
 
 ![Flow editor menu](./flow_editor_menu.png.webp)
 
 There are four kinds of scripts: [Action](../../flows/3_editor_components.mdx#flow-actions), [Trigger](../../flows/10_flow_trigger.mdx), [Approval](../../flows/11_flow_approval.mdx) and [Error handler](../../flows/7_flow_error_handler.md). You can sequence them how you want. Action is the default script type.
 
-Each script can be called from Workspace or [Hub](https://hub.windmill.dev/), you can also decide to **write them inline**.
+Each script can be called from Workspace or [Hub](https://hub.windmill.dev/), you can also decide to write them inline.
 
 ![Import or write scripts](./import_or_write_scripts.png.webp)
 
@@ -207,7 +216,7 @@ At each step, Windmill allows you to [customize the number of retries](../../flo
 
 At each step you can add [Approval Scripts](../../flows/11_flow_approval.mdx) to manage security and control over your flows.
 
-Request approvals can be sent by email, Slack, anything. Then you can **automatically resume workflows with secret webhooks** after the approval steps.
+Request approvals can be sent by email, Slack, anything. Then you can automatically resume workflows with secret webhooks after the approval steps.
 
 <video
 	className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
@@ -250,9 +259,9 @@ There are several ways to trigger a flow with Windmill.
 	/>
 </div>
 
-## Time to test
+## Test your flow
 
-You don't have to explore all flows editor possibilities at once. At each step, **test what you're building** to keep control on your wonder. You can also test up to a certain step by clicking on an action (x) and then on `Test up to x`.
+You don't have to explore all Flow editor possibilities at once. At each step, test what you're building to keep control on your wonder. You can also test up to a certain step by clicking on an action (x) and then on `Test up to x`.
 
 <video
 	className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
diff --git a/docs/misc/7_plans_details/index.mdx b/docs/misc/7_plans_details/index.mdx
@@ -50,14 +50,14 @@ We share our pricing grid and the features of each plan on the [Pricing page](/p
 
 ## White Labeling Windmill
 
-Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand. We do provide a library to embed the entire Windmill app or specific components - such as the flow builder or the app builder - into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.
+Windmill offers white labeling capabilities, allowing you to embed and customize the Windmill platform to align with your brand. We do provide a library to embed the entire Windmill app or specific components - such as the flow builder or the app builder - into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.
 
 For more information about white labeling and customization options, see:
 
 <div className="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
 		title="White Labeling Windmill"
-		description="Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand."
+		description="Windmill offers white labeling capabilities, allowing you to embed and customize the Windmill platform to align with your brand."
 		href="/docs/misc/white_labelling"
 	/>
 </div>
diff --git a/docs/misc/8_white_labelling/index.mdx b/docs/misc/8_white_labelling/index.mdx
@@ -2,29 +2,35 @@ import DocCard from '@site/src/components/DocCard';
 
 # White Labeling Windmill
 
-Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand.
-
-We do provide a library to embed the entire Windmill app or specific components - such as the flow builder or the app builder - with a simplified UI into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.
+Windmill provides a library to embed the entire Windmill app or specific components - such as the [Flow editor](../../flows/1_flow_editor.mdx) or the [App editor](../../apps/0_app_editor/index.mdx) - with a simplified UI into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.
 
 Windmill offers an [SDK compatible with any framework](../15_react_sdk/index.md), simplifying its integration across various platforms. It can be built in collaboration with us using React/Svelte and our full SDK.
 
-Whitelabel SDKs are also available for cloud with any package. Please contact us for more details.
+In particular, for React, we have a [webpack](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack) that uses an SDK that will contain all components from Windmill frontend.
+For now, the App Viewer and Flow Builder are already available. The embed was made easy.
+Check our [Demo](https://windmill-sdk-example.com/) of using the Windmill SDK backed by app.windmill.dev to whitelabel Windmill's Flow Builder and App Viewer in a React app using the default create-react-app template.
 
-[Private Hub](../../core_concepts/32_private_hub/index.mdx) is available for white labeling. It allows you to have your own platorm and approval process for scripts, flows, apps and resource types suggested within app.
+Also, [Private Hub](../../core_concepts/32_private_hub/index.mdx) is available for white labeling. It allows you to have your own platorm and approval process for scripts, flows, apps and resource types suggested within app.
 
-For more information about white labeling and customization options, please reach out to us at contact@windmill.dev, [Discord](https://discord.com/invite/V7PM2YHsPB), or schedule a [meeting](https://www.windmill.dev/book-demo).
+Whitelabelling requires a special license and the package @windmill-labs/windmill-react-sdk is not public. Please contact us at sales@windmill.dev,
+on [Discord](https://discord.com/invite/V7PM2YHsPB), or schedule a [meeting](https://www.windmill.dev/book-demo) to get stated.
 
 <div className="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
-		title="Get in Touch"
-		description="Send email to contact@windmill.dev to talk about partnership."
-		href="mailto:contact@windmill.dev"
+		title="Windmill React App Whitelabelling"
+		description="This project demonstrates how Windmill can be whitelabelled in a React app using webpack."
+		href="https://github.com/windmill-labs/windmill-whitelabelling-react-webpack?tab=readme-ov-file"
 	/>
 	<DocCard
 		title="Windmill React SDK"
 		description="The Windmill React SDK provides a suite of tools and components to integrate Windmill applications into React-based projects."
 		href="/docs/misc/react_sdk"
 	/>
+	<DocCard
+		title="Private Hub"
+		description="Get a private Windmill Hub instance that is only accessible by your team."
+		href="/docs/core_concepts/private_hub"
+	/>
 </div>
 
 <br />
diff --git a/docs/misc/index.mdx b/docs/misc/index.mdx
@@ -42,7 +42,7 @@ Get to know more Windmill.
 	/>
 	<DocCard
 		title="White Labeling Windmill"
-		description="Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand."
+		description="Windmill offers white labeling capabilities, allowing you to embed and customize the Windmill platform to align with your brand."
 		href="/docs/misc/white_labelling"
 	/>
 </div>
diff --git a/sidebars.js b/sidebars.js
@@ -284,7 +284,13 @@ const sidebars = {
 								type: 'doc',
 								id: 'apps/connecting_components/index'
 							},
-							items: ['apps/app-runnable-panel', 'apps/outputs'],
+							items: [
+								{
+									type: 'doc',
+									id: 'apps/app-runnable-panel',
+									label: 'Runnable Editor (Scripts & Flows)'
+								},
+								'apps/outputs'],
 							collapsed: false
 						},
 						{
diff --git a/src/components/Pricing.js b/src/components/Pricing.js
@@ -267,7 +267,7 @@ const pricing = {
 			price: {},
 
 			description:
-				'Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand.',
+				'Windmill offers white labeling capabilities, allowing you to embed and customize the Windmill platform to align with your brand.',
 			features: [
 				{ text: 'Embed the entire Windmill app.' },
 				{ text: 'Embed specific components (flow builder, app builder) with Windmill React SDK.' },
@@ -792,6 +792,17 @@ const sections = [
 					Team: true
 				},
 				link: '/docs/apps/default_app'
+			},
+			{
+				name: 'Importing Custom React Components',
+				tiers: {
+					'Free and Open-source': false,
+					Pro: true,
+					Enterprise: true,
+					Community: true,
+					Team: true
+				},
+				link: '/docs/apps/react_components'
 			}
 		]
 	}

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ version: v1.306.0`
`4`	`4`	`title: AgGrid Actions`
`5`	`5`	`tags: ['App Editor']`
`6`	`6`	`image: ./aggrid_actions.png`
`7`		`-description: AgGrid rows now support actions, components that will be displayed at each row of the table.`
	`7`	`+description: AgGrid and Database Studio rows now support actions, components that will be displayed at each row of the table.`
`8`	`8`	`features:`
`9`	`9`	`[`
`10`	`10`	`'Support the following components:',`